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>

😀 알아갈 점들

😎 timeline도 기능적으로 완결성이 있음!

따라서 section 태그를 사용하도록 한다!

😎 timeline은 순서가 중요하므로 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 태그는 언제 사용하는가?

뉴스 기사, 블로그 등 정보 컨텐츠 자체가 완결성이 있는 경우에, 그 뉘앙스를 살려주기 위해서 사용.
(혼자 독립적으로 존재해도 정보로서의 완결성이 있는 경우)