HTML5 : une référence à adopter à l’heure du responsive design

By Mohamed Published on 27 mars 2014
Find me on:

responsive design

Dernière version en date du HTML, le déjà célèbre HTML5 s’annonce comme la pierre angulaire du développement web. Il propose un environnement fluidifié, rendant encore plus accessible les fonctionnalités de nos appareils : vidéo, animation, graphisme, photo, géolocalisation, etc.

Pour W3C, l’organisme de normalisation en charge du développement du projet, l’HTML5 vise à remplacer au cours de cette année l’HTML 4, le XHTML 1.0 ainsi que le XHTML 2.0.

La structure reste inchangée mais simplifiée

Visuellement ça ressemble à ceci :

<!doctype html>

<html lang="fr">

<head>

<meta charset="utf-8">

<title>Titre de la page</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<!-- Contenu -->

</body>

</html>

Le doctype qui comporte le type de document, sa version, ainsi que l’adresse de la DTD (définition de type de document spécifiant les propriétés des éléments, balises et attributs HTML) est réduit à <!doctype html> ; facile à retenir.

Cliquez ici pour découvrir nos supers conseils pour votre site web !

Nouveauté : les balises sémantiques…

  • <header>: entête de la section ou de la page, titre du site, logo …

  • <nav>: ensemble de liens vers des pages du site

  • <footer>: pied de page d’une section ou de la page

  • <article>: élément de contenu autonome, par exemple un ou plusieurs commentaires sur un billet

  • <section>: structure un article en sections (sujets, chapitres par exemple).

… et les balises fun <audio> et <video> qui insèrent des sons et des vidéos en streaming. Elles constituent une petite révolution qui pourrait concurrencer les formats propriétaires comme Flash ou Silverlight. A côté de cela, il y a aussi: <time>, <embed>, <figure>, <figcaption>, <mark>.

De nouveaux attributs applicables au document HTML5

  • Contenteditable pour l’édition et le balisage d’un passage sélectionné

  • Spellcheck pour la correction orthographique et grammaticale d’un élément

  • data qui permet de stocker des données dans un élément qui peuvent ensuite être réutilisées par un script ou affichées au survol par exemple

  • draggable pour déplacer à l’aide d’une API de glisser-déposer

  • etc.

On ne peut ne pas évoquer les capacités des nombreuses API de l’HTML5 particulièrement pour les applications web ; des capacités disponibles nativement et qui peuvent facilement être étendues avec JavaScript. On peut citer la gestion du mode hors-ligne.

Un standard bien accueilli par les entreprises

La portabilité et la rapidité de développement sous HTLM5 séduit les entreprises conscientes des nouvelles possibilités d’interaction qu’offre ce standard qui permet de renforcer la sécurité au niveau de tous les navigateurs (Chrome, IE, Firefox, WebOS, Safari, Nokia, Opera).

En attendant le produit fini

Le HTML5 est déjà perçu comme une réelle avancée qui marque la rupture avec le HTML de 1999. Sa finalisation est très attendue chez les développeurs qui souhaitent davantage de mobilité des sites internet grâce aux possibilités d’affichage sur les différents périphériques (tablettes, laptop, smartphones). Une bonne référence à adopter à l’heure du responsive design.

A très vite pour un nouvel article !

Tags Webdesign Attract

Ebook image
Cliquez ici pour découvrir nos supers conseils pour votre site web !

Inscrivez-vous à la newsletter