Skip to content

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 contenu
  • dir = Sens de lecture du contenu
  • charset = définit l'encodage des caractères utilisés
  • title = 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>

Ces contenus sont publiés sous licence Creative Commons