Les base du Html5

Aperçu rapide des
bases du HTML5
Ticoët l Communication culturelle
Rozenn Tanguy - 06 78 00 37 02 - rozenn@ticoet.fr
Erwan Tanguy – 06 62 15 11 02 – erwan@ticoet.fr

HTML52
HTML : les balises et les attributs
HTML permet d'enrichir un
texte avec des informations
structurelles, sémantiques et
de présentation. Le principe
de HTML consiste à utiliser
des éléments délimités par
des balises.
<balise>éléments</balise>
Exemple :
<h1>Titre de mon
contenu</h1>
<p>Paragraphe de mon
contenu<p>
Les attributs permettent
d'apporter certaines précisions
à des éléments. Il peut s'agir par
exemple d'un nom de fichier
(pour placer une image) ou
d'une référence à une adresse
HTML (lorsqu'on crée un lien).
<balise
attribut="contenu">éléments</b
alise>
Exemple d’une image :
<IMG src="bateau01.jpg" alt="Un
bateau">

HTML53
Le head
Simplification du code
Contrairement aux
version html et xhtml
passées, il ne sera plus
nécessaire de spécifier
la version. Cette une
manière d'annoncer
que le html5 est
compatible avec toutes
les versions et que les
futures versions du html
devront l'être.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ma page</title>
<meta
name="description" content="ma
page">
<link rel="stylesheet"
href="file.css">
<script
src="file.js"></script>
</head>
(…)

HTML54
Les balises
Par défaut, il existe plusieurs
comportements pour les
balises. Les deux principaux
sont les balises bloc et les
balises inline.
Bloc
Les balises bloc déterminent
un cadre qui, par défaut,
prend 100% de la largeur et
dont la hauteur se définit par
ses contenus. Il est possible
d’imbriquer plusieurs balises
bloc en fonction des besoins.
Les balises les plus courantes :
 <div> pour un cadre sans
particularité ;
 <h1>, <h2>, <hx> pour
encadrer des titres ;
 <p> pour encadrer des
paragraphes ;
 <hr> pour afficher une ligne
de séparation ;
 <header>, <footer>,
<section>, <article>,
<aside> pour encadrer des
parties précises de votre
contenu…

HTML55
Les balises
Inline
Les balises inline déterminent
une particularité pour des
éléments précis. Il a la largeur
que lui impose son contenu.
Les balises les plus courantes :
 <strong> pour afficher un
gras ;
 <em> pour afficher une
emphase, italique ;
 <span> pour encadrer des
éléments sans particularité –
utile pour des modifications
avec les CSS ;
 <br> pour faire un saut de
ligne ;
 <img
src="url" alt="description">
pour afficher une image ;
 <a href="url"> pour mettre un
lien sur un élément…

HTML56
Les attributs
Les attributs les plus courant
pour faciliter l’usage des CSS
permettent d’ajouter des
identifiants ou des classes aux
balises. Cela permet par
exemple de pouvoir isoler une
div d’une autre :
<div>contenu</div>
<div id="special">contenu
identifié</div>
L’id "special" va permettre de
donner des spécificités CSS sans
toucher à l’autre div. En CSS, on
appelle cet élément #special.
Liste des attributs les plus
fréquents :
 id pour donner un identifiant
(CSS : #id) ;
 class pour donner une classe
(CSS : .class) ;
 title pour donner une
information bulle à un
contenu (texte ou image) ;
 href pour indiquer le chemin
pour les liens <a> ou les styles
CSS <link> ;
 src pour indiquer le chemin
pour les <script> ou les
images <img>…

HTML57
Le <head>
Simplification du code
Contrairement aux version html et xhtml passées, il ne sera plus
nécessaire de spécifier la version. Cette une manière d'annoncer que le
html5 est compatible avec toutes les versions et que les futures versions
du html devront l'être.
Exemple de html5 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ma page</title>
<meta name="description" content="ma page">
<link rel="stylesheet" href="file.css">
<script src="file.js"></script>
</head>
(…)

HTML58
HTML5
Introduction : vers un web sémantique
La version finalisée du html5 est prévu pour 2014 mais il est déjà possible de
l’utiliser. L’avantage du html5 par rapport aux xhtml et hml4, c’est son importante
orientation sémantique. Vous allez pouvoir plus facilement définir les rôles des
balises html, ce qui aura aussi certainement un impact sur le référencement.
Sémantique ?
Le web sémantique est un mouvement qui favorise les « méthodes communes
pour échanger des données ».
Le html est sémantique depuis le début. Les balises qui composent le code html
définissent leur rôle. Le titre principale est défini par un <h1>, les paragraphes sont
eux des <p>, etc.
Le html5 va plus loin en proposant des balises pour presque tous les cas. Là où
était utilisée la balise <div> pour les blocs du site, nous allons pouvoir spécifier ces
blocs comme étant un <header>, un <footer>, le contenu de l’ <article>.
Voir :
http://fr.wikipedia.org/wiki/Web_s%C3%A9mantique
http://www.php-astux.info/semantique-html.php

HTML59
Les balises obsolètes
Certaines balises, même si elles
peuvent être comprises par les
navigateurs, sont considérées comme
obsolètes par le html5. Il est
recommandé de ne plus utiliser.
Les balises à éviter
frame, frameset et noframes
acronym (utiliser abbr à la place)
font, big, center et strike
Les balises redéfinies
<b> maintenant juste pour appliquer
un style à un texte sans donner une
importance
<i> pour signifier que le texte est une
voix alternative sans donner
d'importance
<cite> pour citer le nom d'une œuvre
mas plus le nom d'une personne
Les liens : ça change !
La modification du mode
d'écriture des liens est importante.
La balise <a>, de type inline, ne
pouvait se placer que dans des
balises bloc (<h1><a
href="monlien.html">titre</a></h1>). Si un
lien était répété sur un titre et un
paragraphe, il fallait le rédiger
dans le <h1> et dans le <p>. Avec
le html5, vous pouvez envelopper
les deux balises par un <a> :
<a href="monlien.html"><h1>titre</h1><p>mon
texte de paragraphe</p></a>
Par contre il n'est pas possible
d'insérer un <a> dans un <a> !

HTML510
Structure
Header, footer, nav
La fonction de ces trois balises est assez simple à comprendre. Elles
encadrent l'entête, le pied de page et le menu de navigation.
La véritable nouveauté de ces trois balises résident dans le fait qu'elles ne
sont pas exclusivement destinées à l'ensemble de la page (auquel cas il
n'y aurait qu'un header, qu'un footer…) mais peuvent définir des données
propres à une autre balise structurant la page.
Section
Proche de la balise <div> avec une approche plus sémantique, elle est
censé regrouper des contenus contextuel, par thématique ou apparenté.
Cette balise peut contenir un header et un footer. Header, footer, nav et
aside peuvent être utilisés pour spécifiés les différents contenus de section.

HTML511
Structure
Aside
C'est une forme d'encadré qui peut accueillir du contenu
indirectement en lien avec le contenu général de la page mais qui
n'affecte ce contenu si il était enlevé. Cela peut être une citation
extraite du document principal.
Article
Cette balise est proche de section mais plus précise. Elle est censée
regrouper les données soit d'une page précise, soit d'un flux
éventuel. Il sera donc utilisé pour les billets de blog, les informations,
les fils de discussion…
Il n'est pas simple de définir quand nous devons utiliser section ou
article, sachant qu'il peut y avoir plusieurs section dans un article et
inversement.

Exemple de structure en html5
Source de l'image : http://www.html5code.com/tutorials/html5-semantic-layout-tags/

HTML513
Les balises inline
Nouveaux éléments orientés sémantiques
HMLT5 implémente des éléments "inline" comme les précédents span, strong, em…
Mark
Cette balise permet de surligner des récurrences sans lui donner une importance. Par
exemple, sur une page de résultat pour la recherche d'un terme, <mark> encadre le
terme pour le mettre en surbrillance.
Time
La balise <time> sert à informer sur les dates, les heures ou la combinaison des deux. C'est
une alternative html5 aux microformats. Il est possible d'y ajouter l'attribut pubdate pour
informer que c'est une date de publication.
Exemples :
<time datetime="14:30">14 h 30</time>
<time datetime="2012-08-01T11:12" pubdate>Article publié le 1 août 2012 à 11h12</time>
Autres balises : meter, progress > http://www.alsacreations.com/article/lire/1416-html5-
meter-progress.html

HTML514
Utiliser html5 !
Il est possible d'utiliser du HTML5 aujourd'hui, même si tous les
navigateurs (soit parce que anciens, soit parce que généralement
problématiques). Pour que votre site puisse être lisible sur tous les
navigateurs, il vous faudra vous armer de patience et ajouter
quelques codes.
Style
Pour les navigateurs qui ne savent pas encore interpréter le HTML5,
vous devrez simplement les renseigner en CSS. Par exemple, vous
donnez aux balises blocs une valeur "display: block" (section, article,
nav, aside, header, footer et hgroup).
Les problèmes les plus important vous viendront de IE. Il faudrait, via
du javascript, créer les éléments un par un. Heureusement, il existe
des scripts pour le faire.
Voir les scripts de Remy Sharp par exemple
(http://html5shiv.googlecode.com/svn/trunk/html5.js) à appeler
dans votre <head> avec les commentaires IE : <!—[if IE]><script
src="…"></script><![endif]-->.

HTML516
Quelques liens
 Web sémantique et (x)html5
http://tcuvelier.developpez.com/tutoriels/web-semantique/html5-
microdonnees/introduction/
 HTML5, l'évolution sémantique et SEO
http://blog.maroketing.com/html-5-evolution-semantique-et-
seo/comment-page-1/
 Structurer une page en HTML5 avec les μdonnées et des μformats
http://on-air.hiseo.fr/html5/semantic-html5/
 Les spécifications HTML5 http://www.xul.fr/html5/specifications.php
 Livre de Jeremy Keith
http://www.abookapart.com/products/html5-for-web-designers/
et lire (en anglais) http://adactio.com/articles/1704/
 HTML5 semantic layout tags (en anglais)
http://www.html5code.com/tutorials/html5-semantic-layout-tags/
16

Les base du Html5

Contenu connexe

Tendances

Similaire à Les base du Html5

Plus de Erwan Tanguy

Les base du Html5