对HTML 标签语义化的理解，常见的语义化标签有哪些？

语义化就是我们通过标签本身就知道标签所在代码的内容具有什么意义，即用使用特定的功能属性的标签做特定的事。比如使用 h1 标签我们就知道这是一个标题，使用 header 就知道这是页眉，使用 footer 就知道这是页脚。

语义化标签就是具有特定功能或属性的标签，语义化标签有两个好处：

一是对机器友好。语义化功能让搜索引擎爬虫更有效地捕获页面结构，有利于SEO；利于页面结构分析，如识别文章标题，生成目录等等。
二是对开发者友好。语义化让文档结构更清晰，便于整理和优化页面结构。

常见的语义化标签有：

<header> 页眉 </header>
<nav> 导航标记 </nav>
<section> 文档中的区段、小节 </section>
<main> 标签规定文档的主要内容区域 </main>
<article> 定义外部的内容，其中的内容独立于文档的其余部分。文章、评论等 </article>
<aside> 侧边栏 </aside>
<footer> 页脚 </footer>
<cite> 参考文献的引用 </cite>
<blockquote> 标签定义块引用 </blockquote>
<code> 代码片段 </code>

我们最常用的两个无语义标签 div 和 span ，如果你知道某处文档片段的意图，应该使用正确的语义化标签来代替或者包裹这些无语义标签，如果没有具体的语义标签，也可以通过增加类名来给标签分类，以到语义化标签的属性标记效果。

对HTML 标签语义化的理解，常见的语义化标签有哪些？相关推荐

Web语义化的理解（H5语义化的作用）
Web语义化,简而言之,就是用正确的标签做正确的事. HTML语义化让页面内容更加结构化,结构更清晰,便于浏览器,搜索引擎解析.语义化让文档更易读,搜索引擎的爬虫也依赖HTML标记来确定上下文和各个关 ...
好程序员web前端分享常见html5语义化标签
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享常见html5语义化标签,我们知道,创建结构清晰的页面可以建立良好的语义化基础,也降低了使用css的难度,下面总 ...
什么是语义化标签，常见的语义化标签介绍
1.什么是语义化标签语义化是指对某件事或某个东西的含义有正确直观的解释,那么在HTML中,语义化标签就是指这个标签本身直观表达出了它所包含的内容是什么. 2.语义化标签的好处代码结构得到了优化,即 ...
Html5 什么是语义化标签？常见的语义化标签有哪些？
h5 语义化标签的推出很好的解决了满屏的 div 布局,语义化顾名思义就是能让人一眼就看出来每一个标签的作用和含义,使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让和搜索引擎都容易理解. ...
[html] 你对标签语义化的理解是什么？
[html] 你对标签语义化的理解是什么? 标签语义化的初衷是让正确的标签做正确的事情,但对于人来说,标签的语义除了在 tag 上体现,还可以从 id, class 上体现出来.而每个人对于标签的理解 ...
什么是HTML语义化标签？常见HTML语义化标签大全，以及不同标签比较
一.什么是HTML语义化标签语义化的标签,旨在让标签有自己的含义. 一行文字 一行文字 如上代码,p 标签与 ...
什么是HTML语义化标签？常见HTML语义化标签大全
一.什么是HTML语义化标签语义化的标签,旨在让标签有自己的含义. 一行文字 一行文字 如上代码,p 标签与 ...
常见的语义化标签有哪些
常见的语义化标签有哪些 <title>:页面主体内容. <hn>:h1~h6,分级标题,<h1> 与 <title> 协调有利于搜索引擎优化. < ...
前端面试题：HTML 语义化的理解
定义: 1 "语义化"指的是在需要更少的人类干预的情况下,能够研究pc和手机信息,让网页能够被机器理解,最终让人类受益 2 语义化是指根据内容的结构化(内容语义化),选择合适的标签 ...

对HTML 标签语义化的理解，常见的语义化标签有哪些？

对HTML 标签语义化的理解，常见的语义化标签有哪些？相关推荐

最新文章

热门文章