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代表的 ...
随机推荐
- HTML DOCTYPE 的重要性
定义和用法 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE> 声明不是 HTML 标签:它是指示 we ...
- 反对抄袭 正解spring的@Autowired 不要相信网上的错误版本
首先,最重要的, @Autowired的就是用来来消除 set ,get方法． 有些介绍,如著名的马士兵,说要在set方法上进行注入．我当时就看不明白了,既然只取消了一个GET,这个@Autowire ...
- imx51-linux的cpuinfo之分析
这两天客户提出来,我们的平板cat /proc/cpuinfo出来的信息中的serial怎么是0. 客户就是上帝啊,没办法,分析找问题贝. 我们先看一下目前的cat /proc/cpuinfo的信息: ...
- gdb学习(一)[第二版]
概述 gdb是GNU debugger的缩写,是编程调试工具. 功能 1.启动程序,可以按照用户自定义的要求随心所欲的运行程序. 2.可让被调试的程序在用户所指定的断点处停住 (断点可以是条件表达式) ...
- 网站开发进阶(一)Tomcat域名或IP地址访问方式配置方法
Tomcat域名或IP地址访问方式配置方法 1.配置www.***.com域名方式访问 在Tomcat下面配置域名(如:www.***.com)的时候,同时又不希望客户通过我们网站的IP或者域名访问到 ...
- 【Django】 gunicorn部署纪要
使用Gunicorn 来部署Django应用, 没有一步一步写怎么操作,简单记录下重要的点,方面以后查阅. 主要的方式还是Nginx反向代理到Gunicorn, Gunicorn wsgi来启动Dja ...
- ubuntu 输入用户名密码又回到登陆界面
问题描述: 输入正确的用户名密码,登陆后又返回登陆界面,重复出现. 问题解决: 环境变量出错,重新配置环境变量. 1.进入命令行模式Ctrl+Alt+F*,然后输入用户名密码: 2.登进去之后,以管理 ...
- How to configure ODBC DSN to access local DB2 for Windows
How to configure ODBC DSN to access local DB2 for Windows MA Genfeng (GuangdongUnitoll Services inco ...
- Mac OS X 10.10优胜美地如何完美接管iphone上的电话和短信
自从今年苹果第一次的发布会上毛猫就特别注意这个功能,感觉特别Cool,特别方便.但直到今天毛猫才第一次成功测试出这个功能呀!虽然handoff功能还未测出来,但是觉得在mac上发短信和打电话也已经足够 ...
- 基于Redis的分布式锁两种实现方式
最近有一个竞拍的项目会用到分布式锁,网上查到的结果是有三种途径可以实现.1.数据库锁机制,2.redis的锁,3.zookeeper.考虑到使用mysql实现会在性能这一块会受影响,zookeeper ...