HTML 语义化标签示例

<section> 结构上来说，它基本上就是一个具有特殊的语义的 <div>。<section> 开启一个新的“sectioning content”区域，所以它可以有自己的 <header>、<footer>。

<article> 元素用来表示完全独立的内容区域。这块内容区域即使被放入另一个页面，仍然有意义。<article> 元素中可以包含 <header>、<footer> 和 <section> 元素，因此你确实可以用它在另一个页面中嵌入完整的文档片段及其需要的所有结构。

<nav> 是为了清楚地标识页面上的主要导航块

<address> 这个元素用来标识联系信息

<header>
    <h1>Semantic label demo</h1>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/archive">Archive</a>
    </nav>
</header>
<main>
    <article>
        <header>
            <h1>Why you should buy more cheeses than you currently do</h1>
        </header>
        <section>
            <header>
                <h2>Part 1: Variety is spicy</h2>
            </header>
            <!-- cheesy content -->
        </section>
        <section>
            <header>
                <h2>Part 2: Cows are great</h2>
            </header>
            <!-- more cheesy content -->
        </section>
    </article>
</main>
<footer>
    <section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
        <h2>Contact us!</h2>
        <address property="email">
            <a href="mailto:us@example.com">us@example.com</a>
        </address>
        <address property="address" typeof="PostalAddress">
            <p property="streetAddress">123 Main St., Suite 404</p>
            <p>
                <span property="addressLocality">Yourtown</span>,
                <span property="addressRegion">AK</span>,
                <span property="postalCode">12345</span>   
            </p>
            <p property="addressCountry">United States of America</p>
        </address>
    </section>
</footer>