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

New issue

Open

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

YvetteLau

opened

on May 22, 2019

Owner

写下你的理解~

tpxiang

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

taoyaoyaoa

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

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

shenanheng

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

zyq503454535

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

CCZX

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

chang229

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

yuzhang9804

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

dashengzi66

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

clairing

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

jizx

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

freeshineit

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

lqzo

什么是语义化？

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

语义化优点：

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

KRISACHAN

标签分类

在一个 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 特性，用于提供额外的语义化以及改善缺乏的可访问性。以下是规范中三个主要的特性：

角色（role）：这定义了元素是干什么的；
属性：通过定义一些属性给元素，让他们具备更多的语义；
状态：用于表达元素当前的条件的特殊属性。

后记

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

AILINGANGEL

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

语义化有下面几个优点:

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

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

tianyuandsb

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

32 remaining items

YvetteLau

OwnerAuthor

语义化意味着顾名思义，HTML5的语义化指的是合理使用语义化的标签来创建页面结构，如header,footer,nav，从标签上即可以直观的知道这个标签的作用，而不是滥用div。

语义化的优点有:

代码结构清晰，易于阅读，利于开发和维护
提高用于体验，在样式加载失败时，页面结构清晰
方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

语义化标签主要有：

title：主要用于页面的头部的信息介绍
header：定义文档的页眉
nav：主要用于页面导航
main：规定文档的主要内容。对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。
article：独立的自包含内容
h1~h6：定义标题
ul: 用来定义无序列表
ol: 用来定义有序列表
address：定义文档或文章的作者/拥有者的联系信息。
canvas：用于绘制图像
dialog：定义一个对话框、确认框或窗口
aside：定义其所处内容之外的内容。<aside> 的内容可用作文章的侧栏。
section：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
figure：规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
details：描述文档或者文档某一部分细节
mark：义带有记号的文本。

语义化应用

例如使用可视化标签，构建下面的页面结构：

对于早期不支持HTML5的浏览器，如IE8及更早之前的版本，我们可以引入 html5shiv 来支持。

Nancy0611

1、对开发者来说，代码语义化结构清晰，便于阅读
2、在没有css的情况下，也能呈现页面结构
3、有利于seo，使爬虫能爬取到有效数据
4、方便其他设备解析（盲人阅读器等）

kaiking01

语义化标签：
优点：
1.有助于提高代码可读性；
2.有助于非单页面应用的网站被seo收录；

缺点：
1.存在兼容性问题，小于等于ie8版本的ie浏览器无法直接识别

DazhiFe

首先我们先来了解下什么是语义类标签？

《重学前端》里面的定义：

语义是我们说活表达的意思，多数的语义实际上都是文字来承载。语义类的标签则是纯文字的补充，比如标题、自然段、章节、列表，这些内容都是纯文字无法表达的，我们需要依靠语义类标签代为表达。

说下自己对HTML语义的理解：根据不同的内容和结构，选择合适的标签来展示。

通过标签，我们就能大概的知道展示的是什么样的内容，是一张图片，一个段落，一个标题或者是一个列表等等。

我们平常最常用的应该就是这些了：

比如我们需要显示一张图片，我们就放一个<img>标签

<img src="test.jpg" alt="描述这是一张什么图片">

要显示一个段落，我们就放一个<p>标签

<p>我是一个段落我是一个段落</p>

要显示一个无序列表，我们就用一个<ul>

<ul>
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ul>

要显示一个有序列表，我们就用一个<ol>

<ol>
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ol>

需要一个标题，我们就用h1~h6的标签

<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>

还有很多就不一一列举了，这些都是最基本的。

HTML5新增的语义化标签

HTML5新增了很多语义化的标签，能够让我们更恰当的描述你的内容是什么。

比如<header>、<footer>、<nav>、<main>、<aside>、<article>、<section>、<audio>、<video>等。

比如在HTML5出现之前，我们要定义一个头部，可能会这样写：

<div class="header">这是一个头部</div>

HTML5出现后，我们可以直接使用<header>标签来定义一个头部

<header>这是一个头部</header>

更加详细的可以参考：MDN

语义化有什么好处

虽然说语义化不是强制要求的，但是正确的使用语义标签可以带来很多好处：

语义类标签对开发者更为友好，可以使我们的页面结构更加清晰明了
增强了可读性，即使是在没有CSS的情况下，开发者也能够清晰的看出网页结构，也更便于团队的开发和维护
有利于搜索引擎优化（SEO）,可以让搜索引擎爬虫更好的获取到更多有效的信息，有效提升网页的搜索量
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）等
避免了<div>和<span>标签的滥用和嵌套，有利于页面的维护和拓展

注意

虽然语义化有很多好处，但是不恰当的使用语义标签，反而会造成负面作用。

错误的使用语义标签，会给机器阅读造成混淆、增加嵌套，给CSS编写加重负担。

noggcool

什么是语义化？根据内容，选择标签，便于开发和阅读，利于，便于爬虫机器解析。
语义化的有点：
1.见名知意，能够快速理解开发者意图
2.样式丢失时，页面结构也能清晰明了
3.便于开发和维护
4.利于SEO和机器解析
新增的语义化标签：aside nav article section video nav main……

coloryjl

1、让整个结构看上去更加清晰，在没有css样式下，也能够呈现出很好的结构，让人较容易的理解所代表的意思
2、有利用seo优化

ivan0525

让页面在没有css样式的作用下也能显示良好的结构;
有利于SEO；
有利于爬虫；
便于设备解析。例如：盲人阅读器等；

qinmeishuying

HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构。
html语义化让页面的内容结构化，使得页面结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

YvetteLau

mentioned this

on May 27, 2019

【Step-By-Step】一周面试题深入解析 / 周刊 01 YvetteLau/Blog#31

mcDullLi

让代码更好理解和阅读，便于后期的维护
有利于SEO, 搜索引擎爬虫会根据不同的标签来赋予不同的权重

plane-hjh