html语义化标签简单示例

使用语义化目的

1. 脱离css时，页面结构清晰，便于阅读
2. 易于SEO，有助于爬虫搜索更多有用的信息
3. 对于开发者来说，便于阅读，可以清晰明了的知道哪一行代码代表的含义

示例

• Article、header、section、footer
  

<article>
     <header>
        <h3>
          <a href="https://www.baidu.com/">百度</a>
        </h3>
     </header>
     <section>
       	<p>百度内容页面</p>
     </section>
     <footer>
        <small>
          书写于<time datetime="2017-04-29T19:00">7月30日</time>在<a href="https://www.baidu.com/">CSDN</a>
        </small>
     </footer>
 </article>

• main、aside
  

<main>
    <h1>我的CSDN</h1>
    <p>主要内容片断主要内容片断主要内容片断主要内容片断主要内容片断主要内容片断</p>
    <p>期待更多</p>
</main>
<aside>
    <h3>关于CSDN</h3>
    <p>这是介绍内容这是介绍内容这是介绍内容这是介绍内容这是介绍内容这是介绍内容</p>
</aside>

• nav
  

<header>
    <h1>导航</h1>
    <nav>
        <a>首页</a>
        <a>关于</a>
        <a>联系人</a>
    </nav>
</header>

推荐

其它标签，推荐一个学习的网站：语义化标签