专栏首页前端知识分享第85天:HTML5语义化标签

第85天:HTML5语义化标签

一、语义标签

语义标签对于我们并不陌生,如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等,在此基础上HTML5增加了大量更有意义的语义标签,更有利于搜索引擎或辅助设备理解HTML页面内容。

传统的做法我们或许通过增加类名如class="header"、class="footer",使HTML页面具有语义性,但是不具有通用性。

HTML5则是通过新增语义标签的形式来解决这个问题,例如<header></header>、<footer></footer>等,这样就可以使其具有通用性。

此学习目的为了解增加语义标签的目的,以及各语义标签所表达的意义,在网页布局中能够合理使用标签。

传统网页布局:

 <!-- 头部 --> <div class="header">     <ul class="nav"></ul> </div>       <!-- 主体部分 -->       <div class="main">          <!-- 文章 -->       <div class="article"></div>       <!-- 侧边栏 -->       <div class="aside"></div>       </div>        <!-- 底部 -->       <div class="footer"></div>

H5 经典网页布局:

<!-- 头部 -->   <header>        <ul class="nav"></ul>    </header> <!-- 主体部分 --> <div class="main">    <!-- 文章 -->  <article></article>    <!-- 侧边栏 -->    <aside></aside> </div> <!-- 底部 --> <footer></footer>

二、常用新语义标签

<nav> 表示导航

<header> 表示页眉

<footer> 表示页脚

<section> 表示区块

<article> 表示文章 如文章、评论、帖子、博客

<aside> 表示侧边栏 如文章的侧栏

<figure> 表示媒介内容分组 与 ul > li 做个比较

<mark> 表示标记 (带用“UI”,不怎么用)

<progress> 表示进度 (带用“UI”,不怎么用)

<time> 表示日期

本质上新语义标签与<div>、<span>没有区别,只是其具有表意性,使用时除了在HTML结构上需要注意外,其它和普通标签的使用无任何差别,可以理解成<div class="nav"> 相当于 <nav>。不要好奇,它只是一个标签!

尽量避免全局使用header、footer、aside等语义标签。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第33天:封装自己的class类

    半指温柔乐
  • Vue入门---常用指令详解

    Vue是一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单、易学上手快,近两年也也别流行,发展速度较快,已...

    半指温柔乐
  • 第8天:CSS制作导航栏

    今天主要学习了网页导航栏的制作。注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹...

    半指温柔乐
  • CSS3 animation动画 - 转风车、loding加载、人物走路等示例

    1、@keyframes 定义关键帧动画 2、animation-name 动画名称 3、animation-duration 动画时间 4、animat...

    Devops海洋的渔夫
  • 即使不懂单元测试,会用这个工具也够了~

    Mockito 是一个强大的用于 Java 开发的模拟测试框架, 通过 Mockito 我们可以创建和配置 Mock 对象, 进而简化有外部依赖的类的测试.可以...

    测试小兵
  • 行业 | 我的数据科学成果为什么无法商业化?

    大数据文摘
  • TiPrometheus:基于 TiDB 的 TSDB | TiDB Hackathon 2018 优秀项目分享

    既然你关注了 TiDB, 想必你一定是个关注 Infrastructure 的硬汉(妹)子。监控作为 Infra 不可或缺的一环,其核心便是 TSDB(time...

    PingCAP
  • 添加gitignore文件

    JavaEdge
  • 机器学习面试的12个基础问题,强烈推荐!

    这些问题是我在面试 AI 工程师岗位时常问到的问题。事实上,并非所有面试都需要用到所有这些问题,因为这取决于面试者的经验以及之前做过的项目。经过很多面试(尤其是...

    Sam Gor
  • 应聘机器学习工程师?这是你需要知道的12个基础面试问题

    这些问题是我在面试 AI 工程师岗位时常问到的问题。事实上,并非所有面试都需要用到所有这些问题,因为这取决于面试者的经验以及之前做过的项目。经过很多面试(尤其是...

    机器之心

扫码关注云+社区

领取腾讯云代金券