41Mag - Qu’est ce que le HTML5 ?

Qu’est ce que le HTML5 ?

Le HTML5 est un langage de base pour la création de site internet, il sert à structurer vote document. D’autre langage peuvent s’ajouter lors de la conception, mais tout les sites web contiennent du HTML. HTML5 désignant la version du langage HTML.

Pour tous les créateurs en herbe, c’est l’étape obligatoire dans votre apprentissage. On ne peut pas connaitre tous les langages et encore moins les maitriser tous, certains seront appris par choix mais le HTML5 le sera par devoir. Que vous codiez vos pages web par logiciel (dreamweaver …), par CMS (wordpress …) ou par bloc note, il vous sera toujours utile de le connaitre pour certaines retouches ou optimisation du code source.

Le HTML5 est un langage très facile à apprendre. Il est généralement appris en parallèle du CSS. Afin de visualiser pour mieux comprendre, le HTML5 vous permettra de coder votre contenue (titre, paragraphe, menu…) pendant que le CSS le mettra en forme (couleur, choix des polices de caractère, disposition des éléments …).

[cadreHTML5]

Si son apprentissage demeure facile, ses limites sont très vite atteinte.  Une page HTML est dîtes statique – Aucune interaction possible avec votre visiteur. Prenons l’exemple d’un formulaire, Pour l’afficher il vous faudra l’écrire en HTML et le mettre en forme en CSS pour qu’il s’affiche correctement et joliment dans le navigateur. Par contre, si vous cliquez sur le bouton Envoyer, rien ne se passe. Si ce n’est vous rediriger à la page pointer par l’attribut Post de la balise du formulaire comme un simple lien.

Aucune données de formulaire ne sera traitées ou enregistrées en HTML5.

Pour cela, nous aura besoin d’utiliser un autre langage: Le PHP. Il est capable d’envoyer et de traiter un formulaire, utiliser des variables (tous les utilisateurs n’ont pas le même pseudo par exemple), utilisé des cookies (enregistrer des habitudes des vos visiteurs pour leur éviter de re-taper leur pseudo dans un formulaire par exemple) … Le but n’étant pas de vous apprendre le PHP mais de vous montrer les limites du HTML5.

Le HTML5, langage de base, vous servira donc à la mise en place de votre page web. Vous indiquerez au navigateur toutes les informations nécessaire à un affichage correct.

A quoi ressemble le HTML5 ?

Le HTML5 est un langage simple s’inspirant largement du XML. C’est un langage reposant sur le principe des balises.

Il existe deux type de balises, celles qu’on ouvre et qu’on referme et celle qui se referme seule. Chaque balise peut avoir aucun, un ou plusieurs attributs relatif à celle-ci. Prenons un exemple simple afin de mieux comprendre ces deux notions : Un paragraphe sera contenue entre deux balise Paragraphe. L’une pour indiquer son début et l’autre sa fin. Pour modifier la couleur de se paragraphe, on ajoutera un attribut de style à la balise Paragraphe pour lui indiquer dans quelle couleur l’afficher.

1
<p>Entrez ici le contenue de votre paragraphe</p>

La ligne de code précédente à repris l’exemple ci-dessus. Nous utilisons les balises Paragraphe qui s’écrive <p> en HTML5. Noter que la seconde balise contient un anti-slash avant le p, elle indique la fermeture de cette balise.

1
<p style="color:red;">Entrez ici le contenue de votre paragraphe</p>

Dans cette deuxième ligne de code, nous avons ajouter un attribut de style à la balise<p>. Cette attribut est symboliser par style= » « . Dans cet exemple, nous avons indiquer au navigateur d’afficher le texte en rouge, mais nous aurions pu lui demander un autre police de caractère ou même plusieurs  informations en même temps.

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 :

  • La Balise indiquant le doctype
  • La 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

Lorsque vous codez un page, il est important d’utiliser des commentaires. Ces commentaires ne seront ni visible sur le navigateur ni interpréter 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 –>

1
2
3
4
5
6
7
8
9
10
11
12
13
<!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>

Structure complexe et utilisation des nouvelles balises HTML5

La nouvelle version du HTML entraine comme à son habitude quelques modifications. De nouvelles balises et attributs viennent s’ajouter et d’autre qu’on déconseille. 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!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

Chapitre suivant : 04. Le doctype d’un document HTML5

Chapitre précédent : 03. Bien comprendre le principe de balises imbriquées

Article du même thême : ..

  • http://twitter.com/Sventovit Philippe Le Mesle

    Article maginfique

  • Pingback: Apprendre le HTML5 – Tutoriel complet « TAKACLIKE //

  • Villeneuve1995

    Tu utilises des , c’est qu’il faut utiliser.

  • Keusta

    La première chose à dire sur le html est que c’est un langage de structuration du contenu

    • Drivedric

      C’est certain qu’avec un retard d’une année ton commentaire est pertinent.

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.