HTML语义化基础
语义化元素的产生，是为使页面呈现较好的内容结构，能够一目了然地知道每一部分所在区域的功能主体，将页面相关元素集中在一起，形成页眉、文章、页脚、侧边栏等元素块，如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>
© 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语义化基础的更多相关文章
- 前端基础：web语义化
web语义化 一.什么是web语义化? web语义化包含两方面,一是html标签语义化,简单来说就是要用合适的标签来表述适当的内容,标题用<h1>~~<h6>标签,段落用< ...
- 基础复习之HTML （doctype、标签语义化）
这段时间找实习看的眼花缭乱的,然后也被拒得落花流水,啊哈哈-还是写博客好玩儿-嘿嘿,下面正题 一.doctype 标准模式 (Full Standards Mode) 接近标准模式 (Almost S ...
- HTML5语义化标签
在HTML5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~ ...
- HTML5学习之语义化标签（一）
一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...
- HTML的语义化，你需要深入了解
有关HTML的一些基础课程,很多网站都有讲,于我而言,真正实践起来,我只要求我能够让它表现出我所想要的结果即可.然而,这种要求,对于后期的维护与测试,真的是......想起日前我们所做的这个项目,那里 ...
- 第二天学习笔记：(MDN HTML学习、web安全策略与常见攻击、语义化)
一:Web入门 1:web文件命名 在文件名中应使用连字符(-).搜索引擎把连字符当作一个词的分隔符, 但不会以这种方式处理下划线. 养成在文件夹和文件名中使用小写,并且使用短横线而不是空格来分隔的习 ...
- html语义化练习易牛课堂代码
html <body> <header> <!-- 导航 --> <nav> <a href=" ...
- 从零开始学 Web 之 HTML5（一）HTML5概述，语义化标签
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Semver(语义化版本号)扫盲
最近Github 10周年在朋友圈里沸沸扬扬刷屏,小编在工作中却惊讶的发现不少同事对版本号中的beta和rc没有概念,使用 npm install package@next 时,也不清楚next代表的 ...
随机推荐
- C++类型转化：static_cast,reinterpret_cast,dynamic_cast,const_cast
类型转换名称和语法 C风格的强制类型转换(Type Cast)很简单,不管什么类型的转换统统是: TYPE b = (TYPE)a C++风格的类型转换提供了4种类型转换操作符来应对不同场合的应用. ...
- AngularJS进阶(二十七)实现二维码信息的集成思路
AngularJS实现二维码信息的集成思路 赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,与君共勉! 注:点击此处进行知识充电 ...
- Android群英传笔记——第十二章：Android5.X 新特性详解，Material Design UI的新体验
Android群英传笔记--第十二章:Android5.X 新特性详解,Material Design UI的新体验 第十一章为什么不写,因为我很早之前就已经写过了,有需要的可以去看 Android高 ...
- cocos2d-x 游戏开发之有限状态机(FSM) (二)
cocos2d-x 游戏开发之有限状态机(FSM) (二) 1 状态模式
- ANDROID窗口管理服务实现机制和架构分析
一.功能 窗口管理是ANDROID框架一个重要部分,主要包括如下功能: )Z-ordered的维护 )窗口的创建.销毁 )窗口的绘制.布局 )Token管理,AppToken )活动窗口管理(F ...
- RedHat系列软件管理(第二版) --二进制软件包管理
RedHat系列软件管理 --二进制软件包管理 Linux学习思想-Linux相对与Windows来非常透明,因此,无论是系统,还是软件,都会有本身自带,或者是Man给提供的非常详细的说明/帮助文档, ...
- Gradle 1.12用户指南翻译——第四十章. ANTLR 插件
本文由CSDN博客万一博主翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...
- Android模拟器启动不了解决办法
问题描述:Windows2008中的MyEclipse项目在Windows2003中运行时无法启动模拟器. 解决要点:启动模拟器管理工具,在启动中设置属性中不勾选默认尺寸显示. 系统错误如下: [20 ...
- HBase行锁
1 行锁简介 在事务特性方面,hbase只支持单row的事务,不能保证跨row(cross-row)的事务.hbase通过行锁来实现单row事务.客户端进行操作时,可以显式对某一个行加锁,但是大部分情 ...
- Libevent库学习笔记
Libevent是一个事件触发的网络库,适用于windows.linux.bsd等多种平台,Libevent在底层select.pool.kqueue和epoll等机制基础上,封装出一致的事件接口.可 ...