---
title: Bonnes pratiques HTML/CSS
tags: guidelines, frontend
robots: noindex, nofollow
author: Julien Noyer
---

# Bonnes pratiques HTML/CSS


Dans le cadre de la mise en place de pages Web il est important de respecter certaines bonnes pratiquees qui en plus de rendre les pages plus asseccibles, permettent de mieux comprendre et d'évoluer plus rapidement dans les techniques d'intégration dites "Front End".

# Hypertext Markup Language

HTML permet de structurer sémantiquement et logiquement une page Web et de mettre en forme le contenu, d’inclure des ressources multimédias dont des images, des formulaires de saisie et des programmes informatiques.

## Organiser le dossier d'une page Web


Avant de commencer votrre travail d'intégration il est essentiel que vous structuriez votre dossier de travail car il vous permettra d'évoluer plus rrapidement.

## Organisation du dossier

- [css] => dossier contenant tous les fichier CSS
- [img] => dossier contenant toutes les images
- [js] => dossier contenant tous les fishiers Javascript
- index.html => seuls les fichiers HTML sont à la racine

## Les textes en majuscule


Il ne faut en aucun cas écrire dans des balises HTML du texte en majuscule, il sagit ici de rerndre le contenu de la page accessible car du texte en majuscule serra interprété comme un acronyme.

### Exemple

<!-- Erreur -->
<h1>LE HTML EST UN LANGAGE DE BALISAGE</h1>

<!-- Correct -->
<h1>Le HTML est un langage de balisage</h1>

> Le terme HTML eest bel et bien un acronyme.

Il faut ensuite associé en CSS la propriété `text-transform` pour modifier la case de la balise h1

h1{
    text-transform: uppercase;
}

## Structurer une page


Depuis la version 5 de HTML de nouvelles balises sémantique sont apparues. Ces balises permettent de rendre le contenu des pages Web beaucoup plus accessibles car le principe de la sémantique est d'indiquer grâcee à l'utilisation de la balise une importance spécifique pour les balises qu'elle contient.

> Le balise DIV sont générique alors que la balise NAV indique le contenu d'une navigartion principale.

## Exemple 1 : modèle de page non-sémantique

<div>
    <h1>Dicta adipisci voluptatum optio expedita</h1>
    <ul>
        <li><a href="...">Lorem</a></li>
        <li><a href="...">Ipsum</a></li>
        <li><a href="...">Dolor</a></li>
    </ul>
</div>

<div>
    <div>
        <div>
            <h2>Lorem ipsum dolor</h2>
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
        
        <div>
            <h2>Lorem ipsum dolor</h2>
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
    </div>
</div>

<div>
    <p>Under WTFPL - Julien Noyer 2020</p>
</div>

> L'utilisation des DIV seules ne permet de rendre la page sémantique

## Exemple 2 : modèle de page sémantique HTML avec des DIV

<div role="header">
    <h1>Dicta adipisci voluptatum optio expedita</h1>
    <ul role="navigation">
        <li><a href="...">Lorem</a></li>
        <li><a href="...">Ipsum</a></li>
        <li><a href="...">Dolor</a></li>
    </ul>
</div>

<div role="main">
    <div role="section">
        <div role="article">
            <h2>Lorem ipsum dolor</h2>
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
        
        <div role="article">
            <h2>Lorem ipsum dolor</h2>
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
    </div>
</div>

<div role="footer">
    <p>Under WTFPL - Julien Noyer 2020</p>
</div>

> L'utilisation de l'attribut `role` permet d'ajouter de la sémantique dans une page HTML.

## Exemple 3 : modèle de page sémantique HTML5

Ce dernier exemple est celui qu'il faut respecter pour organiser de façon correct un contenu sémantique.

<header>
    <h1>Dicta adipisci voluptatum optio expedita</h1>
    <nav>
        <ul>
            <li><a href="...">Lorem</a></li>
            <li><a href="...">Ipsum</a></li>
            <li><a href="...">Dolor</a></li>
        </ul>
    </nav>
</header>

<main>
    <section>
        <article>
            <h2>Lorem ipsum dolor</h2>
            <p>Lorem ipsum dolor sit amet...</p>
        </article>
        
        <article>
            <h2>Lorem ipsum dolor</h2>
            <p>Lorem ipsum dolor sit amet...</p>
        </article>
    </section>
</main>

<footer>
    <p>Under WTFPL - Julien Noyer 2020</p>
</footer>

> Toutes ces différentes balises vont sont présentées sur le site de [MDN](https://developer.mozilla.org/fr/docs/Glossaire/Sémantique).