html语义化有什么优点,html语义化是什么意思？为什么要进行html语义化？ | 前端面试题...

web行业标准的一个重要准则就是，我们必须将html标签就用于它本身表示的意义，而不是默认的它们在浏览器中显示的样式，即，每个标签都代表着具体的意义。

语义化HTML或语义标记HTML，它向网页引入含义而不仅仅是展示方式。例如，

标记表示一个段落。

这即是语义的，也是表现性的，因为人们知道哪些段落和浏览器知道如何显示它们。

在这个等式的另一面，像和这样的标签不是语义的，因为它们只定义了文本的外观(粗体或斜体)，并且没有为标记提供任何额外的含义。

语义HTML标记的示例包括标题标记

到

，

， 和。在构建符合标准的网站时，可以使用更多语义HTML标记。

为什么要关注HTML语义化呢？

编写语义化HTML的好处，源于网页的驱动目标 - 沟通的意愿。通过向文档添加语义标记，可以提供有关该文档的其他信息，从而有助于进行通信。具体而言，语义标签使浏览器清楚地了解页面及其内容的含义。

明晰的语议化标签，还能更好地被搜索引擎索引并解析，确保搜索时提供正确的页面。

语义HTML标记提供有关这些标记内容的信息，这些信息超出了它们在页面上的显示方式。包含在标记中的文本被浏览器立即识别为某种编码语言。

浏览器不是试图呈现该代码，而是理解您正在使用该文本作为代码的示例，以用于文章或某种在线教程。

使用语义标记为您的内容设计样式提供了更多钩子。也许今天你更喜欢让你的代码示例以默认的浏览器样式显示，但明天，你想用灰色背景颜色调出它们，之后你想要定义精确的单倍间距字体系列或  字体堆栈  用于你的样品。您可以使用语义标记和智能应用CSS轻松完成所有这些操作。

正确使用语义标记

当您想使用语义标签来传达意义而不是用于表示目的时，您需要注意不要仅仅因为它们的常见显示属性而错误地使用它们。一些最常被滥用的语义标签包括：

blockquote - 有些人使用  

  标签来缩进非引号的文本。这是因为blockquotes默认是缩进的。如果您只想获得缩进，但文本不是块引用，请改用CSS边距。

p - 一些网络编辑使用

＆nbsp; p>(包含在paragraoph中的不间断空格)在页面元素之间添加额外空间，而不是为该页面的文本定义实际段落。与前面提到的缩进示例一样，您应该使用margin或padding样式属性来添加空间。

ul - 与blockquote一样，在

标记内包含文本会在大多数浏览器中缩进该文本。这在语义上都是错误的并且HTML无效，因为只有标记在 标记内有效。再次，使用边距或填充样式缩进文本。

h1-h6 - 标题标签可用于使字体更大更粗，但如果文本不是标题，则它不应位于标题标记内。如果要更改页面上特定文本的大小或重量，请使用font-weight和font-size CSS属性。

通过使用具有含义的HTML标记，您可以创建提供更多信息的页面，而不是仅使用

标记包围所有内容。

哪些HTML标签是语义的？

虽然几乎每个HTML4标签和所有HTML5标签都具有语义含义，但有些标签本质上主要是语义标签。

例如，HTML5重新定义了和标签的含义是语义的。标签不会传达额外的重要性，而是通常以粗体呈现的文本。标签也没有传达额外的重要性或重点，而是定义通常以斜体显示的文本。

语义HTML标签

缩写

缩写

引用

定义

该文件的作者的地址

引文

代码参考

电传文字

块容器

通用内联样式容器

删除了文字

插入的文字

重点

非常强调

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

水平线

用户输入的文本

预格式化文本

内联引用

样本输出

下标

上标

变量或用户定义的文本