Le HTML5

Posté le par — 1 commentaire ↓

HTML5, qu’est ce que c’est ?

Comme son nom l’indique, le HTML5 est le successeur du HTML.4.0.1. Cette nouvelle version du langage de développement reste dans la lignée du HTML qui a permis la publication des premières pages web, mais introduit un certains nombre de nouveautés qui en font un concurrent sérieux au format Flash .

Une nouvelle organisation des documents

C’est tout d’abord toute la structure et l’organisation du code qui vont être revus avec l’avènement du HTML5. Avec cette nouvelle version du langage, exit l’organisation basée sur les blocs et les lignes. Les concepteurs ont privilégié un agencement par grandes catégories dans lequel on retrouverait les éléments suivants :

  • Metadata content : On retrouvera dans ce grand thème toutes les informations relatives aux balises meta que l’on retrouve toujours dans le header d’un document HTML
  • Flow content : Cette catégorie regroupe tous les éléments qu’on retrouve entre les balises < body > et < /body >
  • Sectioning content : Cette catégorie va permettre de définir les différentes sections visibles de la page (comme le footer, par exemple)
  • Heading content : Toutes les informations qu’on retrouve dans le header seront désormais stockées dans cette section du document.
  • Phrasing content : Cette catégorie rassemble tous les éléments permettant de mettre en forme le texte du document html.
  • Embedded content : va permettre d’importer une ressource dans le document ou d’appeler un élément développé dans un langage différent de celui de la page.
  • Interactive content : On retrouve dans cette catégorie tous les éléments qui permettront l’interaction entre la page et l’utilisateur.

Les avancées par rapport au HTML 4.0.1

Outre cette nouvelle organisation des documents, HTML5 introduit surtout une nouvelle couche d’API. Au total, ce ne sont pas moins de huit nouvelles APIs qui seront proposées dans cette première version du HTML5, parmi lesquelles :

  • Une API de dessin 2D, grâce à la nouvelle balise canvas
  • Une API pour jouer des vidéos et des sons/musiques permis grâces aux balises video et audio;
  • Une API utilisée pour les applications hors-ligne;
  • Une API d’édition en combinaison grâce à l’attribut contenteditable
  • Une API de « glisser-déposer » en combinaison avec l’attribut draggable;
  • Une API qui permet l’accès à l’historique et qui donne la possibilité aux pages d’en ajouter pour prévenir les problèmes de bouton retour-en-arrière.
  • Une API de géo-localisation
  • Une API permettant d’analyser de reproduire une page HTML grâce à la balise inner-HTML

Cette nouvelle couche d’API permettra notamment aux développeurs de limiter l’utilisation de librairies ou de fonctions javascript. En ce sens, les API devraient permettre aux développeurs d’offrir un code mieux organisé et plus conforme aux standards du W3C.
L’arrivée du HTML5 sonne aussi le glas pour une série d’attributs dont la présence étant encore acceptée dans les documents en HTML4 et laisse place à une série de nouveaux attributs et de nouvelles balises

 

Structure d’une page web en HTML5

La structure la plus simple d’une page web en HTML5 sera composé d’au minimum 4 Balises , comme pour les version antérieures de HTML:

La Balise indiquant le doctypeLa balise <html> en tout début et en tout fin de document
Les balises <head> et </head> renfermant des informations utiles au navigateur mais non affiché
Les balises <body> et </body> qui comme leur nom l’indique comporte le corps de votre page

Quelques modifications toutefois : les balises doctype et html

au lieu  de 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <!-- Section non affichable -->
        <!--  Dans l'exemple ci dessus, on indique l'encodage 
        de la page pour le navigateur  -->
    </head>
    <body>
         <p>Structure d'une page web en HTML5</p>
         <!-- Corps de la page web  -->
    </body>
</html>

Lorsque vous codez un page, il est important d’utiliser des commentaires. Ces commentaires ne seront ni visible sur le navigateur ni interprétés par celui-ci. Il vous serviront uniquement a vous repérer sur votre code. Car celui du dessus fais quelque lignes mais imaginez vous avec plus de 5000 lignes …. et vous comprendrez l’importance des commentaires.(Les commentaires se situes entre les signes <!– et –>)

utilisation des nouvelles balises HTML5

La nouvelle version du HTML entraine quelques modifications. De nouvelles balises et attributs viennent s’ajouter et d’autres ne doivent plus être utilisées. Une compréhension parfaite entraine une bonne utilisation des balises et donc un respect de la sémantique. Point fort d’un référencement naturel.

Ci-dessous, le schéma d’un site classique ainsi que son squelette en HTML5.html5

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
	<title>Titre de votre page</title>
  </head>
  <body>
    <header>
      <h1>Nom de la page</h1>
    </header>
	<nav>
		<ul>
			<li>Menu 1</li>
			<li>Menu 2</li>
			<li>Menu 3</li>
			<li>Menu 4</li>
			<li>Menu 5</li>
      </ul>
    </nav>
	<div id="content">
      <article>
        <header>
			<h1>Titre de l'article</h1>
			<p>Description de l'article</p>
        </header>
		<p>Contenu de l'article</p>
        <footer>Pied de l'article
		</footer>
	  </article>
	  <aside>
        <h1>Nom de la colonne latéral</h1>
        <p>Contenu la colonne</p>
      </aside>
	</div>
    <footer>Bas de page</footer>
  </body>
</html>

<header> Informations d’introduction ou de présentation d’une page.
<nav> Éléments de navigations.
<article> Détermine une identité à part entière de la page : billet de blog, un commentaire…
<footer> Le pied car chaque section peut avoir un footer y compris la page entiere

 

Les Balises HTML5

Balise Description
<!– … –> Définit un commentaire
<!DOCTYPE> Définit le type du document
<a> Définit un lien
<abbr> Définit une abréviation
<address> Définit une adresse
<area> Définit une zone à l’intérieur d’une image
<article>NOUVEAU Définit un article
<aside>NOUVEAU Définit une partie latérale au contenu
<audio>NOUVEAU Définit un fichier audio
<b> Texte en gras
<base> Définit une URL de base pour tous les liens de la page
<bdo> Définit la direction du texte
<blockquote> Définit une longue citation
<body> Définit le corps de la page
<br> Saut de ligne
<button> Définit un bouton cliquable
<canvas>NOUVEAU Définit un graphique
<caption> Légende du tableau
<cite> Définit une citation
<code> Mise en forme d’un texte en code informatique
<col> Définit une colonne d’un tableau
<colgroup> Définit un groupe de colonne pour un tableau
<command>NOUVEAU Définit un bouton de commande
<datalist>NOUVEAU Définit une liste d’options
<dd> Définition d’un terme
<del> Définit un texte supprimé
<details>NOUVEAU Définit les détails d’un élément
<dfn> Définition
<div> Définit un calque ou une section
<dl> Liste de définition
<dt> Définition d’un terme
<em> Mise en exergue d’un texte – italique
<embed>NOUVEAU Définit un contenu extérieur (audio, vidéo …)
<fieldset> Regroupe plusieurs éléments d’un formulaire
<figcaption>NOUVEAU Légende d’un groupe d’élément multimédia
<figure>NOUVEAU Définit un groupe d’élément multimédia
<footer>NOUVEAU Définit le bas d’un section ou d’une page
<form> Définit un formulaire
<h1> to <h6> Définit un titre par degré importance de 1 à 6
<head> Définit l’en-tête d’un document
<header>NOUVEAU Définit le haut d’une section ou d’une page
<hgroup>NOUVEAU Regroupe les informations du haut d’une page ou section
<hr> Barre horizontale
<html> Définit un document html
<i> Texte en italique
<iframe> Introduit un page html dans une frame
<img> Définit une image
<input> Définit un champ
<ins> Définit un texte insérer
<keygen>NOUVEAU Générateur de clé pour un formulaire
<kbd> Raccourcis ou touche du clavier
<label> Légende d’un groupe d’élément de formulaire
<legend> Titre d’un groupe d’élément d’un formulaire
<li> Élément d’une liste
<link> Définit les relations entre les documents
<map> Définit une carte
<mark>NOUVEAU Mise en valeur d’un mot ou d’un texte – Texte marqué
<math>NOUVEAU Définit une formule mathématique
<menu> Définit un menu en liste
<meta> Définit des informations relatives au document
<meter>NOUVEAU Définit une unité de mesure
<nav>NOUVEAU Définit un groupe de liens de navigation
<noscript> Définit une alternative au script non supporté
<object> Définit un objet du contenu extérieur multimédia
<ol> Définit une liste ordonné
<optgroup> Regroupe d’une liste d »option dans un formulaire
<option> Option d’une liste dans un formulaire
<output>NOUVEAU Définit un type de sortie
<p> Définit un paragraphe
<param> Définit les paramètres d’un objet
<pre> Texte pré-formaté
<progress>NOUVEAU Définit une progression
<q> Définit une courte citation
<rp>NOUVEAU Annotation ruby si le script n’est pas supporté
<rt>NOUVEAU Annotation ruby d’explication
<ruby>NOUVEAU Définit une annotation en ruby
<samp> Définit un échantillon de code
<script> Définit un script
<section>NOUVEAU Définit une section
<select> Définit une liste sélectionnable
<small> Minimise l’importance d’un texte
<source>NOUVEAU Définit la source d’un contenu multimédia
<span> Définit une section de type inline
<strong> Mise en exergue d’un texte – Texte en Gras
<style> Définit un style CSS
<sub> Mise en indice d’un texte
<summary>NOUVEAU Définit l’en-tête des détails d’un document ou section
<sup> Mise en exposant d’un texte
<svg>NOUVEAU Définit une image vectorielle
<table> Définit un tableau
<tbody> Définit le corps d’un tableau
<td> Définit une cellule d’un tableau
<textarea> Définit une zone de texte
<tfoot> Définit le bas d’un tableau
<th> Définit une cellule d’en-tête d’un tableau
<thead> Définit le haut d’un tableau
<time>NOUVEAU Définit une unité de temps
<title> Définit le titre d’un document
<tr> Définit une ligne de tableau
<track>NOUVEAU Définit une unité de temps pour les éléments <audio> et <video>.
<ul> Définit une liste non-ordonné
<var> Définit une variable
<video>NOUVEAU Définit une vidéo
<wbr>NOUVEAU Définit un possible retour à la ligne

Une réponse à “Le HTML5”

Laisser un commentaire