什么是HTML语义化?

菜园前端
• 阅读 41

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


什么是语义化?

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

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

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

什么是HTML语义化?

什么是HTML语义化?

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

什么是HTML语义化?

不使用语义化是这样的

<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 很难看出来是什么模块。而使用语义化标签后,就能够清晰看出包含了头部模块、导航模块、主要内容展示模块、侧边栏模块、底部模块等。


最全面的前端笔记来啦,包含了入门到入行的笔记,还支持实时效果预览。小伙伴们不需要再花时间去写笔记,或者是去网上找笔记了。面试高频提问和你想要的笔记都帮你写好了。支持移动端和 PC 端阅读,深色和浅色模式。 原文链接:https://note.noxussj.top/?source=helloworld

点赞
收藏
评论区
推荐文章
添砖java的啾 添砖java的啾
1年前
distinct效率更高还是group by效率更高?
目录00结论01distinct的使用02groupby的使用03distinct和groupby原理04推荐groupby的原因00结论先说大致的结论(完整结论在文末):在语义相同,有索引的情况下groupby和distinct都能使用索引,效率相同。在语义相同,无索引的情况下:distinct效率高于groupby。原因是di
冴羽 冴羽
7个月前
聊聊 npm 的语义化版本(Semver)
前言现在我们要开发一个项目,我们都知道为了方便项目管理,要写一个版本号,那开发的时候初始的版本号是多少呢?是1.0.0还是0.0.1开始?如果一个版本号为X.Y.Z,什么时候是X应该加1,什么时候Y应该加1,什么时候Z应该加1,加1遵循十进制吗?比如1.0.9的下一个版本应该是1.1.0吗?我们经常看到一些项目的版
Stella981 Stella981
1年前
JavaScript
Javascript简介web前端有三层:HTML:从语义的角度,描述页面的结构CSS:从审美的角度,描述样式(美化页面)Javascript:从交互的角度,描述行为(提升用户体验)JavaScript的组成ECMAScript5.0:定义了js的语法标准:包含变量、表达式、元素符、函数、i
Stella981 Stella981
1年前
HTML5新标签与javaScript新方法
HTML5(0106)1、文档声明<!DOCTYPEhtml2、字符编码设置<metacharset"UTF8"3、验证(http://validator.w3.org/)HTML5新增的语义化标签
Stella981 Stella981
1年前
43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
在中国,很多前端开发初学者都会把xHTMLCSS页面制作说成DIVCSS,甚至很多人都还不知道xHTMLCSS是什么意思,只知道盲目的追求DIVCSS,但在国外,是没有DIVCSS这个概念的,很明显如果单从字面上去理解,DIVCSS的网页就要全都是div,很明显是无法达到语义化标准的。请把”DIVCSS”这个词从脑子中删除,用”xHTMLCS
Stella981 Stella981
1年前
GitHub标星13.1k,JavaScript基础知识必知(一)!前端入门必看!
JavaScript背景Web前端有三层:HTML:从语义的角度,描述页面结构CSS:从审美的角度,描述样式(美化页面)JavaScript:从交互的角度,描述行为(实现业务逻辑和页面控制)发展历史JavaScript诞生于
Wesley13 Wesley13
1年前
HTML5标签(语义化)
HTML语义化是什么?HTML语义化是指根据内容的结构化,选择合适的标签。举个例子:之前所有的都用div,span等标签实现页面结构,而这些标签都没有实际的意义,而新的HTML5标签<header\<footer<nav<section<article<aside等这些标签的出现与使用,让人一目了然的知道页面结构是
京东云开发者 京东云开发者
4个月前
京东云开发者|软件架构可视化及C4模型:架构设计不仅仅是UML
软件系统架构设计的目标不在于设计本身,而在于架构设计意图的传达。图形化有助于在团队间进行高效的信息同步,但不同的图形化方式需要语义一致性和效率间实现平衡。C4模型通过不同的抽象层级来表达系统的静态结构,并提供了最小集的抽象建模元素,为设
helloworld_34035044 helloworld_34035044
3个月前
皕杰报表之语义层
1语义层定义语义层——是处于数据源与报表之间的一个概念,是用户和数据库之间的一个代码翻译层,通俗的讲是将数据库中的比较凌乱、复杂的数据对象(例如:存储在table中的各个字段的记录)按预先定义好的规则(“语义层”)重组为面向用户的对象,也就是通过过滤转换成