说一说你对HTML5语义化的理解

Open YvetteLau opened this issue 5 years ago • 61 comments

写下你的理解~

May 22 '19 00:05 YvetteLau

语义化就是让文本内容来结构化，选择与语义相符合的标签，使代码语义化，这样不仅便于开发者进行阅读，同时也能维护和写出更优雅的代码，还能够让搜索引擎和浏览器等工具更好的解析。

May 22 '19 00:05 tpxiang

### 语义是指对一个词或者句子含义的正确解释。很多html标签也具有语义的意义，也就是说元素本身传达了关于标签所包含内容类型的一些信息。

为社么语义化 代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息提升用户体验：例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

May 22 '19 00:05 taoyaoyaoa

对seo搜索引擎的更好支持,以及对爬虫的更好支持

May 22 '19 00:05 shenanheng

1语义化指的是机器在更少人干预下能够搜集信息，让网页能够被机器理解 2目的：①在去掉或样式丢失时让页面呈现清晰的结构②对搜索引擎友好③便于团队开发与维护

May 22 '19 00:05 zyq503454535

HTML5新增了许多语义化标签和一些新的API，废除了一些旧的标签，语义化标签的出现使得代码更具有可读性，对搜索引擎更加的友好，废除的一些旧的标签更加体现了结构样式分离的的思想，比如center标签。

May 22 '19 01:05 CCZX

1,有利于SEO；2，便于维护和理解；3，方便在其他设备如盲人屏幕阅读器上解析；4，有利于浏览器的解析；5，给用户更好的浏览体验。

May 22 '19 01:05 chang229

用正确的标签做正确的事情
利于SEO
让页面结构更加清晰, 便于浏览器,搜索引擎解析
便于阅读理解和后期维护

May 22 '19 01:05 yuzhang9804

1.让页面的内容结构化 2.利于浏览器解析和SEO搜索引擎优化。 3.提高代码的可维护和可重用性。

May 22 '19 01:05 dashengzi66

HTML5新增的语义化标签有header footer nav section article aside 等等很多语义化便于开发者阅读，代码更好看，也便于网络爬虫，SEO 优化。语义化在没有css 情况下，也能很好的展现内容结构，裸奔也好看。增强用户体验，也便于其他设备解析（屏幕阅读器，移动设备等）

May 22 '19 01:05 clairing

1、更好的见名知意，有利于快速理解开发者意图，少写css。 2、有利于SEO。 3、增强用户体验，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页。

May 22 '19 01:05 jizx

使页面结构更清晰，开发起来方便
有利于seo 优化爬虫爬取

May 22 '19 01:05 freeshineit

什么是语义化？

语义化是根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

语义化优点：

易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析，如盲人阅读器根据语义渲染网页
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

May 22 '19 01:05 lqzo

标签分类

在一个 html 文档中，标签大致可以分为以下两个大类：

<!DOCTYPE>：声明文档类型；

<html></html>：限定文档区域；

<html></html> 内又有以下几类：

1. head

<head>标签用于定义文档的头部，它是所有头部元素的容器。<head>描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。 head内可存放标签有：

<base>：为页面上的所有链接规定默认地址或默认目标。
<link>：主要用于style文件引入
<style>：样式表区域
<title>：可定义文档的标题。<title> 标签是 <head> 标签中唯一要求包含的东西。
<meta>：提供了有关当前HTML元素的元信息 (meta-information)

2. body

<body>标签内存放文档的内容。 <body>内标签分类有以下11类：

内容分区
文本内容
内联文本语义
图片和多媒体
内嵌内容
脚本
编辑标识
表格内容
表单
交互元素
Web组件

HTML 标签语义化

语义化到底重不重要？

我们知道，在HTML中，每个标题是通过标题标签来定义的，标题标签一共有6个，分别是：h1~6。例子如下：

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>

如果是连续的标题，则可以用 <hgroup> 来连接：

<hgroup>
  <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>
</hgroup>

如果是段落内容，则用 <p>：

<p>我是段落内容</p>

如果我们要列一个列表则可以用 <ol></ol> 或 <li></li> 。如果只是要标记项目，我们可以用 <li></li> ，例子如下：

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>奥特曼</li>
  <li>橙子</li>
</ul>

若是标记顺序，则用 <ol></ol> ，例子如下：

<ol>
  <li>向前走300米</li>
  <li>右转</li>
  <li>向前走300米</li>
  <li>右转</li>
  <li>向前走300米</li>
</ol>

当然我们也可以按需嵌套。

<ol>
<li>先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀，调成“腌料”，鸡胸肉切成约一厘米见方的碎丁并用“腌料”搅拌均匀，腌渍半小时。</li>
  <li>用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀，调成“综合调味料”。</li>
  <li>鸡丁腌好以后，色拉油下锅烧热，先将鸡丁倒入锅内，用大火快炸半分钟，炸到变色之后，捞出来沥干油汁备用。</li>
  <li>在锅里留下约两大匙油，烧热后将切好的干辣椒下锅，用小火炒香后，再放入花椒粒和葱段一起爆香。随后鸡丁重新下锅，用大火快炒片刻后，再倒入“综合调味料”继续快炒。</li>
  <ul>
    <li>如果你采用正宗川菜做法，最后只需加入花生米，炒拌几下就可以起锅了。</li>
    <li>如果你在北方，可加入黄瓜丁、胡萝卜丁和花生米，翻炒后起锅。</li>
  </ul>
</ol>

在我们平常说话的时候，为了突出重点，我们往往会强调某些词，就如如下的例子：

<p>我<em>非常</em>喜欢加班</p>

如果是重音强调，则：

<p>鱼头，明天<strong>别迟到</strong>了</p>

如果你在项目的一开始就使用HTML语义化，不仅不会花更多的时间，而且又有以下的可访问性优点：

更便于开发 — 如上所述，你可以使HTML更易于理解，并且可以毫不费力的获得一些功能。
更适配移动端 — 语义化的HTML文件比非语义化的HTML文件更加轻便，并且更易于响应式开发。
更便于SEO优化 — 比起使用非语义化的
标签，搜索引擎更加重视在“标题、链接等”里面的关键字，使用语义化可使网页更容易被用户搜索到。（虽然在9012年的今天，SEO并没太大软用）
无障碍设计

在Web开发无障碍性意味着使尽可能多的人能够使用Web站点,即使这些人的能力是有限的。这里我们提供关于开发易访问的内容的信息。

“无障碍性是最常用于描述设施或设施,帮助残疾人,如“轮椅”。这可以扩展到盲文标识、轮椅坡道,音频信号在人行横道,轮廓人行道,网站设计,等等。"

WAI-ARIA

WAI-ARIA 是一项技术，它可以通过浏览器和一些辅助技术来帮助我们进一步地识别以及实现语义化，这样一来能帮助我们解决问题，也让用户可以了解发生了什么。

WAI-ARIA 是W3C编写的规范，定义了一组可用于其他元素的HTML 特性，用于提供额外的语义化以及改善缺乏的可访问性。以下是规范中三个主要的特性：
1. 角色（role）：这定义了元素是干什么的；
2. 属性：通过定义一些属性给元素，让他们具备更多的语义；
3. 状态：用于表达元素当前的条件的特殊属性。
后记

HTML语义化非常地重要，虽然在组件化开发的今天，利益没那么明显，但是对于后期维护，用户访问以及用户友好度来说都是非常重要的，在某些国家，语义化跟无障碍标准化甚至是衡量一个线上产品能否上线的标准。

May 22 '19 02:05 KRISACHAN

语义化就是赋予html文档结构一定的语义，可以从阅读html代码就能理解整个文档的内容和结构

语义化有下面几个优点:

让代码更好理解和阅读，便于后期的维护
有利于SEO, 搜索引擎爬虫会根据不同的标签来赋予不同的权重
即使没有css的情况下，html文档也能表现的良好

html5新增的语义化标签有: nav, time, article, section, aside, video, footer

May 22 '19 02:05 AILINGANGEL

对于开发者角度来说语义话标签更有利于以后的维护,看到语义话标签布局结构清晰
便于SEO搜索，提高排名
常用的 title， header footer nav 。。。。。。。。。

May 22 '19 02:05 tianyuandsb

我对HTML5语义化的理解

一、概念

HTML5是定义 HTML 标准的最新版本，它是新版本的HTML 语言，具有新的元素，属性和行为，有更大的技术集，允许构建更多样化和更强大的网站和应用程序。语义化能让你更恰当的描述你的内容是什么。

（一）HTML5 中的区块和段落元素

HTML5 中新的区块和段落元素一览:

<section></section> 
<article></article>
<nav></nav>
<header></header>
<footer></footer>
<aside></aside>
<hgroup></hgroup>

HTML5使得章节和标题特性更精确。使得文档大纲变的可预测，浏览器使用后也可以提高用户体验。

（二）音频和视频

<audio></audio>
<video></video>

audio和video元素嵌入和允许操作新的多媒体内容 HTML5 通过HTML标签“audio”和“video”来支持嵌入式的媒体，使开发者能够方便地将媒体嵌入到HTML文档中。

（三）表单的改进

强制校验API，一些新的属性，一些新的<input> 元素type 属性值，新的 <output> 元素。

（四）新的语义元素

除了节段，媒体和表单元素之外，还有众多的新元素，例如

<mark></mark>
<figure></figure>
<figcaption></figcaption>
<data></data>
<time></time>
<output></output>
<progress></progress>
<meter></meter>
<main></main>

这增加了有效的 HTML5 元素的数量。

（五）`<iframe>` 的改进

使用 sandbox， seamless，和 srcdoc 属性，作者们现在可以精确控制 <iframe> 元素的安全级别以及期望的渲染。

May 22 '19 03:05 luohong123

谢谢哥～～～～～

------------------ 原始邮件 ------------------ 发件人: "青成"[email protected]; 发送时间: 2019年5月22日(星期三) 中午11:16 收件人: "YvetteLau/Step-By-Step"[email protected]; 抄送: "`~~"[email protected];"Comment"[email protected]; 主题: Re: [YvetteLau/Step-By-Step] 说一说你对HTML5语义化的理解 (#8)

我对HTML5语义化的理解

一、概念

（一）HTML5 中的区块和段落元素

HTML5 中新的区块和段落元素一览:

HTML5使得章节和标题特性更精确。使得文档大纲变的可预测，浏览器使用后也可以提高用户体验。

（二）音频和视频

audio和video元素嵌入和允许操作新的多媒体内容 HTML5 通过HTML标签“audio”和“video”来支持嵌入式的媒体，使开发者能够方便地将媒体嵌入到HTML文档中。

（三）表单的改进

强制校验API，一些新的属性，一些新的元素type 属性值，新的元素。

（四）新的语义元素

除了节段，媒体和表单元素之外，还有众多的新元素，例如

这增加了有效的 HTML5 元素的数量。

（五）的改进

使用 sandbox， seamless，和 srcdoc 属性，作者们现在可以精确控制元素的安全级别以及期望的渲染。

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

May 22 '19 03:05 tianyuandsb

什么是语义化 语义化：正确的标签做正确的事见名知其意 语义化的好处 1.即使在没有CSS样式的条件下，也能很好地呈现出内容结构、代码结构； 2.语义化HTML会使HTML结构变的清晰，有利于维护代码和添加样式； 3.提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖 4.通常语义化HTML会使代码变的更少，使页面加载更快。

May 22 '19 03:05 zhangxianhui

语义化：指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化），便于开发者阅读，维护和写出更优雅的代码的同时，让浏览器的爬虫和辅助技术更好的解析；

有点：

拥有默认的样式
利于SEO优化

缺点

HTML5语义化标签在IE6-8下，默认当成行内元素展示。
通过引入js解决IE9以下新增标签的兼容问题。

May 22 '19 04:05 ahaow

自然语言表达能力的补充；
文章标题摘要；
适合机器阅读的整体结构。

May 22 '19 04:05 0uzu0

HTML5新增了语义化标签，所谓语义化标签就是能够准确的知道他所谓的标签的用意比如：footer,就能够明确的只知道是在文章的底部；此外，语义化标签也有利于爬虫的爬去，对于seo有好处，提升网络搜索量。增强可读性语义类标签对开发者更为友好,使用语义类标签增强了可读性,即便是在没有 CSS 的时开发者也能够清晰地看出网页的结构，也更为便于团队的开发和维护除了对人类友好之外，语义类标签也十分适宜机器阅读。它的文字表现力丰富更适合搜索引擎检索（SEO），也可以让搜索引擎爬虫更好地获取到更多有效信息，有效提升网页的搜索并且语义类还可以支持读屏软件，根据文章可以自动生成目录等等， header article section address footer abbr figure figcaption dfn audio video aside hgroup mark 那么，你知道有多少语义标签呢

May 22 '19 04:05 darlingyz

语义化的作用

便于SEO优化
便于维护
利于浏览器渲染

有哪些语义化标签

-header

nav -aside -article -section -footer -main -small -pre/samp pre表示预先排版过，samp表示一段计算机程序输出 -hgroup 标题组 -abbr 表示缩写 -figure,figcaption

这里我想对hgroup举例说明

<hrgoup>
  <h1> World Wide Web</h1>
  <h2>From Wikipedia,the free encyclopedia</h2>
</hgroup>

<pre>
  <samp>
     GET /home/demo
     HOST: 0.0.0.1
   </samp>
</pre>

May 22 '19 04:05 MissNanLan

语义化

这个话题仿佛已经有一段历史了

语义化标签首先为了规范页面结构，即时没有css样式修饰的情况下，用户也能轻易的分辨出哪些是内容，哪些是标题，哪些是连接
浏览器能够更好的SEO，搜索引擎在爬取页面信息，SEO有一套良好的规则
有利于开发的维护，使项目结构更加清晰

其他的我也实在想不到了。。。就这些吧。。。

May 22 '19 05:05 ghost

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 HTML5提供了新的语义元素来定义网页的不同部分，它们被称为“切片元素”。

语义化好处

方便用户阅读，提升用户体验，在没有css样式的情况下也能让页面呈现清晰的结构。有利于SEO，搜索引擎等是根据标签来确定上下文和各个关键字的权重，有助于爬虫抓取更多的有效信息还方便其他设备解析，如（盲人）阅读器等设备根据语义来渲染网页。最后有利于开发和维护，语义化更好的具可读性，代码更好维护，以减少差异化。

May 22 '19 06:05 dongtaotao

语义化就是用合理、正确的标签来展示内容，比如h1~h6定义标题

语义化的优点

搜索引擎友好。
更容易让屏幕阅读器读出网页内容。
去掉或样式丢失的时候能让页面呈现清晰的结构。
便于团队开发和维护。

May 22 '19 06:05 zhmfe

什么是语义化？

就是用合理、正确的标签来展示内容，比如h1~h6定义标题。

语义化优点：

易于用户阅读，方便理解标签对应页面的位置是否符合。样式丢失的时候能让页面呈现清晰的结构。
有利于SEO（搜索引擎优化），搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析，如盲人阅读器根据语义渲染网页
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

参考链接：http://www.daqianduan.com/6549.html

May 22 '19 06:05 gitluck1314

有利于SEO。
有利于用户阅读。
方便设备解析。
有利于开发和维护，更具可读性，使项目结构更加清晰

May 22 '19 06:05 ZhangWeiC

语义化：

　　就是使用合理、正确的标签来展示内容，指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化），便于开发者阅读，维护和写出更优雅的代码的同时，让浏览器的爬虫和辅助技术更好的解析。

语义化的优点：

　　易于用户阅读；样式丢失的时候能让页面呈现清晰的结构

　　有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重方便其他设备解析，如盲人阅读器根据语义渲染网页有利于开发和维护，

　　语义化更具可读性，

　　代码更好维护，

与CSS3关系更和谐 HTML5之前，DIV+CSS实际上就能很好渲染出一个web页面。HTML5已不仅仅满足于怎样将一个网页表现出来了，二是更加专注于网页的结构，更加务实地关注网页的内容。

为了区分不同的结构，我们往往给div设置不同的id，ID名称标记了这个DIV负责的区块，而HTML5则为这些不同的区块创造不同的标签。

May 22 '19 07:05 Diamondjcx

代码正常情况下是给人看的，正确的使用有利于维护
代码有时候是给机器看的，正确的使用有利于帮助有障碍人士
代码有时候是给搜索引擎看的，正确的使用有利于收录
代码有时候是给爬虫看的，不正确的使用可以增加解析成本

May 22 '19 07:05 bailnl

什么是语义化

语义化是指根据内容的结构，选择合适的标签，便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。

常用的语义化标签

h1-h6 标题
ul 无序列表
ol 有序列表
header 主要用于页面的头部的信息介绍
nav 主要用于制作页面的导航，也可用作底部导航
main 定文档的主要内容，一个文档最多只能使用一次
article 用来在页面中表示一套结构完整且独立的内容部分
aside 主要用于表示与内容相关的导航, 侧边栏等
section 用于划分页面上的不同区域，或者划分文章里不同的节
footer 页面的底部或者版块底部
hgroup 头部信息/标题的补充内容
figure 用于对元素进行组合。使用<figcaption> 元素为元素组添加标题。

语义化带来的好处

页面结构清晰
- 去掉或 CSS 样式丢失的时候,也能让页面呈现清晰的结构，增强页面的可读性。
支持更多设备
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页。
利于SEO优化
- 和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。
便于团队开发和维护在团队中大家都遵循W3C标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

May 22 '19 08:05 toyxz

Step-By-Step Step-By-Step copied to clipboard

说一说你对HTML5语义化的理解

什么是语义化？

语义化优点：

标签分类

1. head

2. body

HTML 标签语义化

无障碍设计

WAI-ARIA

后记

我对HTML5语义化的理解

一、概念

（一）HTML5 中的区块和段落元素

（二）音频和视频

（三）表单的改进

（四）新的语义元素

（五）<iframe> 的改进

有点：

缺点

什么是语义化？

语义化优点：

什么是语义化

常用的语义化标签

语义化带来的好处

Step-By-Step
Step-By-Step copied to clipboard

（五）`<iframe>` 的改进