语义化元素的产生，是为使页面呈现较好的内容结构，能够一目了然地知道每一部分所在区域的功能主体，将页面相关元素集中在一起，形成页眉、文章、页脚、侧边栏等元素块，如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. Leetcode_104_Maximum Depth of Binary Tree

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/41964475 Maximum Depth of Binar ...

  2. 恭喜发财！ -- 手把手教你仿造一个qq下拉抢红包 Android自定义view

    猴年猴赛雷啊各位,今天没吃药我感觉自己萌萌哒! qq和微信和支付宝红包大战,不知道各位的战绩是多少嘞? 反正我qq抢到的都是气泡.因为太不爽,所以自己写一个下拉抢红包自己玩(自己跟自己玩). 先来看效 ...

  3. 【一天一道LeetCode】#34. Search for a Range

    一天一道LeetCode系列 (一)题目 Given a sorted array of integers, find the starting and ending position of a gi ...

  4. HDTV（1920x1080）码率和视频质量关系的研究 1 （前期准备）

    Hans Hoffmann等人在论文<Studies on the Bit Rate Requirements for a HDTV Format With 1920 x 1080 pixel ...

  5. 【57】android图片印刻，阳刻，素描图效果处理

    介绍我参与开发的妙趣剪纸app使用的图片处理相关的技术 关于妙趣剪纸,各大android商店都可以下载,下面贴出小米商店的链接 妙趣剪纸下载 软件效果截图 如何实现上面的图片处理效果呢 1.初始化高斯 ...

  6. Leetcode_231_Power of Two

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/47334243 Given an integer, writ ...

  7. HBase写被block的分析

    一个线上集群出现莫名奇妙不能写入数据的bug,log中不断打印如下信息: 引用 2011-11-09 07:35:45,911 INFO org.apache.hadoop.hbase.regions ...

  8. 拆解轮子之XRecyclerView

    简介 这个轮子是对RecyclerView的封装,主要完成了下拉刷新.上拉加载更多.RecyclerView头部.在我的Material Design学习项目中使用到了项目地址,感觉还不错.趁着毕业答 ...

  9. IOS中UITextView(多行文本框)控件的简单用法

    1.创建并初始化 UITextView文本视图相比与UITextField直观的区别就是UITextView可以输入多行文字并且可以滚动显示浏览全文.UITextField的用处多,UITextVie ...

  10. Apache Kafka简介与安装(一)

    介绍 Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计. 首先让我们看几个基本的消息系统术语: Kafka将消息以topic为单位进行归纳. 将向 ...