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

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

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

标记表示一个段落。

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

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

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

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

format,png

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

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

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

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

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

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

正确使用语义标记

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

blockquote - 有些人使用  

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

p - 一些网络编辑使用

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

ul - 与blockquote一样,在

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

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

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

标记包围所有内容。

哪些HTML标签是语义的?

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

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

语义HTML标签

缩写

缩写

引用

定义

该文件的作者的地址

引文

代码参考

电传文字

块容器

通用内联样式容器

删除了文字

插入的文字

重点

非常强调

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

水平线

用户输入的文本

预格式化文本

内联引用

样本输出

下标

上标

变量或用户定义的文本

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值