HTML语义化标签

1 什么是语义化标签？

通过标签判断内容语义，例如根据h1标签判断出内容是标题，根据 p 判断内容是段落、input 标签是输入框等。

2 为什么要标签语义化？

1.搜素引擎友好

2.更容易让屏幕阅读器读出网页内容

3.去掉或者丢失样式的时候能让页面呈现出清晰地结构

4.便于团队开发和维护

3 常用语义化的标签有哪些？

3.1 title

title 元素可定义文档的标题。

浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。

<html>

  <head>

    <title>XHTML Tag Reference</title>

  </head>

  <body>

    The content of the document......

  </body>

</html>

3.2 header

header 标签定义文档的页眉（介绍信息）。

<header>

<h1>Welcome to my homepage</h1>

<p>My name is Donald Duck</p>

</header>

<p>The rest of my home page...</p>

3.3 nav

nav 标签定义导航链接的部分。

<nav>

<a href="index.asp">Home</a>

<a href="html5_meter.asp">Previous</a>

<a href="html5_noscript.asp">Next</a>

</nav>

3.4 main

main 标签规定文档的主要内容。

main 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。

注释：在一个文档中，不能出现一个以上的 main 元素。main 元素不能是以下元素的后代：article、aside、footer、header 或 nav。

<main>

  <h1>Web Browsers</h1>

  <p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>

</main>

3.5 progress

progress标签标示任务的进度（进程）。

<progress value="22" max="100"></progress>

3.6 pre

可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。pre 标签的一个常见应用就是用来表示计算机的源代码。

<pre>

&lt;html&gt;

&lt;head&gt;

  &lt;script type=&quot;text/javascript&quot; src=&quot;loadxmldoc.js&quot;&gt;

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

  &lt;script type=&quot;text/javascript&quot;&gt;

    xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>(&quot;books.xml&quot;);

    document.write(&quot;xmlDoc is loaded, ready for use&quot;);

  &lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;

</pre>

3.7 footer

footer 标签定义文档或节的页脚。

footer 元素应当含有其包含元素的信息。

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

您可以在一个文档中使用多个 footer 元素。

<footer>

  <p>Posted by: W3School</p>

  <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>

</footer>

3.8 aside

aside 标签定义其所处内容之外的内容。

aside 的内容应该与附近的内容相关。

<p>Me and my family visited The Epcot center this summer.</p>

<aside>

<h4>Epcot Center</h4>

The Epcot Center is a theme park in Disney World, Florida.

</aside>

3.9 section

section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<section>

  <h1>PRC</h1>

  <p>The People's Republic of China was born in 1949...</p>

</section>

3.10 article

article 标签规定独立的自包含内容。

一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。

<article>

  <h1>Internet Explorer 9</h1>

  <p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>

</article>

本文部分内容摘自w3school

(2) html 语义化的更多相关文章

  1. 关于HTML语义化的一些理解

    语义化这个词我想大家都看到了无数次,特别是在一些招聘广告上. 其实我自己也是,不过每次看到都觉得是那些招聘公司复制的,其实他们根本说不清语义化是什么,而且也根本不看重. 所以我一直也没把这东西当回事过 ...

  2. html5语义化标签使用规范

    Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...

  3. HTML5的新语义化的标签

    在HTML5之前采用HTML+CSS文档结构写法 [ID选择器说明 id选择器——用于标识页面上特定元素(比如站点导航.页眉.页脚)而且必须唯一; 也可以用来标识持久结构性元素(如主导航.内容区域)] ...

  4. 理解HTML语义化

    1.什么是HTML语义化? <基本上都是围绕着几个主要的标签,像标题(H1~H6).列表(li).强调(strong em)等等> 根据内容的结构化(内容语义化),选择合适的标签(代码语义 ...

  5. HTML 语义化之b_i_em_strong

    默认效果 i和em都是斜体.b和strong都是加粗. 语义区别: em 和 strong 分别表示句中强调和全局加重强调 搜索引擎中更受重视,一些语音阅读器也会根据它在阅读时加强语气. i 和 b ...

  6. 如何让你的JavaScript代码更加语义化

    语义化这个词在 HTML 中用的比较多,即根据内容的结构化选择合适的标签.其作用不容小觑: 赋予标签含义,让代码结构更加清晰,虽然我们可以在标签上添加 class 来标识,但这种通过属性来表示本体的形 ...

  7. 浅谈web语义化

    在前端的编程道路上,是否听过html的结构语义化? 是否觉得自己前端嘛,只要做出炫酷的效果,编写出牛逼的JavaScript代码就ok啦.div+css所向无敌,干嘛要用其他标签呢. 是啊,正如上面所 ...

  8. Html标签的语义化

    为了使我们的网站更好的被搜索引擎抓取收录,更自然的获得更高的流量,网站标签的语义化就显得尤为重要.所谓标签语义化,就是指标签的含义. 为了更好的理解标签的语义化,先看下面这个例子: 1 <tab ...

  9. 谈谈对HTML语义化的理解

    什么是HTML语义化? HTML标签可以分为有语义的标签,和无语义的标签.比如table表示表格,form表示表单,a标签表示超链接,strong标签表强调.无语义标签典型的有<div>, ...

  10. Web语义化

    在昨天和做SEO的同学聊了一会儿,当然我没有学会搜索引擎优化的技巧和知识,但在此之前一直对HTML5中header.footer.sidebar.article等标签嗤之以鼻,觉得这个和div没有什么 ...

随机推荐

  1. 【TIDB】4、业界使用情况

    一.小米 1.背景 小米关系型存储数据库首选 MySQL,单机 2.6T 磁盘.由于小米手机销量的快速上升和 MIUI 负一屏用户量的快速增加,导致负一屏快递业务数据的数据量增长非常快, 每天的读写量 ...

  2. springCloud学习总览

      写完最后一篇特意去看了看第一篇是什么时候写的---2018/11/19,到现在三个月多一点,总的来说这三个月通过<Spring 微服务实战>这本书,算是对微服务进行了一次扫盲学习.   ...

  3. HTTPRunner实践二——参数化之生成UUID

    接口测试中,需要使用到UUID,用来生成唯一ID. 1.什么是UUID UUID是128位的全局唯一标识符,通常由32字节的字符串表示.它可以保证时间和空间的唯一性,也称为GUID,全称为:UUID ...

  4. 黑马MyBatisday2 MyBatis Dao层实现 接口代理实现&传统实现 动态SQL和SQL抽取 自定义类型处理 分页插件PageHelper

    package com.itheima.mapper; import com.github.pagehelper.Page; import com.github.pagehelper.PageHelp ...

  5. easyui---datalist相关知识

    datalist 笔记: class:class="easyui-datalist" //对应标准元素:ul 表格线:lines="true" 远程数据绑定: ...

  6. CF914D Bash and a Tough Math Puzzle 线段树+gcd？？奇怪而精妙

    嗯~~,好题... 用线段树维护区间gcd,按如下法则递归:(记题目中猜测的那个数为x,改动次数为tot) 1.若子区间的gcd是x的倍数,不递归: 2.若子区间的gcd是x的倍数,且没有递归到叶子结 ...

  7. Codeforces 1105D（双层广搜）

    要点 题意:可以拐弯,即哈密顿距离 注意不可以直接一个一个搜,这过程中会把下一轮的标记上,导致同一轮的其它点没能正常完成应有的搜索 因此采用双层广搜,把同一轮先都出队列再的一起搜 #include & ...

  8. 最长回文子串--轻松理解Manacher算法

    最长回文子串这个问题的Manacher算法,看了很多博客,好不容易理解了,做一下记录. 这个算法的核心就是:将已经查询过的子字符串的最右端下标保存下来,在计算下标为i的回文字符串时,不需要从左右相邻的 ...

  9. Net Core -- 配置Kestrel端口

    Net Core -- 配置Kestrel端口 Kestrel介绍 在Asp.Net Core中,我们的web application 其实是运行在Kestrel服务上,它是一个基于libuv开源的跨 ...

  10. POJ 1015 Jury Compromise dp分组

    第一次做dp分组的问题,百度的~~ http://poj.org/problem?id=1015 题目大意:在遥远的国家佛罗布尼亚,嫌犯是否有罪,须由陪审团决定.陪审团是由法官从公众中挑选的.先随机挑 ...