HTML5 语义元素

什么是语义元素？

语义元素清楚地向浏览器和开发者描述其意义。
非语义元素的例子：<div> 和 <span> - 无法提供关于其内容的信息。
语义元素的例子：<form>、<table> 以及 <img> - 清晰地定义其内容。

HTML5 中新的语义元素

许多网站包含了指示导航、页眉以及页脚的 HTML 代码，例如这些：<div id="nav"> <div class="header"> <div id="footer">。
HTML5 提供了定义页面不同部分的新语义元素：

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

嵌套语义元素

嵌套语义元素

在 HTML5 标准中，<article> 元素定义完整的相关元素自包含块。
<section> 元素被定义为相关元素块。
我们能够使用该定义来决定如何嵌套元素吗？不，我们不能！
在因特网上，您会发现 <section> 元素包含 <article> 元素的 HTML 页面，还有 <article> 元素包含 <sections> 元素的页面。
您还会发现 <section> 元素包含 <section> 元素，同时 <article> 元素包含 <article> 元素。

HTML5 <header> 元素

<header> 元素为文档或节规定页眉。
<header> 元素应该被用作介绍性内容的容器。
一个文档中可以有多个 <header> 元素。

下例为一篇文章定义了页眉：

<article>
   <header>
     <h1>What Does WWF Do?</h1>
     <p>WWF's mission:</p>
   </header>
   <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article> 

为何使用 HTML5 元素？

HTML5 中的语义元素

 
               
作者：XXX
               
信息录入:XXX
               
文案编辑:XXX
               
视频录制:XXX
               
视频编辑:XXX
               
图片编辑:XXX
               
关键字修改:陈鑫