Introduction À HTML5

Introduction
M. Abdoulaye DIENG Jan 2017

1
Objectif général
Découvrir quelques nouveautés du HTML5
2
Objectifs opérationnels
• Connaître les avantages du HTML5
• Utiliser les nouveaux éléments de structuration
• Utiliser les nouveaux éléments conteneurs
• Utiliser les nouveaux éléments de contenu
incorporé
• Utiliser les nouveaux éléments et attributs de
formulaire
3
Sommaire
1. Présentation de HTML5
2. Avantages du HTML5
3. Squelette de base
4. Éléments de structuration
5. Éléments conteneurs
6. Éléments de contenu incorporé
7. Éléments et attributs de formulaire
4
Présentation de HTML5
• HTML5 (HyperText Markup Language 5) est la dernière
révision majeure du standard HTML
• HTML5 est finalisé en octobre 2014 par le WHATWG (Web
Hypertext Application Technology Working Group) et le W3C
(World Wide Web Consortium)
• HTML5 se focalise sur les applications Web et l'interactivité,
sans toutefois délaisser l'accessibilité et la sémantique.
• HTML5 se positionne également comme concurrent des
technologies Flash, Silverlight et mobiles (natives)
• Tous les navigateurs ne supportent pas toutes les
fonctionnalités offertes par HTML5.
Vérifier le support sur : http://caniuse.com/
5
Avantages du HTML 5
• Pour le développeur :
– code plus léger
– validation intégrée de formulaire
– facilité de mettre des animations
– beaucoup d’API JavaScript intégrées
• Pour l’internaute :
– chargement plus rapide des pages
– formulaires plus efficaces et plus faciles à utiliser
– pas besoin de plugin pour les animations
– augmentation de l’UX (drag&drop, webcam, geoloc., etc.)
6
Squelette de base du HTML 5
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title> Titre de la page </title>
</head>
<body>
contenu de la page
</body>
</html>
7
Éléments de structuration
schéma
8
section
• Utilisé pour regrouper des éléments différents, mais

partageant la même thématique.
• section est équivalent (ou remplaçant) de div
• Définit les chapitres, en-têtes, pieds de page, ou toutes autres

sections du document.
9
section
<section>
<h2> Section 1 </h2>
<section>
<h3> Section 1.1 </h3>
<section>
<h4> Section 1.1.1 </h4>
</section>
</section>
</section>
<section>
<section>
<h3> Section 2.1 </h3>
<p>Lorem Ipsum Dolor Sit Amet.<p>
</section> 10
article
• Délimite du contenu ayant son propre sens indépendamment

du reste de la page
• Ce contenu est distribuable et réutilisable.
• Ce contenu peut être un billet de forum, un article de journal,

un gadget, un commentaire d'utilisateur.
11
article
<article>
<h2> titre de l'article </h2>
<section>
<p> lorem ipsum dolor …
</p>
</section>
…
</article>
12
nav
• Délimite des liens de navigation inter-pages ou intra-page
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="apropos.html">À propos</a></li>
<li><a href="services.html">Nos
services</a></li>
</ul>
</nav>
13
aside
• Encapsule du contenu supplémentaire relative à un article,

une section ou une page
• Peut être :
– un glossaire, une citation de l'article ou de la section
parent
– Liste de blogues lus, liens relatifs pour une page ou un site.
• Le contenu ne doit pas être nécessaire à la compréhension de

l'article, de la section ou de la page
14
aside
<article>
<h1>Titre de l'article</h1>
<section>
<h2>Section 1</h2>
<p> lorem ipsum dolor … </p>
</section>
<aside>
<h2>Glossaire</h2>
<dl>
<dt>mot 1</dt>
<dd>Lorem Ipsum Dolor Sit Amet</dd>
<dt>mot 2</dt>
<dd>Lorem ipsum dolor sit amet</dd>
</dl>
</aside>
15
</article>
header
• Pour l'entête d'une section et/ou d'une page
• Peut contenir le titre principal h1 de la page, une table des

matières, un logo, un formulaire de recherche, etc.
• Possibilité d’avoir plusieurs header dans une page
16
header
<header>
<h1>Le titre le plus important de la
page</h1>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">À propos</a></li>
<li><a href="#">Nos produits</a></li>
</ul>
</nav>
</header>
<article>
<header>
<h2>Titre de cet article</h2>
</header>
<p>...Lorem Ipsum dolor set amet...</p> 17
footer
• Pied de page pour le premier ancêtre parent de type section
• Peut contenir l'information sur l'auteur et sur les droits

d'auteur
• Peut contenir des liens relatifs à la section, des liens vers la

carte du site, des liens vers le formulaire de contact, etc.
• Ces liens ne doivent pas être délimités par nav.
18
footer
<article>
contenu de l’article ….
<footer>
<p>Cet article a été écrit par …
Copyright © … </p>
<ul>
<li><a href="#">À propos</a></li>
<li><a href="#">Nous contacter</a></li>
</ul>
</footer>
</article>
19
Éléments conteneurs
figure et figcaption
• figure sert de conteneur dans lequel s'insèrent divers

éléments comme des images, des schémas, des diagrammes
ou du code.
• figcaption, enfant direct de figure, son rôle est de légender
son parent, sous forme de texte et/ou de liens.
• figcaption est facultatif et peut se placer avant ou après le
contenu principal de figure.
<figure>
<figcaption>Bobby, le chien de
Modou</figcaption>
<img src="bobby.jpg" width="304" height="228"
/>
</figure> 20
Éléments conteneurs
main
• Délimite le contenu principal du document ou de l'application.
• Ce contenu doit être unique dans le document, excluant tout

contenu qui est répété sur plusieurs documents comme des
barres latérales, liens de navigation, informations de
copyright, logo du site, et champs de recherche
• Un seul élément main dans un document
21
tp1
Éléments de contenu incorporé
video
• video permet d’intégrer une vidéo dans une page sans recourir
à un plugiciel
• L’attribut src : lien vers le fichier de la vidéo
• L’attribut autoplay : lecture automatique
• L’attribut loop : relecture automatique
• L’attribut poster : lien vers une image à présenter pendant que
la vidéo se charge ou si elle n'est pas disponible
• L’attribut controls : affichage des commandes de lecture
• L’attribut preload = auto|metadata|none : préchargement
– metadata : nom, format, taille, durée, …
– none : aucun
– auto (par défaut) : le navigateur décide s'il doit précharger
toute la vidéo, uniquement les métadonnées ou rien du tout 22
video - formats et support
• Il n'y a pas de format vidéo unique qui est supporté par

tous les navigateurs.
• Fournir plusieurs formats à la fois afin d'assurer le soutien
de lecture dans tous les principaux navigateurs.
Plateforme utile : http://www.online-convert.com/
• L’élément source, enfant de video, permet de fournir
plusieurs versions de la vidéo avec son attribut src.
Chrome Firefox Opera Safari IE9+
WebM Oui Oui Oui Non Oui
mp4 Oui Non Non Oui Oui
Ogg Oui Oui Oui Non Non
23
video - exemple
<video preload="none" controls>

<source src="mon_film.mp4" type="video/mp4">
<source src="mon_film.ogv" type="video/ogg">
<source src="mon_film.webm"
type="video/webm">
Votre navigateur ne supporte pas la balise video.
</video>
24
tp2
audio
• audio permet d’intégrer de l’audio dans une page sans recourir

à un plugiciel
• L’attribut src : lien vers le fichier audio
• L’attribut autoplay : lecture automatique
• L’attribut loop : lecture en boucle
• L’attribut controls : affichage des commandes de lecture
25
audio - formats et support
• Il n'y a pas de format audio unique qui est supporté par
tous les navigateurs.
• Fournir plusieurs formats à la fois afin d'assurer le soutien
de lecture dans tous les principaux navigateurs.
• L’élément source, enfant de audio, permet de fournir
plusieurs versions de l’audio avec son attribut src.
Chrome Firefox Opera Safari IE9+
Wav Oui Non Oui Oui Oui
Mp3 Oui Non Non Oui Oui
Ogg Oui Oui Oui Non Non
Aac Oui Non Non Oui Non
26
audio - exemple
<audio controls="controls">
<source src="concerto_mozart.wav" type="audio/wav" />
<source src="concerto_mozart.ogg" type="audio/ogg" />
<source src="concerto_mozart.mp3" type="audio/mp3"
/>
<source src="concerto_mozart.aac" type="audio/aac" />
Votre navigateur ne supporte pas la balise audio.
</audio>
27
Éléments de formulaire
champ email
• Pour renseigner une ou plusieurs adresses e-mail.

• Ce champ attend au minium un caractère (caractère non
accentué comprenant les séparateurs tiret ou underscore)
suivi d'un @ suivi à son tour d'un caractère.
• Un navigateur de SmartPhone compatible avec ce type de
champ présentera un clavier adapté incluant les symboles . et
@.
<input type="email" name="votre_email" />
<input type="email" name="vos_emails[]"
multiple="multiple" />
28
champ url
• Pour renseigner une URL

• Tous les types d'URL sont admis (ftp://, mailto:, http://, …).
champ présentera un clavier adapté incluant les touches /, . et
.com.
<input type="url" name="votre_site" />
29
champ tel
• Pour renseigner un numéro de téléphone.

champ présentera un clavier de type numérique.
<input type="tel" name="votre_phone"
/>
30
champ date
• Pour renseigner une date

• Un navigateur compatible propose une aide au remplissage
<input type="date" name="date_naiss"

/> 31
champ number
• Pour renseigner une valeur numérique.

• Un navigateur compatible propose deux boutons permettant
l'incrémentation et la décrémentation d'une valeur
numérique initiale (0 par défaut).
• Un Smartphone compatible propose un clavier numérique.
• L’attribut step permet de modifier le pas (1 par défaut) de
l’incrémentation.
• Les attributs min et max permettent de limiter le nombre
dans un intervalle défini.
<input type="number" name="age"
/>
32
champ range
• Pour renseigner une valeur numérique dans un intervalle

donné.
• Un navigateur compatible propose un curseur.
• L’attribut step permet de modifier le pas (1 par défaut) de

l’incrémentation.
• Les attributs min et max permettent de limiter le nombre
dans un intervalle défini.
• Par défaut cet intervalle est [0; 100]
<input type="range" name="niveau"
/> 33
élément datalist
• datalist : délimite une liste de suggestions, liée à un
élément input.
• option : enfant de datalist, définit une suggestion comme

valeur de son attribut value
• Le champ (input) et la liste de suggestions (datalist + option)
sont reliés grâce à la valeur commune des attributs list de
l’input et id de la datalist.
34
élément datalist
<label for="a">Votre plat
préféré</label>
<input id="a" list="plat" />
<datalist id="plat">
<option value="tiébou dieune">
<option value="mafé">
<option value="thiou">
<option value="yassa">
<option value="cbon">
</datalist>
35
attribut autofocus
• Spécifie si le champ doit recevoir automatiquement le curseur

au chargement du formulaire
<form action="login.php">
Email : <input type="email" name="email"
autofocus><br>
Mot de
passe: <input type="password" name="pass"><br>
<input type="submit" value="Connexion" >
</form>
36
attribut placeholder
• Permet d’afficher une valeur indicative dans un champ de

texte
• Quand l’utilisateur clique dans le champ, contrairement à ce
qui se passe avec l’attribut value, le contenu disparaît.
• La valeur indicative n'est pas transmise lors de la soumission
du formulaire.
• NB : La présence d'un placeholder ne dispense pas de
renseigner un label pertinent.
<input type="text" placeholder="Votre pseudonyme"
name="pseudo"/>
37
attribut required
• Permet de rendre obligatoire le remplissage d'un champ et de

bloquer la validation du formulaire si l'un des champs
(concernés par cet attribut) n'a pas été renseigné.
<input type="text" required="required"

name="pseudo"/>
• NB : L'attribut required ne dispense pas de rajouter, pour
chaque champ obligatoire, dans l'étiquette associée une
astérisque et de faire précéder le formulaire du message
« Les champs indiqués par une * sont obligatoires ».
38
tp3

Introduction À HTML5

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Introduction À HTML5

Transféré par

Droits d'auteur :

Formats disponibles

Introduction

M. Abdoulaye DIENG Jan 2017

Découvrir quelques nouveautés du HTML5

• Utilisé pour regrouper des éléments différents, mais

• section est équivalent (ou remplaçant) de div

• Définit les chapitres, en-têtes, pieds de page, ou toutes autres

• Délimite du contenu ayant son propre sens indépendamment

• Ce contenu est distribuable et réutilisable.

• Ce contenu peut être un billet de forum, un article de journal,

• Délimite des liens de navigation inter-pages ou intra-page

• Encapsule du contenu supplémentaire relative à un article,

• Le contenu ne doit pas être nécessaire à la compréhension de

• Pour l'entête d'une section et/ou d'une page

• Peut contenir le titre principal h1 de la page, une table des

• Possibilité d’avoir plusieurs header dans une page

• Pied de page pour le premier ancêtre parent de type section

• Peut contenir l'information sur l'auteur et sur les droits

• Peut contenir des liens relatifs à la section, des liens vers la

• Ces liens ne doivent pas être délimités par nav.

• figure sert de conteneur dans lequel s'insèrent divers

• Délimite le contenu principal du document ou de l'application.

• Ce contenu doit être unique dans le document, excluant tout

• Un seul élément main dans un document

• Il n'y a pas de format vidéo unique qui est supporté par

<video preload="none" controls>

• audio permet d’intégrer de l’audio dans une page sans recourir

• Pour renseigner une ou plusieurs adresses e-mail.

• Pour renseigner une URL

<input type="url" name="votre_site" />

• Pour renseigner un numéro de téléphone.

• Pour renseigner une date

<input type="date" name="date_naiss"

• Pour renseigner une valeur numérique.

• Pour renseigner une valeur numérique dans un intervalle

• L’attribut step permet de modifier le pas (1 par défaut) de

• option : enfant de datalist, définit une suggestion comme

• Spécifie si le champ doit recevoir automatiquement le curseur

• Permet d’afficher une valeur indicative dans un champ de

• Permet de rendre obligatoire le remplissage d'un champ et de

<input type="text" required="required"

Vous aimerez peut-être aussi