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制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
Html5 audio标签样式的修改
Jan 28 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
详解淘宝H5 sign加密算法
Aug 25 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
我的论坛源代码(四)
2006/10/09 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
python网络编程实例简析
2014/09/26 Python
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
如何用Python徒手写线性回归
2021/01/25 Python
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
某公司的.net工程师面试题笔试题
2013/11/22 面试题
机修工岗位职责
2013/11/24 职场文书
小学生期末自我鉴定
2014/01/19 职场文书
广播节目策划方案
2014/05/23 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
python实现黄金分割法的示例代码
2021/04/28 Python
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js