语义化元素的产生，是为使页面呈现较好的内容结构，能够一目了然地知道每一部分所在区域的功能主体，将页面相关元素集中在一起，形成页眉、文章、页脚、侧边栏等元素块，如H5标准以前对头部元素常给div添加id或者class值为header，所以就引申出<header>元素。在命名时，头部通常使用header，导航使用nav，文章使用article，侧边使用sidebar，页脚使用footer。

　　在HTML5中引入一些新元素对这些部分进行分割，如<header>表示头部，导航<nav>和页眉、logo等放在里面，文章主体使用<article>，侧边栏使用<aside>，页脚部分放在<footer>里面。使用这些元素能够直接方便描述页面结构，形成标准减少开发人员差异化，有利于SEO和搜索引擎建立良好沟通，爬虫依赖于标签来确定上下文和各个关键字，这样能使爬虫抓获更加准确有利的信息，同时，也方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备），例如阅读器允许用户忽略页眉和页脚的部分。

　　HTML5新增的语义化元素有：header、nav、main、section、article、aside、footer、figure、figcaption、mark、details、summary、time。

　　首先例举一个较为完整的结构，这里只关心HTML部分，不考虑实际样式：

 <body>

      <header>

         <h1>一级标题</h1>

         <nav>

             <ul>

             <li><a href="" class="home">首页</a></li>

             <li><a href="">导航1</a></li>

             <li><a href="">导航2</a></li>

             <li><a href="">导航3</a></li>

             <li><a href="">导航4</a></li>

              </ul>

           </nav>

       </header>

       <section class="content">

         <article>

              <figure>

             <img src="data:images/image1.jpg" alt="one" />

             <figcaption>one</figcaption>

              </figure>

              <hgroup>

                  <h2>二级标题1</h2>

                  <h3>三级标题1</h3>

              </hgroup>

              <p>第一段正文。</p>

         </article>

         <article>

              <figure>

              <img src="data:images/image2.jpg" alt="two" />

              <figcaption>two</figcaption>

              </figure>

              <hgroup>

              <h2>二级标题2</h2>

              <h3>三级标题2</h3>

              </hgroup>

              <p>第二段正文</p>

         </article>

     </section>

     <aside>

         <section class="addnav">

              <h2>侧栏导航</h2>

              <a href="">侧导航1</a>

              <a href="">侧导航2</a>

              <a href="">侧导航3</a>

              <a href="">侧导航4</a>

         </section>

         <section class="addcontent">

              <h2>侧栏内容</h2>

              <p>侧栏描述</p>

          </section>

     </aside>

     <footer>

          &copy; 2017 me

     </footer>

 </body>

　　元素<header>和<footer>在上面的示例中是作为一个网站页面顶部的主页眉和底部的主页脚，但实际上也可以用作文章和部分的页眉页脚，<header>之中用于放置标题、日期、导航等内容，而在页脚中可以放导航、隐私政策、合同条款、分享链接、注册商标、版权等内容。

　　<nav>导航元素用于包含网站的主要导航块，nav实际关联的单词是navigation，上面的示例中，<nav>元素是放置在<header>之中，但是<nav>元素不仅限用于<header>之中，考虑到网站结构和权重，应当合理使用这一元素。

　　<article>文章元素可以是任何一个独立的内容，如果一个页面容器包含了多篇文章，那么每个单独的文章都应当属于其专属的<article>元素中。<article>元素可以彼此嵌套，例如一篇博客日志位于一个<article>元素中，而这篇日志的每条评论位于其子<article>元素中。

　　<aside>附加信息元素，当位于<article>元素中时，它包含与当前文章相关的信息，而不必涉及页面的整体信息，比如文章的注释、引述、生词列表等。而当<aside>元素在<article>元素之外时，该元素就包含了整个页面的相关内容，如同上面的代码包含了指向网站其他部分的链接，也可以包含最新的日志列表、搜索框、返回顶部和底部的按钮等。

　　页面中要将相关的内容集中到一块可以使用<section>部分元素，并且该元素往往还带有单独的标题。一个网站往往包含了不同部分，每个部分就可以使用<section>元素集中，这些内容当然也可以是<article>元素。

　　<hgroup>标题组可以将一个或者多个<h1>到<h6>的标题元素组合到一起，将它们当成一个标题看待。就我而言，对于这个元素并没有发现太大的好处，就上面的代码来看，实用性较小，并且可以被替代。当然，对于大量需要组合主标题和子标题的情况，<hgroup>还是可以的。

　　上面代码中使用了<figure>和<figcaption>来插入图片，其实这一结构可以在文章正文中引用任何内容，如视频、图形、图表、代码等，但这些内容不能是页面不可或缺的一部分，如文章主体，其中<figcaption>用于对插入内容的文本说明。

　　分级元素<div>仍然是组合元素的重要方式，当前面的元素都不适用于相关元素的组合时，就应该适用这个元素来作为包装容器。

<details>

  <summary>Some details</summary>

  <p>More info about the details.</p>

</details>

<details open>

  <summary>Even more details</summary>

  <p>Here are even more details about the details.</p>

</details>

　　上面是第一组是默认情况的简称和详情元素，是一个折叠面板的效果，页面只会展示summary的内容，只有打开后才会完全显示里面所有的内容。details元素的open属性，就是默认打开的意思。

　　使用语义化元素应当注意引入初始化CSS，以兼容不支持HTML5语义化元素的浏览器。

HTML语义化基础的更多相关文章

  1. 前端基础：web语义化

    web语义化 一.什么是web语义化? web语义化包含两方面,一是html标签语义化,简单来说就是要用合适的标签来表述适当的内容,标题用<h1>~~<h6>标签,段落用< ...

  2. 基础复习之HTML （doctype、标签语义化）

    这段时间找实习看的眼花缭乱的,然后也被拒得落花流水,啊哈哈-还是写博客好玩儿-嘿嘿,下面正题 一.doctype 标准模式 (Full Standards Mode) 接近标准模式 (Almost S ...

  3. HTML5语义化标签

    在HTML5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~ ...

  4. HTML5学习之语义化标签（一）

    一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...

  5. HTML的语义化，你需要深入了解

    有关HTML的一些基础课程,很多网站都有讲,于我而言,真正实践起来,我只要求我能够让它表现出我所想要的结果即可.然而,这种要求,对于后期的维护与测试,真的是......想起日前我们所做的这个项目,那里 ...

  6. 第二天学习笔记：(MDN HTML学习、web安全策略与常见攻击、语义化)

    一:Web入门 1:web文件命名 在文件名中应使用连字符(-).搜索引擎把连字符当作一个词的分隔符, 但不会以这种方式处理下划线. 养成在文件夹和文件名中使用小写,并且使用短横线而不是空格来分隔的习 ...

  7. html语义化练习易牛课堂代码

    html <body>     <header>         <!-- 导航 -->         <nav> <a href=" ...

  8. 从零开始学 Web 之 HTML5（一）HTML5概述，语义化标签

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. Semver(语义化版本号)扫盲

    最近Github 10周年在朋友圈里沸沸扬扬刷屏,小编在工作中却惊讶的发现不少同事对版本号中的beta和rc没有概念,使用 npm install package@next 时,也不清楚next代表的 ...

随机推荐

  1. 基于Qt的手机程序----口袋理财

    主页面 记账模块 制定目标 备忘录

  2. Eclipse/Myeclipse生成serialVersionUID方法

    serialVersionUID作用: 序列化时为了保持版本的兼容性,即在版本升级时反序列化仍保持对象的唯一性. 如果你修改代码重新部署后出现序列化错误,可以考虑给相应的类增加serialVersio ...

  3. Shell脚本的调试技术

    编程中必不可少的一点就是调试,Shell脚本以其强大的功能令人向往,当然,它的强大之处不只是体现在语言的实现功能上,更强大的是它的调试功能,下面,我将以实例讲解Shell脚本的调试技术. 下面是我所用 ...

  4. Ext JS 5初探（三）

    在上文提到了本地化文件的问题,然后在Ext JS 5的包里找了找,居然还没包含本地化包.我估计目前还不到考虑本地化的时候.在Sencha Touch中,是没有本地化包的,但是要让Ext JS也不包含本 ...

  5. OSB开发常用资料

    成功搭建OSB环境并运行HelloWorld项目 http://www.beansoft.biz/?p=2066 Oracle Service Bus 11gR1开发环境安装文档 http://www ...

  6. 阿里云 云服务器 CentOS 5.8 安装 php 5.4

    1.安装php http://webtatic.com/packages/php54/ 2.安装mysql http://webtatic.com/packages/mysql55/ 3.修改mysq ...

  7. leetCode(62)-Reverse Integer

    题目: Reverse digits of an integer. Example1: x = 123, return 321 Example2: x = -123, return -321 clic ...

  8. The 13th tip of DB Query Analyzer, powerful processing EXCEL file

    The 13thtip of DB Query Analyzer, powerful processing EXCEL file MA Genfeng (Guangdong UnitollServic ...

  9. 《转》xcode创建一个工程的多个taget,便于测试和发布多个版本

    背景:很多时候,我们需要在一个工程中创立多个target,也就是说我们希望同一份代码可以创建两个应用,放到模拟器或者真机上,或者是,我们平时有N多人合作开发,当测试的时候,在A这里装了一遍测A写的那块 ...

  10. jQuery插件学习基础

    1.给jQuery添加全局的函数: $.zgz={  fn1:function(){ alert('我是刚设置的第一个全局函数') },fn2:function(){ alert('我是刚设置的第二个 ...