Appearance
HTML – Débutant
Le HTML (hyper text markup language) est un langage de programmation qui sert à structurer, hiérarchiser et afficher le contenu d'une page web. Il s'écrit avec des balises suivant cette syntaxe :< nom de la balise attributs >contenu de la balise</ nom de la balise >
La structure d'un document HTML est donc une suite de balises que l'on organise afin de donner du sens à notre contenu. Il nous revient de construire notre document HTML afin qu'il soit le plus explicite et sémantiquement correcte.
Astuce
En HTML, chaque balise est une boîte. Se représenter une boîte par élément est un bon moyen de comprendre la structure du document. Tout est une boîte en HTML.
Les balises indispensables
<!DOCTYPE>= déclaration du type de document<html>= racine du document, contient tous les autres éléments<head>= fournit des informations générales (métadonnées) sur le document<body>= contenu principal du document
Les balises et attributs recommandés
lang= déclaration du langage utilisé pour le contenudir= Sens de lecture du contenucharset= définit l'encodage des caractères utiliséstitle= définit le titre du document (fenêtre/onglet/référencement)
Afficher le code
html
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
[Contenu du site]
</body>
</html>Les balises structurantes
<header>= en-tête<nav>= élément contenant des liens, destiné à la navigation<main>= contenu principal du document<article>= une composition autonome pouvant être utilisée seule<section>= zone générique du document, plus utile au développeur qu’à l’utilisateur<aside>= contenu secondaire ou indirect à l’inverse de<main><h1>-<h6>= niveaux des titres du document<footer>= pied de page
Afficher le code
html
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<header>
<nav></nav>
</header>
<main>
<section>
<h1>Titre principal</h1>
<article>
<header>
<h2>Titre secondaire</h2>
</header>
</article>
</section>
</main>
<aside>
<h2></h2>
</aside>
<footer></footer>
</body>
</html>Les balises de contenus
On distingue deux catégories de balises: bloc (block) et en ligne (inline). Les balises en ligne ne peuvent pas contenir de balises bloc.
Ci-dessous, quelques exemples de balises (listes non exhaustives).
Balises bloc
Les balises “ en bloc ” sont des balises qui occuperont toute la largeur disponible, quelle que soit la largeur de leur contenu.
<blockquote>= une citation<p>= un paragraphe<ol>= liste ordonnée<ul>= liste désordonnée (liste à puce)<li>= élément d’une liste<div>= conteneur générique
INFO
Les balises structurantes sont toutes des balises en bloc.
Balises en ligne
Les balises “ en ligne ” sont des balises qui occuperont uniquement la largeur de leur contenu.
<img>= insertion d’une image<a>= un lien<span>= conteneur générique en ligne<strong>= contenu important (en gras)<br>= saut de ligne
Afficher le code
html
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<body>
<header>
<nav>
<a href="/">accueil</a>
</nav>
</header>
<main>
<section>
<h1>Titre principal</h1>
<article>
<header>
<h2>Titre secondaire</h2>
</header>
<p>Lorem <strong>ipsum</strong> dolor sit amet.</p>
</article>
</section>
</main>
<aside>
<h2></h2>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</aside>
<footer></footer>
</body>
</html>