什么是HTML语义化？

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

什么是语义化？

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

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

以下是语义化的 HTML 标签结构（部分语义化标签）：

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

不使用语义化是这样的

1<div></div>
2<div></div>
3<div>
4    <div>
5        <div></div>
6        <div></div>
7    </div>
8    <div></div>
9</div>
10<div></div>

使用语义化是这样的

1<header></header>
2<nav></nav>
3<main>
4    <section>
5        <section></section>
6        <article></article>
7    </section>
8    <aside></aside>
9</main>
10<footer></footer>

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

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