HTML5 语义化标签(移动端必备)


Posted in HTML / CSS onAugust 23, 2021

距HTML5标准规范制定完成并公开发布已经有好些年了,面试时也少不了要问对HTML5语义化得理解。但是在实际运用时,真正使用HTML5标签来开发的似乎不是很多(ps:查看了几个巨头公司网站推论),可能一部分原因是仍有部分用户使用在使用低版本浏览器。

但是就我个人而言,因选取一些标签时会比较纠结,所以仍使用了div。(PS:正是因为这样,才有了这篇文章的,没错,以后要注意语义化了)

什么是语义化?就是用合理、正确的标签来展示内容,比如h1~h6定义标题。

语义化优点:

易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析,如盲人阅读器根据语义渲染网页
有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。

今天先介绍主体结构标签,如图所示:

HTML5 语义化标签(移动端必备)

1、<header>

<header>定义文档或者文档的部分区域的页眉,应作为介绍内容或者导航链接栏的容器。

在一个文档中,您可以定义多个<header>元素,但需要注意的是<header>元素不能作为<address>、<footer> 或 <header> 元素的子元素。

2、<nav>

<nav>描述一个含有多个超链接的区域,该区域包含跳转到其他页面或页面内部其他部分的链接列表。

在一个文档中,可定义多个<nav>元素。

3、<main>

<main> 定义文档的主要内容,该内容在文档中应当是独一无二的,不包含任何在文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站logo,搜索框(除非搜索框作为文档的主要功能)。

需要注意的是在一个文档中不能出现多个<main>标签。

4、<article>

<article>元素表示文档、页面、应用或网站中的独立结构,是可独立分配的、可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。

当<article>元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。

5、<aside>

<aside> 元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

6、<footer>

<footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

使用footer插入联系信息时,应在 footer 元素内使用 <address> 元素。

注意不能包含<footer>或者<header>

7、<section>

<section>表示文档中的一个区域(或节),比如,内容中的一个专题组。

如果元素内容可以分为几个部分的话,应该使用 <article> 而不是 <section>。
不要把 <section> 元素作为一个普通的容器来使用,特别是当<section>仅仅是为了美化样式或方便脚本使用的时候,应使用<div>。

这几个标签,比较容易混淆的是<section>、<article>,所以这里特别说明:

“Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”

通俗来说就是<article>比<section>更具有独立性、完整性。可通过该段内容脱离了所在的语境,是否完整、独立来判断。

 
HTML / CSS 相关文章推荐
css3中的calc函数浅析
Jul 10 HTML / CSS
CSS3教程(1):什么是CSS3
Apr 02 HTML / CSS
发现两个有趣的CSS3动画效果
Aug 14 HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
Jan 31 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
Sep 25 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 #HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
如何使用 resize 实现图片切换预览功能
Aug 23 #HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 #HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 #HTML / CSS
css3中transform属性实现的4种功能
Aug 07 #HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 #HTML / CSS
You might like
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
wxPython中文教程入门实例
2014/06/09 Python
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
Python 操作MySQL详解及实例
2017/04/30 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
医学检验专业大学生求职信
2013/11/18 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
工程服务质量承诺书
2015/04/29 职场文书