HTML5 Introduction
HTML5 est la dernière révision de HTML, la norme ayant été finalisée par le World Wide Web Consortium (W3C) en octobre 2014.
HTML5 est conçu pour prendre en charge le multimédia sur les appareils mobiles.
HTML5 est facile à apprendre.
Qu'est-ce que HTML5 ?
HTML5 est la norme HTML de nouvelle génération.
La version précédente de HTML, HTML 4.01, est née en 1999. Depuis lors, le monde du Web a connu d'énormes changements.
HTML5 est encore en cours de perfectionnement. Cependant, la plupart des navigateurs modernes prennent déjà en charge certaines fonctionnalités de HTML5.
Comment HTML5 a-t-il vu le jour ?
HTML5 est le résultat d'une collaboration entre le W3C et le WHATWG, où WHATWG signifie Web Hypertext Application Technology Working Group.
WHATWG était dédié aux formulaires web et aux applications, tandis que le W3C se concentrait sur XHTML 2.0. En 2006, les deux parties ont décidé de coopérer pour créer une nouvelle version de HTML.
Quelques nouvelles fonctionnalités intéressantes dans HTML5 :
- L'élément canvas pour le dessin
- Les éléments video et audio pour la lecture multimédia
- Meilleure prise en charge du stockage local hors ligne
- Nouveaux éléments de contenu spéciaux, tels que article, footer, header, nav, section
- Nouveaux contrôles de formulaire, tels que calendar, date, time, email, url, search
HTML5 <!DOCTYPE>
La déclaration <!doctype> doit être la première ligne d'un document HTML5, et elle est très simple à utiliser :
Document HTML5 minimal
Voici un document HTML5 simple :
Remarque :Pour les pages web chinoises, vous devez utiliser<meta charset="utf-8">pour déclarer l'encodage, sinon du texte brouillé peut apparaître.
Améliorations dans HTML5
- Nouveaux éléments
- Nouveaux attributs
- Prise en charge complète de CSS3
- Vidéo et audio
- Graphiques 2D/3D
- Stockage local
- Données SQL locales
- Applications Web
Multimédia HTML5
Avec HTML5, vous pouvez facilement lire des vidéos et de l'audio dans les pages web.
Applications HTML5
Avec HTML5, vous pouvez facilement développer des applications
- Stockage local des données
- Accéder aux fichiers locaux
- Données SQL locales
- Références de cache
- Workers JavaScript
- XHTMLHttpRequest 2
Graphismes HTML5
Avec HTML5, vous pouvez facilement dessiner des graphiques :
- Utilisez l'élément<canvas>.
- Utilisez SVG en ligneSVG。
- Utilisezles transformations 2D CSS3、les transformations 3D CSS3。
HTML5 utilise CSS3
- Nouveaux sélecteurs
- Nouveaux attributs
- Animations
- Transformations 2D/3D
- Coins arrondis
- Effets d'ombre
- Polices téléchargeables
Pour en savoir plus sur CSS3, veuillez consulter leTutoriel CSS3 de ce site.
Éléments sémantiques
HTML5 a ajouté de nombreux éléments sémantiques comme indiqué ci-dessous :
| Balise | Description |
|---|---|
| <article> | Définit une zone de contenu indépendante d'une page. |
| <aside> | Définit le contenu de la barre latérale d'une page. |
| <bdi> | Permet de rendre un morceau de texte indépendant du paramètre de direction du texte de son élément parent. |
| <command> | Définit un bouton de commande, tel qu'un bouton radio, une case à cocher ou un bouton. |
| <details> | Utilisé pour décrire les détails d'un document ou d'une partie d'un document. |
| <dialog> | Définit une boîte de dialogue, telle qu'une boîte d'invite. |
| <summary> | La balise contient le titre de l'élément details. |
| <figure> | Spécifie un contenu de flux indépendant (images, graphiques, photos, code, etc.). |
| <figcaption> | Définit la légende/titre de l'élément <figure>. |
| <footer> | Définit le pied de page d'une section ou d'un document. |
| <header> | Définit la zone d'en-tête d'un document. |
| <mark> | Définit du texte avec une marque. |
| <mark> | Définit une mesure. Utilisé uniquement pour les mesures dont le maximum et le minimum sont connus. |
| <nav> | Définit une section de liens de navigation. |
| <progress> | Définit la progression de tout type de tâche. |
| <ruby> | Définit les annotations ruby (annotations phonétiques chinoises ou caractères). |
| <rt> | Définit l'explication ou la prononciation des caractères (annotations phonétiques chinoises ou caractères). |
| <rp> | Utilisé dans les annotations ruby pour définir le contenu affiché par les navigateurs qui ne prennent pas en charge l'élément ruby. |
| <section> | Définit une section dans un document. |
| <time> | Définit une date ou une heure. |
| <wbr> | Spécifie où un saut de ligne est approprié dans le texte. |
Formulaires HTML5
Nouveaux éléments de formulaire, nouveaux attributs, nouveaux types de champs de saisie et nouvelle validation.
Éléments supprimés
Les éléments HTML 4.01 ont été supprimés dans HTML5 :
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
Exemples dans chaque chapitre
Avec notre éditeur HTML, vous pouvez modifier le HTML et cliquer sur un bouton pour voir le résultat.
Exemples
Essayez-le vous-même »
Cliquez sur le bouton « Essayez-le vous-même » pour voir le résultat en ligne.
Prise en charge d'HTML5 par les navigateurs
Les dernières versions de Safari, Chrome, Firefox et Opera prennent en charge certaines fonctionnalités HTML5. Internet Explorer 9 prendra en charge certaines fonctionnalités HTML5.
Pour rendre les navigateurs inférieurs à IE9 compatibles avec HTML5, utilisez le paquet html5shiv depuis les ressources statiques de ce site :
Après le chargement, initialisez le CSS pour les nouvelles balises :
Manuel de référence HTML5
Sur ce site, vous pouvez trouver des descriptions des balises et attributs HTML5. Pour plus de détails, cliquez surManuel de référence HTML5。
Autres extensions