16
Aperçu rapide des bases du HTML5 Ticoët l Communication culturelle Rozenn Tanguy - 06 78 00 37 02 - [email protected] Erwan Tanguy 06 62 15 11 02 [email protected]

Les base du Html5

Embed Size (px)

Citation preview

Page 1: Les base du Html5

Aperçu rapide des

bases du HTML5

Ticoët l Communication culturelle

Rozenn Tanguy - 06 78 00 37 02 - [email protected]

Erwan Tanguy – 06 62 15 11 02 – [email protected]

Page 2: Les base du Html5

HTML5 2

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">

Page 3: Les base du Html5

HTML5 3

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> (…)

Page 4: Les base du Html5

HTML5 4

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…

Page 5: Les base du Html5

HTML5 5

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…

Page 6: Les base du Html5

HTML5 6

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>…

Page 7: Les base du Html5

HTML5 7

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>

(…)

Page 8: Les base du Html5

HTML5 8

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

Page 9: Les base du Html5

HTML5 9

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> !

Page 10: Les base du Html5

HTML5 10

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.

Page 11: Les base du Html5

HTML5 11

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.

Page 13: Les base du Html5

HTML5 13

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

Page 14: Les base du Html5

HTML5 14

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]-->.

Page 15: Les base du Html5

Tableau des éléments

Page 16: Les base du Html5

HTML5 16

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