Les types de balises

On différencie deux types de balises : les balises inline et les balises block

Leur comportement par défaut est l’empilement

Exemples :

• <div>
• <h1> – <h6>
• <p>
• <ul>
• <li>
• <section>
• <article>
• <form>
• <table>

Il faut bien connaitre la catégorie d’une balise pour comprendre sa mise en page en CSS

Leur comportement par défaut est de se positionner à la suite de l’élément précédent (balise, texte, image…)

Exemples :

• <a>
• <strong>
• <em>
• <img>
• <span>
• <button>
• <select>

Il existe une centaine de balises HTML standards.

Au quotidien, on en utilise rarement plus d’une vingtaine

Quelques balises importantes à connaître

• les tableaux
• les formulaires
• les balises video et audio
• picture

Quelques balises plus confidentielles

• la balise <map>
• la balise <pre>
• la balise <time>

Des balises pour organiser son document

• <header>
• <footer>
• <article>
• <aside>
• <nav>

On distingue les balises sémantiques et les balises qui n’ont pas de signification particulière

Les balises sémantiques

Elles donnent un sens particulier au contenu qu’elles englobent

Exemples :

• <article>
• <h1>
• <ul> <li>
• <header>
• <table>
• <strong>

Les balises non sémantiques

Elles servent à isoler certaines parties du contenu dans un but de présentation uniqement.

L’utilisation de ces balises doit se faire lorsque la mise en page avec CSS nécessite un squelette HTML particulier.

Exemples :

• <div>
• <span>
• <section>

Ces balises doivent être utilisées en dernier recours.

Les balises container sont des types de balises dont le but est d’englober d’autres balises.

Pourquoi utiliser des containers

• la sémantique du document
• la structure du document
• la mise en page réalisée grâce aux styles CSS

Principales balises containers

• <div>
• <article>
• <section>
• <sidebar>
• <main>
• <header>
• <footer>

Exemple

<article> <h1>Le titre de ma page</h1> <p>Lorem ipsum deloreane sit amet, consectetur adipiscing nostromo commodo consequat sulaco.</p> </article>