重学基础和原理 1 - 如何理解 HTML 语义化

简介: 做业务开发时间久了,很多基础的知识慢慢被遗忘,但往往这些基础和原理性的知识才是最重要的,丢不得。

做业务开发时间久了,很多基础的知识慢慢被遗忘,但往往这些基础和原理性的知识才是最重要的,丢不得。

其实这个问题在我们开发的时候根本不会遇到,只会出现在面试中。

那如果是你,你怎么回答呢?

语义化可以这样理解,对比下我们生活中人和人沟通交流,要想更高效的将信息传达出去或者解决问题,就需要想办法表达清楚,要语义明确,有逻辑性。

同样 html 语义化也是为了让计算机和人能更好的读懂和理解。

语义化可以大大的提高代码的可读性,我们平时写的js css 代码肯定不是随意定义变量,而是会取一些有意义的名称,让自己和其他人能更快的读懂,比如 num,size,width,height等。

另外对于搜索引擎也是有好处的,有利于搜索引擎更好的分析网页的内容给你,通过读取内容,分析这些特殊标签,可以判断这段内容的类型和重要性,比如 h1表示的就是页面标题,p 就是段落内容。

当然你可以只使用 div 一个标签来实现整个页面的布局,但是不推荐这样做,这样就完全失去了语义化的意义。另外使用语义化的标签后,即便网页没有样式,依然能保持页面呈现清晰的主次结构,使你的页面可读性较高,如果全用 div,这是完全做不到的。

html 也属于 xml,符合 xml 标准,但html不能自定义标签,而是提供了一些固定的标签,这些固定标签都是有特殊意义的,目的就是为了语义化。

xml

<list>
    <item></item>
<list>

html

<title> 页面标题
<h1> 标题
<p> 段落
<a> 链接
<ul> 无序列表
<ol> 有序列表

到了html5,又增加了很多新标签,语义化更强。

<article>文章
<header>页头
<footer>页脚
<address> 地址
<code>  代码
<menu>  菜单
<nav> 导航
<canvas> 画布
...

比如 b和strong, b 就是表示这段内容加粗,无语义化,一个样式上的处理,,而 strong 虽然也是表示加粗,但它用于强调被包裹的内容在整个html页面的重要性,更具语义化和人性化。

无论从何种角度来说,违背语义化的标签,都应该让它消失在历史的长河之中。

W3C 给我们制定了很好的标准,如果在团队开发中大家都遵循这个标准,就可以大大减少差异化内容,从而方便开发和维护,提高开发效率。

目录
相关文章
|
28天前
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
94 49
|
4月前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
64 0
|
22天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
35 5
|
1月前
|
数据采集 搜索推荐 算法
语义化的 HTML 对 SEO 的好处具体体现在哪些方面?
【10月更文挑战第24天】语义化的 HTML 通过提升搜索引擎对网页的理解能力、优化关键词匹配、增强页面结构清晰度以及提高网站整体质量评估等多个方面,为网站的 SEO 带来了显著的好处,有助于提高网站的可见性、流量和排名,从而实现更好的网络营销效果。
43 2
|
1月前
|
数据采集 搜索推荐 前端开发
html 语义化 1000字
【10月更文挑战第24天】HTML语义化是构建高质量网页的重要基础,它在提高代码可读性、搜索引擎优化、辅助技术支持等方面都发挥着不可替代的作用。开发者应充分理解和运用语义化标签,以创建更具可访问性、可维护性和搜索引擎友好的网页。
41 1
|
3月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
50 1
前端基础(十七)_HTML5新特性
|
2月前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
23 2
|
2月前
|
Web App开发 移动开发 前端开发
【前端基础篇】HTML零基础速通1
【前端基础篇】HTML零基础速通
35 1
|
3月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
177 1
|
4月前
|
移动开发 前端开发 程序员
后端程序员的前端基础-前端三剑客之HTML
后端程序员的前端基础-前端三剑客之HTML
45 9