HTML 5

Un document HTML 5 peut prendre la forme d'un document XML ou d'un document HTML. La déclaration doctype n'est utilisée que dans le cas où le document n'est pas un document XML et a été grandement simplifiée : il suffit d'inclure la ligne <!DOCTYPE html> au début du fichier. Voici un exemple de document HTML 5 :

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ceci est un exemple</title>
  </head>
  <body>
    <p>Voici un paragraphe.</p>
  </body>
</html>

Un document HTML 5 en XML ne nécessite pas de déclaration doctype :

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Ceci est un exemple</title>
  </head>
  <body>
    <p>Voici un paragraphe.</p>
  </body>
</html>

En HTML 5, on n'utilise plus les éléments acronym et plusieurs autres éléments moins utiles (basefont, big, center, s, strike, tt, u, frame, frameset, noframe, applet, isindex, dir). Plusieurs nouveaux éléments ont été ajoutés notamment les éléments section et article. Ces éléments permettent d'organiser le contenu de manière logique.

Élément section: permet de regrouper du contenu dans une section contenant peut-être plusieurs paragraphes ou articles ayant un thème commun.
Élément article: permet d'indiquer que le contenu est un article. Un article peut disposer d'une entête (header) comprenant un titre.
Élément aside: permet d'ajouter une note optionnelle au contenu.
Élément footer: permet d'indiquer une section dédiée aux métadonnées du document. Chaque section peut avoir son élément footer.

Voici un exemple de HTML 5 valable:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ceci est un exemple</title>
</head>
<body>
<h1>Un article sur le XML</h1>
<section>
<article>
<header>
<h2>La magie du XML</h2>
<p>J'aime le XML</p>
</header>
<p>Nous aimons tous le XML...</p>
</article>
</section>
<footer>
<h3>Une annexe</h3>
<p>Cet article a été écrit par Daniel...</p>
</footer>
<aside>
En passant, ce n'est pas un vrai article...
</aside>
</body>
</html>

On peut facilement créer des indicateurs de progression:

2 sur 10
66%

<meter value="2" min="0" max="10">2 sur 10</meter><br />
<meter value="0.66">66%</meter>

On peut aussi ajouter une figure à un document avec une légende:

<figure>
 <img src="http://lemire.me/fr/images/JPG/profile2011B_152.jpg" />
 <legend>Photo du professeur</legend>
</figure>

On peut aussi créer rapidement des formulaires en ligne:

<form id="inscription">
<h1>Inscription au cours de XML</h1>
  <fieldset> 
    <legend>Information personnelle</legend> 
        <label>Nom
        <input id="nom" name="nom" type="text" placeholder="Votre nom" required autofocus> 
		</label>
		<br /> 
    	<label>Date de naissance
        <input id="courriel" name="ddn" type="date" required>
		</label>
		<br />
        <label>Courriel 
        <input id="courriel" name="courriel" type="email" placeholder="lemire@jo.com" required>
		</label>
		<br />  
        <label>Site personnel 
        <input id="url" name="url" type="url" placeholder="http://monsite.com">
		</label>
		<br /> 
        <label>Téléphone  
        <input id="telephone" name="telephone" type="tel" placeholder="Par ex. 450 111-4444" required>
		</label>
		<br />  
		<label>Nombre de cours suivis précédemment
		<input id="cours" name="cours" type="number" min="0" max="50" step="0.5" value="1">
		</label>
		<br /> 
		<label>Aptitude en informatique 
		<input id="aptitude" name="aptitude" type="range" min="1" max="100" value="0">
		<output name="output" onforminput="value=a.value">0</output>
		</label>
		<br /> 
        <label>Adresse 
        <textarea id="adresse" name="address" rows=5 required></textarea>
		</label>
		<br />  
        <label>Pays
        <input id="pays" name="pays" list="nomsdepays" type="text" required> 
        <datalist id="nomsdepays"> 
        	<option label="États-Unis" value="us"></option> 
        	<option label="Canada" value="ca"></option> 
        	<option label="France" value="fr"></option> 
        </datalist>
		</label> 
  </fieldset> 
  <fieldset> 
	    <button type=submit>S'inscrire</button> 
  </fieldset> 
</form>

Les éléments canvas, video et audio sont aussi ajoutés : le HTML devient pleinement multimédia.

Pour en savoir plus, consulter le guide du HTML 5 chez Mozilla.

RECHERCHE

HTML 5

Inscription au cours de XML