HTML5的全新语义化元素

1.<section>

  <section>元素用来定义文档或应用程序中的区域(或节)。例如,可以用它组织你的个人信息,一个<section>用于联系信息,另一个用于新闻动态。需要重点理解的是用它的目的不是为了美化样式。如果你只想将某个元素包裹起来以便设置样式,那应该和以前一样继续使用<div>。

2.<nav>

  <nav>元素用来定义文档的主导航区域,其中的链接指向其他页面或当前页面的某些区域。因为<nav>用于主导航区域,所以严格来讲它不是为页脚或其他经常会包含一组链接的区块而设计的(虽然将它用在这些区块里包含链接也没问题)。

3.<article>

  <article>元素与<section>元素很容易混淆。它是用来包裹独立的内容片段。当搭建一个页面时,想想你准备放入<article>标签的内容能否作为一个整块而被复制粘贴到另外一个完全不同的网站且能保持完整的意义?另一种方法是,想想包裹在<article>中的内容能否在RSS订阅源中独立成为一篇文章?应该使用<article>标签包裹的内容,最明显的例子就是博客正文。注意,如果出现嵌套的<article>元素,那内层的<article>元素内容应该和外层文章内容直接有关。

4.<aside>

  <aside>元素用来表示与页面主内容松散相关的内容。在实践中,我经常将其用作侧边栏(当它包含合适的内容时)。另外,引文、广告以及导航元素(如友情链接等等)也可以使用它。

5.<hgroup>

  如果页面中有一组使用<h1>、<h2>、<h3>等标签的标题、标语和副标题,则可以考虑使用<hgroup>将它们包裹起来。这样在HTML5的大纲结构算法中就会隐藏次级标题元素,从而只让<hgroup>中的第一个标题进入文档大纲。

  可以使用下面的HTML5大纲生成器来测试生成网页的大钢结构:

  (1)http://gsnedders.html5.org/outliner/

  (2)http://hoyois.github.com/html5outliner/

6.<header>

  由于<header>元素不计入大纲结构,所以不能用它来划分内容结构,而是应该用它来包含对区域内容的介绍说明。在实际使用中,<header>可用作网站头部的“刊头”区域,也可用作对其他内容如<article>元素的简要介绍。

7.<footer>

  和<header>一样,<footer>元素也不计入大钢结构,所以也不能用于划分内容结构。应该用它来包含其所在区域的辅助信息。例如可以用它包含一组指向其他页面的超链接,或者用它包含版权信息。和<header>一样,他也可以视情况在同一个页面上多次出现。例如博客网站的页脚可以使用它,同时博客正文<article>元素内的文脚也可以使用它。不过规范指出,博文作者的联系信息应该使用<address>元素来包裹。

8.<address>

  <address>元素用于明确地标注离其最近的<article>或<body>祖先元素的联系信息。为避免产生混淆,请记住<address>中一般不放具体的邮政地址,除非相应内容确实需要联系地址。而邮政地址和其他可能会改变的联系信息应该使用<p>标签来包裹。

9.<b>

  过去,人们通常利用<b>元素为文本添加样式,但它的实际用途是“给文本加粗”。不过现在你可以正式将其用作样式钩子,因为现在HTML5标准对<b>的定义是:

  ......一小段文本,纯粹为了吸引人的注意,除此之外不传达任何重要性,也不暗示其他语态或语气,如文档摘要中的关键词、评论中的产品名称、交互式文本软件中的可操作单词,或者文章的导语。

10.<em>

  ......强调内容中的重点

11.<i>

  ......一小段有不同语态或语气的文字,或者是样子与普通文章有所差异以便表明不同特点的文字。简单地说,它不仅仅是用来给某些文字加斜线效果的。

  HTML5还有大量文本级语义标签,想要全面了解,地址如下:

  http://www.w3.org/html/wg/drafts/html/master/semantics.html#text-level-semantics

时间: 2024-08-05 23:43:47

HTML5的全新语义化元素的相关文章

回顾HTML5的语义化元素

什么是语义化的元素 语义即是意义的意思.意思就是通过这个标签的名字就可以知道这个标签的含义. 比如div,p,span就不是语义化的元素,因为你不能通过这个标签来获悉它的含义. 而header,img等就是语义化的元素,我们知道这个标签代表是什么. 为什么要推行语义化的元素 对浏览器: 更好的搜索引擎收录. 增强网页的结构性. 对用户,工程师和维护团队: 使用语义化无义增强了代码的可读性和维护性. HTML5新增的语义化元素 1.section(节) section常用来定义网页中的章节,页眉,

HTML5新增的语义化标记元素

H5中定义了一组新的语义化标记来描述元素的内容.虽然语义化标记也可以使用HTML标记进行替换,但是他可以简化HTML页面设计,并且搜索引擎在抓取和索引网页的时候,也会利用这些元素.在目前主流的浏览器中已经可以使用这些元素了,新增的语义化标记元素如下: header--标记头部区域的内容(用于整个页面或页面中的一块区域) footer--标记脚部区域的内容(用于整个页面或页面中的一块区域) section--Web页面中的一块区域 article--独立的文章内容 aside--相关内容或者引文

HTML5的新语义化的标签

在HTML5之前采用HTML+CSS文档结构写法 Diagram illustrates a typical two-column layout marked up using divs with id and class attributes.It contains a header, footer, and horizontal navigation bar below the header. The main content contains an article and sidebar 

html5标签及语义化

html5标签 结构标签: article标记定义一篇文章header标记定义一个页面或一个区域的头部nav标记定义导航链接section标记定义一个区域aside标记定义页面内容部分的侧边栏hgroup标记定义文件中一个区块的相关信息figure标记定义一组媒体内容以及它们的标题 figcaption标签定义 figure 元素的标footer标记定义一个页面或一个区域的底部dialog标记定义一个对话框(会话框)类似微信 多媒体交互标签 video标记定义一个视频audio标记定义音频内容s

html5新增的语义化标签

1.什么是语义化标签? 那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如, 网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签. 文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用em标签表示强调等等. 2.为啥使用语义化标签? 1. 更容易被搜索引擎收录. 2. 更容易让屏幕阅读器读出网页内容. 3. 能够更好的体现页面的主题 4.兼容性更好,支持更多的网络设备 3.html语义化标签 1):

Html5新增的语义化标签(部分)

2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成.这是互联网的一次重大变革,这也许是一个时代的来临! 总结一些h5新增的语义化标签,记录下来方便自己学习及使用: 1.<header></header> 页眉:主要用于页面的头部的信息介绍,也可用于板块头部: 2.<hgroup></hgroup> 页面上的一个标题组合:一个标题和一个子标题,或者标语的组合: 3.<nav></nav> 导

HTML5新特性,语义化

1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用<figure>和<figcaption>来语义化地表示带标题的图片 <figure> <img src="path/to/image" alt="About image" /> <figcaption> <p>This is an image of

我的启蒙--HTML5 第一章 语义化标签

HTML5 1.HTML5:万维网的核心语言,HTML规范的第五次重大修改.现在大部分网站的主流编译语言.学好HTML5是每一个前端的基础课,当然她也很简单 2.HTML5新增语义化标签(虽然很少用到,但是还是要说一下) (1)<laomaoshi>老猫师:恩,你没看错HTML5可以自己定义标签,而且属于行内标签</laomaoshi> (2)其他的我就不一一列举了比如 导航栏常用的nav  时间常用的time (3)但是新增的表单标签,我们还是要熟悉下 就是这样的新标签,还有很多

html5新特性&lt;语义化 &gt;

<article>定义 一个特殊的section标签,比section有更明确的语义.定义来自外部的一个独立的.完整的内容块,例如什么论坛的文章,博客的文本....<aside> 用来装载页面中非正文的内容,独立于其他模块.例如广告.成组的链接.侧边栏.. <footer> 定义 section 或 page 的页脚.<header>定义 section 或 page 的页眉.<section>定义 文档中的主体部分的节.段. <nav&g