GitHub：http://liu12fei08fei.github.io/html/4semantic.html

web语义化，从松散到实战

在这篇文章之前，我放弃了很多次，写关于语义化方面的文章；甚至在这篇文章之前我还删除了一篇已经总结好的关于语义方面的blog之所以放弃和删除是因为web语义实在是太广大，太不好掌握了，每当下笔的时候总有种无从下手的感觉，觉得什么都重要，追求大而全，自己反而不知该如何总结是好只到我经历了多次的尝试和深入思考，总结出我真正想要的关于语义化方面的blog

我想要的语义化blog：

  1. 这篇文章要让我知道什么是语义化？为什么要语义化？
  2. 语义化都有哪些重要的需要立刻了解的知识
  3. 怎么处理html5语义化所带来的兼容性
  4. 读完这篇文章，甚至不用读完；我就可以进入实战把它直接用到我的开发中去（语义化实战）

目录：

  • web语义化，从松散到实战
    • 什么是web语义化？
    • 为什么要语义化？
    • 重要的语义元素
      • 内容分区（结构语义元素）
      • 文本内容（侧重文本结构方面）
      • 内联文本语义（侧重文本修饰方面）
    • HTML5语义化兼容
    • 语义化实战
      • 简化版语义结构图
      • 最全面的语义结构理解图
    • 关于站点的标题结构
      • 一个页面中可以有多个一级标题吗？这样做到底好不好？

什么是web语义化？

其实简单说来就是让机器可以读懂内容。

HTML在刚开始设计出来的时候就是带有一定的「语义」的，包括段落、表格、图片、标题等等，但这些更多地只是方便浏览器等UA对它们作合适的处理。但逐渐地，机器也要借助HTML提供的语义以及自然语言处理的手段来「读懂」它们从网上获取的HTML文档，但它们无法读懂例如「红色的文字」或者是深度嵌套的表格布局中内容的含义，因为太多已有的内容都是专门为了可视化的浏览器设计的。！

语义（Semantic）的概念：“语义可以简单地看作是数据所对应的现实世界中的事物所代表的概念的含义，以及这些含义之间的关 系，是数据在某个领域上的解释和逻辑表示。”web语义化可以简单的理解为：用特定的语言来定义特定的事物。

为什么要语义化？

人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。因为页面的很大一部分流量是来自搜索引擎的，要使页面尽可能地对搜索引擎友好，所以就要尽可能地使标签语义化。

  1. 容易修改和维护：结构清晰，利于团队的开发、维护，语义化更具可读性，可以减少差异化。
  2. 无障碍性：方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页
  3. 搜索引擎优化SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
  4. 代码清晰透明，未来的功能：为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构（为了裸奔时好看）；更利于未来的一些功能扩展，比如页面纲要插件等

SEO也就是Search Engine Optimization，搜索引擎优化指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化，比如网站站外推广、网站品牌建设等，使网站满足搜索引擎收录排名需求，在搜索引擎中提高关键词排名，从而吸引精准用户进入网站，获得免费流量，产生直接销售或品牌推广。

重要的语义元素

文档元数据：元数据（Metadata）含有页面的相关信息，包括样式、脚本及数据，能帮助一些软件 (如搜索引擎， 浏览器等等）更好地运用和渲染页面。对于样式和脚本的元数据，可以直接在网页里定义，也可以链接到包含相关信息的外部文件。

内容分区（结构语义元素）

内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉(header)、页脚(footer)、导航(nav)和标题(h1~h6)等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。

元素（HTML标签）

描述

<address>

为页面主信息元素提供联系信息，即地址信息，这个地址信息适合主信息有关的；和主内容无关的地址信息使用 <p>

<article>

表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构；独立模块用 <article> 进行包裹，而不是 <div>

<aside>

表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。例如相关的广告、笔者的传记、web 应用程序、个人资料信息，或在博客上的相关链接

<footer>

表示最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息

<h1–h6>

标题元素拥有六个不同的级别，<h1> 是最高级的，而 <h6> 则是最低的级别；如果有一个普通的标题，它本身不包含任何特殊的内容，那使用带编号的标题元素（即<h1-h6>）就可以了，即 <h1>标题</h1>

<hgroup>

表示增强型的标题，如果标题除了主标题，还有一个副标题，那可以把这两个标题包装在一个<hgroup>元素中，里面只能包含标题元素（即<h1-h6>），不能有其它元素，即 <hgroup><h1>主标题</h1><h2>副标题</h2></hgroup>

<header>

表示增强型的标题，如果文章开头的内容很多---除了主标题之外，还有其他内容（如：内容摘要、发表日期、作者署名、图片或小标题链接等），那就应该把它们都放在一个 <header> 元素中，即 <header><h1>主标题</h1><p>作者：神奇的HTML</p></header> 或者 <header><hgroup><h1>主标题</h1><h2>副标题</h2></hgroup><p>作者：神奇的HTML</p></header>

<nav>

描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表。<nav> 只用来将一些热门的链接放入导航栏；不热门的链接或不常用的链接应该放在 <footer> 中，一个网页可以有多个 <nav>

<section>

表示文档中的一个区块。如果元素内容可以分为几个部分的话，应该使用 <article> 而不是 <section> ；区块元素 <section> 是应该最后考虑的语义元素，如果有一个标题内容块，而其他语义元素都不合适，那么选择 <section> 通常比选择 <div> 更好一些；<div> 一般作为普通容器来使用，仅仅是为了美化样式的时候使用

文本内容（侧重文本结构方面）

使用 HTML 文本内容元素来组织在开标签 <body> 和闭标签 </body> 里的块或章节的内容。这些元素能标识内容的宗旨或结构，而这对于 accessibility（无障碍网页） 和 SEO（搜寻引擎最佳化） 很重要。

无障碍网页：指在物理条件和技术条件限制下，保证网站达到最佳可用性的实践搜寻引擎最佳化：是提高网站在搜索引擎的能见度之过程，又称搜索排名改进

元素（HTML标签）

描述

<dd>

用来指明一个描述列表 (<dl>) 元素中一个术语的描述。这个元素只能作为描述列表元素的子元素出现，并且必须跟着一个 <dt> 元素，即：<dl><dt>计算机</dt><dd>计算的</dd><dt>显示器</dt><dd>显示信息的</dd></dl>

<dl>

是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)，即展示术语和术语描述的列表

<dt>

用于在一个定义列表中声明一个术语。该元素仅能作为 <dl> 的子元素出现。通常在该元素后面会跟着 <dd> 元素， 然而，多个连续出现的 <dt> 元素都将由出现在它们后面的第一个 <dd> 元素定义

<div>

是一个通用型的流内容容器；一般作为普通容器来使用，仅仅是为了美化样式的时候使用

<figcaption>

是与其相关联的图片的说明/标题（即图题），用于描述其父节点 <figure> 元素里的其他数据；如果没有该元素，这个父节点的图片只是会没有说明/标题；图题中已经包含了对图片的完整说明，所以 <img> 元素的alt属性可以删除掉了，即：<figure><img src="xxx.jpg"><figcaption>图片描述信息</figcaption></figure>

<figure>

代表一段独立的内容，经常与说明 <figcaption> 配合使用, 并且作为一个独立的引用单元，经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体

<hr>

表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。在HTML的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上。

<li>

用于表示列表里的条目。它必须被包含在一个父元素里：一个有顺序的列表(<ol>)，一个无顺序的列表(<ul>)，或者一个菜单 (<menu>)

<main>

呈现了文档 <body> 或应用的主体部分，是包含 <header> 和 <footer> 之外的主体部分；不包含任何在一系列文档中重复的内容，比如：侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）

<ol>

表示多个有序列表项，通常渲染为有带编号的列表

<ul>

代表多项的无序列表，即无数值排序项的集合，且它们在列表中的顺序是没有意义的

<p>

表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进

<pre>

表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来

内联文本语义（侧重文本修饰方面）

使用 HTML 内联文本语义(Inline text semantics)定义语句，结构，可以是一个词，一段，或任意风格的文字。

这里不会把所有的内敛标签都写一遍，只写那些重要的

元素（HTML标签）

描述

<b>

表示相对于普通文本字体上的区别，但不表示任何特殊的强调或者关联。即：只是单纯的把内容加粗显示，不具有语义功能

<strong>

表示文本十分重要，一般用粗体显示。即：文本加粗显示，具有语义功能，表示内容十分重要

<i>

用于表现因某些原因需要区分普通文本的一系列文本。即：只是单纯的把内容斜体显示，不具有语义功能

<em>

标记出需要用户着重阅读的内容， <em> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。即：文本斜体显示，具有语义功能，表示内容需要重读

<cite>

表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。按照惯例，引用的文本将以斜体显示。<cite> 标签还有一个隐藏的功能：它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。<cite> 标签的语义已经远远超过了改变它所包含的文本外观的作用；它使浏览器能够以各种实用的方式来向用户表达文档的内容。

<blockquote>

定义块引用、长引用，代表其中的文字是引用内容。在渲染时，这部分的内容会有一定的缩进。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上（如：<blockquote cite="http://xxx.com"></blockquote>），若要以文本的形式告知读者引文的出处时，可以通过 <cite> 元素

<q>

定义短的引用，样式方面内容两边会显示出双引号。 <q> 标签在本质上与 <blockquote> 是一样的。不同之处在于它们的显示和应用。<q> 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分（通常显示为缩进的块），请使用 <blockquote> 标签

<code>

用于表示计算机源代码或者其他机器可以阅读的文本内容。只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 标签

<mark>

代表突出显示的文字，默认内容的背景为黄色。例如可以为了标记特定上下文中的文本而使用这个标签. 举个例子，它可以用来显示搜索引擎搜索后关键词

<time>

定义日期或时间，或者两者。此元素意在以机器可读的格式表示日期和时间。 有安排日程表功能的应用可以利用这一点

HTML5语义化兼容

不认识HTML5语义元素的浏览器不知道应该把它们显示为块级元素，所以很可能会把它们都挤到一起。为了解决这个问题，只要在样式表中添加一条 “超级规则” 即可：

article, aside, figure, figcaption, footer, header, main, nav, section, summary{

display:block;

}

然而上面的方法有自己的局限性，因为一些浏览器（ie8及ie8以下）并不允许样式化不支持的元素。这种情形出现在ie8及ie8以前的浏览器中，需要一个特殊脚本才行：

<!--[if lt IE 9]>

<script>

document.createElement("header" );

document.createElement("footer" );

document.createElement("section");

document.createElement("aside"  );

document.createElement("nav"    );

document.createElement("article");

document.createElement("hgroup" );

document.createElement("time"   );

</script>

<noscript>

<strong>警告！</strong>

您的浏览器不支持HTML5，我们需要运行JavaScript脚本来给您提供更好的服务；

可惜的是您的浏览器已禁用了JS脚本，请启用它显示此页；

</noscript>

<![endif]-->

语义化实战

简化版语义结构图

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<title>语义化实战结构模型</title>

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

</head>

<body>

<header>header</header>

<main>main</main>

<footer>footer</footer>

</body>

</html>

最全面的语义结构理解图

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<title>语义化实战结构模型</title>

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

</head>

<body>

<header>

<hgroup>

<h1>主标题</h1>

<h2>副标题</h2>

</hgroup>

<p>作者：怪诞咖啡</p>

<nav>

<h2>text</h2>

<ul>

<li>1</li>

<li>2</li>

<li>...</li>

</ul>

</nav>

</header>

<aside>...</aside>

<main>

<article>...</article>

<article>...</article>

<article>

<h2>h2标题</h2> ...

<section>

<h3>h3标题</h3> ...

</section>

<section>

<h3>h3标题</h3> ...

<section>

<h4>h4标题</h4> ...

</section>

</section>

</article>

</main>

<div id="fatFooter">

<aside>

<!-- “胖”页脚的内容 -->

<img src="xxx.jpg" alt="图片"> ...

</aside>

<footer>

<!-- 标准页脚的内容 -->

<p>页脚</p>

</footer>

</div>

</body>

</html>

关于站点的标题结构

一个页面中可以有多个一级标题吗？这样做到底好不好？

根据HTML的官方说法，一个页面中可以有任意多个一级标题。

但是，很多网站开发人员更倾向于每个页面只使用一个一级标题，因为这样能保证网页的无障碍性。（因为使用屏幕阅读器的人在从一个二级标题跳到另一个二级标题的时候，有可能错过中间的一级标题。）

也有不少网络维护人员认为，每个页面就应该只有一个一级标题，这个一级标题在整个网站是独一无二的，可以明确地告诉搜索引擎网站中有什么内容。

不过，在页面中每个主要部分都使用一级元素，比如侧边栏、文章等，同样是允许的。

简言之，如何设计站点的标题结构是一个没有唯一答案的命题。不过，随着HTML5获得胜利并统治Web，好像多个 <h1> 的设计会越来越时髦。

不过现在，很多开发人员为了让屏幕阅读器开心，仍然坚持只使用一个 <h1>。

web语义化，从松散到实战的更多相关文章

  1. web语义化之SEO和ARIA

    在快速理解web语义化的时候,只知道web语义化有利于SEO和便于屏幕阅读器阅读,但并不知道它是如何有利于SEO和便于阅读器阅读的,带着这个疑问,进行了一番探索总结. SEO 什么是SEO? SEO( ...

  2. 浅谈web语义化

    在前端的编程道路上,是否听过html的结构语义化? 是否觉得自己前端嘛,只要做出炫酷的效果,编写出牛逼的JavaScript代码就ok啦.div+css所向无敌,干嘛要用其他标签呢. 是啊,正如上面所 ...

  3. Web语义化

    在昨天和做SEO的同学聊了一会儿,当然我没有学会搜索引擎优化的技巧和知识,但在此之前一直对HTML5中header.footer.sidebar.article等标签嗤之以鼻,觉得这个和div没有什么 ...

  4. web语义化与h5新增标签

    Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:“这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接.”   Web语义化有三个阶段: 1.h1~h6.thead.ul. ...

  5. 为什么要web语义化

    为什么要web语义化 其实wiki的定义里面说得非常清晰了.语义化的好处有三点 有利于搜索 容易兼容不同设备 结构清晰,利于团队的开发.维护

  6. 【HTML】web语义化

    一.解决的问题 & 评价标准 web语义化能解决如下问题: 1. 页面样式丢失 2. 有颜色或其他障碍的访客也能读懂页面 3. 移动设备访问页面 4. 程序(如爬虫)理解页面(换句话说SEO优 ...

  7. 快速理解web语义化

    什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预 ...

  8. 前端基础：web语义化

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

  9. AmazonOrder xml web语义化

    XML Processing Modules — Python 3.7.1 documentation https://docs.python.org/3.7/library/xml.html#xml ...

随机推荐

  1. WEB前端 [编码] 规则浅析

    前言 说到前端安全问题,首先想到的无疑是XSS(Cross Site Scripting,即跨站脚本),其主要发生在目标网站中目标用户的浏览器层面上,当用户浏览器渲染整个HTML文档的过程中出现了不被 ...

  2. 关于Eclipse连接sql server 2008的若干问题

    以下内容转自:https://www.cnblogs.com/skylarzhan/p/7619977.html Eclipse中使用SQL server 2008数据库 一.准备材料 要能够使用数据 ...

  3. Java OOM学习

    转载自原文: 什么是java OOM?如何分析及解决oom问题? 什么是OOM? OOM,全称"Out Of Memory",翻译成中文就是"内存用完了",表现 ...

  4. 树莓派3B安装远程

    步骤1:树莓派3安装 RDP SERVER 及VNC SERVER sudo apt-get install -y tightvncserver sudo vncserver 最后才知道一定要加上VN ...

  5. MEF实现设计上的“松耦合”（二）

    介绍了下MEF的基础用法,让我们对MEF有了一个抽象的认识.当然MEF的用法可能不限于此,比如MEF的目录服务.目录筛选.重组部件等高级应用在这里就不做过多讲解,因为博主觉得这些用法只有在某些特定的环 ...

  6. pyspider 在ubuntu上安装失败怎么搞？

    pyspider 是一个非常不错的爬虫框架,在ubuntu上安装时报错误: 很明显pycurl的问题,pycurl没安装成功 pycurl 安装错误解决办法: sudo apt-get install ...

  7. GUC-8 小练习

    import java.util.concurrent.locks.Condition; import java.util.concurrent.locks.Lock; import java.uti ...

  8. Looksery Cup 2015 F - Yura and Developers 单调栈+启发式合并

    F - Yura and Developers 第一次知道单调栈搞出来的区间也能启发式合并... 你把它想想成一个树的形式, 可以发现确实可以启发式合并. #include<bits/stdc+ ...

  9. 富文本是在modal框中弹出显示的问题

    记录一下,在用tinymce富文本的时候,由于是用在modal 上的,始终无法获取焦点,后来才发现问题出在tinymce在modal前创建了,所以导致这个问题,解决方案就是用 v-if="v ...

  10. java实现两台电脑间TCP协议文件传输

    记录下之前所做的客户端向服务端发送文件的小项目,总结下学习到的一些方法与思路. 注:本文参考自<黑马程序员>视频. 首先明确需求,在同一局域网下的机器人A想给喜欢了很久的机器人B发送情书, ...