HTML 5, entre simplification et réorganisation

 

Il fait beaucoup de bruit autour de lui, l’HTML 5. Mais s’agit t’il d’un nouveau langage ou d’un simple refresh ? Voyons ensemble les changements majeurs qui lui ont été apportés. Pour cela, je vous propose de partir sur une structure de document HTML simple et de le construire ensemble. Commençons donc par la structure classique du document :

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>

</body>
</html>

Déjà, ceux qui ont l’habitude de faire de l’HTML vont être choqué pas la balise DOCTYPE qui, heureusement pour nous, est maintenant beaucoup plus simple ! Nous avons donc ici la base d’un bon document HTML avec la partie head pour spécifier les informations sur le site tel qu’une page css, un script javascript ou encore le titre du document et la partie body qui contient le contenu du site. Je vous propose de commencer par rajouter à notre head un lien vers un fichier css et un fichier javascript :

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>

<link rel= »stylesheet » href= »theme.css »>

<script src= »script.js »></script>

</head>

<body>

</body>
</html>

 

Nous voici maintenant avec une feuille de style associée à notre page HTML et un script. Mais, si vous observez bien, il n’y a plus besoin de préciser le type de document qu’on associe ! Il ne faut plus non plus fermer les balises auto fermante ! De petit détail pour simplifier notre vie ! Nous allons terminer par ajouter du contenu à notre site, en le structurant et lui donnant un titre, un contenu avec un article et un lien vers le haut.

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>

<link rel= »stylesheet » href= »theme.css »>

<script src= »script.js »></script>

</head>

<body>
<header>

<h1>Ma page HTML 5</h1>

</header

<article>

<h1>Un article</h1>

<p>Blablablablablablablabla blablablablablablabla blablablabla blabla blablablablablablablablabla blablablablabla.</p>

</article>

<footer>

<a href= »# »>Vers le haut</a>

</footer>
</body>
</html>

 

Et voilà une page HTML 5 simple mais utilisant certaines nouveautés. Commençons pas parler des balises header et footer, que tout le monde modélisant avant par des div avec une id valant souvent header et footer. On retrouve aussi comme nouvelle balise article. Pourquoi tant de nouvelle balise ? Il faut tout simplement se mettre dans la tête du développeur qui travaille sur une page de plusieurs centaines de ligne et qui va profiter d’une organisation beaucoup plus avancée que des balise div avec id.

L’autre point vraiment intéressant est l’utilisation de deux balises h1, pratique autrefois déconseillée par le W3C. Maintenant, la balise h1 dans l’article ne sera pas la même que celle du header et nous pouvons donc donner beaucoup plus de titres différents à nos pages.

Voici donc un aperçu court mais intense des nouveautés apportées par l’HTML 5.

Publicités
Publié dans Autres Langages

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :