如何理解html结构的语义化,HTML语义化的理解

内容导航：

如何理解HTML结构的语义化

html5的语义化标签有哪些及其作用

什么是语义化的HTML

什么是语义化语义化有什么好处吗

一、如何理解HTML结构的语义化

语义化的HTML结构怎么理解关于html结构的面试题，语义化的html占据了很大一部分。那么为什么要使用语义化的HTML？语义化的HTML到底有什么好处呢？HTML是提供网页文档内容的上下文结构和含义；html本身是没有表现的，我们看到例如

是粗体，字体大小2em，加粗；

**是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以首先我们要知道html和页面的表现是没有关系的，这些是css的事情。HTML在页面中的作用就是结构和含义，通俗点说就是划分内容，这里放什么，我们放的是什么。语义化的HTML结构首先要强调HTML结构HTML结构是页面的骨架，一个页面就好像一幢房子，HTML结构就是钢精钢筋混泥土的墙，一幢房子如果没有钢精钢筋混泥土的墙那就是一堆费砖头，不能住人，不能办公。css是装饰材料，是原木地板，是大理石，是油漆，是用来装饰房子的，CSS的强大就不用多说了，css如果没有html结构那就是一堆木板，一同油漆，没有了实际使用价值。CSS完全依靠引用它的(X)HTML文档。如果你想使CSS的能力充分发挥到极致，提供一个用既干净又有结构的内容的html是非常必要的，“HTML是在互联网上发布超文本的通用语，HTML使用标签来对文本结构化”。语义化的HTML结构怎么写？HTML是一种对文本内容进行结构和意义（或者说“语义”）进行补充的方法。它会告诉我们说：“这行是一个标题，这几行组成了一个段落。这些文字是项目列表，这些文字是链接到互联网上另一个文件的超链接。”值得注意的是，不应该让HTML来告诉我们：“这些文字是蓝色的，这些文字又是红色的。这部分内容是最最靠右的一栏，这行内容是斜体字。”这些和表现相关的信息是CSS的工作。在做前端开发的时候要记住：HTML告诉我们一块内容是什么（或其意义），而不
是它长的什么样子。当我们提到“语义标记”的时候，我们所说的HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。语义化的HTML结构其实很简单，首先掌握html中各个标签的语义，

是一个容器； **是表示强调；

• 是一个无序列表等等…在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。语义化的HTML结构到底有什么好处？我们知道HTML5新增的标签，比如和，html正在朝着更加健壮的语义化的HTML结构发展，xhtml2在这点上没html5先进，这也是xhtml2死亡的一个原因，这一点也说明语义化的HTML结构是html的发展趋势。1.去掉或样式丢失的时候能让页面呈现清晰的结构：html本身是没有表现的，我们看到例如

是粗体，字体大小2em，加粗；

**是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）.使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.5.你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为.SEO主要还是靠你网站的内容和外部链接的。6.便于团队开发和维护W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至
实现模块化开发。

二、html5的语义化标签有哪些及其作用

标签定义外部的内容。
比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。
亦或是来自其他外部源内容。
HTML5:HTML4:标签定义 article 以外的内容。
aside 的内容应该与 article 的内容相关。
HTML5:Aside 的内容是独立的内容，但应与文档内容相关。HTML4:

Aside 的内容是独立的内容，但应与文档内容相关。 标签定义声音，比如音乐或其他音频流。
HTML5:您的浏览器不支持 audio 标签。HTML4: 标签定义图形，比如图表和其他图像。
这个 HTML 元素是为了客户端矢量图形而设计的。
它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
HTML5:HTML4: 标签定义命令按钮，比如单选按钮、复选框或按钮。
HTML5: HTML4: none 标签定义可选数据的列表。
与 input 元素配合使用，就可以制作出输入值的下拉列表。
HTML5: HTML4: see combobox. 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。
与 一起使用，来制作 detail 的标题。
该标题对用户是可见的，当在其上点击时可打开或关闭 detail。
HTML5: HTML4:

标签定义嵌入的内容，比如插件。
HTML5: HTML4: 标签定义 figure 元素的标题。
”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
HTML5: PRCHTML4: none 标签用于对元素进行组合。
使用 元素为元素组添加标题。
HTML5: PRC

The People’s Republic of China was born in 1949…

HTML4:

PRC

The People’s Republic of China was born in 1949…

标签定义 section 或 document 的页脚。
典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
HTML5: HTML4: 标签定义 section 或 document 的页眉。
HTML5: HTML4: 标签用于对网页或区段（section）的标题进行组合。
HTML5: HTML4: 标签定义生成密钥。
HTML5: HTML4: none主要用来在视觉上向用户呈现那些需要突出的文字。
标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
HTML5: HTML4: 标签定义度量衡。
仅用于已知最大和最小值的度量。
必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。
HTML5: HTML4: none 标签定义导航链接的部分。
HTML5: HTML4: 标签定义不同类型的输出，比如脚本的输出。
HTML5: HTML4: 标签运行中的进程。
可以使用 标签来显示 JavaScript 中耗费时间的函数的进程。
HTML5: HTML4: none 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
HTML5: 汉 (ㄏㄢˋ)HTML4: none 标签定义字符（中文注音或字符）的解释或发音。
HTML5: 汉 ㄏㄢˋ HTML4: none 标签定义 ruby 注释（中文注音或字符）。
HTML5: 汉 (ㄏㄢˋ)HTML4: none 标签定义文档中的节（section、区段）。
比如章节、页眉、页脚或文档中的其他部分。
HTML5: HTML4: 标签为媒介元素（比如 和 ）定义媒介资源。
HTML5: HTML4: 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。
”summary” 元素应该是 “details” 元素的第一个子元素。
HTML5: HTML 5This document teaches you everything you have to learn about HTML
5.HTML4: none 标签定义日期或时间，或者两者。
HTML5: HTML4: 标签定义视频，比如电影片段或其他视频流。
HTML5: 您的浏览器不支持 video
标签。HTML4:nav标签，header标签，footer标签，这些都是常用的语义化的标签，作用也就是让网页结构更清晰html5的语义化标签有这些琪琪作用
– /full_stack/Html/html5_

三、什么是语义化的HTML

答：语义化的标签，说明让标签有自己的含义。＜p＞一行文字＜/p＞＜span＞一行文字＜/span＞如上代码，p标签与span标签都区别之一就是，p标签的含义是：段落。而span标签责没有独特的含义。

四、什么是语义化语义化有什么好处吗

当初在黑马程序员学习时候老师就解释过，当你写html时，要按照人们的思考逻辑写。
不但要自己和别人能看懂，也要让网页能看懂，不要让别人觉得你的代码很乱。
语义化的主要目的就是让大家直观的认识标签和属性的用途和作用。
那语义化的网页的好处，最主要的就是对搜索引擎友好，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取，你网站的推广便可以省下不少的功夫。
我们的网站都希望能再前几名中展示出来,所以我们要遵守语义化,在合理的地方使用合理的标签.这是非常重要的.语义化的html是最新的html5提出的理论，也就是通过一些有具体含义的标签来代替之前用class名或者id来赋予意义的标签，举个例子，之前用html写个导航要写个div
，然后给他设置一个id名为nav,这样写，，而现在你可以直接用标签来代替之前的写法，这样别人一眼就知道你这个里面要写的就是导航菜单了，这就是语义化标签的意义所在。