Les principales balises

Benoit BIAUDET

Mis en ligne le 15-09-2022 à 14:32

Langues disponibles

1 . Présentation

2 . Les balises de structure d’une page HTML

Une page HTML est composée de 4 balises principales nécessaires à son bon fonctionnement :

* ``<!doctype html>`` : cette balise indique au navigateur que le fichier est une page HTML.
* ``<html> </html>`` : c’est la balise racine d’une page html. Elle contient l’entièreté de la structure et délimite le HTML.
* ``<head> </head>`` : cette balise va contenir toutes les métadonnées de la page (données pas forcément affichées mais nécessaires comme le type d’encodage, le titre de la page, les liens avec d’autres fichiers ou même des informations de référencement).
* ``<body> </body>`` : cette balise contiendra tout le contenu que l’on souhaite afficher sur la page (textes, images, vidéos etc...).

Une page HTML, peu importe son contenu, aura toujours la structure suivante :

``` html
<!doctype html>
<html>
    <head>
        Métadonnées
    </head>
    <body>
  		Contenu qu'on souhaite afficher
    </body>
</html>
```

3 . Les balises secondaires

Maintenant que notre fichier HTML respecte la structure minimale, voyons les quelques balises secondaires que nous pouvons utiliser.

Entre nos balises `<head>` :

# Meta

* `<meta>` : cette balise contient les métadonnées de notre page HTML.

**Exemple :**

``` 
 <meta charset= "utf-8"> 
```

Ici `charset=”utf-8”` va permettre de bien afficher les accents et les caractères spéciaux.

# Un titre de page dans l'onglet

* `<title></title>` : cette balise définit le titre de la page qui va s'afficher dans l'onglet.

**Exemple :**

``` 
 <title>Page d’accueil</title> 
```

Ici, le nom affiché de ma page dans l'onglet sera “**Page d’accueil**”.

# Lier des fichiers

* `<link>` : cette balise permet de lier le fichier HTML à un autre.

**Exemple:**

``` 
 <link rel="stylesheet" href="style.css"> 
```

Ici, notre page HTML est liée à notre fichier “**style.css**” qui nous permettra de modifier son apparence, ajouter de la couleur, modifier le texte, etc.

**Il est important de noter que dans la Coding School, lorsque vous créez projet, votre fichier HTML est déjà composé des balises de structure et des balises secondaires pour vous simplifier la vie. Il est néanmoins important de savoir à quoi elles servent pour éviter une suppression qui pourrait entrainer un dysfonctionnement de votre fichier HTML.**

4 . Les balises de contenu texte

Les balises de contenu sont les balises qui vont vous permettre d’afficher votre contenu.

Ces balises devront se trouver dans le corps de notre fichier, autrement dit entre les balises `<body>`.

# Les titres

* `<h1></h1>` : cette balise permet de créer un grand titre en texte.

**Exemple :**

```html
<h1>Titre Principal</h1>
```

Ces balises de titre vont de `<h1>` à `<h6>`, la balise `<h1>` étant le titre le plus grand et la balise `<h6>` le plus petit.

# Les paragraphes

* `<p></p>` : cette balise permet de créer un paragraphe. C’est la balise que l’on utilisera le plus souvent pour afficher du texte dans notre page HTML.
	
**Exemple :**
	
```html
<p>Bienvenue sur ce site…</p>
```

# Les textes en gras

* `<b></b>` : cette balise permet de mettre le texte en gras. 
	
**Exemple :**
	
```html
<p><b>Ce texte est en gras</b></p>
```

# Saut de ligne

* `<br>` : cette balise permet de sauter une ligne.

**Exemple :**
	
```html 
<p>Mon nom est Jean<br>J’ai 30ans</p>
```

# Conteneur en ligne

* `<span></span>` : Cette balise est un Conteneur en ligne. C’est-à-dire qu’elle peut être placée à l'intérieur d'un paragraphe pour délimiter du texte, mais sans en affecter l’apparence (pas de saut de ligne, etc.). On les utilisera notamment pour changer l'apparence de certains textes en CSS, par exemple la couleur, sans modifier tout notre paragraphe.
	
**Exemple :**
	
```html
<p>Ajouter les <span >oeufs</span>, la <span>farine</span> et le <span>sucre</span> dans le robot et l’allumer. </p>
```

5 . Les balises de section

Certaines balises permettent de structurer davantage le contenu de notre page HTML. Elles sont notamment utiles pour le référencement de son site web.

# Header

`<header></header>` : cette balise représente un groupe de contenu introductif ou de contenu aidant à la navigation.

Exemple :

```html
<header>
    <nav>
        <a href="#accueil">Accueil</a> 
        <a href="#apropos">A propos</a> 
        <a href="#contact">Contact</a>
    </nav>
</header>
 
<h1>Présentation de l’entreprise</h1>
```

# Main

`<main></main>` : Cette balise représente le contenu majoritaire du `<body>`.

Exemple :

```html
<header>
    <nav>
    <a href="#accueil">Accueil</a> 
    <a href="#apropos">A propos</a> 
    <a href="#contact">Contact</a>
    </nav>
</header>
<main>
    <h1>Présentation de l’entreprise</h1>
    <p>Fondée en 2022... </p>
</main>
```

`<nav></nav>` : Cette balise représente une section d'une page ayant des liens vers d'autres pages ou des fragments de cette page. C’est en général là où nous allons mettre notre barre de navigation.

Exemple :

```html 
<nav>
    <a href="#accueil">Accueil</a> 
    <a href="#apropos">A propos</a> 
    <a href="#contact">Contact</a>
</nav>
```

# Section

`<section></section>` : Cette balise représente une section générique d'un document, par exemple un groupe de contenu thématique.

Exemple :
 
```html
<h1>Choisir une pomme</h1>
<section>
    <h2>Introduction</h2>
    <p> Ce document fournit un guide pour vous aider dans la tâche importante que constitue le choix de la pomme appropriée.</p>
</section>
 
<section>
    <h2>Critère</h2>
    <p> Il existe de nombreux critères à prendre en compte pour choisir une pomme : taille, couleur, fermeté, douceur, acidité...</p>
</section>
```
 
# Div

`<div></div>` : ou division est une balise servant de conteneur générique.

Exemple :

```html
<div> 
    <h1>Léopard</h1>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Leopard_africa.jpg/800px-Leopard_africa.jpg">
</div>
```

# Footer

`<footer></footer>` : Cette balise représente le pied de page de la section.

Exemple :
 
```html
<header>
    <nav>
        <a href="#accueil">Accueil</a> 
        <a href="#apropos">A propos</a> 
        <a href="#contact">Contact</a>
    </nav>
</header>
 
<main>
    <h1>Présentation de l’entreprise</h1>
    <p>Fondée en 2022... </p>
</main>
 
<footer>Contact: codingschool@gmail.com </footer>
```

6 . Exemple final

Voici un exemple de résultat avec toutes les balises vues ci-dessus :
 
```html
<html>
    <head>
        <meta charset= "utf-8">
        <title>Page du tutoriel</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <nav>
                <a href="#">Accueil</a> <a href="#">A propos</a> <a href="#">Contact</a>
            </nav>
        </header>
        <main>
            <h1>Titre1</h1>
            <h2>Titre2</h2>
            <p>Bienvenue sur ce site…</p>
            <p><b>Texte en gras</b></p>
            <p>Mon nom est Jean<br>J’ai 30ans</p>
            <p>Ajouter les <span >oeufs</span>, la <span>farine</span> et le <span>sucre</span> dans le robot et l'allumer. </p>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/langfr-414px-Google_Images_2015_logo.svg.png">
            <br><a href="https://www.google.com">Google</a>
            <h1>Choisir une pomme</h1>
            <section>
                <h2>Introduction</h2>
                <p> Ce document fournit un guide pour vous aider dans la tâche importante que constitue le choix de la pomme appropriée.</p>
            </section>
            <section>
                <h2>Critère</h2>
                <p> Il existe de nombreux critères à prendre en compte pour choisir une pomme : taille, couleur, fermeté, douceur, acidité...</p>
            </section>
            <div>
                <h1>Léopard</h1>
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Leopard_africa.jpg/800px-Leopard_africa.jpg">
            </div>
        </main>
        <footer>
            <div>Contact: alexandre30@gmail.com </div>
        </footer>
    </body>
</html>
```

Les principales balises

1 . Présentation

2 . Les balises de structure d’une page HTML

3 . Les balises secondaires

4 . Les balises de contenu texte

5 . Les balises de section

6 . Exemple final

Sommaire