HTML 是有含义的

语义指的是计算机语言定义的符号有其规范的含义,HTML中的标签、属性和属性值都有其约定的含义。

语义和默认样式有所不同,默认样式是浏览器设定的一些常用标签的表现形式,而语义化的主要目的不是显示, 而是能让大家直观的理解标记(markup)和属性(attribute)的用途和作用,比如Hx(h1,h2...)系列显然是标题, <strong>,<em>用来区别于其他文字,起到了强调的作用, <article>代表这是一段文章, <input type='email'/>代表的是邮件输入,等等。

有些元素具有通用的含义,比如段落(paragraphs)或列表(lists),有些元素则更具体,比如 <output>(计算输出),<progress>(任务进度)。

语义大体上可以分为三个层面,从上到下:结构、内容和局部说明。

结构化元素:用来组织页面

一个典型的网页通常包括:

  • <header> 页头,通常包含网站标识、口号和用户信息栏。
  • <nav> 页面菜单导航栏,网站主体频道页面的快捷链接。
  • <h1> 页面标题,对页面功能进行简要描述。
  • <article> 页面主体内容,如一篇博客。
  • <footer> 页脚,通常包含版权声明,国内特有的备案信息以及一些有用的快捷链接,如关于/联系/加入我们等等。

图文元素:定义和填充内容

主要有:

  • <p> 文章段落。
  • <ul> 无序列表(unordered list)。
  • <ol> 有序列表(ordered list)。
  • <li> 列表项(list item)。
  • <blockquote> 块引用。

内联元素:局部区别化内容

文章段落可能较长,需要对局部内容作特殊处理,比如段落首字母大写、下划线、删除线、引用、颜色突显、粗/斜体等等。

常用的有:

  • <strong> 重要 描述。
  • <em> 强调 用语。
  • <a> 链接(links),也叫锚点(anchor)。是对网站某资源的连接,可用于页面外部跳转和页面内部定位。
  • <small> 不那么重要的 描述。
  • <abbr> 缩写,比如 WWW

阅读下面的文档,你很容易理解各个HTML元素的含义。

<article>
<h1>文章标题</h1>
<h2>文章子标题</h2>
<p>
一些内容描述, <em>这里强调一下</em> ,还有更 <strong>重要</strong> 的部分。
</p>
<p>
另一段内容描述。
</p>
<h3>内容列表</h3>
<ul>
<li>第1章</li>
<li>第2章</li>
<li>第3章</li>
</ul>
<blockquote>
Once said
</blockquote>
</article>
<aside>
<h3>边栏部分的评论列表</h3>
<ul>
<li><a href="#">评论1</a></li>
<li><a href="#">评论2</a></li>
<li><a href="#">评论3</a></li>
</ul>
</aside>

通用元素

如果没有合适的语义元素用来表达你的内容,但出于分组或区别样式仍然需要添加一个HTML元素,那么你可以使用通用语义的元素如div和span:

  • <div> 用作通用块级元素
  • <span> 用作通用内联元素

尽管这些元素没有特定语义,但在使用CSS添加样式时仍然是有用的。

不要过度语义化

有将近100多个HTML元素可供选择: 100 semantic HTML elements。要从中挑选合适的元素来表述内容颇为麻烦。

过度追求语义化,使得页面语义结构过于繁杂,反而不易于维护,基本上,如果能使用好下面的这些元素就足够了。

结构化 图文内容 局部说明
header
h1
h2
h3
nav
footer
article
section
p
ul
ol
li
blockquote
a
strong
em
q
abbr
small

本文参考自:http://techbrood.com/h5b2a?p=html-semantics

[HTML5]HTML语义(Semantics)的更多相关文章

  1. 深入理解HTML5:语义、标准与样式(勇猛精进早登大师殿堂创最优品质交互)

    深入理解HTML5:语义.标准与样式(勇猛精进早登大师殿堂创最优品质交互) [美]布拉德福(Bradford,A.) [美]海涅(Haine,P.)著 高京译 ISBN 978-7-121-20552 ...

  2. 浅谈html语义化标签,Html5新增语义化标签

    Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? ...

  3. 深入理解HTML5:语义、标准与样式

    <深入理解HTML5:语义.标准与样式> 基本信息 作者: (美)布拉德福(Bradford,A.) 海涅(Haine,P.) 译者: 高京 出版社:电子工业出版社 ISBN:978712 ...

  4. HTML5有语义的内联元素详解

    HTML5有语义的内联元素详解 time标签 time 元素表示一个时间值,比如 5:35 P.M., EST, April 23, 2007.例如: Example Source Code:< ...

  5. 语义(Semantics)

    流计算语义(Semantics)的定义 每一条记录被流计算系统处理了几次 有三种语义: 1.At most once 一条记录要么被处理一次,要么没有被处理 2.At least once 一条记录可 ...

  6. 重学HTML5的语义化

    干了这么多年的前端,之前面试的时候经常会遇到面试官提问:你是如何理解HTML的语义化的? 说实话,之前遇到这个问题的时候,都是从网上找参考答案,然后记下来,用自己的语言重新组织一下,就变成自己的理解了 ...

  7. html5手册语义化标签

    html5手册语义化标签: article section aside hgroup header footer nav time mark figure figcaption contextmenu ...

  8. HTML5之语义标签

    在HTML5标准中,新加了几个用于增添页面语义的标签,这些标签有:article.section.nav和aside等.与别的大多数标签不 同,浏览器在解释渲染这些标签的时候仅仅把它作为普通的div块 ...

  9. HTML5之语义化标签

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

随机推荐

  1. debian开机启动管理

    debian开机启动管理(转文) linux下,services的启动.停止等通常是通过/etc/init.d的目录下的脚本来控制的.在启动或改变运行级别是在/etc/rcX.d中来搜索脚本.其中X是 ...

  2. 读javascript高级程序设计16-几条函数小技巧

    内容概要 作用域安全的构造函数 惰性载入函数 函数绑定 函数节流 一.作用域安全的构造函数 我们知道,当使用new操作符调用构造函数时,构造函数内部的this会指向新创建对象的实例. function ...

  3. Android Genymotion无法启动

    virtualbox无法启动,闷声作大死改了uxtheme.dll导致系统无法启动,正确的解决方法 关于在64位win7下运行Virtualbox安装系统时出错(提示VBoxDD.DLL错误)的解决方 ...

  4. 如何获取有性能问题的SQL

    1.通过用户反馈获取存在性能问题的SQL.   2.通过慢查日志获取存在性能的SQL.   启动慢查日志 slow_query_log=on   set global slow_query_log=o ...

  5. Spring中加载多个Properties配置文件

    单个配置: <bean id="propertyConfigurer" class="org.springframework.beans.factory.confi ...

  6. Mytophome Deal

    using AnfleCrawler.Common; using System; using System.Collections.Generic; using System.Linq; using ...

  7. 绑定hosts

    测试过程中需绑定hosts.将测试环境IP绑定域名,输入域名即可连接到测试环境. 1  hosts文件地址:C:\WINDOWS\system32\drivers\etc 2  用记事本打开hosts ...

  8. windows server域的概念以及wmic(centos上命令)

    wmic访问在域中的计算机.其中ops\administrator为域用户名,也可以写作ops.com\administrator.ops是域名ops.com的简写,是MS的NetBIOS一套吗? . ...

  9. C++类的嵌套(2)-访问权限和调用关系

    类似于命名空间,一个类也是一个类命名空间.因此类嵌套的作用是帮助实现外层类,并且避免命名冲突.  对于命名空间(不再赘述可以参考<c++ prime plus>),其中定义的变量和函数的作 ...

  10. hibernate内部测试题(附赠答案)

    一.选择题(共25题,每题2.5分,选择一项或多项,漏选错选不得分) 1.在Hibernate中,以下关于主键生成器说法错误的是( ). A.increment可以用于类型为long.short或by ...