什么是语义化

简介: 学习语义化

原文链接: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的语义化标签
|
数据采集 搜索推荐 前端开发
HTML语义化 —— 定义网页的语义
HTML语义化 —— 定义网页的语义
40 0
|
4月前
|
搜索推荐 UED SEO
语义化标签有什么作用
语义化标签有什么作用
44 0
|
5月前
|
移动开发 定位技术 HTML5
HTML5的新语义化标签
HTML5的新语义化标签
48 0
|
6月前
|
移动开发 搜索推荐 UED
HTML标签的语义化:为何重要及其实践
HTML标签的语义化:为何重要及其实践
78 0
|
6月前
|
移动开发 搜索推荐 开发者
HTML5中的语义化标签有哪些?
【4月更文挑战第1天】HTML5中的语义化标签有哪些?
107 0
HTML5中的语义化标签有哪些?
|
6月前
|
移动开发 搜索推荐 HTML5
HTML语义化标签
HTML语义化标签
|
6月前
|
数据采集 移动开发 前端开发
HTML语义化的理解
HTML语义化的理解
36 0
|
6月前
|
数据采集 前端开发 搜索推荐
Html中语义化的理解
Html中语义化的理解
60 0
|
JavaScript API
什么是语义化版本?
最近在对项目的版本号做优化,因此重新学习了一下语义化版本的知识。
109 0