HTML5 Tutoriel de base

HTML5 API

HTML5 Médias

HTML5 Graphiques

HTML5 Stockage client HTML5 Attributs du formulaire

HTML5 Élément sémantique

Les éléments sémantiques sont ceux dont vous pouvez comprendre le sens de leur contenu à première vue. Par exemple, pour un article <article>, il y a l'en-tête <header>, le sommaire <catalog>, le contenu <content> et le pied de page <footer>.

Qu'est-ce qu'un élément sémantique ?

Un élément sémantique peut clairement décrire sa signification aux navigateurs et aux développeurs.

Exemples d'éléments sans sémantique : <div> et <span> - Sans considérer le contenu.

Exemples d'éléments sémantiques : <form>, <table> et <img> - Définit clairement son contenu.

Prise en charge du navigateur

Internet Explorer 9+, Firefox, Chrome, Safari et Opera prennent en charge les éléments sémantiques.

Attention : Internet Explorer 8 et les versions plus anciennes ne prennent pas en charge cet élément. Cependant, un moyen de compatibilité est fourni à la fin de l'article.

HTML5Les nouveaux éléments sémantiques dans HTML5

De nombreux sites web existants contiennent le code HTML suivant :

<div id="nav">, <div>, ou <div id="footer">, Pour indiquer les liens de navigation, l'en-tête et la queue.

HTML5 Il fournit de nouveaux éléments sémantiques pour clarifier les différentes parties d'une page Web :

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

HTML5 L'élément <section>

Le tag <section> définit une section (section, zone) dans un document. Par exemple, un chapitre, en-tête, pied de page ou une autre partie du document.

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

Exemple

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial Net(oldtoolbag.com)</title>　
</head>
<body>
<section>
　　<h1>HTML5</h1>
　　<p>它是一个新的　HTML　语言版本包含了新的元素，属性和行为，同时包含了一系列可以被用来让　Web　站点和应用更加多样化，功能更强大的技术。这套技术往往被称作　HTML5　和它的朋友们，通常简称为　HTML5。/p>
</section>
<section>
　　<h1>CSS3</h1>
　　<p>CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂。/p>
</section>
</body>
</html>

Voyons si ça fonctionne ‹/›

HTML5 <article> 元素

<article> 标签定义独立的内容。

<article> 元素使用示例:

Forum post
Blog post
News story
Comment

Exemple

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial Net(oldtoolbag.com)</title>　
</head>
<body>
<article>
　　<h1>CSS3　</h1>
　　<p>SS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001année5mois23日W3C完成了CSS3的工作草案，
主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块　。/p>
</article>
</body>
</html>

Voyons si ça fonctionne ‹/›

HTML5 <nav> 元素

<nav> 标签定义导航链接的部分。

<nav> 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav> 元素中!

Exemple

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial Net(oldtoolbag.com)</title>　
</head>
<body>
<nav>
　　　　<a　href="/html/">HTML</a>　|
　　　　<a　href="/css/">CSS</a>　|
　　　　<a　href="/js/">JavaScript</a>　|
　　　　<a　href="/jquery/">jQuery</a>
</nav>
</body>
</html>

Voyons si ça fonctionne ‹/›

HTML5 <aside> 元素

<aside> 　标签定义页面主区域内容之外的内容（比如侧边栏）。

aside 标签的内容应与主区域的内容相关.

Exemple

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5　Exemple par fr.oldtoolbag.com</title>
</head>
<body>
<article>
　　<h1>Titre de l'article</h1>
　　<p>Texte qui apparaît sous l'article</p>
</article>
<aside>
　　<p>Text　that　appears　under　aside</p>
</aside>
</body>
</html>

Voyons si ça fonctionne ‹/›

HTML5 <header> 元素

<header>元素描述了文档的头部区域

<header>元素主要用于定义内容的介绍展示区域.

在页面中你可以使用多个<header> 元素.

以下示例定义了文章的头部:

Exemple

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5　Exemple par fr.oldtoolbag.com</title>
</head>
<body>
<header>
　　<img　src="/static/images/logo-n.png"　alt="Logo">
</header>
<article>
　　<h1>Titre de l'article</h1>
　　<p>Texte qui apparaît sous l'article</p>
</article>
</body>
</html>

Voyons si ça fonctionne ‹/›

HTML5 <footer> Élément

L'élément <footer> décrit la zone inférieure du document.

L'élément <footer> doit contenir son élément conteneur

Un pied de page contient généralement l'auteur du document, les informations sur les droits d'auteur, les conditions d'utilisation des liens, les informations de contact, etc.

Vous pouvez utiliser plusieurs éléments <footer> dans un document.

Exemple

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5　Exemple par fr.oldtoolbag.com</title>
</head>
<body>
<article>
　　<h1>Titre de l'article</h1>
　　<p>Texte qui apparaît sous l'article</p>
</article>
<footer>
　　<p>Copyright ©2013</p>
</footer>
</body>
</html>

Voyons si ça fonctionne ‹/›

HTML5 Éléments <figure> et <figcaption>

L'étiquette <figure> spécifie un contenu de flux indépendant (images, graphiques, photos, codes, etc.).

Le contenu de l'élément <figure> doit être lié au contenu principal, mais s'il est supprimé, il ne doit pas affecter le flux du document.

L'étiquette <figcaption> définit le titre de l'élément <figure>.

Les éléments <figcaption> doivent être placés à la première ou dernière position des éléments enfants de l'élément "figure".

Exemple

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial Net(oldtoolbag.com)</title>　
</head>
<body>
<figure>
　　<img src="venglobe.gif" alt="venglobe" width="304" height="228">
　　<figcaption>venglobe　venglobe　venglobe.</figcaption>
</figure>
</body>
</html>

Voyons si ça fonctionne ‹/›

　HTML5Exemple de regroupement en ligne des éléments sémantiques

Exemple

<!doctype html>
<html>
<head>
　　　　<meta charset="UTF-8">
　　　　<title>Élément sémantique</title>
</head>
<body>
　　　　<!--Élément de structure-->
　　　　<header>En-tête</header>
　　　　<section>Représente un paragraphe : Utilisé pour l'expression des chapitres des zones</section>
　　　　<footer>Partie de pied de page de la zone</footer>
　　　　<nav>Menu - Navigation</nav>
　　　　<article>Représente le contenu principal de l'article</article>
　　　　<!--Élément en bloc - Utilisé pour la division des zones-->
　　　　<aside></aside>
　　　　<figure>
　　　　　　　　<figcaption></figcaption>
　　　　</figure>
　　　　<code>Représente un segment de code</code>
　　　　<dialog>Représente une dialogue
　　　　　　　　<dt>Parleur</dt><dd>Contenu</dd>
　　　　</dialog>
　　　　<!--Élément sémantique-->
　　　　<mtter>Un certain domaine de valeurs</mtter>
　　　　<time></time>
　　　　<progress>Barre de progression</progress>
　　　　<video>Video</video>
　　　　<audio>Audio</audio>
　　　　<!--Éléments d'interaction-->
　　　　<details>Un contenu spécifique, affiché par une méthode spécifique</details>
　　　　<datagrid>Utilisé pour contrôler les données affichées client</datagrid>
　　　　<menu>Menu d'interaction dynamique</menu>
　　　　<command>Nommer</command>
　　　　<!--Afficher des exemples d'articles-->
　　　　<article>
　　　　　　　　<header>
　　　　　　　　　　　　<h1>Les balises de l'entête HTML (head)</h1>
　　　　　　　　　　　　<time>2015année12mois12jour</time>
　　　　　　　　</header>
　　　　　　　　<p>Les balises et les éléments de l'entête HTML (head) sont nombreux, impliquant le rendu des pages par les navigateurs, le SEO, etc. Chaque moteur de navigateur et chaque fabricant de navigateurs domestiques a ses propres balises et éléments, ce qui entraîne de nombreuses différences. Dans l'ère du mobile Internet, la structure de l'entête (head) et les éléments meta du mobile deviennent encore plus importants. Comprendre le sens de chaque balise et écrire des balises d'entête (head) qui répondent à vos besoins est l'objectif de cet article. Cet article se fonde sur l'article d'Yi Si pour étendre et résumer les significations et les scénarios d'utilisation des balises et des éléments courants dans l'entête (head).</p>
　　　　　　　　<footer>
　　　　　　　　　　　　<p>http://www.baidu.com</p>
　　　　　　　　</footer>
　　　　</article>
　　　　<!--Commentaires-->
　　　　<section>
　　　　<h2>Commentaires</h2>
　　　　　　　　<article>
　　　　　　　　　　　　<header>
　　　　　　　　　　　　　　　　<h3>Li Si</h3>
　　　　　　　　　　　　　　　　<p><time pubdata datatime="2013-09-23　10:00　-　11:00>une heure avant</time></p>
　　　　　　　　　　　　</header>
　　　　　　　　　　　　<p>Commentaires</p>
　　　　　　　　</article>
　　　　　　　　<article>
　　　　　　　　　　　　<header>
　　　　　　　　　　　　　　　　<h3>Li Si</h3>
　　　　　　　　　　　　　　　　<p><time pubdata datatime="2013-09-23　10:00　-　11:00>une heure avant</time></p>
　　　　　　　　　　　　</header>
　　　　　　　　　　　　<p>Commentaires</p>
　　　　　　　　</article>
　　　　</section>
</body>
</html>

Voyons si ça fonctionne ‹/›

Pouvons-nous commencer à utiliser ces éléments sémantiques?

Ces éléments sont tous des éléments de bloc (sauf <figcaption>).

Pour que ces blocs et éléments fonctionnent dans toutes les versions des navigateurs, vous devez définir certaines propriétés dans le fichier de feuilles de style (le code de style suivant permet aux navigateurs anciens de prendre en charge les éléments de niveau bloc décrits dans ce chapitre):

header, section, footer, aside, nav, article, figure
{
　　　　display: block;
}

Internet Explorer 8 et les problèmes des versions plus anciennes d'IE

IE8 Les versions plus anciennes d'Internet Explorer ne peuvent pas afficher les effets CSS dans ces éléments, ce qui signifie que vous ne pouvez pas utiliser <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, ou d'autres HTML5 elements.

Solution: Vous pouvez utiliser HTML5 Le script Javascript Shiv pour résoudre les problèmes de compatibilité d'IE.

HTML5 Adresse de téléchargement de Shiv :http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js

Après le téléchargement, placez le code suivant dans la page web :

Le code ci-dessus dans les navigateurs inférieurs à IE9Lorsque vous changez de version, il charge html5fichier shiv.js. Vous devez les placer dans l'élément <head> car les navigateurs IE ont besoin de charger ces HTML dans l'en-tête pour les rendre5des nouveaux éléments

HTML5 Stockage client HTML5 Attributs du formulaire