Une introduction au HTML

Découvrez le HTML à partir de son histoire et des éléments de base

HTML est une norme définie par leWHATWG, acronyme de Web Hypertext Application Technology Working Group, une organisation formée par des personnes travaillant sur le navigateur Web le plus populaire. Cela signifie qu'il est essentiellement contrôlé par Google, Mozilla, Apple et Microsoft.

Dans le passé, leW3C(World Wide Web Consortium) était l'organisme chargé de créer le standard HTML.

Le contrôle est passé de manière informelle du W3C à WHATWG lorsqu'il est devenu clair que la poussée du W3C vers XHTML n'était pas une bonne idée.

Si vous n'avez jamais entendu parler de XHTML, voici une petite histoire. Au début des années 2000, nous pensions tous que l'avenir du Web était XML (sérieusement). Le HTML est donc passé d'un langage de création basé sur SGML à un langage de balisage XML.

C'était un grand changement. Nous devions connaître et respecter plus de règles. Des règles plus strictes.

Finalement, les fournisseurs de navigateurs ont réalisé que ce n'était pas le bon chemin pour le Web et ils ont repoussé, créant ce qui est maintenant connu sous le nom de HTML5.

Le W3C n'était pas vraiment d'accord pour laisser le contrôle du HTML et pendant des années, nous avons eu 2 normes concurrentes, chacune visant à être la norme officielle. Finalement, le 28 mai 2019, le W3C a officialisé le fait que la «vraie» version HTML était celle publiée par WHATWG.

J'ai mentionné HTML5. Laissez-moi vous expliquer cette petite histoire. Je sais, c'est un peu déroutant jusqu'à présent, comme pour beaucoup de choses dans la vie où de nombreux acteurs sont impliqués, c'est aussi fascinant.

Nous avons eu la version HTML 1 en 1993. [Voici la RFC originale].

HTML 2 a suivi en 1995.

Nous avonsHTML 3en janvier 1997, etHTML 4 in December 1997.

Temps occupé!

Plus de 20 ans se sont écoulés, nous avions tout ce truc XHTML, et finalement nous sommes maintenant à ce «truc» HTML5, qui n'est pas vraimentjuste du HTMLplus.

HTML5 est un terme qui définit désormais tout un ensemble de technologies, qui inclut le HTML mais ajoute de nombreuses API et normes telles que WebGL, SVG et plus encore.

La chose clé à comprendre ici est la suivante: il n'y a pas (plus) de version HTML maintenant. C'est un niveau de vie. Comme CSS, nous l'appelons 3 mais en réalité c'est un tas de modules indépendants développés séparément. Comme JavaScript, nous avons une nouvelle édition chaque année, mais peu importe plus que les fonctionnalités individuelles implémentées par le moteur.

Oui on l'appelle HTML5 mais HTML4 date de 1997. C'est long pour quoi que ce soit, imaginez pour le web.

C'est là que la norme «vit»: [https://html.spec.whatwg.org/multipage].

Les bases du HTML

HTML est le langage de balisage que nous utilisons pour structurer le contenu que nous consommons sur le Web.

Le HTML est présenté au navigateur de différentes manières.

Il peut être généré par une application côté serveur qui le construit en fonction de la requête ou des données de session, par exemple une application Rails ou Laravel ou Django.

Ou il peut être généré par une application JavaScript côté client qui génère du HTML à la volée.

Ou, dans le cas le plus simple, il peut être stocké dans un fichier et servi au navigateur par un serveur Web.

Plongeons-nous dans ce cas, même si en pratique c'est probablement le moyen le moins populaire de générer du HTML, il est toujours essentiel de connaître les blocs de construction de base.

Par convention, un fichier HTML est enregistré avec un.htmlou.htmextension.

Dans ce fichier, nous organisons le contenu en utilisantMots clés.

Les balises enveloppent le contenu et chaque balise donne une signification particulière au texte qu'elle enveloppe.

Faisons quelques exemples.

Cet extrait de code HTML crée un paragraphe à l'aide de lapétiqueter:

<p>A paragraph of text</p>

Cet extrait de code HTML crée une liste d’éléments à l’aide deultag, ce qui signifieliste non ordonnée, et lelibalises, ce qui signifieélément de liste:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Lorsqu'une page HTML est servie par le navigateur, les balises sont interprétées et le navigateur restitue les éléments selon les règles qui en définissent l'apparence visuelle.

Certaines de ces règles sont intégrées. Comme le rendu d'une liste, par exemple. Ou comment un lien est rendu en bleu, souligné.

Certaines autres règles sont définies par vous avec CSS.

Le HTML n'est pas de présentation. Il ne s'agit pas de savoir comment les chosesvoir. Au lieu de cela, il s'agit de ce que les chosesmoyenne.

C'est au navigateur de déterminer à quoi ressemblent les choses, avec les directives définies par qui construit la page, avec le langage CSS.

Maintenant, ces 2 exemples que j'ai faits sont des extraits HTML pris en dehors d'un contexte de page.

Une structure de page HTML

Faisons un exemple d'une page HTML appropriée.

Les choses commencent avec la déclaration de type de document (akadoctype), une façon de dire au navigateur qu'il s'agit d'une page HTML et quelle version de HTML nous utilisons.

Le HTML moderne utilise ce doctype:

<!DOCTYPE html>

Ensuite, nous avons lehtmlélément, qui a une balise d'ouverture et de fermeture:

<!DOCTYPE html>
<html>
...
</html>

Toutes les balises ont une balise d'ouverture et de fermeture. Sauf quelques balises à fermeture automatique qui n'en ont pas besoin car elles ne contiennent rienen eux.

La balise de fermeture est la même que celle d'ouverture, mais avec un/.

LehtmlLa balise de départ est utilisée au début du document, juste après la déclaration du type de document.

LehtmlLa balise de fin est la dernière chose présente dans un document HTML.

À l'intérieur dehtmlélément nous avons 2 éléments:headetbody:

<!DOCTYPE html>
<html>
	<head>
	...
	</head>
	<body>
	...
	</body>
</html>

À l'intérieurheadnous aurons des balises essentielles à la création d'une page Web, comme le titre, les métadonnées et les CSS et JavaScript internes ou externes. Surtout des choses qui n'apparaissent pas directement sur la page, mais qui aident uniquement le navigateur (ou des robots comme le robot de recherche Google) à l'afficher correctement.

À l'intérieurbodynous aurons le contenu de la page. Letrucs visibles.

Balises vs éléments

J'ai mentionné des balises et des éléments. Quelle est la différence?

Les éléments ont une balise de départ et une balise de fermeture.

Dans ce cas, nous utilisons lepbalises de démarrage et de fermeture pour créer unpélément.

<p>A paragraph of text</p>

Ainsi, un élément constitue le toutpaquet:

  • balise de départ
  • contenu textuel (et éventuellement d'autres éléments)
  • balise de fermeture

Si un élément n'a pas de balise de fermeture, il est uniquement écrit avec la balise de départ et ne peut contenir aucun contenu textuel.

Cela dit, je pourrais utiliser la balise ou le terme d'élément dans le livre signifiant la même chose, sauf que je mentionne explicitement la balise de départ ou la balise de fin.

Les attributs

La balise de départ d'un élément peut avoir des extraits spéciaux d'informations que nous pouvons attacher, appelésles attributs.

Les attributs ont lekey="value"syntaxe:

<p class="a-class">A paragraph of text</p>

Vous pouvez également utiliser des guillemets simples, mais utiliser des guillemets doubles en HTML est une bonne convention.

Nous pouvons en avoir plusieurs:

<p class="a-class" id="an-id">A paragraph of text</p>

et certains attributs sont booléens, ce qui signifie que vous n'avez besoin que de la clé:

<script defer src="file.js"></script>

LeclassetidLes attributs sont deux des plus courants que vous trouverez utilisés.

Ils ont une signification particulière et sont utiles à la fois en CSS et en JavaScript.

La différence entre les deux est qu'unidest unique dans le contexte d'une page Web, il ne peut pas être dupliqué.

Les classes, en revanche, peuvent apparaître plusieurs fois sur plusieurs éléments.

De plus, unidest juste une valeur.classpeut contenir plusieurs valeurs, séparées par un espace:

<p class="a-class another-class">A paragraph of text</p>

Il est courant d'utiliser le tableau de bord-pour séparer les mots dans une valeur de classe, mais ce n'est qu'une convention.

Ce ne sont que 2 des attributs possibles que vous pouvez avoir. Certains attributs ne sont utilisés que pour une seule balise. Ils sont hautement spécialisés.

D'autres attributs peuvent être utilisés de manière plus générale. Tu viens de voiridetclass, mais nous en avons d'autres aussi, commestylequi peut être utilisé pour insérer des règles CSS en ligne sur un élément.

Insensible à la casse

Le HTML est insensible à la casse. Les balises peuvent être écrites en majuscules ou en minuscules. Au début, les plafonds étaient la norme. Aujourd'hui, les minuscules sont la norme. C'est une convention.

Vous écrivez généralement comme ceci:

<p>A paragraph of text</p>

pas comme ça:

<P>A paragraph of text</P>

Espace blanc

Assez important. En HTML, même si vous ajoutez plusieurs espaces blancs dans une ligne, elle est réduite par le moteur CSS du navigateur.

Par exemple le rendu de ce paragraphe

<p>A paragraph of text</p>

est le même que celui-ci:

<p>        A paragraph of text</p>

et le même que celui-ci:

<p>A paragraph

of text </p>

En utilisant lewhite-spacePropriété CSSvous pouvez changer la façon dont les choses se comportent. Vous pouvez trouver plus d'informations sur la façon dont CSS traite les espaces blancs dans leSpécification CSS

Je dirais que vous utilisez la syntaxe qui rend les choses visuellement plus organisées et plus faciles à lire, mais vous pouvez utiliser la syntaxe de votre choix.

Je route généralement pour

<p>A paragraph of text</p>

ou

<p>
	A paragraph of text
</p>

Les balises imbriquées doivent être indentées avec 2 ou 4 caractères, selon votre préférence:

<body>
	<p>
		A paragraph of text
	</p>
	<ul>
		<li>A list item</li>
	</ul>
</body>

Remarque: cela signifie que si vous souhaitez ajouter un espace supplémentaire, cela peut vous rendre assez fou. Je suggère d'utiliser CSS pour faire plus d'espace en cas de besoin.

Remarque: dans des cas particuliers, vous pouvez utiliser le&nbsp;Entité HTML (un acronyme qui signifieEspace non-cassant) - plus d'informations sur les entités HTML plus tard. Je pense que cela ne devrait pas être abusé. CSS est toujours préférable pour modifier la présentation visuelle.

L'en-tête du document

LeheadLa balise contient des balises spéciales qui définissent les propriétés du document.

C'est toujours écrit avant lebodytag, juste après l'ouverturehtmlétiqueter:

<!DOCTYPE html>
<html>
	<head>
		...
	</head>
	...
</html>

Nous n'utilisons jamais d'attributs sur cette balise. Et nous n'y écrivons pas de contenu.

C'est juste un conteneur pour d'autres balises. À l'intérieur, nous pouvons avoir une grande variété de balises, en fonction de ce que vous devez faire:

  • title
  • script
  • noscript
  • link
  • style
  • base
  • meta

Letitleétiqueter

LetitleLa balise détermine le titre de la page. Le titre est affiché dans le navigateur et il est particulièrement important car c'est l'un des facteurs clés de l'optimisation des moteurs de recherche.

Lescriptétiqueter

Cette balise est utilisée pour ajouter du JavaScript dans la page.

Vous pouvez l'inclure en ligne, en utilisant une balise d'ouverture, le code JavaScript puis la balise de fermeture:

<script>
..some JS
</script>

Ou vous pouvez charger un fichier JavaScript externe en utilisant lesrcattribut:

<script src="file.js"></script>

Letypel'attribut par défaut est défini surtext/javascript, donc c'est complètement facultatif.

Il y a quelque chose d'assez important à savoir sur cette balise.

Parfois, cette balise est utilisée au bas de la page. Pourquoi? Pour des raisons de performances.

Le chargement de scripts par défaut bloque le rendu de la page jusqu'à ce que le script soit analysé et chargé.

Ce faisant, le script est chargé et exécuté une fois que toute la page est déjà analysée et chargée, ce qui donne une meilleure expérience à l'utilisateur plutôt que de la garder dans leheadétiqueter.

Mon opinion est que c'est maintenant une mauvaise pratique. Laisserscriptvivre dans laheadétiqueter.

En JavaScript moderne, nous avons une alternative, plus performante que de garder le script en bas de page -deferattribut:

<script defer src="file.js"></script>

C'est le scénario qui déclenche le chemin le plus rapide vers une page à chargement rapide et un JavaScript à chargement rapide.

Noter laasyncl'attribut est similaire, mais à mon avis, une option pire quedefer. Je décris pourquoi en détails dans la pagehttps://flaviocopes.com/javascript-async-defer/

Lenoscriptétiqueter

Cette balise est utilisée pour détecter lorsque les scripts sont désactivés dans le navigateur.

Remarque: les utilisateurs peuvent choisir de désactiver les scripts JavaScript dans les paramètres du navigateur. Ou le navigateur peut ne pas les prendre en charge par défaut.

Il est utilisé différemment, qu'il soit placé dans l'en-tête du document ou dans le corps du document.

Nous parlons maintenant de l'en-tête du document, alors introduisons d'abord cette utilisation.

Dans ce cas, lenoscriptLa balise ne peut contenir que d'autres balises:

  • linkMots clés
  • styleMots clés
  • metaMots clés

pour modifier les ressources servies par la page, oumetainformations, si les scripts sont désactivés.

Dans cet exemple, j'ai défini un élément avec leno-script-alertclasse à afficher si les scripts sont désactivés, comme c'était le casdisplay: nonepar défaut:

<!DOCTYPE html>
<html>
	<head>
		...
		<noscript>
			<style>
				.no-script-alert {
					display: block;
				}
			</style>
		</noscript>
	...
&lt;/<span style="color:#f92672">head</span>&gt;
...

</html>

Résolvons l'autre cas: s'il est placé dans le corps, il peut contenir du contenu, comme des paragraphes et d'autres balises, qui sont rendus dans l'interface utilisateur.

LelinkLa balise est utilisée pour définir les relations entre un document et d'autres ressources.

Il est principalement utilisé pour lier un fichier CSS externe à charger.

Cet élément n'a pas de balise de fermeture.

Usage:

<!DOCTYPE html>
<html>
	<head>
		...
		<link href="file.css" rel="stylesheet">
		...
	</head>
	...
</html>

LemediaL'attribut permet de charger différentes feuilles de style en fonction des capacités de l'appareil:

<link href="file.css" media="screen" rel="stylesheet">
<link href="print.css" media="print" rel="stylesheet">

Nous pouvons créer des liens vers des ressources différentes des feuilles de style.

Par exemple, nous pouvons associer un flux RSS en utilisant

<link rel="alternate" type="application/rss+xml" href="/index.xml">

On peut associer un favicon en utilisant:

<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">

<link rel=“icon” type=“image/png” sizes=“32x32” href="/assets/favicon-32x32.png">

<link rel=“icon” type=“image/png” sizes=“16x16” href="/assets/favicon-16x16.png">

Cette baliseétaitégalement utilisé pour le contenu multi-page, pour indiquer la page précédente et suivante en utilisantrel="prev"etrel="next". Mostly for Google. In 2019 Google a annoncé qu'il n'utilisait plus cette balisecar il peut trouver la structure de page correcte sans elle.

Lestyleétiqueter

Cette balise peut être utilisée pour ajouter des styles dans le document, plutôt que pour charger une feuille de style externe.

Usage:

<style>
.some-css {}
</style>

Comme avec lelinktag, vous pouvez utiliser lemediaattribut pour n'utiliser ce CSS que sur le support spécifié:

<style media="print">
.some-css {}
</style>

Vous pouvez également ajouter cette balise dans le corps du document. En parlant de cela, il est intéressant descopedattribut pour attribuer uniquement ce CSS à la sous-arborescence du document en cours. En d'autres termes, pour éviter de divulguer le CSS en dehors de l'élément parent.

Lebaseétiqueter

Cette balise est utilisée pour définir une URL de base pour toutes les URL relatives contenues dans la page.

<!DOCTYPE html>
<html>
	<head>
		...
		<base href="https://flaviocopes.com/">
		...
	</head>
	...
</html>

Lemetaétiqueter

Les balises Meta exécutent une variété de tâches et elles sont très, très importantes.

Surtout pour le référencement.

metales éléments n'ont que la balise de départ.

Le plus élémentaire est ledescriptionbalise meta:

<meta name="description" content="A nice page">

Ceforceêtre utilisé par Google pour générer la description de la page dans ses pages de résultats, s'il trouve qu'elle décrit mieux la page que le contenu de la page (ne me demandez pas comment).

LecharsetLa balise meta est utilisée pour définir le codage des caractères de la page.utf-8dans la plupart des cas:

<meta charset="utf-8">

LerobotsLa balise meta indique aux robots des moteurs de recherche d'indexer ou non une page:

<meta name="robots" content="noindex">

Ou s'ils doivent suivre des liens ou non:

<meta name="robots" content="nofollow">

Vous pouvez également définir nofollow sur des liens individuels. Voici comment vous pouvez définirnofollowglobalement.

Vous pouvez les combiner:

<meta name="robots" content="noindex, nofollow">

Le comportement par défaut estindex, follow.

Vous pouvez utiliser d'autres propriétés, notammentnosnippet,noarchive,noimageindexet plus.

Vous pouvez également simplement dire à Google au lieu de ciblertoutmoteurs de recherche:

<meta name="googlebot" content="noindex, nofollow">

et d'autres moteurs de recherche peuvent également avoir leur propre balise META.

En parlant de cela, nous pouvons dire à Google de désactiver certaines fonctionnalités. Cela empêche la fonctionnalité de traduction dans les résultats du moteur de recherche:

<meta name="google" content="notranslate">

LeviewportLa balise meta est utilisée pour indiquer au navigateur de définir la largeur de la page en fonction de la largeur de l'appareil.

<meta name="viewport" content="width=device-width, initial-scale=1">

En savoir plus sur cette balise.

Une autre balise meta assez populaire est lahttp-equiv="refresh"une. Cette ligne indique au navigateur d'attendre 3 secondes, puis de rediriger vers cette autre page:

<meta http-equiv="refresh" content="3;url=http://flaviocopes.com/another-page">

Utiliser 0 au lieu de 3 redirigera dès que possible.

Ce n'est pas une référence complète, d'autres balises meta moins utilisées existent.

Après cette introduction de l'en-tête du document, nous pouvons commencer à plonger dans le corps du document.

Le corps du document

Après la balise head de fermeture, nous ne pouvons avoir qu'une seule chose dans un document HTML: lebodyélément.

<!DOCTYPE html>
<html>
	<head>
		...
	</head>
	<body>
		...
	</body>
</html>

Tout comme leheadethtmltags, nous ne pouvons en avoir qu'unbodybalise sur une page.

À l'intérieur debodytag nous avons toutes les balises qui définissent le contenu de la page.

Techniquement, les balises de début et de fin sont facultatives. Mais je considère que c'est une bonne pratique de les ajouter. Juste pour plus de clarté.

Dans les chapitres suivants, nous définirons la variété de balises que vous pouvez utiliser dans le corps de la page.

Mais avant, nous devons introduire une différence entre les éléments de bloc et les éléments en ligne.

Éléments de bloc vs éléments en ligne

Les éléments visuels, ceux définis dans le corps de la page, peuvent être généralement classés en 2 catégories:

  • éléments de bloc (p,div, éléments de titre, listes et éléments de liste,…)
  • éléments en ligne (a,span,img,…)

Quelle est la différence?

Les éléments de bloc, lorsqu'ils sont positionnés dans la page, n'autorisent pas d'autres éléments à côté d'eux. À gauche ou à droite.

Les éléments en ligne peuvent à la place se trouver à côté d'autres éléments en ligne.

La différence réside également dans les propriétés visuelles que nous pouvons modifier à l'aide de CSS. Nous pouvons modifier la largeur / hauteur, la marge, le remplissage et les éléments de bordure ou de bloc. Nous ne pouvons pas faire cela pour les éléments en ligne.

Notez qu'en utilisant CSS, nous pouvons changer la valeur par défaut pour chaque élément, en définissant unpune balise en ligne, par exemple, ou unspanêtre un élément de bloc.

Une autre différence est que les éléments en ligne peuvent être contenus dans des éléments de bloc. L'inverse n'est pas vrai.

Certains éléments de bloc peuvent contenir d'autres éléments de bloc, mais cela dépend. Leptag par exemple ne permet pas une telle option.

Téléchargez mon gratuitManuel HTML


Plus de tutoriels html: