4 Introduction HTML

Examinons maintenant le principe de fonctionnement et la syntaxe de base du HTML.

# Syntaxe

Le HTML fonctionne avec des balises. Les balises sont toujours composées de trois parties. Un début (balise d'ouverture), le contenu proprement dit ou d'autres éléments HTML imbriqués et une fin (balise de fermeture). Ces trois parties forment ensemble un élément HTML.

Image: Livre HTML&CSS par John Duckett

Dans l'exemple ci-dessous, vous pouvez voir encore une autre représentation. C'est le format que vous utilisez pour écrire le HTML dans votre fichier index.html.

    <!-- Principe -->
    <tag attribute="value">contenu</tag>.
    
    <!-- Exemple -->
    <html class="classname">
        Contenu et autres éléments DOM imbriqués.
    </html>

# Document Object Model

Le Document Object Model (DOM) comprend tous les éléments HTML de votre document dans un ordre hiérarchique. Dans ce contexte, les éléments HTML sont également appelés "nœuds DOM".

L'arbre DOM est une représentation visuelle de ces éléments et en même temps un code valide pour le navigateur. Pour toute page web, le DOM peut être consulté via l'élément de menu "View source code" ou la combinaison de touches ⌘CMD + ⇧SHIFT + U (macOS).

Ici, vous pouvez voir un arbre DOM minimal, comme tout site web. Il se compose d'une section de tête <head> qui contient des liens et des métas qui sont pour la plupart invisibles pour l'utilisateur final, et d'une section <body> qui contient tout le contenu qui sera éventuellement affiché sur le site.

<!DOCTYPE html>
<html lang="en">
    <head>
      En-tête
    </head>
    <body>
      Zone principale d'affichage
    </body>
</html>

# Hiérarchie

L'imbrication des nœuds DOM les uns dans les autres est également appelée " nesting ". L'élément englobant est toujours appelé parent, l'enfant child.

Images: eloquentjavascript.net

Les tags les plus importants

Structure de base

tag description

tag	description
`html`	élément racine
`head`	Container pour les méta-tags
`title`	Titre de la page, par exemple pour les moteurs de recherche ou l'onglet du navigateur
`meta`	méta-information/page, par exemple description, etc.
`link`	Intégration de fichiers/données, par exemple CSS ou Javascript
`body`	conteneur pour le contenu

html

élément racine

head

Container pour les méta-tags

title

Titre de la page, par exemple pour les moteurs de recherche ou l'onglet du navigateur

meta

méta-information/page, par exemple description, etc.

link

Intégration de fichiers/données, par exemple CSS ou Javascript

body

conteneur pour le contenu

# Mise en page

tag description

tag	description
`header`	debut d'une page qui contient généralement le logo et le menu
`nav`	conteneur pour les navigations/menus
`main`	zone principale, conteneur pour les sections
`section`	Section, conteneur pour divisions, articles, etc.
`div`	Division, élément de bloc
`aside`	sidebar, colonne
`article`	Les contenus tels que les articles, les billets de blog, etc.
`footer`	pied de page, par exemple pour les droits d'auteur, etc.

header

debut d'une page qui contient généralement le logo et le menu

nav

conteneur pour les navigations/menus

main

zone principale, conteneur pour les sections

section

Section, conteneur pour divisions, articles, etc.

div

Division, élément de bloc

aside

sidebar, colonne

article

Les contenus tels que les articles, les billets de blog, etc.

footer

pied de page, par exemple pour les droits d'auteur, etc.

# Titres

tag description

tag	description
`h1`	titre/en-tête - taille de police la plus grande
`h2`	titre/en-tête
`h3`	titre/en-tête
`h4`	titre/en-tête
`h5`	titre/en-tête
`h6`	Titre/En-tête - Taille de police la plus petite

h1

titre/en-tête - taille de police la plus grande

h2

titre/en-tête

h3

titre/en-tête

h4

titre/en-tête

h5

titre/en-tête

h6

Titre/En-tête - Taille de police la plus petite

# Texte et liens

tag description

tag	description
`p`	Paragraphe (ligne toujours une nouvelle ligne)
`br`	Retour à la ligne dans le même paragraphe
`span`	Élément en ligne dans un texte continu (pas de nouvelle ligne)
`a`	Lien vers des pages à l'intérieur ou à l'extérieur du site

p

Paragraphe (ligne toujours une nouvelle ligne)

br

Retour à la ligne dans le même paragraphe

span

Élément en ligne dans un texte continu (pas de nouvelle ligne)

a

Lien vers des pages à l'intérieur ou à l'extérieur du site

# lists

tag description

tag	description
`ul`	Liste non ordonnée / Liste non numérotée
`ol`	Liste ordonnée / Liste numérotée
`li`	élément d'une liste

ul

Liste non ordonnée / Liste non numérotée

ol

Liste ordonnée / Liste numérotée

li

élément d'une liste

# Images et vidéos

tag description

tag	description
`img`	Intégration d'un fichier image
`video`	Intégration d'un fichier vidéo

img

Intégration d'un fichier image

video

Intégration d'un fichier vidéo

Les balises HTML mentionnées ici vous permettent déjà de structurer des sites web élaborés. Il y a beaucoup d'autres tags, mais vous n'êtes bien sûr pas obligé de toutes les mémoriser. Une Cheatsheet vous permet de voir toutes les tags et leur signification en un coup d'œil. La référence du langage, une référence HTML est également très utile. Vous apprendrez également à connaître d'autres balises au cours de ce module.

:memo: Note

Si aucune des balises de mise en page descriptive (par exemple "main", "article", "aside", "foot", "header" ou "nav") ne semble avoir de sens pour un certain élément, vous pouvez également utiliser "div" (division). En principe, l'ensemble du site web peut également être structuré avec des div uniquement, mais ce n'est pas très conseillé, car la lisibilité du code diminue massivement.

🔗 Liens

Précédent3 Configuration Suivant5 Structure de base HTML

Dernière mise à jour il y a 1 an