structure html

L'élément body, corps de la page

Rappelons que l'élément body est le conteneur de tous les autres éléments qui sont affichés par le navigateur.

Il n'y a qu'un seul élément body dans une page.

main

L'élément main définit le bloc principal de la page, il délimite le contenu.

Un seul élément main par page lorsqu'il est présent, fils de l'élément body. Les en-têtes, pieds de page et hors-textes latéraux sont hors de cet élément.

La présence d'un élément main n'est pas obligatoire. Vous trouverez de nombreuses pages sans cet élément.

Balises de titres

Il existe six balises de titres

En général, on ne place qu'une seule balise h1 dans une page, correspondant au titre principal de la page.

Les niveaux de titre suivant permettent de poser des titres pour des parties intermédiaires.

On pourra par exemple avoir un titre de niveau h1 sur la page, la page pourra être découpée en articles (voir plus bas l'élément article), chaque article présentant un titre h2. Un article pourra contenir plusieurs parties, chacune portant un niveau de titre h3...

On peut imaginer d'autres découpages, mais il faut essayer de respecter ce rôle de structuration en niveaux par les balises de titre.

Exemple

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>   article </title>
        <style>
        h1{
        	text-align: center; /* centre le texte dans l'élément de titre*/
        	font-size:70px;/* taille de police */
        	color: #E0B0FF; 
        }
        article{
        	border: 1px dashed gray; /* bordures en gris tiretées, 1px d'épaisseur*/
        	padding: 2px;/* marges intérieures*/
        	margin: 3px;/*marges extérieures*/
        }
        </style>
    </head>
    
<body> 

<h1> La guerre des étoiles </h1>

<p> Extrait d'un  article wikipedia </p>

<article>
<h2> Épisode IV </h2>
<p>Le croiseur de Dark Vador capture le vaisseau de la princesse Leia qui détient les plans volés de l'Étoile Noire, l'arme absolue du puissant Empire galactique. <br>
La princesse dissimule les plans dans la mémoire du droïde R2-D2 qui s’éjecte sur la planète Tatooine en compagnie de son alter ego C-3PO. </p>
<p>Les droïdes sont capturés par des ferrailleurs Jawas avant d'être finalement vendus à la ferme d'Owen Lars où vit Luke Skywalker, un jeune fermier qui rêve d'aventures. Ce dernier intercepte un message de la princesse Leia qui cherche de l'aide d'un certain Obi-Wan Kenobi. </p>
</article> 

<article>
<h2> Épisode  V </h2>
<p>L'Empire attaque la base rebelle de la planète Hoth.</p>
<p>Dans la débandade qui s'ensuit, les héros se retrouvent séparés. Leia, Chewbacca, Solo et C-3PO doivent en effet faire face à une panne de leur vaisseau et se réfugient chez un ancien ami du contrebandier, Lando Calrissian, sur la planète Bespin. </p>
</article> 

<article>
<h2> Épisode  VI </h2>
<p>Le début de l'épisode VI présente le plan mis au point par les héros pour secourir Han Solo des mains de Jabba le Hutt. Il se révèle être un succès et se solde également par la mort du Hutt.</p>
<p> Dans le même temps, l'Empire met au point une deuxième station de combat, l'Étoile de la Mort, dont la construction est supervisée par l'Empereur Palpatine lui-même. L'Alliance rebelle voit donc là une occasion de frapper un coup décisif pour la victoire, d'autant que la station semble vulnérable. </p>
</article>  
       
</body>
</html>

Élément p

L'élément html p sert à structurer un texte en paragraphes.

Les éléments de type p sont par défaut considérés comme des éléments de type block.

Lisez cette page pour comprendre les notions de type block et inline. Il s'agit d'une notion essentielle pour comprendre le comportement des boîtes composant une page html.

Éléments article et section

On peut utiliser l'élément article pour découper la page en unités logiques. L'élément section a un rôle assez proche.

article, section
article	Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension.
section	Section générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête, ou bien section d'application web.

On choisira dans ce cours et dans les pages que vous produirez de pouvoir avoir des articles dans une section mais pas le contraire (mais cela n'est pas un standard, un article peut en fait contenir des sections, il peut contenir des articles...)

Un élément article peut contenir plusieurs éléments p. Mais un élément p ne peut pas contenir d'éléments article (un élément p ne contient d'ailleurs que des éléments inline).

Exemple

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> section, article  </title>
        <style>
        h1{
        	text-align: center; /* centre le texte dans l'élément de titre*/
        	font-size:70px;/* taille de police */
        	color: #E0B0FF; 
        }
        article{
        	border: 1px dashed gray; /* bordures en gris tiretée, 1px d'épaisseur*/
        	padding: 2px;/* marges intérieures*/
        	margin: 3px;/*marges extérieures*/
        	width: 80%;
        }
        section{
        	border: 1px dotted orange; /* bordures en orange pointillées, 1px d'épaisseur*/
        	padding: 2px;/* marges intérieures*/
        	margin: 10px;/*marges extérieures*/
        }
        </style>
    </head>
    
<body> 

<h1> La guerre des étoiles </h1>

 
<section>

<h2> La trilogie d'origine  1977-1983</h2>

	<article>
	<h3> Épisode IV </h3>
	 	blabla
	</article> 

	<article>
	<h3> Épisode  V </h3>
		blabla
	</article> 

	<article>
	<h3> Épisode  VI </h3>
		blabla
	</article> 

</section> 




<section>

<h2> La Prélogie 1999-2005</h2>

	<article>
	<h3> Épisode I </h3>
	 	blabla
	</article> 

	<article>
	<h3> Épisode  II </h3>
		blabla
	</article> 

	<article>
	<h3> Épisode  III </h3>
		blabla
	</article> 

</section> 




<section>

<h2> La troisième trilogie 2015-2019</h2>

	<article>
	<h3> Le réveil de la Force </h3>
	 	blabla
	</article> 

	<article>
	<h3> Les Derniers Jedi </h3>
	 	blabla
	</article> 

</section> 
       
</body>
</html>

Éléments block et inline génériques

L'élément div est un élément block générique (c'est à dire sans sémantique particulière), il est souvent utilisé en vue de l'application d'une règle css. Par "sans sémantique particulière", il faut comprendre que l'on va placer du contenu entre <div> et </div> uniquement parce que l'on aura besoin de créer un bloc (pour agir ensuite sur la mise en forme via du code css), alors qu'avec une balise block telle que section, nous avons vu plus haut qu'une sémantique était attachée au contenu (pour rappel : "section générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête, ou bien section d'application web"). Le contenu d'une balise div peut donc être divers, sans unité de sens particulier, l'intervention d'un bloc n'étant important que pour le rendu visuel de la page.

L'élément span est un élément inline générique. On peut faire les mêmes remarques que pour l'élément div : on utilise span notamment lorsque aucune balise inline prédéfinie ne correspond à l'usage désiré.

Nous verrons dans la suite des exemples d'utilisation de ces deux tags.

Un exemple à lire ici.

nav

L'élément nav définit un bloc dans lequel on disposera les liens principaux permettant la navigation sur le site ou sur la page en cours.

aside

L'élément aside est utilisé comme conteneur pour ce qui n'a pas de relation vraiment directe avec le contenu principal de la structure dans laquelle il se trouve (mais qui peut souvent apporter des compléments).

Un élément aside n'est pas fait spécifiquement pour être placé sur le côté droit ou gauche de la structure dans laquelle il se trouve (cela relève de la mise en forme). Le terme "à côté" fait plutôt référence au contenu qui complète ou est périphérique du contenu principal (sémantique !).

header et footer

header

L'élément header définit l'en-tête (le début) de la structure dans laquelle il se trouve. Il est en général destiné à accueillir des éléments de titre.

Il peut y avoir plusieurs éléments header dans un même document (par exemple l'en-tête de la page et des en-têtes de section ou d'article ou même de parties aside).

Attention à ne pas confondre header avec head.

footer

L'élément footer définit le pied (la fin) de la structure dans laquelle il se trouve. Il peut donc y avoir plusieurs éléments footer dans un même document (un pied de page et des pieds d'articles par exemple).

Un exemple

L'exemple suivant reprend l'ensemble des éléments présentés avec une mise en forme pour donner une idée "visuelle" des rôles :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> structure  </title>
        <style>
        body{ 
            
            height:600px;
        }
        body>header{
            height:100px;
            background-color: pink;
            margin : 5px;
        }
        body>footer{
            clear: both;
            height:100px;
            background-color: pink;
        }
        main{
            float:left;
            width : 70%;
            height : 100%;
            background-color: yellow;
            margin: 5px;
        }
        body>aside{
            float: right;
            width: 25%;
            background-color: red;
            height : 100%;
            margin: 1em;
        }
        section{
            width: 80%;
            height: 45%;
            background-color: #CCCCFF;
            margin: 0 auto;
        }
        article{
            width: 80%;
            height: 30%;
            background-color: blue;
            margin-left: 6px;
            position:relative;
        }
        article>aside{
        	position:absolute;
        	right:0;
        	top:0;
        	width: 15%;
        	height: 80%;
        	background-color: #F0FFFF;
        	margin: 5px;
        }
        </style>
    </head>
    <body>
          <header> <!-- entête de la page -->
                    <h1>Titre de la page avec h1</h1>
                    <nav> éléments de navigation du site avec nav </nav>
          </header>
          
          <aside> balise aside : 
          liens divers, éléments en lien avec la page, 
          section dont le contenu est un complément par rapport à ce qui l'entoure, 
          qui n'est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires. </aside>
          
          <main> <!-- partie contenu de la page -->
           
           main, partie contenant l'information proprement dite.
           
            <section>
                <header>
                    <h2> titre de section avec h2 </h2>
                </header>
                <p> ...</p>
                <p>...</p>
            </section>
                
            <section>
                <h2>titre de section avec h2 </h2>
                <article>
                    <h3> titre d'article avec h3</h3>
                </article>
                
                <article>
                    <h3>titre d'article avec h3</h3>
                    <p> ...</p>
                    <aside> bla bla , balise aside </aside>
                </article>
            </section>
            
          </main>
          
          <footer> <!-- pied de page -->
          Pied de page (balise footer), contient souvent des liens (contact par exemple).
          </footer>
    </body>
</html>