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 相关文章推荐
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
处理textarea中的换行和空格
Dec 12 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 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 array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
Python中的类学习笔记
2014/09/23 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
python程序封装为win32服务的方法
2021/03/07 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
python全栈开发语法总结
2020/11/22 Python
小孩百日宴答谢词
2014/01/15 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
地球上的星星观后感
2015/06/02 职场文书
卡特教练观后感
2015/06/08 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技