Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
YvetteLau opened this issue May 22, 2019 · 61 comments
Open

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

YvetteLau opened this issue May 22, 2019 · 61 comments

Comments

@YvetteLau
Copy link
Owner

写下你的理解~
@tpxiang
Copy link

tpxiang commented May 22, 2019

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

@taoyaoyaoa
Copy link

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

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

@shenanheng
Copy link

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

@zyq503454535
Copy link

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

@CCZX
Copy link

CCZX commented May 22, 2019

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

@chang229
Copy link

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

@yuzhang9804
Copy link

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

@dashengzi66
Copy link

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

@clairing
Copy link

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

@jizx
Copy link

jizx commented May 22, 2019

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

@freeshineit
Copy link

  • 使页面结构更清晰，开发起来方便

  • 有利于seo 优化爬虫爬取

@lqzo
Copy link

lqzo commented May 22, 2019

什么是语义化？

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

语义化优点：

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

@KRISACHAN
Copy link

KRISACHAN commented May 22, 2019 •
edited

标签分类

  • 在一个 html 文档中，标签大致可以分为以下两个大类：
    1. <!DOCTYPE>：声明文档类型；
    1. <html></html>：限定文档区域；

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

1. head

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

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

2. body

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

  1. 内容分区
  2. 文本内容
  3. 内联文本语义
  4. 图片和多媒体
  5. 内嵌内容
  6. 脚本
  7. 编辑标识
  8. 表格内容
  9. 表单
  10. 交互元素
  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语义化，不仅不会花更多的时间，而且又有以下的可访问性优点：

  1. 更便于开发 — 如上所述，你可以使HTML更易于理解，并且可以毫不费力的获得一些功能。

  2. 更适配移动端 — 语义化的HTML文件比非语义化的HTML文件更加轻便，并且更易于响应式开发。

  3. 更便于SEO优化 — 比起使用非语义化的

    标签，搜索引擎更加重视在“标题、链接等”里面的关键字，使用语义化可使网页更容易被用户搜索到。（虽然在9012年的今天，SEO并没太大软用）

无障碍设计

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

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

WAI-ARIA

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

WAI-ARIA 是W3C编写的规范，定义了一组可用于其他元素的HTML 特性，用于提供额外的语义化以及改善缺乏的可访问性。以下是规范中三个主要的特性：

  1. 角色（role）：这定义了元素是干什么的；

  2. 属性： 通过定义一些属性给元素，让他们具备更多的语义；

  3. 状态：用于表达元素当前的条件的特殊属性。

后记

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

@AILINGANGEL
Copy link

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

语义化有下面几个优点:

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

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

@tianyuandsb
Copy link

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

@luohong123
Copy link

我对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> 元素的安全级别以及期望的渲染。

@tianyuandsb
Copy link

tianyuandsb commented May 22, 2019 via email

@zhangxianhui
Copy link

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

@ahaow
Copy link

ahaow commented May 22, 2019

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

有点：

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

缺点

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

@0uzu0
Copy link

0uzu0 commented May 22, 2019

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

@darlingyz
Copy link

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

@MissNanLan
Copy link

语义化的作用

  • 便于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>

@ghost
Copy link

ghost commented May 22, 2019

语义化

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

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

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

@dongtaotao
Copy link

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

语义化好处

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

@zhmfe
Copy link

zhmfe commented May 22, 2019

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

语义化的优点

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

@gitluck1314
Copy link

gitluck1314 commented May 22, 2019 •
edited

什么是语义化？

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

语义化优点：

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

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

@ZhangWeiC
Copy link

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

@Diamondjcx
Copy link

语义化：

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

语义化的优点：

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

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

　　语义化更具可读性，

　　代码更好维护，

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

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

@bailnl
Copy link

bailnl commented May 22, 2019

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

@toyxz
Copy link

toyxz commented May 22, 2019

什么是语义化

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

常用的语义化标签

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

语义化带来的好处

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

@wangzhijun-github
Copy link

语义化标签
1、代码结构清晰，利于维护人员的可读性
2、便于浏览器的解析
3、页面结构，关键字，等信息便于SE0查询

@web-data-MrLi
Copy link

1.通俗的来讲，从名称和一眼可以看出来其内容和作用是什么，语义化的标签就是通过浅显易懂的元素名称

和属性名字来实现语义化

2.语义化的作用

提高页面的访问性，在css丢失的情况下，页面仍然清晰的展现；

提高用户体验，用户不够清楚的地方可以得到良好的解释；

提高seo，让搜索引擎明白页面的结构和主次顺序；

方便其他设备的监听；
3缺点

HTML5语义化标签在IE6-8下，默认当成行内元素展示。

通过引入js解决IE9以下新增标签的兼容问题。

@chongyangwang
Copy link

理解HTML语义化以及html5的新增特性
更好的语义化标签
例如 header,footer,section,article,aside，用对应的标签去渲染页面对应的内容 即使在没有加载css的情况下，页面也会以一种更规范的存在去渲染文档内容。
上面有大佬提到seo与爬虫
新增的特性 除了上述的语义化标签 还有本地存储 webstorage 画布 canvas 以及媒体对象video audio等等.

@yinluoyu
Copy link

  1. autocomplete: form 或者 input 在输入的时候, 拥有自动完成功能

  2. autofocus: 页面加载完毕, 当前属性设置为true的表单自动获取焦点

  3. placeholder: input 元素的默认提示文本

  4. required: 必填项, 提交前必须填充

5)multiple: 输入域中可以选择多个值

@wanglinyj
Copy link

1.用正确的标签做正确的事情。
2.html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
3.即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
4.搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
5.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

@MissWXiang
Copy link

1.什么是HTML语义化？
<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>
　　根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

2、为什么要语义化？
为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

3、写HTML代码时应注意什么？
尽可能少的使用无语义的标签div和span；在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；不要使用纯样式标签，如：b、font、u等，改用css设置。
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

（微信名：RUN）
参考地址：http://www.html5jscss.com/html5-semantics-section.html

@zihuasunshine
Copy link

  1. HTML语义化
    根据内容的结构化(内容语义化)，选择合适的标签(代码语义化)

  2. 语义化的好处
    (1)在没有css的情况下，页面可以呈现出很好的内容结构、代码结构；
    (2) 提升用户体验：例如title、alt用于解释名词或图片信息、label的活用；
    (3) 有利于seo：和搜索银镜建立良好沟通，有助于爬虫抓取更多有效信息；
    (4) 便于团队开发和维护，语义化根据可读性

  3. HTML5新增的元素
    header、nav、article、section、aside、footer

@954545647
Copy link

H5是HTML的最新版本,是14年10月由W3C完成制定标准,其出现是因为HTML4不能满足日益发展的互联网需要,H5引入了许多新特性,其中就包括语义化标签

语义化标签的优点:
  1. 在没有CSS的情况下,页面也能很好的呈现内容,裸奔更好看
  2. 有利于SEO,让搜索引擎搜索到的比重更高
  3. 方便其他设备解析,比如盲人设备等

@tanxchen
Copy link

  • 标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。
  • 也有利于不同设备的解析（屏幕阅读器，盲人阅读器等）。
  • 同时，有利于构建清晰的结构，有利于团队的开发、维护。

所以，在日常开发中，保持使用合适的标签还是非常有必要的。
image

一个语义化html例子 
<body>
<header>
  <h1>title</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/events">Current Events</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
   <header>
    <h1>Demos in Exampland</h1>
    <p>Written by A. N. Other.</p>
   </header>
   <nav>
    <ul>
     <li><a href="#public">Public demonstrations</a></li>
     <li><a href="#destroy">Demolitions</a></li>
    </ul>
   </nav>
   <div>
    <section id="public">
     <h1>Public demonstrations</h1>
     <p>...more...</p>
    </section>
    <section id="destroy">
     <h1>Demolitions</h1>
     <p>...more...</p>
    </section>
   </div>
   <footer>
    <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
   </footer>
  </article>
</main>

<footer>
  <p><small>© copyright 1998 Exampland Emperor</small></p>
</footer>
</body>

附html5新标签：

html5新标签列表：
类型 标签 描述
脚本 <template> 通过 JavaScript 在运行时实例化内容的容器。
章节 <section> 定义文档中的一个章节。
-- <nav> 定义只包含导航链接的章节。
-- <article> 定义可以独立于内容其余部分的完整独立内容块。
-- <aside> 定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
-- <header> 定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
-- <footer> 定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
-- <main> 定义文档中主要或重要的内容。
组织内容 <figure> 代表一个和文档有关的图例。
-- <figcaption> 代表一个图例的说明。
文字形式 <data> 关联一个内容的机器可读的等价形式 （该元素只在 WHATWG 版本的 HTML 标准中，不在 W3C 版本的 HTML5 标准中）。
-- <time> 代表日期 和时间 值；机器可读的等价形式通过 datetime 属性指定。
-- <mark> 代表一段需要被高亮的引用 文字。
-- <ruby> 代表被ruby 注释 标记的文本，如中文汉字和它的拼音。
-- <rt> 代表ruby 注释 ，如中文拼音。
-- <rp> 代表 ruby 注释两边的额外插入文本 ，用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。
-- <bdi> 代表需要脱离 父元素文本方向的一段文本。它允许嵌入一段不同或未知文本方向格式的文本。
-- <wbr> 代表建议换行 (Word Break Opportunity) ，当文本太长需要换行时将会在此处添加换行符。
嵌入内容 <embed> 代表一个嵌入 的外部资源，如应用程序或交互内容。
-- <video> 代表一段视频 及其视频文件和字幕，并提供了播放视频的用户界面。
-- <audio> 代表一段声音 ，或音频流 。
-- <source> 为 <video> 或 <audio> 这类媒体元素指定媒体源 。
-- <track> 为 <video> 或 <audio> 这类媒体元素指定文本轨道（字幕） 。
-- <canvas> 代表位图区域 ，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。
-- <svg> 定义一个嵌入式矢量图 。
-- <math> 定义一段数学公式 。
表单 <datalist> 代表提供给其他控件的一组预定义选项 。
-- <keygen> 代表一个密钥对生成器 控件。
-- <output> 代表计算值 。
-- <progress> 代表进度条 。
-- <meter> 代表滑动条 。
交互元素 <details> 代表一个用户可以(点击)获取额外信息或控件的小部件 。
-- <summary> 代表 <details> 元素的综述 或标题 。
-- <menuitem> 代表一个用户可以点击的菜单项。
-- <menu> 代表菜单。

@duowangwill
Copy link

duowangwill commented May 22, 2019 •
edited

语义化的标签，我觉着还有一点就是：
以前是 div + class = "header"
现在是 < header> 一个标签包含 div + class name

@muyiweibo
Copy link

html语意化便于代码阅读，对爬虫比较友好，根据标签就能大致知道标签内内容类型，是段落还是文章标题还是文章内容等

@jodiezhang
Copy link

语义化好处

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

@yelin1994
Copy link

语义化，标签用得比较少，但平时记得基本布局也是类似于h5中新增的header ,nav等，一般也是自己采用类似的类名比如header，body.来方便开发者阅读，和便于交接吧。有点类似于Table，通过控制每一元素占用多少的row，和col，来实现布局，不过这个明显简便很多。布局的话感觉可以都试试自己写写css, 或者less之类的，而且less和sass出来后，也很方便开发理解了。

@tangjian1891
Copy link

1.有利于SEO搜索优化
2.页面在没有CSS样式的情况下仍能呈现清晰结构
3.便于维护，便于解析
4.语义化有助于残障人士使用，在有些国家地区，例如香港的一些网站，页面布局很丑，但是别人的网站在一些细小的点。例如加重语气的词语上，会使用加粗标签，这样也有利于盲人阅读器的解析和准确信息传递!

(觉得上面的兄弟说的非常好，抄袭一下)
用在我们代码上，最直观的的体现大白话
以前是 div+className 等于


现在是 等于 div +className

@ccvaille
Copy link

  • 正确的地址使用正确的元素，从而得到有意义的文档
  • 有利于 SEO，也便于团队开发和维护

@YvetteLau
Copy link
Owner Author

语义化意味着顾名思义，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：义带有记号的文本。

语义化应用

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

WechatIMG239

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

@Nancy0611
Copy link

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

@kaiking01
Copy link

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

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

@DazhiFe
Copy link

DazhiFe commented May 22, 2019 •
edited

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

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

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

说下自己对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
Copy link

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

@coloryjl
Copy link

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

@ivan0525
Copy link

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

@qinmeishuying
Copy link

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

@YvetteLau YvetteLau mentioned this issue May 27, 2019
Open
@mcDullLi
Copy link

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

@plane-hjh
Copy link

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

HTML5 语义化 就是使用正确的标签做正确的事。

  1. 在没有CSS的情况下,页面也能很好的呈现内容。
  2. 有利于SEO
  3. 方便其他设备解析,比如盲人设备等

简单来说，就好像起房子一样。一个房子要想牢固，不同的地方对应的使用不同的柱子是必不可少的。

@EcSunshine
Copy link

html语义化其实就是使用正确的标签来做正确的事，避免了滥用div。
比如 头部可以 用header标签，底部可以用footer标签，导航部分可以用nav标签等等
有点：可以使读者一目了然节约阅读时间
有利于seo的搜索权重
也方便解析器渲染网页
所以推荐使用语义化搭建页面结构

@riluocanyang
Copy link

对html5语义化的理解

html5新增了语义化，就是为了选择适合语义的标签，显示页面的文档结构。有利于搜素引擎（SEO），开发者之间的协作、阅读和维护。

常用的语义化标签有：
title
header
nav
article
ul
ol
address
aside
section
figure
footer

@dengpan0513
Copy link

  • HTML 语义化是什么
    • HTML 语义化是指在开发中应使用正确的 HTML 标签来表达正确的意图，从而让页面具有良好的结构和含义
  • 举例
    • 比如在开发时，段落就用 <p> 标签，边栏就用 <aside> 标签，导航栏就用 <nav> 标签，页脚就是用 <footer> 标签，这样页面具有良好的结构
    • 再比如说，一个提交按钮应该使用 <button> 标签而不是 <div> 标签，这样做的好处是 <button> 标签不仅提供了按钮样式，还提供了键盘的可访问性，比如：使用 tab 健切换按钮，使用回车键点击按钮
  • 优点
    • 更便于开发：语义化的 HTML 标签具有更高的可读性，便于理解和后期维护
    • 更利于SEO：相比非语义化的 <div> 标签，搜索引擎更重视 <h1>、<a> 标签里的关键字，使用语义化的 HTML 可使网页具有更高的搜索排名，更容易被用户搜到
    • 提升用户体验：表单中，<label> 标签清晰地与表单标签相关联，点击 <label> 标签就可使相关联的表单标签获取焦点；<img> 标签中添加描述图片内容的 alt 属性，再这样当图片无法显示时浏览器会显示 alt 属性的内容，用户也能知道图片的大概内容
    • 更便于其它设备解析：语义化的 HTML 具有良好的结构和含义，它使页面更加友好，便于屏幕阅读器、盲人阅读器等设备解析
    • 更加适配移动端：语义化的 HTML 文件比非语义化的 HTML 文件更轻便，并且更易于响应式开发

@xiekecheng
Copy link

利于SEO,页面结构更清晰

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests