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

    禁止std::cout和printf混用,在多线程环境下可能导致coredump. 说明:printf和std::cout分别为标准c语言与c++中的函数,两者的缓冲区机制不同(printf无缓冲区, ...

  2. 19_Android中图片处理原理篇，关于人脸识别网站，图片加载到内存，图片缩放，图片翻转倒置，网上撕衣服游戏案例编写

    1加载图片到内存 (1).数码相机照片特别是大于3m以上的,内存吃不消,会报OutOfMemoryError,若是想只显示原图片的1/8,可以通过BitmapFactory.Options来实现,具体 ...

  3. 《高效能程序员的修炼》读后感 By Yong Zhang

    想不到我工作中经常GOOGLE搜寻技术问题的stack overflow网站的创办人竟然是<高效能程序员的修炼>一书的作者!看了一遍全书,果然名不虚传. 本书更多的从人文角度而非技术角度去 ...

  4. Understanding and Using HRMS Security in Oracle HRMS

    Understanding and Using HRMS Security in Oracle HRMS Product:Oracle Human Resources Minimum Version: ...

  5. android动画介绍--Animation 实现loading动画效果

    Animation的使用方法并不难.这里简单的介绍一下使用方法. 先看效果图: 效果还是不错的吧. 下面来看看使用方法. 动画效果是通过Animation来实现的,一共有四种,分别为: AlphaAn ...

  6. Android遍历获取指定目录的文件

    我们经常遇到一个问题,需要获取指定目录的某些扩展名的文件,并将其存在Vector中,怎么来实现呢? // 获取当前目录下所有的mp4文件 public static Vector<String& ...

  7. 【翻译】Siesta事件记录器入门

    原文:Getting started with the Siesta event recorder 作者:Mats Bryntse 随着事件记录器功能的发布越来越近,我们准备了一下入门指南,向大家展示 ...

  8. 三消游戏FSM状态机设计图

    三消游戏FSM状态机设计图 1) 设计FSM图 2) smc配置文件 ///////////////////////////////////////////////////////////////// ...

  9. Android群英传笔记——第一章：Android体系与系统架构

    Android群英传笔记--第一章:Android体系与系统架构 图片都是摘抄自网络 今天确实挺忙的,不过把第一章的笔记做一下还是可以的,嘿嘿 1.1 Google的生态圈 还是得从Android的起 ...

  10. Socket层实现系列 — listen()的实现

    本文主要分析listen()的内核实现,包括它的系统调用.Socket层实现.半连接队列,以及监听哈希表. 内核版本:3.6 Author:zhangskd @ csdn blog 应用层 int l ...