1.含义

HTML 标签的一个重要作用，就是声明网页元素的性质，使得用户只看标签，就能了解这个元素的意义，阅读 HTML 源码就能了解网页的大致结构。这被称为 HTML 的语义原则。
下面就是一个典型的语义结构的网页。

  1. <body>
  2.   <header>页眉</header>
  3.   <main>
  4.     <article>
  5.       <h1>文章标题</h1>
  6.       <p>文章内容</p>
  7.     </article>
  8.   </main>
  9.   <footer>页尾</footer>
  10. </body>

只看上面的代码，就可以知道，页面分成页眉（

）、主体（
）、页尾（
）三个部分。
编写 HTML 网页，第一步就是写出语义结构的网页骨架。

2.常用标签

标签可以用在多个场景，既可以表示整个网页的头部，也可以表示一篇文章或者一个区块的头部。
如果用在网页的头部，就称为“页眉”。网站导航和搜索栏通常会放在
里面。

  1. <header>
  2.   <h1>公司名称</h1>
  3.   <ul>
  4.     <li><a href="/home">首页</a></li>
  5.     <li><a href="/about">关于</a></li>
  6.     <li><a href="/contact">联系</a></li>
  7.   </ul>
  8.   <form target="/search">
  9.     <input name="q" type="search" />
  10.     <input type="submit" />
  11.   </form>
  12. </header>

如果

用在文章的头部，则可以把文章标题、作者等信息放进去。

  1. <article>
  2.   <header>
  3.     <h2>文章标题</h2>
  4.     <p>张三，发表于2010年1月1日</p>
  5.   </header>
  6. </article>

由于

可以用在多种场景，所以一个页面可能包含多个
，但是一个具体的场景里面只能包含一个，比如网页的页眉只能有一个。另外，
里面不能包含另一个
或
。

标签表示网页、文章或章节的尾部。如果用于整张网页的尾部，就称为“页尾”，通常包含版权信息或者其他相关信息。

  1. <body>
  2.   <footer>
  3.     <p>© 2018 xxx 公司</p>
  4.   </footer>
  5. </body>

上面代码中，版权信息放在

里面。
也可以放在文章里面。

  1. <article>
  2.   <header>
  3.     <h1>文章标题</h1>
  4.   </header>
  5.   <footer>
  6.     <p>© 禁止转贴</p>
  7.   </footer>
  8. </article>

不能嵌套，即内部不能放置另一个
，也不能放置
。

标签表示页面的主体内容，一个页面只能有一个
。

  1. <body>
  2.   <header>页眉</header>
  3.   <main>
  4.     <article>文章</article>
  5.   </main>
  6.   <aside>侧边栏</aside>
  7.   <footer>页尾</footer>
  8. </body>

上面代码就是最典型的页面结构。
注意，

是顶层标签，不能放置在
、
、
、