Tutoriels >> Introduction au HTML5

Introduction au HTML5


Introduction


Le HTML5 est, comme son nom l’indique, le successeur direct du HTML4. L’objectif avoué principal fut avant tout de simplifier l’usage du HTML ainsi que d’assurer un maximum de rétro-compatibilité.

La principale nouveauté du HTML5 est sa nouvelle façon de concevoir et de structurer des pages web.

Les div et les tableaux ne sont désormais plus les uniques moyens de construire des pages, il s’agit désormais de repenser la façon de monter les pages.

 

Balise Doctype

< !doctype html>

 

Le nouveau doctype est bien plus allégé que l’ancien. On peut remarquer qu’il n’y a plus aucune allusion à un quelconque numéro de perso. Son rôle est toujours de préciser quel type de document va suivre afin de permettre au navigateur de savoir quel langage il devra interpréter.

 

Balises principales


<article> représente un texte indépendant, une portion de contenu, comme par exemple un article de journal, de blog ou de forum. Il ne faut pas le confondre avec <content>.

<header> représente l'en-tête d'une sectio. C’est dans cette balise que seront définies les titres et les entêtes. Cette balise peut contenir des formulaires, des logos, du texte, etc.

<footer> représente le pied de page d'une section. On y inscrit les informations concernant l'auteur, les mentions légales…etc. Il contient donc des informations finales sur sa section.

<content> est utilisé pour tout ce qui concerne les blocs de contenu généraux. Qu’il s’agisse de contenu de la page ou d’un bloc d’information statique.

<media> permet d’insérer un fichier de type vidéo ou son directement dans une page web sans passer par un plugin externe. Il permet aussi d’ajouter un player ou de diffuser le son de manière totalement transparente.

<section> Utile pour définir des sections de document comme par exemple des chapitres, en-tête et pied de page ou n’importe quel autre type de section.

<nav> Il s’agit d’une section de liens de navigation. Cette balise peut donc être utilisée pour les menus principaux par exemple.

<aside> Il s’agit là d’une bannière encapsulant des informations supplémentaire relatives à un article ou à une page web. Elle n’est pas forcée d’avoir un lien direct avec le contenu, il s’agit simplement d’un complément.

Il est important de noter que ces nouvelles balises permettent de structurer les pages web différemment en optimisant considérablement le référencement. Voici un petit exemple que l’utilisation de ces balises.

<abbr> représente un acronyme ou une abréviation.

 

Actualisation des anciennes balises


<embed> Ce tag est utilisé pour définir un conteneur pour une application externe ou un contenu interactif type flash ou autre. Il ne faut pas le confondre avec la balise <media>.

<time> permet de définir la date à laquelle un contenu (article par exemple) a été posté sur le site, ceci permettant un meilleurs référencement. Attention, les valeurs rentrées dans cette balise ne sont pas affichées sur la page. :

<details> Cette balise permet de marquer un contenu ayant pour rôle d’apporter une information supplémentaire.

<hr> Signifiant Horizontal Rule, cette balise sert à définir des zones de séparations.

<menu> Attention, cette balise est à ne pas confondre avec <nav>.

Limitez le nombre de DIV. Le HTML5 offre toute une nouvelle gamme de balise permettant de facilement structurer son site (header, footer, embed, etc.)

 

Balises désormais obsolètes


Certaines balises sont devenues obsolètes depuis l’arrivée de l’HTML5, en voici la liste et ne doivent donc plus être utilisée :

<frame> / <frameset> / <noframes> / <acronym> devient désormais <abbr> / <accesskey> / <longdesc> / <name> / <language> / <summary> / <basefront> / <big> / <center> / <font> / <s> / <strike> / <tt> / <u>

 

Mise en pratique


Nous allons désormais monter une page en utilisant uniquement les balises HTML5. Nous n’allons pas nous concentré sur les balises que l’on trouvais déjà dans les versions antérieurs du HTML, ni sur l’utilisation du CSS.

Commençons par notre doctype et la balise head.

<!DOCTYPE HTML>
<html>
 <head>
     <meta charset="utf-8">
     <title>Titre de la page</title>
     <link rel="stylesheet" type="text/css" href="monstyle.css">
 </head> 

Comme vous pouvez le constater, cette section s’est largement amoindrie comparativement à versions antérieures. Nous allons maintenant pouvoir nous occuper du corps de notre page.

 

 <!DOCTYPE HTML>
<html>
 <head>
     <meta charset="utf-8">
     <title>Titre de la page</title>
     <link rel="stylesheet" type="text/css" href="monstyle.css">
 </head>
<body>
	<div id="global">
		<menu>
			<ul>
				<li>Menu</li>
				<li>Menu</li>
			</ul>
		</menu>
		<article>
			<header>
				<h1>Page en HTML5</h1>
				<abbr>
					<time class="entry-date published" datetime="2012-18-18T12:00:00+00:00"> 18 Mai 2012 </time>
				</abbr>
			</header>
			<content><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p></content>
			<footer><p>Webmaster, adresse, liens</p></footer>
		</article>
		<aside> <header><h2>Informations complémentaires</h2></header>
			<content><p>Curabitur sagittis purus vitae dui volutpat lobortis. Nullam a mi et quam suscipit eleifend non ut sem. Vestibulum eu vulputate turpis.</p></content>
			<footer><p>Compléments d'informations</p></footer>
		</aside>
	</div>
</body> 
</html> 

 

Ici, nous avons la création d’un article ou d’une page simple inclus à l’intérieur d’un div « global » qui nous permettra de structurer plus simplement notre page.

 

L’utilisation de la balise <menu> nous permet ici de placer un un espace de navigation en tête de page

Nous utilisons ensuite directement la balise header afin d’afficher le titre de notre article, ou dans le cas présent, de notre page. A l’intérieur de celui-ci nous retrouvons un h1 classique qui permet de nommer le texte comme étant un titre. Il n’est pas nécessaire d’appliquer un style sur le h1, le header se suffit à lui-même.

 

Nous avons ensuite la balise <time> qui ici n’affichera au regard de l’utilisateur que la date du 18 Mai. L’ensemble des valeurs incluses à l’intérieur même de la balise restent invisibles. Le tout est entouré de la balise <abbr> qui, je le rappel, remplace l’ancienne balise <acronym>, indiquant au navigateur que la date affichée est une diminution de ce qu’on retrouve dans l’espace « datetime ».

 

Pour ce qui concerne les blocs de contenu, il n’y a aucune spécificité. Il suffit simplement de remplir la balise avec du texte.

 

Passons maintenant à la partie « aside » de notre code. Comme expliqué précédemment, cette balise sert à indiquer que les informations qu’elle englobe sont complémentaires. Elles ne seront donc pas traiter avec le même niveau de valeur que les autres.

Nous retrouvons donc la même structure (bien que ce ne soit pas obligatoire) qu’au dessus. Dans le cas d’un bloc, il est par exemple parfaitement possible de masquer la partie « aside » et de l’afficher grâce à un lien javascript.