语义化的意义
在HTML中各个标签是有特定语义含义的，正是因为这些语义信息，浏览器才能正确解析HTML内容。如果没有按照正确的语义信息去写HTML代码，虽然整个网页还是可以加载，但可能会导致异常解析。我们举个例子：
<!DOCTYPE HTML>
<html lang="en-GB">
<head> <title> Demonstration </title> </head>
<body>
<table>
<tr> <td> My favourite animal is the cat. </td> </tr>
<tr>
<td>
—<a href="https://example.org/~ernest/"><cite>Ernest</cite></a>,
in an essay from 1992
</td>
</tr>
</table>
</body>
</html>
上述代码可能会导致支持盲人使用的浏览器将“引用”解析成“表格”，甚至可能会将Ernest当成标题来处理。上述代码的正确示例应该是下面的样子：
<!DOCTYPE HTML>
<html lang="en-GB">
<head> <title> Demonstration </title> </head>
<body>
<blockquote>
<p> My favourite animal is the cat. </p>
</blockquote>
<p>
—<a href="https://example.org/~ernest/">Ernest</a>,
in an essay from 1992
</p>
</body>
</html>
标签的分类
各标签的具体含义
文档标签
用于分隔各部分的标签
body标签
<body>标签是位于<head>标签后面的标签，其上的父标签始终会是<html>，一个网页的具体内容信息会放在<body>标签中，并且一个网页只会有一个body标签存在。
article标签
<article>标签表示的是在文档中完整的、或者可以自组织的内容或块。它的一个特点应该是可迁移或者可重用的。举例来说，一篇文章中下面的一条条评论，从样式结构上来讲，没有什么区别，是可重用的，因此可以使用<article>标签。还有文章中的一块块内容，也都是可重复的。另外每一个可以迁移的小工具，比如弹窗组件，外面都可以用<article>标签来包裹。
下面是article标签的一个例子：
<article itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h1 itemprop="headline">The Very First Rule of Life</h1>
<p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
<link itemprop="url" href="?comments=0">
</header>
<p>If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</p>
<p>...</p>
<footer>
<a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
</footer>
</article>
当<article>标签发生嵌套时，内部的<article>标签需要和外部的<article>标签有关才行。举个例子，比如发表评论这个大的组件，外部可能使用<article>标签来包裹。这个发表评论组件里面可能包含一个输入框和一个提交按钮，这个提交按钮是和发表评论有关的，所以，提交按钮也可以使用<article>标签来包裹。
section标签
section标签的作用是划分一篇文章或者块的各个节（就是划分成几个章节的节）。下面是一个section标签的示例：
<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for
apple pies.</p>
</section>
</article>
在上述代码中，我们看到有多处<h1>标签，这是使用section标签的好处，你可以在每一个section标签中都使用<h1>标签。但h1标签不再是全文的h1标签，而是该节的。
<section>
<h1>A plea from our caretakers</h1>
<p>Please, we beg of you, send help! We're stuck in the server room!</p>
</section>
在使用section标签时需要特别注意的是，这个标签并不是一个一般意义上的容器元素。只有当HTML内容是严格按照章节划分，且需要文章大纲的时候，使用section标签才有意义。如果是一般意义上的HTML内容则推荐使用div标签。
nav标签
就是HTML内容顶部导航。
aside标签
用于表示侧边栏的专属标签，或者与页面主要内容区分出来的区块，都可以用<aside>标签。下面是一个例子：
<body>
<header>
<h1>My wonderful blog</h1>
<p>My tagline</p>
</header>
<aside>
<!-- this aside contains two sections that are tangentially related
to the page, namely, links to other blogs, and links to blog posts
from this blog -->
<nav>
<h1>My blogroll</h1>
<ul>
<li><a href="https://blog.example.com/">Example Blog</a>
</ul>
</nav>
<nav>
<h1>Archives</h1>
<ol reversed>
<li><a href="/last-post">My last post</a>
<li><a href="/first-post">My first post</a>
</ol>
</nav>
</aside>
<aside>
<!-- this aside is tangentially related to the page also, it
contains twitter messages from the blog author -->
<h1>Twitter Feed</h1>
<blockquote cite="https://twitter.example.net/t31351234">
I'm on vacation, writing my blog.
</blockquote>
<blockquote cite="https://twitter.example.net/t31219752">
I'm going to go on vacation soon.
</blockquote>
</aside>
<article>
<!-- this is a blog post -->
<h1>My last post</h1>
<p>This is my last post.</p>
<footer>
<p><a href="/last-post" rel=bookmark>Permalink</a>
</footer>
</article>
<article>
<!-- this is also a blog post -->
<h1>My first post</h1>
<p>This is my first post.</p>
<aside>
<!-- this aside is about the blog post, since it's inside the
<article> element; it would be wrong, for instance, to put the
blogroll here, since the blogroll isn't really related to this post
specifically, only to the page as a whole -->
<h1>Posting</h1>
<p>While I'm thinking about it, I wanted to say something about
posting. Posting is fun!</p>
</aside>
<footer>
<p><a href="/first-post" rel=bookmark>Permalink</a>
</footer>
</article>
<footer>
<p><a href="/archives">Archives</a> -
<a href="/about">About me</a> -
<a href="/copyright">Copyright</a></p>
</footer>
</body>
从h1到h6标签
是<hgroup>的子标签，用于设置章节的级别，没什么可说的。
hgroup标签
是h1到h6标签的父标签，当一个章节有多个子级别的时候，使用<hgroup>标签来嵌套h1到h6标签。举个例子：
<hgroup>
<h1>The reality dysfunction</h1>
<h2>Space is not the only void</h2>
</hgroup>
另外，在<hgroup>标签中也可以使用多个<h1>标签：
<hgroup>
<h1>The Avengers</h1>
<h1>Avengers Assemble</h1>
</hgroup>
但这两个<h1>标签的地位并不是等价的。第一个<h1>标签是主要标题，第二个<h1>标签是次要标题。
header标签
<header>标签用于表示一组介绍性或导航性帮助。通常可以用该标签包裹h1到h6标签或者<hgroup>标签，但这并不是必须的，也可以用该标签包裹表格，表单或者相关内容。需要注意的是<header>标签并不会参与划分章节。
footer标签
<footer>标签用于写页脚。有一种写法是写出一种比较“胖”的页脚，里面添加很多和页脚有关的内容：
<footer>
<nav>
<section>
<h1>Articles</h1>
<p><img src="images/somersaults.jpeg" alt=""> Go to the gym with
our somersaults class! Our teacher Jim takes you through the paces
in this two-part article. <a href="articles/somersaults/1">Part
1</a> · <a href="articles/somersaults/2">Part 2</a></p>
<p><img src="images/kindplus.jpeg"> Tired of walking on the edge of
a clif<!-- sic -->? Our guest writer Lara shows you how to bumble
your way through the bars. <a href="articles/kindplus/1">Read
more...</a></p>
<p><img src="images/crisps.jpeg"> The chips are down, now all
that's left is a potato. What can you do with it? <a
href="articles/crisps/1">Read more...</a></p>
</section>
<ul>
<li> <a href="/about">About us...</a>
<li> <a href="/feedback">Send feedback!</a>
<li> <a href="/sitemap">Sitemap</a>
</ul>
</nav>
<p><small>Copyright © 2015 The Snacker —
<a href="/tos">Terms of Service</a></small></p>
</footer>
</body>
address标签
顾名思义，就是填写联系信息的，<address>标签不应该填写联系信息以外的内容。通常情况下，<address>标签都会放在<footer>标签里。
<footer>
<address>
For more details, contact
<a href="mailto:js@example.com">John Smith</a>.
</address>
<p><small>© copyright 2038 Example Corp.</small></p>
</footer>
用于分组的标签
p标签
p标签含义就不解释了，能有更语义化的标签的时候尽量不使用p标签。比如下面的形式：
<section>
<!-- ... -->
<p>Last modified: 2001-04-23</p>
<p>Author: fred@example.com</p>
</section>
如果写成这样会更好一些：
<section>
<!-- ... -->
<footer>
<p>Last modified: 2001-04-23</p>
<address>Author: fred@example.com</address>
</footer>
</section>
我们需要注意的是，不能使用<p>标签来包围像<ul>或<ol>这样的标签，那么如果你要去实现一个这样的样式，要怎么去考虑呢？
可能会考虑写成这样：
<p>For instance, this fantastic sentence has bullets relating to</p>
<ul>
<li>wizards,
<li>faster-than-light travel, and
<li>telepathy,
</ul>
<p>and is further discussed below.</p>
如果是写成下面这样的话，会更好一点：
<div>For instance, this fantastic sentence has bullets relating to
<ul>
<li>wizards,
<li>faster-than-light travel, and
<li>telepathy,
</ul>
and is further discussed below.</div>
用div就可以，不需要用<p>标签再分隔内容。
pre标签
<pre>标签表示一块预格式化的内容。通常和<code>等标签一起使用。比如这样：
<figure role="img" aria-labelledby="cow-caption">
<pre>
___________________________
< I'm an expert in my field. >
---------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
</pre>
<figcaption id="cow-caption">
A cow saying, "I'm an expert in my field." The cow is illustrated using preformatted text characters.
</figcaption>
</figure>
ol标签
有序标签，里面至少跟一个<li>标签。
ul标签
无序列表。
menu标签
工具栏或者是按钮栏（可以当成有语义化的ul标签）。里面至少需要一个<li>标签（无序形式）。举个例子：
<menu>
<li><button onclick="copy()"><img src="copy.svg" alt="Copy"></button></li>
<li><button onclick="cut()"><img src="cut.svg" alt="Cut"></button></li>
<li><button onclick="paste()"><img src="paste.svg" alt="Paste"></button></li>
</menu>
figure标签
用于注释插图、图片、代码清单等。举个例子：
<figure>
<img src="bubbles-work.jpeg"
alt="Bubbles, sitting in his office chair, works on his
latest project intently.">
<figcaption>Bubbles at work</figcaption>
</figure
figcaption标签
figure标签的第一个或者最后一个元素。表示figure标签的图例或者其余内容。figcaption可以添加多个内容：
<figcaption>
<p>A duck.</p>
<p><small>Photograph courtesy of 🌟 News.</small></p>
</figcaption>
扫一扫
1253
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
