HTML语义化

法玛梅林

于 2024-06-17 13:18:03 发布

阅读量725

点赞数 25

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/qq_46244470/article/details/139584678

版权

前端专栏收录该内容

42 篇文章 0 订阅

订阅专栏

语义化

我们在设计网页时，不应以内容的表现形式来决定使用什么元素包裹，而是应该基于内容的语义来选择元素

<h1>标题</h1>
<div>标题</div>

它们同样都能表示标题这个文本，在默认情况下，由h1展示的文本会比被其他元素展示的文本大一些

但我们可以通过修改css的形式来使两个元素的表现形式一致

display: block;
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
unicode-bidi: isolate;

即便它们的表现形式一样，但它们的语义却天差地别，哪怕div的表现形式和h1一样，div的语义也没有和“第一级标题”对应起来

HTML 应该编写为表示将要填充的数据，而不是基于其默认的演示样式。演示（应该是什么样子），是 CSS 的唯一责任

什么是HTML语义化

HTML语义化指的是在创建HTML页面时，使用合适的标签来准确描述内容的意义和结构

在HTML页面的构建过程中，语义化扮演着至关重要的角色。它涉及到使用合适的HTML标签来准确地表达内容的意义和组织结构。这不仅仅是关于标签的选择，更是一种确保内容正确表达的实践

语义化的优点

保证文档有着丰富的语义会有如下优点：

有助于SEO：
搜索引擎将其内容视为影响页面搜索排名的重要关键字
良好的页面展示
即便没有css，有着丰富语义的网页也能有着良好的展示效果
无障碍
能更好的被屏幕阅读器等设备理解并帮助其他用户导航页面

语义元素

在HTML5中新增了许多语义化元素，以下是常用的HTML元素：

header：定义页面的头部区域，可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称等等
nav：定义页面中导航链接的部分
main：定义文档的主要内容，该内容在文档中应当是独一无二的，main文档的大纲没有贡献，即不会影响DOM的页面结构概念
article：定义文档、页面、应用或网站中的独立结构，它可以是论坛帖子、杂志或新闻文章、博客、用户提交的评论等
section：定义一个通用的分节元素，只有在没有更具体的元素来代表它的时候才可以使用
aside：表示与页面主要内容相关性较低的部分，通常被认为是独立的部分，可以单独拆分而不影响整体。常见的例子是侧边栏或嵌入内容
footer：定义最近一个章节或根节点元素的页脚。页脚通常包含章节作者、版权信息或与文档相关的链接等信息

语义化

微格式

所谓微格式，是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式

具体表现是把语义嵌入到 HTML 中，以便有助于分离式开发，并通过制定一些简单的约定，来兼顾 HTML 文档的人机可读性，相当于对 Web 网页进行了语义注解，微格式的一个关键原则是赋予人类可读内容特权，这意味着在设计网页时我们应首先考虑内容设计的可读性和可访问性，通过使用最合适的HTML元素并将结构化类名应用到标记中，我们可以让自动化程序和其他在线工具以结构化方式使用这些内容