详解HTML5常用的语义化标签


Posted in HTML / CSS onSeptember 27, 2019

快速查询

article | aside | nav | section | header | footer

架构预览

详解HTML5常用的语义化标签

nav 定义导航链接的部分

在页脚显示一个站点的导航链接,如首页、服务信息页面、版权信息页面等

<nav>
    <ul>
       <li><a href=”#”>Home</a></li>
       <li><a href=”#”>CSS</a></li>
       <li><a href=”#”>Html5</a></li>
    </ul>
</nav>

article 定义文章

装载显示一个独立的文章内容,论坛帖子、新闻、博客文章、用户评论等,artilce可以嵌套,则内层的artilce对外层的article标签有隶属的关系。

<article>
    <h1>标题</h1>
    <p> 内容</p>
    <article>用户评论</article>
    <article>回复评论</article>
</article>

section 定义文档中的节

章节、页眉、页脚或文档中的其他部分,

<section>
   <h1>标题1</h1>
   <p>内容1</p>
</section>
<section>
   <h1>标题2</h1>
   <p>内容2</p>
</section>

aside 定义文章的侧栏

广告,成组的内容,友情链接,侧边栏等

<aside>
     <h1> 侧栏标题1</h1>
     <p>这是侧栏内容1</p>
</aside>
<aside>
     <h1> 侧栏标题2</h1>
     <p>这是侧栏内容3</p>
</aside>

header 定义文档的页眉

通常是一些引导和导航信息

<header> 
     <p>logo</p> 
     <nav>
          <ul>
               <li>Home</li>
               <li>Html5</li>
          </ul>
     </nav> 
</header>

footer 定义文档或节的页脚

在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息

<footer> 
  <p>© 2019 All Rights Reserved. </p>
</footer>

参考文献

1 html5 | http://caibaojian.com/html5
2 w3school | https://www.w3school.com.cn/
3 MDN | https://developer.mozilla.org/zh-CN/docs/Web/HTML/

下面是其它网友的补充

百度 IFE 任务一要求构建一个页面结构,看似简单,但需充分考虑到语义化。这篇文章简单谈谈 HTML5 语义化中的页面结构语义化的一些经验和理解。

1、为什么需要语义化

易修改、易维护。
无障碍阅读支持。
搜索引擎友好,利于 SEO。
面向未来的 HTML,浏览器在未来可能提供更丰富的支持。

2、结构语义化

语义元素均有一个共同特点——他们均不做任何事情。换句话说,语义元素仅仅是页面结构的规范化,并不会对内容有本质的影响。

下图展示了一个典型的页面结构。

详解HTML5常用的语义化标签

头部

<header>元素有两种用法,第一是标注内容的标题,第二是标注网页的页眉,如上图你看到的那样。除非必要(内容标题附带其它信息的情况下:发布时间、作者等),一般不在内容中使用<header>。因而,网页中可以包含多个<header>元素。按照 HTML5 的规定,<header>都应包含某个级别的标题,所以应隐式或显式地包含标题,通常将不希望显示的标题设置为display: none;,一方面遵守规范,另一方面则提供了无障碍阅读而不至于影响到页面设计。

导航栏

导航栏使用<nav>看起来是理所当然的,进一步,它也用于一组文章的链接。一个页面可以包含多个<nav>元素,但通常仅仅在页面的主要导航部分使用它。
《HTML5:The Missing Manual》中指出了在侧栏使用<nav>标签的两个案例:

<!-- 案例一 -->
<nav>
  <!-- 此处是链接 -->
  <aside></aside>
  <aside></aside>
</nav>

<!-- 案例二 -->
<aside>
  <nav>
    <!-- 此处是链接 -->
  </nav>
  <section></section>
  <div></div>
</aside>

如果侧栏中包含其它不同于链接的其它区块,那么,使用第二种方案显然更为合适。

导航通常包含一组链接,普遍认为,链接使用列表来组织。

<nav>
  <ul>
    <li><a href="#" title="链接">链接</a></li>
    <li><a href="#" title="链接">链接</a></li>
    <li><a href="#" title="链接">链接</a></li>
  </ul>
</nav>

附注

<aside>元素并不仅仅是侧栏,它表示与它周围文本没有密切关系的内容。文章中同样可以使用<aside>元素,来说明文章的附加内容、解释说明某个观点、相关内容链接等等。

<aside>用于侧栏时,其表示整个网页的附加内容。通常的广告区域、搜索、分享链接则位于侧栏。侧栏中的<section>元素规定了一个区域,通常是带有标题的内容。

<section>标签适合标记的内容区块:

与页面主体并列显示的小内容块。
独立性内容,清单、表单等。
分组内容,如 CMS 系统中的文章分类区块。
比较长文档的一部分,可能仅仅是为了正确规定页面大纲。
<div>标签依然是可用的,当你觉得使用其它标签都不太合适的时候。新的语义元素出现之前,我们总是这么干的!

页脚

同可“包罗万象”的<header>元素不同,标准规定<footer>标签仅仅可以包含版权、来源信息、法律限制等等之类的文本或链接信息。如果想要在页脚中包含其它内容,可以使用熟悉的<div>来帮忙。

<div>
  <aside>
  <!-- 其它内容 -->
  </aside>
  
  <footer>
    <!-- 法律、版权、来源、联系信息等 -->
  </footer>
</div>

主要内容

在早先的 HTML5 版本中并没有规定页面主体的标签,相关的书中经常会说:除去头部、尾部、侧栏等其它部分,剩下的自然是主体部分。

然而,HTML5.1 中规定了一个<main>标签来标识主体内容。<main>标签不能包含在页面其它区块元素中,通常是<body>的子标签,或者是全局<div>的子标签。<main>标签可以帮助屏幕阅读工具识别页面的主体部分,从而让访问者迅速得到有用的信息。

文章

<article>表示一个完整的、自成一体的内容块。如文章或新闻报道。<article>应包含完整的标题、文章署名、发布时间、正文。当语义与表现发生冲突,例如有时需要将文章分多个页面显示,那么需要把每个页面的文章区域都用<article>标记。

文章中包含插图时,使用新的语义元素<figure>标签。

<article>
  <h1>标题</h1>
  <p>
    <!-- 内容 -->
  </p>
  <figure>
    <img src="#" alt="插图">
    <figcaption>这是一个插图</figcaption>
  </figure>
</article>

上述情况下,<figcaption>包含了关于插图的详细解释,则<img>alt属性可以略去。

总结

以上所述是小编给大家介绍的HTML5常用的语义化标签,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
CSS3结构性伪类选择器九种写法
Apr 18 HTML / CSS
css3隔行变换色实现示例
Feb 19 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 #HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 #HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 #HTML / CSS
html2canvas截图空白问题的解决
Mar 24 #HTML / CSS
html5视频常用API接口的实战示例
Mar 20 #HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 #HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 #HTML / CSS
You might like
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
Win10下Python环境搭建与配置教程
2016/11/18 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
耐克亚太地区:Nike APAC
2019/12/07 全球购物
工商管理实习自我鉴定
2013/09/28 职场文书
毕业生教师求职信
2013/10/20 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
建筑投标担保书
2014/05/20 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
2014年卫生工作总结
2014/11/27 职场文书
护士节慰问信
2015/02/15 职场文书
辞职信的写法
2015/02/27 职场文书