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实现简易版的刮刮乐效果
Sep 27 HTML / CSS
Css3+Js制作漂亮时钟(附源码)
Apr 24 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
浅析HTML5 meta viewport参数
Oct 28 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 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 at(@)符号的用法简介
2009/07/11 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
跟老齐学Python之折腾一下目录
2014/10/24 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
优秀团员个人的自我评价
2013/10/02 职场文书
优秀毕业生自荐信范文
2014/01/01 职场文书
我的小天地教学反思
2014/04/30 职场文书
幼师求职自荐信
2014/05/31 职场文书
三下乡个人总结
2015/03/04 职场文书
小学生运动会广播
2015/08/19 职场文书
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL