1. Timeline

htmlコード

<section>
  <h1>Your Timeline</h1>
  <ol>
    <li>
      <!-- Tweet -->
    </li>
    <li>
      <!-- Tweet -->
    </li>
    <li>
      <!-- Tweet -->
    </li>
    <li>
      <!-- Tweet -->
    </li>
    <li>
      <!-- Tweet -->
    </li>
  </ol>
</section>

😀 知っておくべきこと。

😎 タイムラインも機能的に完備しています!

😎 タイムラインの順番が重要なので、olを使います

2. Tweet

htmlコード

<article>
  <h1>A tweet from 김익명</h1>
  <header>
    <a href="#"><img src="#" alt="김익명" /></a>
    <h2>
      <a href="#">김익명</a>
    </h2>
    <dl>
      <div>
        <dt>Username</dt>
        <dd><a href="#">@anonymouskim</a></dd>
      </div>
      <div>
        <dt>Posted</dt>
        <dd><a href="#">Dec 25</a></dd>
      </div>
    </dl>
    <button type="button" aria-label="Options">
      <!-- Icon -->
    </button>
    <div>
      <button type="button">
        <!-- Icon -->
        Show less often
      </button>
      <button type="button">
        <!-- Icon -->
        Embed Tweet
      </button>
      <button type="button">
        <!-- Icon -->
        Unfollow @anonymouskim
      </button>
      <button type="button">
        <!-- Icon -->
        Mute @anonymouskim
      </button>
      <button type="button">
        <!-- Icon -->
        Block @anonymouskim
      </button>
      <button type="button">
        <!-- Icon -->
        Report Tweet
      </button>
    </div>
  </header>
  <p>영어를 더 잘하고 싶다. 그러나 공부를 하고 싶지는 않다. 내 삶의 모든 것이 이런 식으로 망해왔다.</p>

  <footer>
    <button type="button">
      <span class="sr-only">Tweet your reply</span>
      <strong aria-label="3 replied">3</strong>
    </button>
    <button type="button">
      <span class="sr-only">Retweet</span>
      <strong aria-label="3 retweeted">3</strong>
    </button>
    <div>
      <button type="button"> Retweet </button>
      <button type="button"> Retweet with comment </button>
    </div>
    <button type="button">
      <span class="sr-only">Like this tweet</span>
      <strong aria-label="100 liked">100</strong>
    </button>
    <button type="button">
      <span class="sr-only">Share</span>
    </button>
    <div>
      <button type="button"> Send via Direct Message </button>
      <button type="button"> Retweet with comment </button>
    </div>
  </footer>
</article>

😀 注意事項

😎 articleラベルはいつ使用しますか?