html5语义化标签有哪些

html5语义化标签：1、header标签；2、nav标签；3、footer标签；4、hgroup标签；5、section标签；6、article标签；7、aside标签；8、figure标签；9、time标签；10、address标签。

本教程操作环境：windows7系统、HTML5版、Dell G3电脑。
HTML语义化：
每个HTML标签都有自己特定含义（语义），语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。

看过一个比较形象的例子：
盖一栋房子的时候，有的地方该用砖头，有的部分该用瓷片，还有的地方得用水泥糊上，这样盖出来房子才会结实，整洁和美观。
如果硬是要瓷片替代砖头，房子勉强也能盖起来，但是这样的房子不牢固，容易倒塌，外观也不好看。

同样，生活很多事物都有相似相同之处！该用什么标签表示就用什么标签表示，结构良好，更易人和搜索引擎理解。还有一点，就是便于开发和维护啊，看过好多网页结构，各种想吐槽好吗?各种混乱不堪，外观表现的任务交由css去实现就行啦，不要为了外观表现而布局！
语义化的意义与作用去掉或者丢失样式的时候能够让页面呈现出清晰的结构用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；有利于SEO ：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
语义化都注意什么？
尽可能少用无语义的p、span标签等；使用HTML5中新增的较多强语义化标签，；

不要使用样式化标签，如font、b、….等等等，完全可以用css实现样式（再说HTML5中基本将此类“样式化标签”废除了！）

强调文本，尽量使用strong标签加强强调，em标签设置斜体

表格书写规范：标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

表单域要用fieldset标签包起来，并用legend标签说明表单的用途；(说实话，这个倒真没怎么注意到！)

每个input标签对应的说明文本都需要使用label标签，并且通过id属性和相对应的input关联起来。

HTML5语义化标签：
1.header：标签定义“网页”或“section”的页眉。
通常包含h1-h6元素或hgroup ，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo 。
<header>
     <h1>毕业生实习</h1>
     <span>2016/08/05</span>
</header>

<div class='header'>...</div>
或
<header>
    <hgroup>
        <h1>网站标题</h1>
        <h2>网站副标题</h2>
    </hgroup>
</header>
用法：
可以是“网页”或任意“section”的头部部分；没有个数限制。如果hgroup或h1-h6自己就能工作的很好，那就不要用header。
2.nav：定义导航链接的部分。
<nav>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">xxx</a></li>
        <li><a href="#">xxx</a></li>
        <li><a href="#">xxx</a></li>
    </ul>
</nav>

<div class='nav'>...</div>
用法：
用在整个页面主要导航部分上，不合适就不要用nav元素；可用作页面导航的链接组，并不是所有的链接组都要放进nav元素中，只需将主要、基本的链接组放进其中；
注意：例如，在页脚中通过会有一组链接，包括服务条款，首页，版权声明等，使用footer元素是最恰当的。
具体用途：传统导航条、侧边栏导航、业内导航、翻页操作等

3.footer标签：代表“网页”或“section”的页脚。
通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。
如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。
<footer>
  作者：xxxx <br />
 Copyright ? xxx.All rights reserved.
</footer>

<div class='footer'>...</div>
用法：
可以是“网页”或任意“section”的底部部分；没有个数限制，除了包裹的内容不一样，其他跟header类似。多用于包含服务条款，友情链接、作者信息、版权信息等
4. hgroup元素：“网页”或“section”的标题
当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合
<hgroup>
    <h1>主标题</h1>
    <h2>HTML 5</h2>
</hgroup>
用法：
如果只需要一个h1-h6标签就不用hgroup 如果有连续多个h1-h6标签就用hgroup 如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签
5.section标签：定义文档中含有标题和段落的区域。（强调分段或分块）
<section>
  <h1>section要包含标题</h1>
  <p>section要包含内容...</p>
</section>
用法：
article、nav、aside可以理解为特殊的section ，所以如果可以用article、nav、aside就不要用section，没实际意义的就用p 当容器需要标题和内容时，建议使用section标签，若只是普通的容器，应该用p元素较好！section标签非p！
6.article：代表独立、完整、可独自被外部引用的内容（博客或报刊中的文章、一遍论坛帖子、一段用户评论或独立的插件、或任何独立的内容）; （强调的是独立性！可含有完整的标题、内容、脚注)
<article>
   <header>
     <h1>标题处</h1>
   </header>
   <p>内容描述</p>
   <footer>脚部声明标注</footer>
</article>
用法：定义一个独立完整的内容部分（可包含标题，内容，脚注）时使用！
article、section间的相互嵌套关系：
拜读博文：http://www.html5jscss.com/html5-semantics-section.html

7. aside标签：表示当前页面或文章的附属信息部分，可包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分。
书籍中的定义很长很绕，在收集之后，发现主要有两种用法:（啃下概念）
1.用于 article标签之内，此时表示的是该独立内容的附属信息部分；
<article>
        <p>article内容区</p>
        <aside>
            <span>附属信息1</span>
            <span>附属信息2</span>
            <span>附属信息3</span>
        </aside>
    </article>
2.用于 article标签之外，此时作为页面或站点全局的附属信息部分。
    <aside>
        <h1>附属信息标题</h1>
        <a href="#">附属信息...</a>
        <a href="#">附属信息...</a>
        <a href="#">附属信息...</a>
    </aside>
用法：
aside在 article内表示主要内容的附属信息在 article之外则可做侧边栏，页面或站点全局的附属信息部分如果是广告，其他日志链接或者其他分类导航也可以用
（一句话概括：不同的位置表示为对应区域的附属信息！）

8. figure标签：规定独立的流内容（图像、图表、照片、代码等等）。
figcaption标签：用于元素定义figure的标题。
1.一个figure元素内最多只允许放置一个figcaption元素，其他元素可无限放置。
2.figcaption 元素应该被置于 figure元素的第一个或最后一个子元素的位置。
    <figure>
        <figcaption>figure的标题</figcaption>
        <img src="pic.jpg" alt="...">
    </figure>
9. time标签：定义时间或日期
<p>定义时间...<time>9:00</time></p>

<p>结合datetime属性定义日期...<time datetime="2016-08-08">时间</time></p>
以上为实践操作中可能会用到的标签，HTML5还新增了很多标签，但因为用途与浏览器兼容性问题，还是为人所慎用的！待拓展！

10. address标签：代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。
表示文档或文章的作者/拥有者的联系信息，在 body标签中表示文档的作者的联系信息；在 article标签中表示文章作者的联系信息；
W3School示例文档：http://www.w3school.com.cn/tags/tag_address.asp
用法：
标签不应该用于描述通讯地址，除非它是联系信息的一部分。元素通常连同其他信息被包含在 footer 元素中。
总结：掌握语义化含义、作用以及应当注意的细节，HTML5中常用的语义化新标签！知识点不在于多，而研究透彻应学以致用！
推荐教程：《html视频教程》
以上就是html5语义化标签有哪些的详细内容！

查看更多关于html5语义化标签有哪些的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did66798

更新时间：2022-10-16 阅读：44次