Les éléments HTML
La base du langage de balisage hypertexte est l’élément. Les éléments HTML définissent la structure du document HTML. Pour décrire les éléments on utilise les tags HTML.
Les éléments et les tags sont souvent confus. Les tags servent à ouvrir et fermer l’objet, et l’élément comprend à la fois les tags et leur contenu.
Prenons un exemple avec le tag <h1> <h1>Titre du document est un élément, et <h1> , </h1> sont tags.
Types des éléments
Les éléments HTML sont appariés ou simples (seul). Le contenu de l’élément apparié est écrit entre le tag d’ouverture <> et le tag de fermeture </>.
Les éléments vides n'ont pas de tag de fermeture. Ils peuvent être "fermés" dans le tag d'ouverture comme cela:
Les éléments vides de HTML sont: <area>,<base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <meta>, <param>, <source>, <track> and <wbr>.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre de la page Web</title>
</head>
<body>
<h1>Titre de la page</h1>
<p>Premier paragraphe </p>
<p>Deuxième paragraphe <br> où on a inséré un saut de ligne</p>
</body>
</html>Résultat
Dans cet exemple nous avons utilisé 4 éléments appariés:
- L’élément <html>, qui comprend tous les éléments HTML de la page.
- L’élément <body>, dans lequel le contenu de la page Web est stocké.
- L’élément <p>, pour afficher un paragraphe.
- L’élément <h1>, qui contient le titre.
Dans notre exemple, nous avons également utilisé un élément simple <br> pour déplacer une ligne.
Les éléments HTML de bloc et de ligne
Les éléments en HTML sont également divisés en de bloc et de ligne. Les éléments de blocsont appelés ceux constituant des blocs de construction de pages Web. Ils sont utilisés pour diviser le contenu d’une page Web en blocs logiques, tels que des menus, le titre de site, un bloc contenant du contenu, le "sous-sol" du site, etc. Les éléments de bloc sont écrits à partir d'une nouvelle ligne ; avant et après ces éléments, un saut de ligne est automatiquement ajouté au navigateur.
Les éléments de bloc sont <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<footer>
<p>Auteur: Equipe W3docs</p>
<p><a href="[email protected]">Envoyer un message à l'auteur</a>.</p>
</footer>
</body>
</html>Résultat
Les parties du contenu des éléments sont marquées par les éléments de ligne. Ils n'occupent que des espaces limités par des tags, le navigateur n'ajoute pas automatiquement un saut de ligne. Les éléments <img>, <span>, <a> et d’autres sont les éléments de ligne.
Les éléments HTML imbriqués
Les éléments HTML, qui sont composés des tags appariés, peuvent soit contenir d’autres éléments, soit être eux-mêmes imbriqués dans d’autres éléments.
Par exemple, si vous souhaitez mettre en évidence certains mots de la phrase en gras, vous pouvez utiliser le tag <strong> apparié intégré au tag <p>.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<p>Dans cette phrase <strong>cette partie</strong> est définie en gras.</p>
</body>
</html>Résultat
Dans notre exemple, nous devons d'abord fermer le tag <strong>, puis le tag <p>.
Pratiquez vos connaissances
