Home > Developpement Web > HTML5 – Introduction

HTML5 – Introduction

Définition HTML

HTML (HyperText Markup Language), est un langage de balise, permettant la mise en forme d’une page Web. Spécifié par le W3C (World Wide Web Consortium), le HTML est interprété par le navigateur de l’utilisateur, on parle de langage interprété coté client.

XHTML 1.X et HTML5

XHTML 1.X est une évolution du langage HTML4. Il est défini comme une « reformulation de la version HTML4 en une application XML ». Cela veut dire que XHTML 1.X est le successeur de HTML4, fondé sur la syntaxe définie par XML. Cette version a été la plus utilisée depuis la recommandation W3C en 2000 jusqu’à l’apparition de son successeur HTML5. Ce dernier est de plus en plus adopté par les développeurs d’aujourd’hui et devient progressivement le nouveau standard.

HTML 5 est une version plus permissive que la version précédente. De nouvelles balises et fonctionnalités sont ajoutées, et d’autres sont dépréciées car elles sont non utilisées ou simplement dépassées. HTML5 définit des familles d’éléments plus variés comme des méta-informations, du contenu embarqué et du contenu interactif.

Architecture d’un document

L’architecture d’un document HTML5 n’est pas très différente de l’architecture des versions précédentes :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <!-- Votre head -->
        <meta charset="utf-8">
        <title>Ma Page</title>
    </head> 
    <boby>
        <!-- Votre page -->
    </body>
</html>

Description des balises déterminant l’architecture :

<html> :

Cette balise correspond à la racine du document, elle contient un élément <head> suivi d’un <body>. Vous définissez la langue utilisée avec l’attribut lang.

<head> :

La balise <head> contient les méta-informations interprétées par le navigateur de l’utilisateur. Cette balise correspond a l’entête du document. vous retrouverez dans le <head> les balises suivantes : 
<title><meta><link><style><script>.

<body> :

Cette balise correspond au corps du document, elle contient toutes les balises HTML correspondant au contenu de votre page.

<title> :

La balise <title> est une balise unique. Elle est placée dans le <head> de votre document et correspond au titre de votre page.
 
<title>Ma page</title>

<meta> :

<meta> est une balise permettant d’apporter des informations dans le <head> de votre page. 
 
<meta charset="utf-8">
<meta name="Description" content="Description de ma page">
<meta name="Keyword" content="tuto, html5">
<meta name="Author" content="Thomas">

<style> :

La balise <style> vous permet de déclarer des styles CSS sur votre page html
 
<style> 
     h2{
        color : #F5F5F5;
     }
</style>

<script> :

<script> est une balise permettant de contenir du code JavaScript et peut permettre d’importer des fichiers Javascript externes. 
 
<script type="text/javascript">
     alert("Hello World !");
</script>

<script type="text/javascript" src="helloworld.js"></script>

<noscript> :

Cette balise n’est activée que lorsque les scripts ne sont pas activés sur le navigateur de l’utilisateur.  Dans le cas contraire elle est désactivée.
 
<noscript>
     Le javascript n'est pas activé sur votre navigateur
</noscript>

Structure et hiérarchisation d’un document

Depuis HTML5 la structure du document a évolué. En effet de nouveaux éléments de balisage simples et explicites ont vu le jour et permettent une structure et une hiérarchisation générique.

<article> :

Cette balise est une portion de contenu pouvant etre syndiquée dans un flux RSS. Un <article> peut être imbriqué dans une autre <article>
 
<article>
     <header>
          <h1>Mon titre</h1>
     </header>
     <p> Lorem ipsum </p>
     <footer>Article n°1</footer>
</article>

<aside> :

Cette balise permet de créer un bloc lié au contenu principal comme par exemple une sidebar.
 
<article>
     <header>
          <h1>Mon titre</h1>
     </header>
     <p> Lorem ipsum </p>
     <aside>
          <h2>Mon titre 2</h2>
          <p> Informations complémentaires </p>
     </aside>
     <p> Lorem ipsum </p>
</article>

<section> :

Élément générique pour une section de contenu; cet élément est souvent utilisé à défaut des balises <article>, <aside>, <nav>, <header>, <footer>.

<nav> :

Élément destiné a regrouper les liens principaux pour la navigation sur le site.
 
<nav>
     <ul>
          <li><a href="#">Lien n°1</a></li>
          <li><a href="#">Lien n°2</a></li>
     </ul>
</nav>

<header> :

Cette balise correspond à une entête. Elle peut être utilisée pour l’entête de la page mais aussi tout autre section comme par exemple <article>
 
<body>
   <header>
      <h1>Mon header</h1>
   </header>
   <p>Lorem ipsum</p>
</body>

<footer> :

Comme l’indique le nom de cette balise, elle permet de définir le pied d’un élément section comme par exemple <article>
 
<article>
   ...
   <footer>
      <p>Auteur de l'article: Thomas Ferney</p>
   </footer>
</article>

<h1> <h2> <h3> <h4> <h5> <h6> :

Ces balises sont destinées à déterminer la hiérarchie dans les titres de votre site. Attention, n’utilisez qu’un <h1> par page et respectez bien la hiérarchie  (il ne faut pas se fier à la taille du texte ect … le CSS est la pour ça).
 
<h1>Titre principal de ma page</h1>
<h2>Titre de mon article</h2>
<h3>Sous-titre de mon article</h3>

<hgroup> :

<hgroup> permet de regrouper un ensemble de titre (<h1>,<h2> …) pour constituer un entête.
 
<article>
     <hgroup>
        <h2></h2>
        <h3></h3>
     </hgroup>
</article> 

<p> :

Cette balise correspond à un paragraphe (Attention de ne pas insérer d’éléments de type bloc).
 
<p>
   Lorem ipsum ...
</p>

<br> :

Cette balise force un saut de ligne. Les bonnes pratiques préconisent l’utilisation des propriétés CSS afin d’éviter un usage abusif de cette balise. 
 

<hr> :

Cette balise correspond à une séparation entre deux paragraphes, souvent représentée par un barre horizontale.
 

Prise en charge du HTML5

Aujourd’hui la prise en charge de HTML5 est en évolution constante, et varie en fonction des différents navigateurs. Vous pouvez voir dans les tableaux suivants la prise en charge des différentes propriétés HTML5

HTML5-WebApplicationsSupport

HTML5-GraphicsEmbedded

HTML5-FormsInputs

HTML5-FormsAttributes

Source des tableaux : FindmeByIP.com

 

Mots clefs menant à cette page :

Définition HTML HTML (HyperText Markup Language), est un langage de balise, permettant la mise en forme d'une page Web. Spécifié par le W3C (World Wide Web Consortium), le HTML est interprété par le navigateur de l'utilisateur, on parle de langage interprété coté client. XHTML 1.X et HTML5 XHTML 1.X est une évolution du&hellip;

Review Overview

N'hésitez pas à noter l'article

User Rating: 4.72 ( 3 votes)

About Thomas Ferney

Thomas Ferney
Etudiant en 5eme année d'informatique, Co-créateur d'horizonduweb, Auto entrepreneur passionné par le Web et les nouvelles technologies.

Voir aussi

Hack, le nouveau PHP par Facebook

Facebook a annoncé sur son blog développeurs la sortie de Hack : un nouveau langage ...

5 comments

  1. RT “@Horizonduweb: HTML5 – Introduction – http://t.co/kqVJY3wPID via @horizonduweb” #html5 #dev #web #tuto

  2. Très bon article merci beaucoup pour ce partage de connaissance ! 😮

  3. Très sympa cet article, quand est-ce que nous aurons le droit aux prochains chapitres ? 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Afin de vous remercier, Horizon Du Web utilise KewordLuv. Entrez votre_Nom@vos Mots Clefs dans le champ "Nom" pour bénéficier de cette option. Les commentaires constructifs, utiles et de plus de 400 caractères seront mis en dofollow.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Lire les articles précédents :
Google I/O 2013 en direct ce soir

À partir de 18h00 ce soir, la conférence de Google, "Google I/O" , sera lancée ...

Fermer