HTML语义化的理解

简介: HTML语义化的理解

话不多说,开门见山。想了解html语义化的伙伴,首先需要对html有基础的认识,那么什么是html呢?html是超文本标记语言,它的设计初衷是为了让网页开发更加简单和易于维护,所以html的任务就是定义网页的基本结构和内容。有点类似于建模的骨架,人体的骨架等。


一、什么是html语义化?


       官方解释:html语义化是指用合理的html标记以及其特有的属性去格式化文档内容。


       通俗的讲:就是用合理、正确的标签来展示内容。(标签指一种标记方式,如<title>,表示标题信息;也可以理解为人体骨架的某一块骨头,专属名称叫什么)。


二、为什么需要语义化?


       1)易读,易书写,易理解(多数情况,标签英文翻译的含义就是其功能含义);


       2)利于SEO搜索:语义化可以和搜索引擎建立良好的联系,有利于爬虫抓取有效信息;因为爬虫依赖于语义化标签来确定上下文和各个关键字的权重。


       3)易于跨设备解析,进而完成渲染网页(如屏幕阅读器、盲人阅读器、移动设备);


       4)利于规范化:方便团队开发和维护,也遵循W3C规范。


三、语义化的基本标签?


       使用这些常见标签,即可构建没有css的页面。


       1)语义结构标签


307574c1b3dd4894ad7c11dff29cdabb.jpg

 2)基本标签


       <title>:页面主体内容。

       <hn>:h1~h6,分级标题,<h1> 与 <title> 协调有利于搜索引擎优化。

       <ul>:无序列表。

       <li>:有序列表。

       <main>:页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能。

       <small>:呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权。

       <strong>:和 em 标签一样,用于强调文本,但它强调的程度更强一些。

       <em>:将其中的文本表示为强调的内容,表现为斜体。

       <mark>:使用黄色突出显示部分文本。

       <figcaption>:定义 figure 元素的标题,应该被置于 figure 元素的第一个或最后一个子元素的位置。

       <cite>:表示所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。

       <blockquoto>:定义块引用,块引用拥有它们自己的空间。

       <q>:短的引述(跨浏览器问题,尽量避免使用)。

       <time>:datetime属性遵循特定格式,如果忽略此属性,文本内容必须是合法的日期或者时间格式。

       <abbr>:简称或缩写。

       <dfn>:定义术语元素,与定义必须紧挨着,可以在描述列表dl元素中使用。

       <address>:作者、相关人士或组织的联系信息(电子邮件地址、指向联系信息页的链接)。

       <del>:移除的内容。

       <ins>:添加的内容。

       <code>:标记代码。

       <meter>:定义已知范围或分数值内的标量测量。(Internet Explorer 不支持 meter 标签)

       <progress>:定义运行中的进度(进程)。


四、编写代码过程中应注意些什么?


       编写代码应尽量使用语义化标签(虽然实际不是);


       1)内联标签之间的空格,内联元素会去掉头部和尾部的空白字符;


       2)body标签默认的margin边框,如margin: 0;


       3)尽可能少的使用没有语义的div和span元素。


       4)在对语义要求不明显时,技能使用div也能使用p,那就使用p,以为p默认有上下边距,可以兼容特殊终端。


       5)不要使用纯样式标签,如:b、font、u等,改用css设置。


       6)需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b,因为没语义),em是斜体(不用i同b)。


       7)使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头标题用th,内容单元格用td。


五、html5新增了哪些语义化标签?


       1)结构化标签:


       <header>:头部标签 ;<nav>:导航标签 ;<article>:内容标签 ;<section>:定义文档某个区域; <aside>:侧边栏标签 ;<footer>:尾部标签;


       2)多媒体标签:


       *音频标签:audio; <video src="文件地址" controls="controls"></video>


b1187b3bf4154bd9b8ccf34d6efc4b82.png

  *视频标签:video;<video src="文件地址" controls="controls"></video>


85d9e7581ebf4235bdf65883bd826fb8.png



相关文章
|
6月前
|
移动开发 搜索推荐 HTML5
如何使用HTML5的语义化标签来提高网站的可访问性?
【4月更文挑战第1天】如何使用HTML5的语义化标签来提高网站的可访问性?
80 1
|
移动开发 前端开发 搜索推荐
详解一下HTML的语义化标签
详解一下HTML的语义化标签
|
数据采集 搜索推荐 前端开发
HTML语义化 —— 定义网页的语义
HTML语义化 —— 定义网页的语义
40 0
|
3月前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
53 0
|
17天前
|
数据采集 搜索推荐 算法
语义化的 HTML 对 SEO 的好处具体体现在哪些方面?
【10月更文挑战第24天】语义化的 HTML 通过提升搜索引擎对网页的理解能力、优化关键词匹配、增强页面结构清晰度以及提高网站整体质量评估等多个方面,为网站的 SEO 带来了显著的好处,有助于提高网站的可见性、流量和排名,从而实现更好的网络营销效果。
33 2
|
17天前
|
数据采集 搜索推荐 前端开发
html 语义化 1000字
【10月更文挑战第24天】HTML语义化是构建高质量网页的重要基础,它在提高代码可读性、搜索引擎优化、辅助技术支持等方面都发挥着不可替代的作用。开发者应充分理解和运用语义化标签,以创建更具可访问性、可维护性和搜索引擎友好的网页。
31 1
|
3月前
|
移动开发 搜索推荐 开发者
HTML5结构元素深解语义化 div、section、article
HTML5结构元素深解语义化 div、section、article
|
4月前
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
252 0
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
|
5月前
|
移动开发 定位技术 HTML5
HTML5的新语义化标签
HTML5的新语义化标签
48 0
|
6月前
|
移动开发 搜索推荐 UED
HTML标签的语义化:为何重要及其实践
HTML标签的语义化:为何重要及其实践
78 0