Chaque page HTML est constituée de plusieurs grandes parties. Ces parties permettent de cadrer vos contenus et permet aussi une optimisation du référencement naturel.
Cet article fait suite au tutoriel développer ma première page HTLM5, nous vous conseillons de le suivre si vous débutez.
Chaque page HTML fait l’objet d’une découpe en plusieurs grandes parties. Ces grandes parties permettent de cadrer vos contenus mais permet aussi aux moteurs de recherche de comprendre la manière dont vous structurez de vos pages, on parle ici de sémantique. Le HTML5 permet de définir les emplacements de vos contenus de manière logique et optimise la « référençabilité » de vos pages par les moteurs de recherche.
Nous n’irons pas ici dans la spécificité, car il est évidemment possible de faire à peu près ce que l’on veut. Toutefois en surfant sur le web, vous avez dû constater que les pages étaient souvent structurées de la même manière. La raison est simple, l’ergonomie.
Avant d’arriver sur l’une des pages de votre site, l’Internaute est d’abord passé par des milliers de sites auparavant. Afin de faciliter l’utilisation du vôtre, il convient de faire en sorte à ce qu’il ne soit pas dérouté et n’ai pas à tout réapprendre : Où est le menu ? Où est l’article que je cherche ? Où sont les boutons qui m’intéressent ?… Sans quoi l’Internaute aura plus vite fait de cliquer sur le bouton précédent.
Et ce n’est pas ce que l’on veut, n’est-ce pas?
Une des découpes de page interne la plus fréquente est la suivante et nous allons voir comment arriver à un tel résultat avec du HTML et un peu de CSS :
MAIN
TITRE 1
TITRE 2
text text text text text text text text text text text text text text text text text text…
TITRE 2
text text text text text text text text text text text text text text text text text text text text text text text text text text text…
L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. La définition du mot Markup est Balise et nous allons parler de balises tout au long de cet article. Les balises permettent d’encapsuler du contenu grâce à une balise d’ouverture, <mabalise>, et une balise de fermeture </mabalise>. Ainsi, le contenu sera placé entre les deux balises d’ouverture et de fermeture : <mabalise>Mon contenu</mabalise>.
Les balises HTML ne sont pas ou peu stylisées par défaut. C’est à dire qu’il n’y a pas de couleur de fond ni de largeur ni de hauteur, ni de bordure… Pour ajouter du style dans votre code HTML et vous permettre de voir le travail que vous réaliserez, il faut utiliser un autre langage qui s’appel le CSS (Cascading Style Sheet). A l’heure où je vous écrit, le CSS en est à sa version 3.
Je vais inclure le CSS directement dans le code HTML, ce que je ne conseille pas de faire par la suite, le but étant normalement de bien séparer le contenu et le style.
Voici un exemple de code HTML + CSS que nous utiliserons :
<header style="background:#000; color:#fff;">Mon super header</header>
Il faudra à l’avenir qu’il ressemble plutôt à cela :
<header>Mon super header</header>
Pour réaliser ce type de structure il vous faut reprendre d’abord ce que l’on a vu lors du précédent tutoriel dont le code HTML final était le suivant :
<!DOCTYPE html> <html lang="fr-FR"> <head> <title>Titre de ma page</title> </head> <body> COUCOU C'EST MOI!!! JE SUIS TA PREMIERE PAGE!!! YOOPI!!!! </body> </html>
BALISE <header>
Il faut ensuite inclure la balise header. Attention, il arrive souvent à mes étudiants de confondre les balises <header> et <head>. La balise <head> se situe au dessus de la balise <body>, tandis que la balise <header> se situe entre les balise d’ouverture et de fermeture de <body></body>.
<!DOCTYPE html> <html lang="fr-FR"> <head> <title>Titre de ma page</title> </head> <body> <header style="background: #f1f1f1; font-size: 16px; font-weight: bold; padding: 2%;">MON HEADER</header> </body> </html>
Dans le header d’une page on y trouve généralement les éléments suivants :
-
- Logo
-
- Baseline
-
- Boutons de connexion
-
- Menu général
-
- …
Pour une sémantique plus poussée, les articles eux-mêmes ont maintenant leur propre header, nous allons voir cela dans quelques lignes… 🙂
BALISE <nav>
Cette balise permet de cadrer les éléments de navigation d’une page. Une page peut contenir plusieurs éléments de navigation. Dans notre exemple, nous allons positionner le menu général de votre site qui se trouve donc dans le header :
<!DOCTYPE html> <html lang="fr-FR"> <head> <title>Titre de ma page</title> </head> <body> <header style="background: #f1f1f1; font-size: 16px; font-weight: bold; padding: 2%;"> HEADER <nav style="background: #2d2d2d; color: #f1f1f1; margin-top: 1%; padding: 2%;">NAVIGATION</nav> </header> </body> </html>
C’est donc entre les deux balises <nav></nav> qu’il faudra mettre le code pour votre menu. Je ferais surement plusieurs tutoriels par la suite pour vous présenter différents menus en CSS3 et/ou jQuery. Petite piste de départ, les menus horizontaux comme verticaux sont développés avec les balises HTML de liste : <ul> et <li>.
BALISE <main>
Cette balise HTML5 est très récente. Elle permet de dissocier le contenu situé après le header et avant le footer de la page.
<!DOCTYPE html> <html lang="fr-FR"> <head> <title>Titre de ma page</title> </head> <body> <header style="background: #f1f1f1; font-size: 16px; font-weight: bold; padding: 2%;"> HEADER <nav style="background: #2d2d2d; color: #f1f1f1; margin-top: 1%; padding: 2%;">NAVIGATION</nav> </header> <main style="padding: 2%; background: #f1f1f1; margin-top: 2%;"> MAIN </main> </body> </html>
BALISE <article>
Avant de vous parler de la balise article, je suis dans l’obligation de vous parler de la balise <section>. Cette balise est générique et n’a pas de sens sémantique clair, toutefois elle permet de regrouper plusieurs contenus qui ont un lien fort les uns avec les autres. Par exemple, sur un site e-commerce, on regroupera les contenus chaussures ensemble et les contenus t-shirts ensemble. Attention toutefois à ne pas utiliser les balises section pour du CSS ou du JS, car elles ne sont apparemment pas faites pour cela. (HTML5 Doctors section markup)
La balise article est indépendante et peut se suffire à elle même. Il est donc possible d’extraire cette balise du document sans qu’elle n’en perde son sens.
<!DOCTYPE html> <html lang="fr-FR"> <head> <title>Titre de ma page</title> </head> <body> <header style="background: #f1f1f1; font-size: 16px; font-weight: bold; padding: 2%;"> HEADER <nav style="background: #2d2d2d; color: #f1f1f1; margin-top: 1%; padding: 2%;">NAVIGATION</nav> </header> <main style="padding: 2%; background: #f1f1f1; margin-top: 2%;"> MAIN <article style="float: left; width: 64%; background: #fff;">ARTICLE</article> </main> </body> </html>
LES BALISES DE TITRES
Lorsque vous créez un document texte, sous Word par exemple, vous allez créer des titres et sous-titres. Ceci va même vous aider à créer un sommaire. Et bien la logique est à peu près similaire pour un site Internet. Il faut donc mettre des titres et sous-titres dans vos pages, ainsi que dans vos articles. Cette pratique est très bénéfique pour le référencement naturel de vos mots clefs.
Depuis le HTML5, une nouvelle balise de titre est apparue, elle permet de relier certains titres entre-eux et permet de rendre votre article/page plus compréhensible des moteurs. Il s’agit ici de la balise <hgroup>
BALISE <hgroup>
<!DOCTYPE html> <html lang="fr-FR"> <head> <title>Titre de ma page</title> </head> <body> <header style="background: #f1f1f1; font-size: 16px; font-weight: bold; padding: 2%;"> HEADER <nav style="background: #2d2d2d; color: #f1f1f1; margin-top: 1%; padding: 2%;">NAVIGATION</nav> </header> <main style="padding: 2%; background: #f1f1f1; margin-top: 2%;"> MAIN <article style="float: left; width: 64%; background: #fff;">ARTICLE <hgroup> TITRES DE MES ARTICLES </hgroup> </article> </main> </body> </html>
BALISES <hx> (<h1>, <h2>, <h3>… <h6>)
Ces balises permettent donc de titrer des pages, des articles et donc de donner de l’importance à des mots ou expressions clefs. Ainsi, les moteurs de recherche sauront que les mots contenus entre ces balises sont importants. Il faut noter que la balise h2 est le sous-titre de h1, la balise h3 est le sous-titre de h2… et ceci jusque h6. La balise h7 n’existe pas.
<!DOCTYPE html> <html lang="fr-FR"> <head> <title>Titre de ma page</title> </head> <body> <header style="background: #f1f1f1; font-size: 16px; font-weight: bold; padding: 2%;"> HEADER <nav style="background: #2d2d2d; color: #f1f1f1; margin-top: 1%; padding: 2%;">NAVIGATION</nav> </header> <main style="padding: 2%; background: #f1f1f1; margin-top: 2%;"> MAIN <article style="float: left; width: 64%; background: #fff;">ARTICLE <hgroup> HGROUP <h1 style="padding-left: 2%; font-size: 20px; color: #333; text-align: left;">TITRE 1</h1> <h2 style="font-size: 16px; color: #333; text-align: left; padding-left: 3%;">TITRE 2</h2> </hgroup> <h2 style="font-size: 16px; color: #333; text-align: left; padding-left: 3%;">TITRE 2</h2> </article> </main> </body> </html>
BALISE <p>
La balise <p> permet de créer des paragraphes de texte.
<!DOCTYPE html> <html lang="fr-FR"> <head> <title>Titre de ma page</title> </head> <body> <header style="background: #f1f1f1; font-size: 16px; font-weight: bold; padding: 2%;"> HEADER <nav style="background: #2d2d2d; color: #f1f1f1; margin-top: 1%; padding: 2%;">NAVIGATION</nav> </header> <main style="padding: 2%; background: #f1f1f1; margin-top: 2%;"> MAIN <article style="float: left; width: 64%; background: #fff;">ARTICLE <hgroup> HGROUP <h1 style="padding-left: 2%; font-size: 20px; color: #333; text-align: left;">TITRE 1</h1> <h2 style="font-size: 16px; color: #333; text-align: left; padding-left: 3%;">TITRE 2</h2> </hgroup> <p style="padding: 2%;">text text text text text text text text text text text text text text text text text text...</p> <h2 style="font-size: 16px; color: #333; text-align: left; padding-left: 3%;">TITRE 2</h2> <p style="padding: 2%;">text text text text text text text text text text text text text text text text text text text text text text text text text text text...</p> </article> </main> </body> </html>
BALISE <footer>
Comme son nom l’indique il s’agit d’un pied de page. Mais seulement. Certes la balise <footer> vous permettra de créer le pied de page de votre page Internet, mais elle est aussi utilisé pour créer le bloc de fin de vos articles. Concernant les articles, on ajoutera du contenu dans la balise footer du type auteur, date, sources… Concernant les pages on y trouvera le plus souvent les mentions légales, les liens vers les compte sociaux, un plan de site (succinct) voire même parfois des formulaires de contact…
<!DOCTYPE html> <html lang="fr-FR"> <head> <title>Titre de ma page</title> </head> <body> <header style="background: #f1f1f1; font-size: 16px; font-weight: bold; padding: 2%;"> HEADER <nav style="background: #2d2d2d; color: #f1f1f1; margin-top: 1%; padding: 2%;">NAVIGATION</nav> </header> <main style="padding: 2%; background: #f1f1f1; margin-top: 2%;"> MAIN <article style="float: left; width: 64%; background: #fff;">ARTICLE <hgroup> HGROUP <h1 style="padding-left: 2%; font-size: 20px; color: #333; text-align: left;">TITRE 1</h1> <h2 style="font-size: 16px; color: #333; text-align: left; padding-left: 3%;">TITRE 2</h2> </hgroup> <p style="padding: 2%;">text text text text text text text text text text text text text text text text text text...</p> <h2 style="font-size: 16px; color: #333; text-align: left; padding-left: 3%;">TITRE 2</h2> <p style="padding: 2%;">text text text text text text text text text text text text text text text text text text text text text text text text text text text...</p> <footer style="color: #f1f1f1; padding: 2%;">FOOTER ARTICLE</footer> </article> </main> <footer style="color: #f1f1f1; padding: 2%; margin-top: 2%;">FOOTER PAGE</footer> </body> </html>
BALISE <aside>
La balise aside permet de cadrer du contenu relatif au contenu principal d’une page mais qui n’est pas nécessaire à la compréhension global du contenu. Ce sont par exemple des liens annexes, des suggestions…
<!DOCTYPE html> <html lang="fr-FR"> <head> <title>Titre de ma page</title> </head> <body> <header style="background: #f1f1f1; font-size: 16px; font-weight: bold; padding: 2%;"> HEADER <nav style="background: #2d2d2d; color: #f1f1f1; margin-top: 1%; padding: 2%;">NAVIGATION</nav> </header> <main style="padding: 2%; background: #f1f1f1; margin-top: 2%;"> MAIN <article style="float: left; width: 64%; background: #fff;">ARTICLE <hgroup> HGROUP <h1 style="padding-left: 2%; font-size: 20px; color: #333; text-align: left;">TITRE 1</h1> <h2 style="font-size: 16px; color: #333; text-align: left; padding-left: 3%;">TITRE 2</h2> </hgroup> <p style="padding: 2%;">text text text text text text text text text text text text text text text text text text...</p> <h2 style="font-size: 16px; color: #333; text-align: left; padding-left: 3%;">TITRE 2</h2> <p style="padding: 2%;">text text text text text text text text text text text text text text text text text text text text text text text text text text text...</p> <footer style="color: #f1f1f1; padding: 2%;">FOOTER ARTICLE</footer> </article> <aside style="float: right; width: 30%; background: #fff; padding: 2%;"> ASIDE <nav> L'équipe Rollingbox <ul> <li><a href="https://plus.google.com/+VirginieFAIVET/">Virginie FAIVET</a></li> <li><a href="https://plus.google.com/+AnthonyGUEDJ">Anthony GUEDJ</a></li> <li><a href="https://plus.google.com/+FlorentAupetit">Florent AUPETIT</a></li> <li><a href="https://plus.google.com/104139298842833610405">Änaïs WUCHER</a></li> <li><a href="https://plus.google.com/+AlexandreDavid78">Alexandre DAVID</a></li> </ul> </nav> </aside> <div style="clear:both;"></div> </main> <footer style="color: #f1f1f1; padding: 2%; margin-top: 2%;">FOOTER PAGE</footer> </body> </html>
Il reste encore une dernière chose. La structure de la page va sûrement prendre la largeur entière de votre écran. Si vous souhaitez donner une largeur à votre page et centrer votre page, faites comme suit :
<!DOCTYPE html> <html lang="fr-FR"> <head> <title>Titre de ma page</title> </head> <body> <div style="width:1200px; margin:auto;"> <header style="background: #f1f1f1; font-size: 16px; font-weight: bold; padding: 2%;"> HEADER <nav style="background: #2d2d2d; color: #f1f1f1; margin-top: 1%; padding: 2%;">NAVIGATION</nav> </header> <main style="padding: 2%; background: #f1f1f1; margin-top: 2%;"> MAIN <article style="float: left; width: 64%; background: #fff;">ARTICLE <hgroup> HGROUP <h1 style="padding-left: 2%; font-size: 20px; color: #333; text-align: left;">TITRE 1</h1> <h2 style="font-size: 16px; color: #333; text-align: left; padding-left: 3%;">TITRE 2</h2> </hgroup> <p style="padding: 2%;">text text text text text text text text text text text text text text text text text text...</p> <h2 style="font-size: 16px; color: #333; text-align: left; padding-left: 3%;">TITRE 2</h2> <p style="padding: 2%;">text text text text text text text text text text text text text text text text text text text text text text text text text text text...</p> <footer style="color: #f1f1f1; padding: 2%;">FOOTER ARTICLE</footer> </article> <aside style="float: right; width: 30%; background: #fff; padding: 2%;"> ASIDE <nav> L'équipe Rollingbox <ul> <li><a href="https://plus.google.com/+VirginieFAIVET/">Virginie FAIVET</a></li> <li><a href="https://plus.google.com/+AnthonyGUEDJ">Anthony GUEDJ</a></li> <li><a href="https://plus.google.com/+FlorentAupetit">Florent AUPETIT</a></li> <li><a href="https://plus.google.com/104139298842833610405">Änaïs WUCHER</a></li> <li><a href="https://plus.google.com/+AlexandreDavid78">Alexandre DAVID</a></li> </ul> </nav> </aside> <div style="clear:both;"></div> </main> <footer style="color: #f1f1f1; padding: 2%; margin-top: 2%;">FOOTER PAGE</footer> </div> </body> </html>
Vous devriez normalement avoir l’ensemble du code vous permettant de réaliser la structure de page vue plus haut. N’hésitez pas à laisser vos commentaires ci-dessous ou bien apporter des modifications ou améliorations. Elles seront bien évidemment les bien venues.
Partager la publication "[HTML5 – Tuto 2] – La structure de vos pages"
