什么是语义化

简介: 学习语义化

原文链接:https://note.noxussj.top/?source=aliyun

什么是语义化?

简单了来说就是,当网页去掉 CSS 样式时,页面能呈现出来清晰的结构。

语义化的核心作用:提升代码可读性,便于团队开发和维护。

以下是语义化的 HTML 标签结构(部分语义化标签):

1.png2.png

假设我要编写一个这样的布局

image3.e7d10b3e.png

不使用语义化是这样的

<div></div><div></div><div>    <div>        <div></div>        <div></div>    </div>    <div></div></div><div></div>

使用语义化是这样的

<header></header><nav></nav><main><section><section></section><article></article></section><aside></aside></main><footer></footer>

从上面的例子可以看出来,去除页面样式后,不使用语义化一堆 div 很难看出来是什么模块。而使用语义化标签后,就能够清晰看出包含了头部模块、导航模块、主要内容展示模块、侧边栏模块、底部模块等

相关文章
|
数据采集 搜索推荐 前端开发
HTML语义化 —— 定义网页的语义
HTML语义化 —— 定义网页的语义
52 0
|
2月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
66 5
|
2月前
|
数据采集 搜索推荐 算法
语义化的 HTML 对 SEO 的好处具体体现在哪些方面?
【10月更文挑战第24天】语义化的 HTML 通过提升搜索引擎对网页的理解能力、优化关键词匹配、增强页面结构清晰度以及提高网站整体质量评估等多个方面,为网站的 SEO 带来了显著的好处,有助于提高网站的可见性、流量和排名,从而实现更好的网络营销效果。
50 2
|
6月前
|
搜索推荐 UED SEO
语义化标签有什么作用
语义化标签有什么作用
65 0
|
8月前
|
移动开发 搜索推荐 UED
HTML标签的语义化:为何重要及其实践
HTML标签的语义化:为何重要及其实践
99 0
|
JavaScript API
什么是语义化版本?
最近在对项目的版本号做优化,因此重新学习了一下语义化版本的知识。
122 0
|
移动开发 搜索推荐 索引
HTML5中的语义化标签有哪些?底层原理是什么?
HTML5中的语义化标签有哪些?底层原理是什么?
136 0
|
移动开发 前端开发 搜索推荐
html+css实战41-语义化标签
html+css实战41-语义化标签
101 0
html+css实战41-语义化标签
|
移动开发 信息无障碍 SEO
Day22 - 语义化标签搭建wiki
Day22 - 语义化标签搭建wiki
178 0