Le contenu de votre page web ne fait pas tout. Il est souvant égrémenté d'un menu, d'une sidebarre et d'un pied de page. Il peut contenir des lanceurs vers d'autres pages ou bien des articles.
Tous ces ensembles peuvent (et doivent) être comprises dans des balises qui vont structurer notre page.
Les header et footer
Une page est généralement composée d'un header et d'un footer.
Le header peut comprendre (liste non exhaustive) :
- un menu,
- un logo,
- des liens vers des réseaux sociaux,
- …
La balise utilisée est <header>, de type bloc. Attention à le pas la confondre ave la balise <head> !
<header>
<!-- Ici le contenu de mon header -->
</header>
Le footer reprend en général des liens vers les crédits et les mentions légales, et aussi vers certaines pages qui ne sont pas listées dans le menu :
<footer>
<!-- Ici le contenu de mon footer -->
</footer>
La navigation
La navigation consiste en une liste d'éléments permettant de naviger entre plusieurs pages de notre site, ou bien vers plusieurs sections d'une même page.
On utilise pour cela la balise <nav> contenant une balise <ul> ou <ol> :
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="prortfolio.html">Portfolio</a></li>
<li><a href="a_propos.html">À propos</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
Le contenu et les sections
Le contenu principal de la page internet est compris dans la balise <main>.
Il est possible de segmenter le contenu en plusieurs sections via la balise <section>.
<main>
<p>
Texte d'introduction de mon contenu.
</p>
<section>
<h2>
Titre de ma section
</h2>
<p>
Texte de ma section.
</p>
</section>
<section>
<h2>
Titre de ma section
</h2>
<p>
Texte de ma section.
</p>
</section>
</main>
Les articles
La balise <article> permet d'incorporer à notre page du contenu annexe, comme par exemple :
- des articles de blog,
- des produits,
- des commentaires,
- …
<main>
<p>
Texte de mon contenu. Voilà des articles liés à ma page :
</p>
<div>
<article>
<h2>
Titre de mon article
</h2>
<p>
Texte de mon article.
</p>
</article>
<article>
<h2>
Titre de mon article
</h2>
<p>
Texte de mon article.
</p>
</article>
</div>
</main>
La sidebarre
La balise </aside> permet d'afficher du contenu qui n'a pas de rapport direct avec le contenu principal, souvant représenté comme une sidebarre :
<main>
<p>
Texte de mon contenu.
</p>
<aside>
<p>
Texte sans rapport direct.
</p>
</aside>
</main>
Exemple de page type
Maintenant que vous connaissez (presque) toutes les balises HTML, nous allons faire un gros récapitulatif.
Voilà la page type que nous allons coder :
Et voilà son code :
<!DOCTYPE html>
<html>
<!-- Ouverture de la balise head // Contenu NON visible par les internautes -->
<head>
<title>Le titre de ma page web</title>
<meta charset="utf-8" />
<meta name="description" content="Une description de la page..." />
<meta name="author" content="Nicolas AUNE" />
<meta name="copyright" content="© CC BY-NC-SA 4.0" />
</head>
<!-- Ouverture de la balise body // Contenu visible par les internautes -->
<body>
<!-- Header de ma page -->
<header>
<!-- Logo avec lien vers ma page d'acceil -->
<a href="index.html">
<img src="images/logo.svg" />
</a>
<!-- navigation -->
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="prortfolio.html">Portfolio</a></li>
<li><a href="a_propos.html">À propos</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<!-- Contenu -->
<main>
<h1>
Titre de ma page
</h1>
<div>
<section>
<h2>
Titre de ma section
</h2>
<p>
Texte de ma section.
</p>
</section>
<section>
<h2>
Titre de ma section
</h2>
<p>
Texte de ma section. Avec des articles liés :
</p>
<div>
<article>
<h2>
Titre de mon article
</h2>
<p>
Texte de mon article.
</p>
</article>
<article>
<h2>
Titre de mon article
</h2>
<p>
Texte de mon article.
</p>
</article>
</div>
</section>
</div>
<aside>
<p>
Texte sans rapport direct.
</p>
</aside>
</main>
<!-- Footer de ma page -->
<footer>
<p>
<small>
Copyrights 2018 - PUShAUNE - <a href="mentions_legales.html">Mentions légales</a>
</small>
</p>
</footer>
</body>
</html>