说一说HTML语义化？_

得分点

语义化标签、利于页面内容结构化、利于无CSS页面可读、利于SEO、利于代码可读

参考答案

标准回答

HTML语义化就是指在使用HTML标签构建页面时，避免大篇幅的使用无语义的标签，比如<div>、<span>，要求尽可能的使用具有语义的标签，比如<h1>、<p>、<header>、<main>、<footer>等。

举例说明：

页面中有一个标题，可以用<h1>标签实现标题

<h1>This is a top level heading</h1>

也可以使用span+CSS实现标题的样式

<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>

虽然这两种写法都会实现标题的样式，但是建议使用<h1>标签实现。

使用HTML语义化标签的作用：

易于用户阅读，样式文件未加载时，页面结构清晰。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便屏幕阅读器解析，如盲人阅读器根据语义渲染网页。
有利于开发和维护，代码更具可读性，代码更好维护。

加分回答

HTML5语义化标签并没有广泛使用，比如京东、淘宝等，还是使用div元素，设置id是header或者footer，这个可能是因为HTML5新增的语义化标签的作用不是特别大，网站没有必要重写

延伸阅读

HTML5新增的语义化标签：

<header>     <!--：页眉通常包括网站标志、主导航、全站链接以及搜索框。-->
<nav>         <!--：标记导航，仅对文档中重要的链接群使用。-->
<main>         <!--：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。-->
<article>    <!--：定义外部的内容，其中的内容独立于文档的其余部分。-->
<section>    <!--：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。-->
<aside>         <!--：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。-->
<footer>     <!--：页脚，只有当父级是body时，才是整个页面的页脚。-->

HTML语义化标签：

<title>      <!--：页面主体内容。-->
<hn>         <!--：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。-->
<ul>         <!--：无序列表。-->
<li>         <!--：有序列表。-->
<small>      <!--：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。-->
<strong>     <!--：和 em 标签一样，用于强调文本，但它强调的程度更强一些。-->
<em>         <!--：将其中的文本表示为强调的内容，表现为斜体。-->
<mark>       <!--：使用黄色突出显示部分文本。-->
<figure>     <!--：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。-->
<figcaption><!--：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。-->
<cite>       <!--：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。-->
<blockquoto><!--：定义块引用，块引用拥有它们自己的空间。-->
<q>          <!--：短的引述（跨浏览器问题，尽量避免使用）。-->
<time>       <!--：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。-->
<abbr>       <!--：简称或缩写。-->
<dfn>       <!--：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。-->
<address>    <!--：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。-->
<del>        <!--：移除的内容。-->
<ins>        <!--：添加的内容。-->
<code>       <!--：标记代码。-->
<meter>      <!--：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）-->
<progress>    <!--：定义运行中的进度（进程）。-->

编辑于 2021-09-15 11:35:19 回复(0)

好运常伴吾身_

坐下！！ cao

发表于 2023-11-26 21:11:11 回复(0)

牛客722033772号

语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。

发表于 2024-06-06 13:36:38 回复(0)

牛客602659217号

HTML语义化就是指在使用HTML标签构建页面时，避免大篇幅的使用无语义的标签，比如<div>、<span>，要求尽可能的使用具有语义的标签，比如<h1>、<p>、<header>、<main>、<footer>等。

举例说明：

页面中有一个标题，可以用<h1> 标签实现标题

<h1>This is a top level heading</h1>

也可以使用span+CSS实现标题的样式

<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>

虽然这两种写法都会实现标题的样式，但是建议使用<h1>标签实现。

使用HTML语义化标签的作用：

· 易于用户阅读，样式文件未加载时，页面结构清晰。

· 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。

· 方便屏幕阅读器解析，如盲人阅读器根据语义渲染网页。

· 有利于开发和维护，代码更具可读性，代码更好维护。

加分回答

HTML5语义化标签并没有广泛使用，比如京东、淘宝等，还是使用div元素，设置id是header或者footer，这个可能是因为HTML5新增的语义化标签的作用不是特别大，网站没有必要重写

【延伸阅读】

HTML5新增的语义化标签：

<header>     

<nav>         

<main>         

<article>    

<section>    

<aside>         

<footer>     

HTML语义化标签：

<title>      

<hn>         

<ul>         

<li>         

<small>      

<strong>     

<em>         

<mark>       

<figure>     

<figcaption>

<cite>       

<blockquoto>

<q>          

<time>       

<abbr>       

<dfn>       

<address>    

<del>        

<ins>        

<code>       

<meter>      

<progress>

发表于 2024-06-06 13:34:17 回复(0)

明月渡清風

答：语义化就是构成HTML结构的标签要有意义。
比如有这样的标签：
<header> 表示页面头部
<main> 表示页面主题
<footer> 表示页面底部
<nav> 导航栏
<article> 文章标签
为什么使用语义化标签?
易修改、维护
更易理解页面结构
有利于SEO搜索引擎检索

发表于 2022-11-29 15:54:53 回复(0)