您的位置:首页> 前端教程> HTML教程
文章导航

HTML 语义化布局

2019-4-18 00:54| 作者: admin| 查看: 839| 评论: 0|来自: 蚂蚁部落

本文并不会对HTML语义化布局的具体细节做介绍,而是从宏观角度分析它的必要性。

HTML5标准新增若干语义化标签,随着HTML5的逐渐推广,语义化布局得到越来越多的重视。

当然语义化布局不是HTML5的专利,比如<p>、<h1>或者<h2>等都是语义化标签。

一.语义化布局的目的:

顾名思义,所谓语义化布局就是让标签具有一定的语义。

能够让程序员、搜索引擎或者其他设备能够读懂标签的意义。

HTML的目的是实现页面的布局,即便不遵照语义化原则对于浏览器渲染基本没有影响。

但是语义化布局更具有优势,以至于HTML5标准新增大量语义化标签。

语义化布局优点罗列如下:

(1).语义化布局对于团队开发更为有利,否则难以阅读对方代码。

(2).对于搜索引擎优化具有重要意义,智能的搜索引擎能够从不同的标签中获取不同信息。

(3).方便特殊设备的解析,比如盲人阅读器。

(4).让HTML代码更具有结构化布局。

HTML5之前,语义化布局虽然虽然没有当前灵活,但是语义化布局观念已经被广为接受,且应用于实践。

看一个大家可能都比较熟悉的布局结构:

a:3:{s:3:\"pic\";s:43:\"portal/201904/18/005511d8droy0ygk5qmur5.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

这是HTML5之前常见的布局结构,div标签本身没有任何含义,但通过为期id赋予有意义的值。

上述就是典型的语义化布局思想的应用,对于团队合作开发具有重要意义,搜索引擎可能辨识起来有点困难。

根据以往布局的经验,HTML5标准直接给出了对应的标签,图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/18/005533g0bsuwjeplusyazu.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面是直接使用HTML5新增的标签进行相关布局,搜索引擎等更容易识别。

二.语义化标签的分类:

语义化标签可以分为两大类:|

(1).纯语义化标签,无功能。

(2).具有语义,且具有功能。

header是纯语义化标签,没有其他特殊的功能,datalist标签本身具有语义,且自带一些特殊的功能。

本文不会列举两大类具体包含哪些标签,可以自行在网络上查询,关键在于对概念理解,达到举一反三的目的。

三.HTML布局注意事项:

(1).尽量做到语义化布局,而不是使用无语义的标签。

(2).但是不要误以为div或者span等无语义话标签已经失去意义,在单纯作为容器的场景下十分有用。

(3).如果需要对文本进行强调,那么建议使用<strong>或者<em>,而不是使用<b>或者<i>。

(4).input标签对应的说明文本尽量使用label标签。

(5).如果使用<table>表格,那么尽量发挥表格相关元素的对应作用,比如<th>、<thead>或者<tfoot>。

本文对HTML语义化布局进行了简单的概述,目的是让读者明确语义化布局的意义。

关于HTML5新增语义化标签的使用可以参阅HTML教程板块的相关内容。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部