HTML5语义标签

最新推荐文章于 2025-07-18 08:21:32 发布

原创最新推荐文章于 2025-07-18 08:21:32 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #web应用 #结构化

html5 专栏收录该内容

2 篇文章

订阅专栏

1、HTML5的新语义元素

OS X 词典中关于”语义”的定义如下:

"含义在语言和逻辑方面的分支"。

1-1、main元素

main 标签用来声明主内容区

无论是页面的主要内容，还是web应用中的主要部分都应该放在main元素中

文档的主内容指的是文档中特有的内容，导航链接、版权信息、站点标志、广告和搜索表单等多个文档中重复出现的内容不算主内容（除非网页或文档的主要内容就是搜索表单）。

注意：

每个页面的主内容区只能有一个（两个主内容就没有主内容），而且不能作为article、aside、header、footer、nav或header等其他HTML5语义元素的后代。上诉的这些元素倒是都可以放在main元素中。

例子

<main>
  <h1>Web Browsers</h1>
  <p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>

  <article>
    <h1>Google Chrome</h1>
    <p>Google Chrome 是由 Google 开发的一款免费的开源 web 浏览器，于 2008 年发布。</p>
  </article>

  <article>
    <h1>Internet Explorer</h1>
    <p>Internet Explorer 由微软开发的一款免费的 web 浏览器，发布于 1995 年。</p>
  </article>

  <article>
    <h1>Mozilla Firefox</h1>
    <p>Firefox 是一款来自 Mozilla 的免费开源 web 浏览器，发布于 2004 年。</p>
  </article>
</main>

1-2、section元素

section 标签定义文档的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

使用技巧：

类似于div，如果配有自然标题则使用section，如果没有则建议使用div

例子

<section>
  <h1>测试标题</h1>
  <p>这是一段测试的内容</p>
</section>

1-3、nav元素

nav标签定义导航链接的部分。用来替代ul

例如

<nav>
  <li>HTML</li>
  <li>CSS</li>
  <li>JAVASCRIPT</li>
  <li>NODE.JS</li>
</nav>

1-4、article元素

article标签规定独立的自包含内容

一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。

article 元素的潜在来源：

论坛帖子

报纸文章

博客条目

用户评价

注意：

article的范围小于main

例子

<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
</article>

1-5、aside元素

aside标签定义其所处内容之外的内容。aside元素包含的内容与旁边的内容不相关。

实践中，我经常用它包装侧边栏（在内容适当的情况下）。这个内容也适合包装突出引用、广告和导航元素。基本上任何与主内容无直接关系的，都可以放这里边。对于电子商务站点来说，我会把“购买了这个商品的用户还购买了”的内容放在aside里面。

例子

<aside>
  <a href=""><img src="" alt="这是一个游戏链接图片" /></a>
</aside>

1-6、figure和figcaption元素

figure 元素包装一个小小的独立区块，可以是注解、图示、表格、照片、代码等等。

figcaption用来被包含在figure元素中，提供一个小标题

例子

<figure>
  <figcaption>帅帅的我</figcaption>
  <img src="" alt="一张帅哥的照片" />
</figure>

1-7、details和summary元素

details标签用来描述文档或文档某个部分的细节。

summary标签包含details元素的标题。

效果为标题可见，当用户点击的时候会显示详细信息

例子

<details>
  <summary>热销商品</summary>
  <p>衣服</p>
  <p>水果</p>
  <p>书籍</p>
</details>

1-8、header元素

标签定义文档的页眉（介绍信息）。

实践中，可以将header元素用在站点页头作为“报头”，或者在article元素中用作某个区块的引介区。他可以在一个页面中出现多次（比如页面中每个section）中都可以有一个header。

例子

<!--对主页的介绍-->
<header>
  <h1>欢迎来到我的博客</h1>
  <p>my name is Aresnine. if you need my help please write it down.</p>
</header>

1-9、footer元素

footer标签定义文档或者节的页脚。

footer元素应当含有其包含元素的信息。

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。不过，规范规定作者的联系信息应该写在address元素中

例子

<footer>
  <p>Posted by: W3School</p>
  <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>

1-10、address元素

address标签定义文档或文章的作者/拥有者的联系信息

如果address元素位于body元素内，则他表示文档文档信息

如果address元素位于article元素内，则他表示文章的联系信息

address标签不应该用于描述通讯地址，除非他是联系信息的一部分

address元素通常同其他信息被包含在footer元素中

例子

<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

总结

凭常识选择元素

这里删除了很多内部包含的内容，因为我们想聚焦于结构。相信你也觉得从标记中找出不同

的区块并不难。不过，此时此刻我还是想提供一个实用的建议。某一时刻选错了标记并不意味着

世界末日。比如，在前面的例子中是用

还是

并没有那么重要。如果在应该用

的地方用了，我也不觉得有什么罪恶感。W3C制定规范的人不会追究你。你要做的就是运

用一点点常识。也就是说，如果你可以在合适的地方使用

和

无障碍方面的好处。

<article>
    <!--页眉部分-->
    <header class="Header">
        <a href="/" class="LogoWrapper">
            <img src="img/SOC-Logo.png" alt="文章的logo" />
        </a>
        <h1 class="Strap">文章的一级标题</h1>
    </header>
    <!--第一个小节部分，注意这里不能使用main因为main比article大-->
    <section class="IntroWrapper">
        <p class="IntroText">
          文章段落
        </p>
        <!--这里用了一个关于展开项-->
        <figure class="MoneyShot">
            <img class="MoneyShotImg" src="img/scones.jpg" alt="Incrediblescones" />
            <figcaption class="ImageCaption">展开项展示的标题</figcaption>
        </figure>
    </section>
    <p>单独的一个段落</p>
    <section class="Ingredients">
        <h3 class="SubHeader">小节的三级标题</h3>
    </section>
    <section class="HowToMake">
        <h3 class="SubHeader">小节的三级标题</h3>
    </section>
    <footer>
          文章的页脚部分
        <a href="http://rwd.education">一个链接元素</a>
        <address><a href="http://benfrain">作者的联系链接</a></address>
    </footer>
</article>