04 HTML5 Sémantique

HTML 5: Structure?
• 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
• Un certain nombres de balises sémantiques qui structurent le
document
W.JAKJOUD 76
HTML 5: Structure?
• 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
• Un certain nombres de balises sémantiques qui structurent le
document
W.JAKJOUD 77
HTML 5: Structure?
• document
W.JAKJOUD 78
HTML 5: les balises sémantiques
• Un des plus gros apport de l'HTML5 a été l'arrivée de balises sémantiques
concernant le layout des pages – autrement dit les balises qui définissent la
structure globale de la page:
section, article, aside, header, footer,
nav, figure, figcaption et main
W.JAKJOUD 79
• Main :
• Représente le contenu principal d'une page ou application. Il ne doit y en
avoir qu'une seule par page, donc pas deux fois main dans le même
document.
<!DOCTYPE html> <html><head> <title>Utilisation de main</title> </head>

<body>
<header> L’entête du site <nav> <a href="/">Home</a> </nav> </header>
<main>
<article> <h1>Mon super article</h1> <p>Bla bla bla</p> </article>
<aside> <p>Plus d'infos</p> </aside>
</main>
<footer>Copyright 2020_2021</footer>
</body>
</html> W.JAKJOUD 80
• Section:
• Représente une portion ou section générique d'un document, c’est un
regroupement thématique du contenu
• Article:
• Un peu plus précis que section, il est plus spécifique. Ainsi, on trouvera
assez souvent des balises articles dans des balises section bien que
l’inverse est possible
• On pense à un journal ou on y trouve une section sport avec plusieurs

articles sur le sport (foot ball, tennis, cyclisme,….)
W.JAKJOUD 81
<section>
<article>
<h1>HTML5 expliqué</h1> …
</article>
<article>
</article>
</section>
W.JAKJOUD 82
• Nav:
• Utilisée pour afficher les liens de navigation et avant tout pour indiquer qu'il y a
un menu.
• Aside:
• Utilisée pour afficher des compléments d'informations, ou des contenus pas

forcément en relation avec la page, par exemple dans le cas où on veut afficher
une publicité ou encore un menu de navigation secondaire.
W.JAKJOUD 83
• Header:
• En-téte de la page.
• Footer:
• Pied de la page.
W.JAKJOUD 84
CSS & Eléments sémantiques de HTML5
Elément Détails
Section générique regroupant un même sujet, une même fonctionnalité, de préférence avec
<section>
un en-tête, ou bien section d'application web
Section de contenu indépendante, pouvant être extraite individuellement du document ou

<article>
syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension
Section possédant des liens de navigation principaux (au sein du document ou vers d'autres
<nav>
pages)
Section dont le contenu est un complément par rapport à ce qui l'entoure, qui n'est pas
<aside> forcément en lien direct avec le contenu mais qui peut apporter des informations
supplémentaires.
Section d'introduction d'un article, d'une autre section ou du document entier (en-tête de
<header>
page).
Section de conclusion d'une section ou d'un article, voire du document entier (pied de
<footer>
page).
W.JAKJOUD 130
• Header : exemple
W.JAKJOUD 131
• Footer: exemple
W.JAKJOUD 132
• nav: principaux liens de navigation
W.JAKJOUD 133
• Section : regroupe des contenus en fonction de leur thématique. Elle
englobe généralement une portion du contenu au centre de la page.
W.JAKJOUD 134
• article: Section de contenu indépendante, une partie de la page qui
pourrait ainsi reprise sur un autre site. C'est le cas des actualités
(articles de journaux ou de blogs).
• aside : contient des informations complémentaires au document qu’on
visualise
W.JAKJOUD 135
• Exemple de structure d’une page web
W.JAKJOUD 136
• Exemple de structure d’une page web
W.JAKJOUD 137

04 HTML5 Sémantique

Transféré par

Informations du document

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

04 HTML5 Sémantique

Transféré par

Droits d'auteur :

Formats disponibles

HTML 5: Structure?

• 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

• Les balises <body> et </body> qui comme leur nom l’indique

• 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

• Les balises <body> et </body> qui comme leur nom l’indique

section, article, aside, header, footer,

nav, figure, figcaption et main

<!DOCTYPE html> <html><head> <title>Utilisation de main</title> </head>

• On pense à un journal ou on y trouve une section sport avec plusieurs

• Utilisée pour afficher des compléments d'informations, ou des contenus pas

Section de contenu indépendante, pouvant être extraite individuellement du document ou

Vous aimerez peut-être aussi