`

HTML5 语义标签使用详解

阅读更多
在 HTML5 出来之前,我们用 div 来表示页面章节,但是这些 div 都没有实际意义。(即使我们用 css 样式的 id 和 class 来形容这块内容的意义)。这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分。但现在,那些之前没“意义”的标签因为 html5 的出现而消失了,这就是我们平时所说的“语义”。





如上图那个页面结构没有使用一个 div,都是采用 html5 语义标签(用哪些标签,关键取决于你的设计目标)。但是也不要因为 html5 新标签的出现,而随意用之,错误的使用肯定会事与愿违。所以有些地方还是要用 div 的,就是因为 div 没有任何意义的元素,他只是一个标签,仅仅是用来构建外观和结构。因此是最适合做容器的标签。
W3C 定义了这些语义标签,不可能完全符合我们有时的设计目标,就像制定出来的法律不可能流传 100 年都不改变,更何况它才制定没多久,不可能这些语义标签对所以设计目标的适应。只是一定程度上的“通用”,我们的目标是让爬虫读懂重要的东西就够了。

结论:不能因为有了 HTML5 标签就弃用了 div,每个事物都有它独有的作用。

header 元素header 元素代表“网页”或“section”的页眉;通常包含 h1-h6 元素或 hgroup,作为整个页面或者一个内容块的标题,也可以包裹一个目录部分,一个搜索框,一个 nav,或者任何相关 logo;整个页面没有限制 header 元素的个数,可以拥有多个,可以为每个内容块增加一个 header 元素;


header 示例代码:
<header>

<hgroup>
<h1>网站标题</h1>
<h2>网站副标题</h2>
</hgroup>

</header></font></font>

header 使用注意:

可以是“网页”或任意“section”的头部部分;
没有个数限制;
如果 hgroup 或 h1-h6 自己就能工作的很好,那就不要用 header;

section 元素section 元素代表文档中的“节”或“段”,“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组;section 通常还带标题,虽然 html5 中 section 会自动给标题 h1-h6 降级,但是最好手动给他们降级;

section 示例代码:

<section>

<h1>什么是 section</h1>

<article>

<h2>关于 section</h2>
<p>section 的介绍</p>

<section>
<h3>关于其他</h3>
<p>关于其他 section 的介绍</p>
</section>

</article>

</section>

section 使用注意:

表示文档中的节或者段;
article、nav、aside 可以理解为特殊的 section,所以如果可以用 article、nav、aside 就不要用 section,没实际意义的就用 div;

article 元素
article 元素最容易跟 section 和 div 容易混淆,其实 article 代表一个文档、页面或者网站中自成一体的内容,其目的是为了让开发者独立开发或重用。譬如论坛的帖子,博客上的文章,一篇用户的评论,一个互动的 widget 小工具。(特殊的 section)除了它的内容,article 会有一个标题(通常会在 header 里),会有一个 footer 页脚。我们举几个例子介绍一下 article,好更好区分 article、section、div;

一篇简单文章的 article 示例代码:

<article>

<header>
<h1>文章标题</h1>
</header>

<p>文章内容..</p>

<footer>
<p>版权:cssue.com</p>
</footer>

</article>

上例是最简单的 article 标签使用情况,如果在 article 内部再嵌套 article,那就代表内嵌的 article 是与它外部的内容有关联的,如博客文章下面的评论;

文章里的评论,一个 article 里嵌套 article 的示例代码:

<article>

<header>
<h1>文章标题</h1>
<time datetime="2012-12-06">2012/12/06</time>
</header>

<p>文章内容..</p>

<article>

<h2>评论</h2>

<article>
<header>
<h3>评论者: XXX</h3>
<time datetime="2012-12-06T19:10">~1 hour ago</time>
</header>
<p>娃哈哈..</p>
</article>

<article>
<header>
<h3>评论者: XXX</h3>
<time datetime="2012-12-06T19:10">~1 hour ago</time>
</header>
<p>哈哈哈哈...</p>
</article>

</article>

</article>

article 内部嵌套 article,有可能是评论或其他跟文章有关联的内容。那 article 内部嵌套 section 一般是什么情况呢。如下:

文章里的章节,一个 article 里嵌套 section 的示例代码:

<article>

<h1>前端技术</h1>
<p>前端技术有那些</p>

<section>
<h2>HTML</h2>
<p>标签..</p>
</section>

<section>
<h2>CSS</h2>
<p>样式..</p>
</section>

<section>
<h2>JS</h2>
<p>脚本..</p>
</section>

</article>

因为文章内 section 部分虽然也是独立的部分,但是它门只能算是组成整体的一部分,从属关系,article 是大主体,section 是构成这个大主体的一部分。本网站的全部文章都是 article 嵌套一个个 section 章节,这样能让浏览器更容易区分各个章节所包括的内容。

那 section 内部嵌套 article 又有哪些情况呢,如下:
一个 section 里嵌套 article 的示例代码:

<section>

<h1>介绍网站制作成员配备</h1>

<article>
<h2>设计师</h2>
<p>设计网页的...</p>
</article>

<article>
<h2>程序员</h2>
<p>编写程序的..</p>
</article>

<article>
<h2>前端工程师</h2>
<p>给楼上两位打杂的..</p>
</article>

</section>

设计师、程序员、前端工程师都是一个独立的整体,他们组成了网站制作基本配备,当然还有其他成员~~。设计师、程序员、前端工程师就像 article,是一个个独立的整体,而 section 将这些自成一体的 article 包裹,就组成了一个团体,更多内容见网页设计培训
article 和 section 的例子就例举这么多了,具体情况具体分析,不易深究。漏了 div,其实 div 就是只是想用来把元素组合或者给它们加样式时使用。

article 使用注意:

自身独立的情况下:使用 article;
是相关内容:使用 section;
没有语义的:使用 div;

nav 元素nav 元素代表页面的导航链接区域。用于定义页面的主要导航部分。
nav 示例代码:



<nav>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</nav>

但是我在有些时候却情不自禁的想用它,譬如:侧边栏上的目录,面包屑导航,或者上一篇下一篇文章,但是事实上规范上说 nav 只能用在页面主要导航部分上。页脚区域中的链接列表,虽然指向不同网站的不同区域,譬如服务条款,版权页等,这些 footer 元素就能够用了。

nav 使用注意:

用在整个页面的主要导航部分上,不合适就不要用 nav 元素;

aside 元素aside 元素标签用来表示当前页面或文章的附属信息部分,可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav 元素组,以及其他类似的有别与主要内容的部分。

<article>

<h1>前端技术</h1>
<p>前端技术包括:HTML、CSS、JavaScript等...</p>

<aside>
<dl>
<dt>HTML</dt>
<dd>HTML 是用于描述网页文档的一种超文本标记语言。</dd>
</dl>
</aside>

</article>

aside 使用注意:

被包含在 article 元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的引用、词汇列表等。
在 article 之外使用,作为页面或站点全局的附属信息部分;最典型的形式是侧边栏(sidebar),其中的内容可以是友情链接、附属导航或广告单元等。

footer 元素footer 元素代表“网页”或“section”的页脚,通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。如果 footer 元素包含了整个节,那么它们就代表附录,索引,提拔,许可协议,标签,类别等一些其他类似信息。
footer 示例代码:

<footer>
<p>版权:cssue.com</p>
</footer>

footer 使用注意:

可以是“网页”或任意“section”的底部部分;
没有个数限制,除了包裹的内容不一样,其他跟 header 类似。
  • 大小: 66.3 KB
分享到:
评论
1 楼 ldh8800 2015-05-18  
 

相关推荐

    html完全使用详解

    HTML5引入了许多新元素,如`&lt;header&gt;`、`&lt;footer&gt;`、`&lt;section&gt;`、`&lt;article&gt;`,帮助构建更语义化的网页结构。此外,还增加了离线存储、拖放功能、媒体元素(`&lt;audio&gt;`、`&lt;video&gt;`)等新功能。 六、实际应用 在实际...

    html标签大全标签用法详解

    HTML5引入了许多新特性,如`&lt;canvas&gt;`用于绘制图形,`&lt;audio&gt;`和`&lt;video&gt;`处理多媒体,`&lt;section&gt;`、`&lt;article&gt;`、`&lt;aside&gt;`和`&lt;footer&gt;`增强语义化。 在学习HTML标签时,参考手册如HTML4.0是非常重要的资源。它...

    HTML5新语义

    ### HTML5新语义元素详解 #### 一、HTML5新语义元素概述 随着Web技术的发展,HTML5成为了一种更加结构化、语义化的标记语言标准。它引入了一系列新的元素来帮助开发者更好地组织和呈现网页内容。这些新元素不仅能够...

    HTML5开发精要与实例详解 pdf

    本书“HTML5开发精要与实例详解”深入浅出地介绍了HTML5的核心概念、语法特性以及实际应用,旨在帮助读者快速掌握这一新技术。 首先,HTML5在结构元素上的改进是其一大亮点。它引入了如、、、等语义化标签,使得...

    《HTML5开发精要与实例详解》配套源码

    例如,`&lt;header&gt;`、`&lt;footer&gt;`、`&lt;nav&gt;`和`&lt;section&gt;`等语义化标签,使得页面结构更加清晰,增强了搜索引擎的可读性。`&lt;canvas&gt;`元素提供了在浏览器中进行图形绘制的能力,而`&lt;video&gt;`和`&lt;audio&gt;`元素则让网页可以...

    Dw Html 标签详解和查询软件

    本软件“Dw Html 标签详解和查询软件”专注于帮助用户理解和掌握HTML标签的使用,无论是初学者还是经验丰富的开发者,都能从中受益。 HTML标签通常由一对尖括号包围,如`&lt;html&gt;`、`&lt;head&gt;`和`&lt;body&gt;`等,它们分为...

    HTML 5和 HTML 4的区别点及标签用法

    ### HTML 5与HTML 4的区别点及标签用法详解 HTML 5作为新一代的超文本标记语言标准,相比其前代HTML 4,在语法、功能以及对多媒体的支持上进行了大幅改进,旨在提升网页的交互性和用户体验。以下将详细介绍HTML 5与...

    HTML5详解 Html5实战

    开发者可以利用HTML5的特性构建跨平台的移动应用,如使用PhoneGap或Cordova将HTML5、CSS3和JavaScript打包成原生应用。 总结,HTML5是现代Web开发的基础,其丰富的语义化元素、多媒体支持、离线存储和强大的APIs为...

    关于html标签的详解

    10. **结构化标签**:HTML5引入了语义化标签,如`&lt;header&gt;`、`&lt;footer&gt;`、`&lt;nav&gt;`、`&lt;section&gt;`、`&lt;article&gt;`和`&lt;aside&gt;`,这些标签有助于提升网页的可读性和搜索引擎优化。 每个HTML标签都有其特定的功能和用途,...

    web前端工程-html5详解.docx

    1. 语义化的标签: HTML5 引入了许多语义化的标签,如 header、nav、footer 等,提高了代码的可读性和维护性。 2. 多媒体支持: HTML5 支持音频和视频标签,能够实现网页中多媒体的播放。 3. local storage: HTML5 ...

    Html5新增元素详解.pptx

    1. 可以省略标签的元素:Html5 中有一些元素可以省略标签,例如 input、link、area 等。 2. 拥有 bool 值的属性:Html5 中的一些属性拥有 bool 值,例如 disabled 和 readonly 等,通过省略属性的值来表达值为“true...

    html5 实例详解

    1. **语义化标签**:HTML5引入了新的语义化标签,如、、、和等,这些标签为网页内容提供了更明确的结构,有助于搜索引擎优化(SEO)和无障碍访问。 2. **表单控件增强**:HTML5新增了多种表单输入类型,如email、...

    HTML5开发精要与实例详解

    HTML5的主要改进包括:语义化标签(如、、等)、表单控件增强(如、等)、多媒体支持(如、标签)以及离线存储(Application Cache)。这些新元素和功能让网页结构更清晰,交互性更强,且无需插件即可实现音频视频...

    《html5网页开发实例详解》随书源码2

    由于上传大小权限原因,分两部分上传。详细介绍了html5语义化标签,图像操作,地理定位,本地离线存储,通信api,websocket……共14章,每章都用代码案例详细介绍了关于html5的所有高级新特性。

    HTML使用详解

    五、HTML语义化 为了提高可访问性和搜索引擎优化,HTML5引入了许多语义化的标签,如`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;main&gt;`、`&lt;article&gt;`、`&lt;aside&gt;`和`&lt;footer&gt;`,它们有助于表达页面的结构和内容。 六、HTML与CSS和...

    HTML基础语法与结构+HTML5新特性详解+CSS基础教程+响应式网页设计+网页布局与流体网格+HTML表单设计优化等全套教程

    HTML基础语法与结构 HTML5新特性详解 CSS基础教程 ...HTML5音频与视频标签使用 HTML5离线存储 HTML5拖放功能实现 HTML5地理定位功能 HTML5语义化标签解析 HTML5游戏开发入门 WebAccessibility与HTML标准

    HTML5常用基础标签

    以上这些标签构成了HTML5中最常用的基础标签,通过合理地使用这些标签,可以构建出语义清晰、结构合理的网页。理解这些基本标签的功能和用法对于初学者来说至关重要,它们是进行Web开发的基础。

    html5开发详解-PDF

    HTML5引入了一系列新的语义化标签,如、、、和等,它们帮助开发者更好地定义页面结构,增强了内容的可读性和可访问性。这些标签使得搜索引擎和辅助技术更容易理解页面内容。 三、多媒体支持 HTML5的一大亮点是对...

    HTML5教程 常用标签使用说明

    ### 三、常用HTML5标签详解 #### 1. `&lt;header&gt;` - **用途**:表示页面或区段的页眉,通常包含导航链接、网站标志等内容。 - **示例代码**: ```html 网站标题 &lt;li&gt;&lt;a href="#home"&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a ...

Global site tag (gtag.js) - Google Analytics