这是我的第一篇实践文章。
什么是html语义化
HTML 语义化是指使用合适的 HTML 标签来描述网页内容的结构和意义,使得页面具有更好的可读性、可访问性和搜索引擎优化性能。
实际案例分析
博客网站
在博客网站中,文章有标题,段落等。在博客的布局中一般也是采用有头部导航栏,主体部分为文章的布局。 以掘金为例
头部使用
<header></header>标签,导航栏使用<nav></nav>标签,文章部分使用<main></main>标签。
此外我们在博客网站也经常使用<article></article>标签来写文章内容,文章标题则使用<h1><h2>等此类标签。还有<section>标签来描述文章内容的各个部分,如摘要和正文。<footer>标签描述底部copyright内容等。<aside>侧边栏来表示包含相关文章的链接列表。
html语义化的优点
使用这些语义化标签的好处有什么呢:
- 可读性:通过使用语义化标签,代码的结构更加清晰易懂。开发者可以更快速地理解网页的结构,并进行样式和脚本的编写。
- 可访问性:语义化标签使得屏幕阅读器等辅助技术更容易理解网页的结构和内容。这样,有视觉障碍的用户可以更好地阅读和使用网页。
- 搜索引擎优化:搜索引擎可以根据语义化标签识别网页的结构和内容,更好地理解网页的意义。这样,网页在搜索结果中的排名可能会更高。
通过正确使用 HTML 语义化,可以改善这些问题。合适的语义化标签能够提高代码的可读性、可访问性和搜索引擎优化性能,使得网页更易于理解、更易于维护,并提供更好的用户体验。
不使用html语义化有什么劣势?
- 样式和脚本的复杂性:在缺少语义化的网页中,为了实现特定的样式或功能,开发者可能不得不依赖于具体的标签或类名,增加了样式和脚本的复杂性。这可能导致代码冗余、难以维护和扩展。
- 代码重复和冗余:由于没有合适的语义化标签,可能会导致开发者在不同页面或部分之间重复编写类似的代码,增加了代码量和冗余。