Fiche :

Structure sémantique en HTML 5

<head>


<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Titre de la page</title>
	<link rel="stylesheet" href="main.css">
</head>

Le header :

Le <head> en HTML5 est un conteneur invisible pour l’utilisateur, il contient les informations techniques de la page web.

Il sert à donner des instructions indispensables au navigateur et aux moteurs de recherche :

L’encodage du texte indique au navigateur la table de caractères à utiliser pour afficher correctement les lettres, les accents et les symboles
Le Viewport représente la zone graphique de travail. Indispensable pour la mobilité et l’adaptation aux différents écrans.
<title>, c'est le titre de la page (il est affiché dans l'onglet).
Les liens vers les feuilles de style CSS ou vers d’autres scripts.

<body>


<body>
	<header><h1>En-tête</h1></header>
	<nav>
		<ul>
			<li><a href="#">Item 01</a></li>
			<li><a href="#">Item 02</a></li>
		</ul>
	</nav>
	<main>
		<section>
			<h2>En-tête de section</h2>
			<p>Lorem ipsum dolor sit amet ...</p>
			<article>
				<h3>En-tête d'article</h3>
				<p>Donec ut librero sed accu ...</p>
			</article>
			<article>
				<h3>En-tête d'article</h3>
				<p>Donec ut librero sed accu ...</p>
			</article>
		<aside>
			<h2>En-tête de colonne</h2>
			<ul>
				<li><a href="#">Item 01</a></li>
				<li><a href="#">Item 02</a></li>
			</ul>
		</aside>
	</main>
	<footer> ©Copyright 2050. Tous droits reversés. </footer>
	<script src="main.js"></script>
</body>

Le body :

L'élément <body> en HTML5 est la balise qui représente le contenu principal et visible d'un document web.

Il se place après la balise d'en-tête <head> et à l'intérieur de la balise générale <html>.

Les éléments structurant du <body> :

<header> : En-tête d'une page ou d'une section.
<nav> : Menu de navigation principal.
<main> : Contenu principal de la page.
<section> : Section thématique du contenu.
<article> : Contenu autonome et indépendant (article de blog, actualité).
<aside> : Contenu complémentaire ou latéral (barre latérale).
<footer> : Pied de page.

Les principales balises en HTML 5 :

<a href = "http://adresse du lien"> : Création un lien hypertexte.
<strong> : Met le texte en gras et déclare une forte importance aux moteurs de recherche.
<em> : Met le texte en italique et marque une certaine insistance.
<p> : Crée un paragraphe (génère automatiquement un espace avant et après).
<ul>/<li> ou <ol>/<li> : Créent une liste à puces (ul) ou numérotée (ol)
<img src = "image.jpg" alt = "description"> : Insère une image.
<table> : Définit un tableau en HTML. Sert à organiser et afficher des données structurées sous forme de lignes et de colonnes.
<div> et <span> : Ce sont des conteneurs génériques.

La structure générale


<!DOCTYPE html> 
<html lang="fr"> 
	<head> 
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Titre de la page</title>
		<link rel="stylesheet" href="main.css">
	</head>
	<body> 
		<main>
			Le contenu de la page
		</main>
		<script src="main.js"></script>
	</body>
</html>

La structure générale

HTML5 est le squelette de base qui organise le code de la page web. Elle se compose d'une balise racine <html> qui contient deux parties principales : l'en-tête <head> et le corps <body>.

<!DOCTYPE html> : Indique au navigateur qu'il s'agit d'un document HTML5. Il se trouve sur la première ligne.
<html> : L'élément racine qui englobe la totalité du contenu de la page. L'attribut lang="fr" précise la langue utilisée.
<head> : Contient les informations invisibles pour l'utilisateur mais utiles pour le navigateur et les moteurs de recherche.
<body> : Contient tout le contenu visible de la page.

NOTA : Les éventuels scripts Javascript sont chargés juste avant la balise de fin de body </body>.