h5 语义话标签的意义
使用语义话标签的意义
语义类标签对开发者更为友好,使用语义类标签增强了可读性,即便是在没有 CSS 的时 候,开发者也能够清晰地看出网页的结构,也更为便于团队的开发和维护。
除了对人类友好之外,语义类标签也十分适宜机器阅读。它的文字表现力丰富,更适合 搜索引擎检索(SEO),也可以让搜索引擎爬虫更好地获取到更多有效信息,有效提升
网页的搜索量,并且语义类还可以支持读屏软件,根据文章可以自动生成目录等等。
对于语义标签的态度是:“用对”比“不用”好,“不用”比“用错”好。
常用标签集合:
header: 通常出现在前部,表示导航或者介绍性的内容
nav: 定义导航链接的部分
footer: 通常出现在尾部,包含一些作者信息、相关链接、版权信息等。
section: 代表某一个区域,分区,页面或者文档的一部分区域,有独立的内容,但结构相近,就可以用section,范围比div大,语义比div更强,可以包含header、h1-h6……凸显语义的标签
hgroup: 用于对网页或区段(section)的标题进行组合
eg:
<section>
<hgroup>
<h1>this is h1 of my article</h1>
<h2>this is h2 of my article</h2>
</hgroup>
<p>The rest of the content...</p>
</section>
article:定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章、或者来自 blog 的文本、或用户评论、或者是来自论坛的文本。亦或是来自其他外部源内容。
aside: 表示跟文章主体不那么相关的部分,它可能包含导航、广告等工具性质的内容,很容易被理解为侧边栏,实际上二者是包含关系,侧边栏是 aside,aside 不一定是 侧边栏。
time: 定义日期或时间,或者两者。
video: 定义视频,比如电影片段或其他视频流.
canvas: 定义图形,比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
audio: 定义声音,比如音乐或其他音频流。
address:表示“文章(作者)的联系方式“
datalist:定义可选数据的列表。与 input 元素配合使用,就可以制作出输入值的下拉列表。
details: 用于描述文档或文档某个部分的细节
summary: 包含 details 元素的标题,”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素
h5 语义话标签的意义的更多相关文章
- 笔记二:常用的h5语义化标签
0.前言: 所谓语义化标签就是一种 我们仅通过标签名就能判断出该标签内容的语义的标签,见名知意. 总结这部分内容,主要是为了能从繁琐的div嵌套div中,改成带有h5标签码.这样更有利于读写代码. 人 ...
- H5中的语义化标签
H5中的语义化标签也就是之前的id = “header”演变而来的 只不过之前是id 现在变成了标签而已 什么是语义化: 根据内容结构化(内容语义化) 选择合适的标签(代码语义化) 便于开发者阅读和写 ...
- H5新增特性之语义化标签
H5新增特性之语义化标签 语义化标签顾名思义标签有自己的含义,浏览器或者程序员一看就知道是什么.在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式 ...
- h5新增html标签语义
H5新增常用标签<body> <header>...</header> <nav>...</nav> <article> < ...
- H5的语义化标签(PS: 后续继续补充)
头部信息 <header></header> 区块标签 <figure> <figcaption>123</figcaption> < ...
- H5新特性之语义化标签
一.为什么要增加新的语义化标签 在HTML 5出来之前,我们用div来表示章节,但是这些div都没有实际意义,这样的布局方式使我们的结构不够清晰,于是语义化标签应运而生. 二.何为语义化标签 顾名思义 ...
- html5语义化标签使用规范
Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...
- H5 语义化、基本事件 浅析 (含file对象、drag拖拽等)
1.语义化标签 帮助搜索引擎,盲人设备等程序,辨识网页内容信息,明确网页区域分布,不体现任何样式,但存在浏览器兼容性问题,如IE8下无<header>标签. ① H5基本语义标签: < ...
- HTML5 结构性标签 行内语义性标签
结构性标签: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...
随机推荐
- 想要搭建个论坛?Guide哥调研了100来个 Java 开源论坛系统,发现这 5 个最好用!
大家好!我是 Guide 哥,Java 后端开发.一个会一点前端,喜欢烹饪的自由少年. 最近有点小忙.但是,由于前几天答应了一位读者自己会推荐一些开源的论坛系统,所以,昨晚就简单地熬了个夜,对比了很多 ...
- 数据库图形表Navicat Premium
1.什么是数据库? 存储数据,为了方便查询和使用 web时代使用最广泛的关系型数据库 2.历史: 瑞典公司开发,卖给SUN,SUN又卖给ORACLE 开源,免费,支持多平台 3.数据库图形表Navic ...
- Apollo系列(二):Apollo在ASP.NET Core 3.1中使用
关于Apollo怎么安装,我就不介绍,可以看这篇文章:https://www.cnblogs.com/vic-tory/p/13736192.html 一.Apollo使用: 1.创建项目 2.添加配 ...
- selenium3介绍
1. 简介 Selenium是用于测试 Web应用程序用户界面 (UI)的常用框架.它是一款用于运行端到端功能测试的超强工具.您可以使用多个编程语言编写测试,并且 Selenium能够在一个或多个浏 ...
- 你不可不知的WEB安全知识(第一部分:HTTPS, TLS, SSL, CORS, CSP)
译 原文地址:https://dev.to/ahmedatefae/web-security-knowledge-you-must-understand-it-part-i-https-tls-s ...
- Java知识系统回顾整理01基础05控制流程04 for
一.for 比较for和while public class HelloWorld { public static void main(String[] args) { //使用while打印0到4 ...
- 总线SPI的Arduino库函数
来源参考:https://www.cnblogs.com/MyAutomation/p/9348480.html 总线SPI的Arduino库函数 SPI基本知识 SPI:高速同步串行口.是一种标准的 ...
- DES加解密算法(C语言实现)
DES加密和解密算法的实现(C语言) 主要是做个记录,害怕以后代码丢了,先放到这里了. DES再不进行介绍了,可以看上一篇的 DES 的python实现 转载请注明出处:https://www.cnb ...
- 《穷查理年鉴》贪嗔痴 & 懒贪装(关于败坏)
贪嗔痴 & 懒贪装 1)伤害 041.仇恨加重伤害,漠视消除伤害. 042.90%的伤害是自己造成的. 044.伤害你的敌人使你比他更低下;仇恨使你和他一样;宽恕才能让你超越他. 109.让仇 ...
- AD(Altium Designer)PCB布线中的“格式刷”,助力快速布局布线
摘要:在AD(Altium Designer)进行电路板布线时,孔丙火(微信公众号:孔丙火)经常会碰到电路中有相同功能的模块,比如2路相同的RS485通信电路.多路相同继电器输出电路.多路相同的输入电 ...