<section>
<h1>Your Timeline</h1>
<ol>
<li>
<!-- Tweet -->
</li>
<li>
<!-- Tweet -->
</li>
<li>
<!-- Tweet -->
</li>
<li>
<!-- Tweet -->
</li>
<li>
<!-- Tweet -->
</li>
</ol>
</section>
따라서 section 태그를 사용하도록 한다!
디테일하고 사소한 부분이지만 신경써서 마크업 해주도록 하자!
<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>
뉴스 기사, 블로그 등 정보 컨텐츠 자체가 완결성이 있는 경우에, 그 뉘앙스를 살려주기 위해서 사용.
(혼자 독립적으로 존재해도 정보로서의 완결성이 있는 경우)