HTML5 语义元素1

简介: HTML5引入了语义元素,如`<nav>`、`<header>`、`<footer>`等,这些元素能清晰地向浏览器和开发者传达其内容的意义,如导航链接、头部和尾部。与非语义元素(如`<div>`)不同,语义元素使网页结构更加明确,有助于提升可读性和可访问性。例如,`<section>`标签用于定义文档中的节,而`<article>`标签则用于定义独立的内容,如论坛帖子、博客文章等。这些新元素在IE9及更高版本、Firefox、Chrome、Safari和Opera中得到支持。

HTML5 语义元素

语义= 意义

语义元素 = 有意义的元素
什么是语义元素?

一个语义元素能够清楚的描述其意义给浏览器和开发者。

无语义 元素实例:

和 - 无需考虑内容.

语义元素实例:

,
, and - 清楚的定义了它的内容.
浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持语义元素。

注意: Internet Explorer 8 及更早版本不支持该元素。 但是文章底部提供了兼容的解决方法.
HTML5中新的语义元素

许多现有网站都包含以下HTML代码:

,
, 或者
, 来指明导航链接, 头部, 以及尾部.

HTML5 提供了新的语义元素来明确一个Web页面的不同部分:

<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

[HTML5 语义元素]
HTML5 元素

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

根据W3C HTML5文档: section 包含了一组内容及其标题。
实例

WWF


The World Wide Fund for Nature (WWF) is....


尝试一下 »

HTML5 元素

标签定义独立的内容。.

元素使用实例:

Forum post
Blog post
News story
Comment

实例

Internet Explorer 9


Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。


相关文章
|
数据采集 搜索推荐 前端开发
HTML语义化 —— 定义网页的语义
HTML语义化 —— 定义网页的语义
43 0
|
2月前
|
移动开发 开发者 UED
HTML5 语义元素详解
HTML5引入了诸多语义元素
|
4月前
|
移动开发 搜索推荐 前端开发
HTML结构的基本标签
HTML结构的基本标签
127 65
|
4月前
|
4月前
|
移动开发 搜索推荐 前端开发
认识HTML结构的基本标签
认识HTML结构的基本标签
45 0
|
7月前
|
移动开发 HTML5
HTML基本结构标签解析
HTML基本结构标签解析
109 0
HTML元素与标签
HTML元素与标签
50 0
|
7月前
|
开发者 容器
如何像人类一样写HTML之第一个HTML、标签的关系与注释
如何像人类一样写HTML之第一个HTML、标签的关系与注释
|
数据采集 移动开发 搜索推荐
HTML 元素标签语义化及使用场景
HTML 元素标签语义化及使用场景
114 0
|
存储 XML 移动开发
什么是HTML5?HTML5的含义、元素和好处
什么是HTML5?HTML5的含义、元素和好处
130 0