Débuter avec HTML

Bonjour le monde

Introduction

[HTML][1] (Hypertext Markup Llangage) utilise un système de balisage composé d’éléments qui représentent un contenu spécifique. Markup signifie qu’avec HTML, vous déclarez _ce qui est présenté à un spectateur, et non comment il est présenté. Les représentations visuelles sont définies par [Cascading Style Sheets (CSS)][2] et réalisées par les navigateurs. [Éléments encore existants qui le permettent][3], comme par ex. [font][4], “sont entièrement obsolètes et ne doivent pas être utilisés par les auteurs”[1] .

HTML est parfois appelé un langage de programmation, mais il n’a aucune logique, tout comme un langage de balisage. Les balises HTML fournissent une signification sémantique et une lisibilité machine au contenu de la page.

Un élément se compose généralement d’une balise d’ouverture (<element_name>), d’une balise de fermeture (</element_name>), qui contiennent le nom de l’élément entouré de crochets angulaires, et le contenu entre : <element_name>.. .contenu...</element_name>

Certains éléments HTML n’ont pas de balise de fermeture ni de contenu. Ceux-ci sont appelés [éléments vides][5]. Les éléments vides incluent <img>, <meta>, <link> et <input>.

Les noms d’éléments peuvent être considérés comme des mots-clés descriptifs pour le contenu qu’ils contiennent, tels que video, audio, table, footer.

Une page HTML peut contenir potentiellement des centaines d’éléments qui sont ensuite lus par un navigateur Web, interprétés et rendus en un contenu lisible ou audible par l’homme à l’écran.

Pour ce document, il est important de noter la différence entre les éléments et les balises :

Éléments : video, audio, table, footer

Balises : <video>, <audio>, <table>, <footer>, </html>, </body>


Aperçu des éléments

Décomposons une étiquette…

La balise <p> représente un paragraphe commun.

Les éléments ont généralement une balise ouvrante et une balise fermante. La balise d’ouverture contient le nom de l’élément entre crochets (<p>). La balise fermante est identique à la balise ouvrante avec l’ajout d’une barre oblique (/) entre le crochet ouvrant et le nom de l’élément (</p>).

Le contenu peut alors passer entre ces deux balises : <p>Ceci est un simple paragraphe.</p>.


Créer une page simple

L’exemple HTML suivant crée une page Web [“Hello World”][6] simple.

Les fichiers HTML peuvent être créés à l’aide de n’importe quel [éditeur de texte][7]. Les fichiers doivent être enregistrés avec un .html ou .htm[2]</ sup> afin d’être reconnus comme des fichiers HTML.

Une fois créé, ce fichier peut être ouvert dans n’importe quel navigateur Web.


<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Hello!</title>
    </head>

    <body>
        <h1>Hello World!</h1>
        <p>This is a simple paragraph.</p>
    </body>

</html>


Décomposition simple de la page

Voici les balises utilisées dans l’exemple :

Balise Sens
<!DOCTYPE> Définit la version HTML utilisée dans le document. Dans ce cas, il s’agit de HTML5.
Voir la [rubrique doctypes][8] pour plus d’informations.
<html> Ouvre la page. Aucun balisage ne doit venir après la balise de fermeture (</html>). L’attribut lang déclare la langue principale de la page à l’aide des [codes de langue ISO][9] (en pour l’anglais).
Voir la rubrique [Content Language topic](http://stackoverflow.com/ documentation/html/737/content-languages#t=201607221637059314928) pour plus d’informations.
<tête> Ouvre la section d’en-tête, qui n’apparaît pas dans la fenêtre principale du navigateur mais contient principalement des informations sur le document HTML, appelées métadonnées. Il peut également contenir des importations à partir de feuilles de style et de scripts externes. La balise de fermeture est </head>.
<méta> Donne au navigateur des métadonnées sur le document. L’attribut charset déclare le [character encoding][10]. Les documents HTML modernes doivent toujours utiliser [UTF-8][11], même si ce n’est pas une exigence. En HTML, la balise <meta> ne nécessite pas de balise fermante.
Voir le Meta topic pour plus d’informations.
<titre> Le titre de la page. Le texte écrit entre cette balise d’ouverture et la balise de fermeture (</title>) sera affiché sur l’onglet de la page ou dans la barre de titre du navigateur.
<corps> Ouvre la partie du document affichée aux utilisateurs, c’est-à-dire tout le contenu visible ou audible d’une page. Aucun contenu ne doit être ajouté après la balise de fermeture </body>.
<h1> Un titre de niveau 1 pour la page.
Voir [titres][12] pour plus d’informations.
<p> Représente un paragraphe commun de texte.

1. ↑ [HTML5, 11.2 Fonctionnalités non conformes][3]
2. ↑ .htm est hérité de l’ancienne limite d’extension de fichier à trois caractères [DOS][13].

[1] : https://en.wikipedia.org/wiki/HTML [2] : https://en.wikipedia.org/wiki/CSS [3] : https://www.w3.org/TR/html5/obsolete.html#non-conforming-features [4] : https://www.w3.org/wiki/HTML/Elements/font [5] : https://www.wikiod.com/fr/html/elements-vides [6] : https://en.wikipedia.org/wiki/%22Hello,_World!%22_program [7] : https://en.wikipedia.org/wiki/Text_editor [8] : https://www.wikiod.com/fr/html/doctypes [9] : https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes [10] : https://www.w3.org/International/questions/qa-html-encoding-declarations.en [11] : https://en.wikipedia.org/wiki/UTF-8 [12] : https://www.wikiod.com/fr/html/rubriques [13] : https://en.wikipedia.org/wiki/DOS

Éléments de contrôle d'entrée →