对HTML语义化的一些理解和记录
什么是HTML语义化
说HTML语义化就要先说说HTML到底负责的什么?下面摘自维基百科:
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
HTML元素是构建网站的基石。HTML允许嵌入图像与对象,并且可以用于创建交互式表单,它被用来结构化信息——例如标题、段落和列表等等,也可用来在一定程度上描述文档的外观和语义。
关于对于语义化的理解顾轶灵:如何理解 Web 语义化?这里讲的很清楚了我就简单说一下我的理解:
通俗的来讲就是从代码上来展示页面的结构,而不是从最终视觉上来展示结构。单纯的HTML代码是不带任何样式的只是用来标记这一段是标题、这一块是代码、那一个是要强调的内容等等,但是为什么我们只写HTML在浏览器中不同的标签也是有不同的样式呢?那是因为各个浏览器都自带的有相应标签的默认样式,为了方便在没有设定样式的情况下友好的展示页面。
良好的语义化代码可以直接从代码上就能看出来那一块到底是要表达什么内容。
为什么要使用HTML语义化标签
为什么要使用语义化标签?我用DIV+CSS也能做出来一样的效果,确实单纯看效果两者并没有什么区别,但是页面不止是给人看的,机器也要看爬虫也要看。
网页结构更清晰方便开发维护:
另外,在网络或其他原因页面样式文件丢失的时候,满是div组成的页面和良好语义结构组成的页面那个对用户更友好?
优点
- 标签语义化有助于构架良好的HTML结构,有利于搜索引擎的建立索引、抓取。简单来说,试想在H1标签中匹配到的关键词和在div中匹配到的关键词搜索引擎会吧那个结果放在前面。
- 有利于不同设备的解析(屏幕阅读器,盲人阅读器等)满是div的页面这些设备如何区分那些是主要内容优先阅读?
- 有利于构建清晰的机构,有利于团队的开发、维护。
大厂都是怎么做的?
看一下大厂的操作,打开淘宝的页面查看它首页的源码发现,全局只有一个h1标签就是他的LOGO。
再往下看主题分栏的标题是h2
再往下看,分栏都是用的h3标签,并且内部使用了一个隐藏的<em></em>
专门强调处理。
尽管这些东西都是用div+css就能搞出来的,但是它还是专门使用了相应的语义化标签来强调作用。
写语义化代码应该注意什么
- 尽可能少的使用无语义的标签div和span;在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
- 不要使用纯样式标签,如:b、font、u等,改用css设置。需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);
- 使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
- 表单域要用fieldset标签包起来,并用legend标签说明表单的用途;每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
常用的一些语义化标签
<h1>
~<h6>
,作为标题使用,并且依据重要性递减,<h1>
是最高的等级。<p>
段落标记,知道了<p>
作为段落,你就不会再使用<br />
来换行了,而且不需要<br />
来区分段落与段落。<p>
中的文字会自动换行,而且换行的效果优于<br />
。段落与段落之间的空隙也可以利用 CSS 来控制,很容易而且清晰的区分出段落与段落。<ul>
、<ol>
、<li>
,<ul>
无序列表,这个被大家广泛的使用,<ol>
有序列表不常用。在 Web 标准化过程中,<ul>
还被更多的用于导航条,本来导航条就是个列表,这样做是完全正确的,而且当你的浏览器不支持 CSS 的时候,导航链接仍然很好使,只是美观方面差了一点而已。<dl>
、<dt>
、<dd>
,<dl>
就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。dl不单独使用,它通常与dt和dd一起使用。dl开启一个定义列表,dt表示要定义的项目名称,dd表示对dt的项目的描述。<em>
、<strong>
,<em>
是用作强调,<strong>
是用作重点强调。<table>
、<thead>
、<tbody>
、<td>
、<th>
、<caption>
, 就是用来做表格不要用来布局
HTML5新增的那些
HTML5标准更加的讲究语义化了,借用一张网上的图来说明这些新标签
header元素
:header 元素代表“网页”或“section”的页眉。footer元素
:footer元素代表“网页”或“section”的页脚,通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。hgroup元素
:nav元素
:nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。aside元素
:aside元素被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。(特殊的section)section元素
:section元素代表文档中的“节”或“段”,“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组。section通常还带标题,虽然html5中section会自动给标题h1-h6降级,但是最好手动给他们降级。article元素
:article元素最容易跟section和div容易混淆,其实article代表一个在文档,页面或者网站中自成一体的内容,其目的是为了让开发者独立开发或重用。譬如论坛的帖子,博客上的文章,一篇用户的评论,一个互动的widget小工具。(特殊的section)除了它的内容,article会有一个标题(通常会在header里),会有一个footer页脚。
推荐看原博主的博客:传送门
参考链接
对HTML语义化的一些理解和记录的更多相关文章
- 关于HTML语义化的一些理解
语义化这个词我想大家都看到了无数次,特别是在一些招聘广告上. 其实我自己也是,不过每次看到都觉得是那些招聘公司复制的,其实他们根本说不清语义化是什么,而且也根本不看重. 所以我一直也没把这东西当回事过 ...
- 谈谈对HTML语义化的理解
什么是HTML语义化? HTML标签可以分为有语义的标签,和无语义的标签.比如table表示表格,form表示表单,a标签表示超链接,strong标签表强调.无语义标签典型的有<div>, ...
- 你如何理解HTML结构的语义化?
去掉或样式丢失的时候能让页面呈现清晰的结构: html本身是没有表现的,我们看到例如<h1>是粗体,字体大小2em,加粗:<strong>是加粗的,不要认为这是html的表现, ...
- 快速理解web语义化
什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预 ...
- 前端经典面试题:如何理解 HTML 语义化?
本文最初于 2018-09-21 发布于 知乎 ,后在 <重学前端> 专栏的学习中,重新复习整理,发布于 Github 上,并计划写一系列前端学习相关的文章.欢迎 star . HTML ...
- 【02】你是如何理解 HTML 语义化的,有什么好处
[02]你是如何理解 HTML 语义化的 01,语义化,就是通过HTML标签来表示页面包含的信息. 02,其中有HTML标签的语义化和CSS命名的语义化. 03,HTML标签语义化的的含义是: ...
- web语义化理解
含义: Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解. 为什么要web语义化?如今互联网都到了web2.0的时代了,HTML语言在不断的进化并发 ...
- 谈谈你对HTML语义化的理解。
1.什么是HTML语义化? 基本上都是围绕着几个主要的标签,像标题(h1-h6),列表(li),强调(strong em)等. 根据内容的语义化(内容结构化),选择合适的标签(代码语义化),便于开发者 ...
- 对 HTML 语义化的理解
简述一下你对 HTML 语义化的理解? 用正确的标签做正确的事情. html 语义化让页面的内容结构化,结构更清晰,便于对浏览器.搜索引擎解析; 即使在没有样式 CSS 情况下也以一种文档格式显示,并 ...
随机推荐
- ionic 创建服务命令
创建Util工具库 ionic g provider Util
- day08-内置函数和匿名函数
1. 1)网络编程只能是二进制.2)照片和视频也是以二进制储存. 3)html网页爬取到的也是二进制编码. 2. 非常重要的4个内置函数:zip ,filter,map,sorted 1)zip: 例 ...
- 代码死循环导致cpu使用率过高
1. top命令查看进程pid 27081 2. ps -mp pid -o THREAD,tid,time (tid:31128) 3.printf “%x\n” number #将tid转换 ...
- Datagridview 实现二维表头和行合并
借鉴别人的,改了改,没用timer using System;using System.Collections.Generic;using System.ComponentModel;using Sy ...
- JS创建数组的三种方法
1 常规方式 创建数组并给数组元素赋值 var myCars = new Array(); myCars[0] = "Saab"; myCars[1] = "Vo ...
- elasticsearch ik中文分词器的使用详解
(基于es5.4)先喵几眼github,按照步骤安装好分词器 link:https://github.com/medcl/elasticsearch-analysis-ik 复习一下常用的操作 .查看 ...
- 5-6 学生CPP成绩计算
给出下面的人员基类框架: class Person { protected: string name; int age; public: Person(); Person (string p_name ...
- 零基础学习Web前端开发
目录 技术背景 开发环境 学习过程 参考资料 结束语 技术背景 什么是前端开发? 前端开发是创建Web页面或App等将界面呈现给用户的过程.通过使用 HTML,CSS,JavaScript,以及它们衍 ...
- JavaScript学习总结(一)基础部分
转自:http://segmentfault.com/a/1190000000652749 基本概念 javascript是一门解释型的语言,浏览器充当解释器. js执行引擎并不是一行一行的执行,而是 ...
- jenkins使用(1)
术语:构建一次job指的是执行一次任务 注:到了公司,如果需要搭建jenkins环境可以找运维 jenkins使用: 创建视图 常用的两个配置: 新建任务: 可以选择构建后的步骤: 然后保存 图标状态 ...