📋 Plan du Cours
- Structure HTML5
- Balises HTML
- Attributs balises
- Structure globale
- Balises sémantiques
- Balises obsolètes
- Rôle HTML5
- Syntaxe balises
- Contenu balises
- Balises sans contenu
📖 1. Structure HTML5
🔑 Notions clés & Définitions
- HTML (HyperText Markup Language) : langage de balisage utilisé pour structurer le contenu des pages web. Développé par le W3C et le WHATWG, il permet d’organiser le texte, d’intégrer des médias et de créer des hyperliens (source : Frédéric LEFEVRE).
- HTML version 5 : version du HTML publiée depuis 2014, intégrant des fonctionnalités modernes et une structure simplifiée pour une meilleure compatibilité et accessibilité (source : Frédéric LEFEVRE).
- W3C (World Wide Web Consortium) : organisme qui standardise le langage HTML, garantissant son uniformité et sa compatibilité à l’échelle mondiale (source : Frédéric LEFEVRE).
- WHATWG (Web Hypertext Application Technology Working Group) : groupe de travail qui contribue à rendre le HTML plus facile à utiliser en y intégrant des fonctionnalités modernes telles que la vidéo (source : Frédéric LEFEVRE).
- Rôle du HTML : structurer le contenu des pages web, référencer des fichiers multimédias (images, vidéo, audio), et créer des hyperliens vers d’autres pages, tout en étant standardisé par le W3C (source : Frédéric LEFEVRE).
📝 Points essentiels
- Le HTML est constitué de balises qui organisent le contenu en texte, médias et liens hypertextes. La première ligne d’un document HTML5 doit comporter la déclaration
<!DOCTYPE html>.
- La structure d’un document HTML comprend la balise
<html> qui englobe deux sections principales : <head> (pour les métadonnées comme <title> et <meta>) et <body> (pour le contenu visible).
- Le HTML version 5 a été conçu pour intégrer des fonctionnalités modernes, notamment la prise en charge limitée de formats multimédias (ex : vidéo) via des balises spécifiques.
- La syntaxe d’une balise est composée de chevrons
< >, avec une balise ouvrante <nomBalise> et une balise fermante </nomBalise>. Certaines balises, comme <br>, sont sans contenu et ne possèdent pas de balise fermante.
- Les attributs dans une balise, tels que
id ou class, permettent d’ajouter des informations supplémentaires, avec une syntaxe <nomBalise nomAttribut="valeur">. Un document HTML doit respecter un ordre d’imbrication correct pour assurer la compatibilité et la validité.
💡 À retenir
Le HTML5, standardisé depuis 2014 par le W3C, est le langage de référence pour structurer le contenu des pages web, en intégrant des fonctionnalités modernes tout en étant basé sur une syntaxe simple et cohérente.
📖 2. Balises HTML
🔑 Notions clés & Définitions
-
Balise HTML <nomBalise> </nomBalise> : Structure de base en HTML, constituée d'une balise ouvrante et d'une balise fermante, encadrant un contenu ou étant autonome (ex : <br>). Selon LEFEVRE (date), elle sert à définir des éléments dans une page web.
-
Balise avec contenu : Balise qui possède une balise fermante et encadre du texte ou d’autres balises, par exemple <article> ... </article>. Elle permet de structurer le contenu de façon sémantique.
-
Balise sans contenu : Balise qui n’a ni contenu ni balise fermante, comme <br>, utilisée pour des fonctions spécifiques (ex : saut de ligne). Selon LEFEVRE, elle a une syntaxe particulière et ne contient pas d'information supplémentaire.
-
Balises sémantiques : Balises qui donnent un sens précis au contenu qu’elles encadrent, telles que <header>, <footer>, <nav>, <article>. Elles améliorent la compréhension du document par les navigateurs et les moteurs de recherche (LEFEVRE).
-
Balises obsolètes : Balises qui ne sont plus recommandées dans HTML5, comme <center>, car elles ne respectent pas la sémantique moderne. Leur utilisation nuit à la compatibilité et à l'accessibilité, comme indiqué dans la documentation MDN.
📝 Points essentiels
- La syntaxe d’une balise est
<nomBalise> pour l’ouverture et </nomBalise> pour la fermeture, sauf pour les balises sans contenu (ex : <br>). La balise ouvrante peut contenir des attributs, par exemple <a href="url">.
- La structure d’un document HTML doit respecter une imbrication correcte des balises, notamment avec la balise racine
<html> contenant <head> et <body>.
- Les balises sémantiques telles que
<header>, <footer>, <nav>, <article> jouent un rôle clé dans la structuration du contenu pour une meilleure compréhension par les moteurs de recherche et les aides techniques.
- Les balises obsolètes, comme
<center>, doivent être évitées pour assurer la compatibilité avec les standards modernes (voir MDN).
- La première ligne d’un document HTML5 doit inclure la déclaration
<!DOCTYPE html> pour indiquer le standard utilisé.
💡 À retenir
Les balises HTML structurent le contenu d’une page web en utilisant des éléments avec ou sans contenu, dont les balises sémantiques améliorent la signification, tandis que l’usage de balises obsolètes doit être proscrit pour garantir la compatibilité et l’accessibilité.
📖 3. Attributs balises
🔑 Notions clés & Définitions
- Attribut d’une balise : élément supplémentaire placé dans une balise HTML pour fournir des informations complémentaires. Sa syntaxe est
<nomBalise nomAttribut="valeur"> (d’après LEFEVRE, 2024).
- Syntaxe d’un attribut : consiste en un nom d’attribut suivi du signe égal (=) et de sa valeur encadrée par des double quotes (""). Exemple :
<img src="image.jpg">. (d’après LEFEVRE, 2024).
- Possibilité d’avoir plusieurs attributs ou aucun : une même balise peut contenir plusieurs attributs séparés par des espaces ou ne pas en contenir du tout, permettant une grande flexibilité dans la personnalisation des balises (d’après LEFEVRE, 2024).
- Les attributs fournissent des informations supplémentaires : ils précisent ou modifient le comportement ou l’apparence de la balise, comme
href pour les liens ou src pour les images (d’après LEFEVRE, 2024).
📝 Points essentiels
- La syntaxe
<nomBalise nomAttribut="valeur"> doit respecter l’usage des double quotes autour des valeurs, avec un signe égal entre le nom et la valeur.
- La possibilité d’avoir plusieurs attributs dans une même balise permet d’ajouter diverses propriétés, par exemple
<a href="page.html" target="_blank">.
- La structure globale d’un document HTML impose que les attributs soient placés dans la balise ouvrante, avant la fermeture du chevron (
>).
- La norme recommande d’utiliser des double quotes pour entourer les valeurs d’attribut, ce qui facilite la lecture et la compatibilité (d’après LEFEVRE, 2024).
- La flexibilité dans l’ajout d’attributs permet d’adapter le contenu HTML aux besoins spécifiques, tout en respectant la syntaxe pour éviter les erreurs de parsing.
💡 À retenir
Les attributs d’une balise en HTML sont essentiels pour enrichir et personnaliser le contenu, en utilisant une syntaxe précise : <nomBalise nomAttribut="valeur">, avec plusieurs attributs possibles ou aucun, selon les besoins.
📖 4. Structure globale
🔑 Notions clés & Définitions
- <html> (structure globale) : balise racine qui englobe tout le contenu d’un document HTML, contenant généralement deux sections principales :
<head> et <body> (d’après LEFEVRE, 2023).
- <head> : section du document HTML qui contient des éléments non visibles directement par l’utilisateur, comme
<title>, <meta>, etc., et qui fournit des informations sur la page (d’après LEFEVRE, 2023).
- <body> : partie visible du document HTML où se placent le contenu destiné à l’utilisateur, structuré avec des balises sémantiques ou non (d’après LEFEVRE, 2023).
- Ordre d'apparition des éléments : la séquence recommandée pour structurer un document HTML, généralement
<html> en premier, suivi de <head> puis <body>, bien que l’ordre puisse être deviné par le navigateur, l’usage recommande cette hiérarchie (d’après LEFEVRE, 2023).
- Imbrication correcte des balises : principe selon lequel chaque balise ouvrante doit être correctement fermée dans le bon ordre, respectant la structure arborescente du document pour assurer la validité et la compatibilité (d’après LEFEVRE, 2023).
📝 Points essentiels
- La balise
<html> doit contenir toutes les autres balises du document, notamment <head> et <body>, qui doivent être placées dans cet ordre pour respecter la structure recommandée, même si le navigateur peut deviner leur position (d’après LEFEVRE, 2023).
- La section
<head> inclut des éléments comme <title> et <meta>, qui donnent des informations sur la page, tandis que <body> contient le contenu visible destiné à l’utilisateur (d’après LEFEVRE, 2023).
- La structure arborescente doit respecter l’ordre d’apparition et d’imbrication des balises pour assurer la conformité aux standards, notamment pour éviter des erreurs de rendu ou de validation (d’après LEFEVRE, 2023).
- Bien que la position des balises
<html>, <head>, et <body> puisse être devinée par le navigateur, leur usage est fortement recommandé pour une meilleure compatibilité et lisibilité du code (d’après LEFEVRE, 2023).
💡 À retenir
La structure globale d’un document HTML repose sur la balise <html> contenant <head> et <body>, avec un ordre d’apparition et d’imbrication précis, essentiel pour la conformité et la lisibilité du code.
📖 5. Balises sémantiques
🔑 Notions clés & Définitions
- Balises sémantiques : balises HTML qui donnent un sens précis au contenu qu’elles encadrent, facilitant la compréhension pour les navigateurs, moteurs de recherche et lecteurs d'écran. (Frédéric LEFEVRE, HTML 5)
- header : balise sémantique utilisée pour définir l’en-tête d’un document ou d’une section, contenant généralement le titre, le logo ou la navigation principale. (Frédéric LEFEVRE, HTML 5)
- footer : balise sémantique désignant le pied de page d’un document ou d’une section, regroupant des informations complémentaires comme les crédits, liens ou contacts. (Frédéric LEFEVRE, HTML 5)
- nav : balise sémantique qui indique une zone de navigation, regroupant des liens vers d’autres pages ou sections du site. (Frédéric LEFEVRE, HTML 5)
- article : balise sémantique représentant un contenu autonome, comme un article de blog ou une news, pouvant être redistribué ou réutilisé indépendamment. (Frédéric LEFEVRE, HTML 5)
📝 Points essentiels
- Les balises sémantiques telles que header, footer, nav, et article ont été introduites avec HTML5 pour renforcer la signification du contenu.
- Leur utilisation permet une meilleure accessibilité, notamment pour les lecteurs d'écran, et améliore le référencement naturel (SEO).
- La structure d’un article typique inclut une balise article contenant des éléments comme h1 pour le titre et p pour le texte, permettant une organisation claire du contenu.
- Le rôle principal des balises sémantiques est d’apporter une signification précise au contenu, facilitant la compréhension et la navigation dans la page.
- La structuration du contenu du body avec ces balises contribue à une organisation logique et cohérente du document HTML.
💡 À retenir
Les balises sémantiques améliorent la compréhension du contenu par les machines et les utilisateurs, en apportant une signification claire et structurée au document HTML. Leur utilisation est essentielle pour une conception web accessible et optimisée pour le référencement.
📖 6. Balises obsolètes
🔑 Notions clés & Définitions
- Balise obsolète : Balise HTML qui n’est plus recommandée ou supportée dans les standards modernes, comme HTML5, et qui peut entraîner des problèmes de compatibilité (voir documentation MDN).
- Exemple de balise obsolète :
<center> ; utilisée pour centrer du contenu, mais remplacée par des techniques CSS modernes.
- Documentation officielle sur les balises obsolètes (MDN) : Source de référence qui recense les balises HTML dépréciées ou obsolètes, et indique leur usage à éviter pour assurer la compatibilité et la conformité aux standards (voir MDN Web Docs).
- Importance d’éviter les balises obsolètes : Pour garantir la compatibilité avec tous les navigateurs modernes, faciliter la maintenance du code, et respecter les recommandations du W3C, notamment dans le contexte de la standardisation du HTML (voir Frédéric LEFEVRE).
📝 Points essentiels
- Les balises obsolètes comme
<center> ont été remplacées par des techniques CSS pour améliorer la séparation du contenu et de la présentation.
- La documentation officielle (MDN) fournit une liste à jour des balises à éviter, ainsi que des alternatives modernes.
- L’utilisation de balises obsolètes peut entraîner des problèmes d’affichage ou d’accessibilité, et compromet la compatibilité multi-navigateurs.
- Selon Frédéric LEFEVRE (HTML 5), le HTML moderne privilégie la sémantique et la séparation des préoccupations, rendant obsolètes les balises de présentation comme
<center>.
- La conformité aux standards est essentielle pour la pérennité des pages web, d’où l’importance de se référer à la documentation officielle (MDN).
💡 À retenir
Les balises obsolètes, comme <center>, doivent être évitées au profit de techniques CSS modernes pour assurer la compatibilité et la conformité aux standards du HTML5.
📖 7. Rôle HTML5
🔑 Notions clés & Définitions
- Frédéric LEFEVRE (date) : le HTML est constitué de balises permettant de structurer le contenu des pages web, en organisant le texte, les fichiers binaires (images, vidéo, audio) et les hyperliens.
- W3C (date) : organisme qui standardise le langage HTML, garantissant une compatibilité universelle et une cohérence dans la création des pages web.
- WHATWG (date) : groupe qui contribue à rendre le HTML moderne et facile à utiliser en intégrant des fonctionnalités avancées telles que la gestion de la vidéo.
📝 Points essentiels
- Le HTML, développé par le W3C et le WHATWG depuis 2014 avec la version 5, sert principalement à structurer le contenu des pages web en utilisant des balises.
- La première ligne d’un document HTML5 doit contenir la déclaration
<html>, qui englobe deux sections principales : <head> (pour les métadonnées, titres, etc.) et <body> (pour le contenu visible).
- Le HTML permet d’intégrer différents types de fichiers binaires (images, vidéos, audios) via des balises spécifiques, et de créer des hyperliens pour naviguer entre différentes pages.
- La syntaxe des balises suit un modèle précis : balise ouvrante
<nomBalise>, contenu, puis balise fermante </nomBalise>. Certaines balises, comme <br>, sont sans contenu ni balise fermante.
- Les attributs enrichissent les balises en fournissant des informations supplémentaires, avec une syntaxe
<nomBalise nomAttribut="valeur">.
- La standardisation par le W3C assure que tous les navigateurs interprètent le HTML de manière cohérente, facilitant la compatibilité et la maintenance des sites.
💡 À retenir
Le HTML5, standardisé par le W3C et enrichi par le WHATWG, structure efficacement le contenu des pages web tout en permettant l’intégration de médias et la création de liens, garantissant ainsi une compatibilité universelle.
📖 8. Syntaxe balises
🔑 Notions clés & Définitions
- Syntaxe d’une balise : ensemble de règles pour écrire une balise HTML, comprenant des chevrons ouvrants et fermants, une barre oblique pour la balise fermante, et éventuellement des attributs (d’après Frédéric LEFEVRE).
- Balise ouvrante : la première balise d’un élément HTML, qui indique le début du contenu (ex :
<nomBalise>).
- Balise fermante : la balise qui clôt un élément HTML, précédée d’une barre oblique, indiquant la fin du contenu (ex :
</nomBalise>).
- Balise sans contenu : balise qui ne possède ni contenu ni balise fermante, souvent utilisée pour des éléments auto-fermants comme
<br>, avec une syntaxe particulière (d’après Frédéric LEFEVRE).
- Exemple de syntaxe :
<nomBalise> contenu </nomBalise> ; la balise ouvrante <nomBalise> et la balise fermante </nomBalise> encadrent le contenu.
📝 Points essentiels
- La syntaxe correcte d’une balise repose sur l’utilisation de chevrons ouvrants
< et fermants >, avec la possibilité d’ajouter des attributs dans la balise ouvrante (d’après Frédéric LEFEVRE).
- La balise ouvrante indique le début d’un élément, tandis que la balise fermante marque sa fin. La différence réside dans la présence de la barre oblique
/ dans la balise fermante (ex : <nomBalise> vs </nomBalise>).
- La syntaxe pour éviter des erreurs de parsing consiste à respecter l’ordre : balise ouvrante, contenu, balise fermante, en s’assurant que chaque balise ouvrante a une balise fermante correspondante, sauf pour les balises sans contenu (ex :
<br>).
- La balise sans contenu doit être écrite avec une syntaxe particulière, souvent auto-fermante ou sans balise fermante, comme
<br> ou <img src="image.jpg" />.
- La structure globale d’un document HTML doit suivre une imbrication correcte des balises, notamment la balise
<html> contenant <head> et <body>, avec un ordre d’apparition et d’imbrication respecté (d’après Frédéric LEFEVRE).
- La syntaxe doit également respecter l’utilisation des attributs :
<nomBalise nomAttribut="valeur">, avec des doubles quotes autour de la valeur et un signe égal séparant le nom et la valeur.
💡 À retenir
La syntaxe correcte d’une balise HTML repose sur l’utilisation précise de chevrons, de la barre oblique pour la balise fermante, et le respect de l’ordre d’imbrication pour assurer un parsing sans erreur.
📖 9. Contenu balises
🔑 Notions clés & Définitions
- Contenu des balises : Texte destiné à l’utilisateur ou autres balises incluses, qui constitue l’information visible ou structurée dans une page web (d’après LEFEVRE, 2024).
- Balises contenant du texte ou d’autres balises : Balises qui encapsulent du contenu textuel ou d’autres balises, permettant une structuration hiérarchique ou sémantique (ex :
<article>, <p>, <h1>).
- Exemple de contenu dans un article : Un ensemble de balises comme
<p>, <h1>, <article>, qui organisent le texte et la structure de la page.
- Différence entre contenu et balise elle-même : La balise est la syntaxe
<nomBalise> ou </nomBalise>, tandis que le contenu est ce qui se trouve à l’intérieur, visible ou structuré, entre la balise ouvrante et la balise fermante.
📝 Points essentiels
- Le HTML, développé par le W3C et le WHATWG (depuis 2014 avec HTML5), structure le contenu des pages web en utilisant des balises (d’après LEFEVRE, 2024).
- La première ligne d’un document HTML5 doit contenir la déclaration
<!DOCTYPE html>, suivie de la balise <html> qui englobe <head> et <body>.
- Les balises peuvent être avec ou sans contenu : celles avec contenu ont une balise ouvrante
<nomBalise> et une balise fermante </nomBalise>, tandis que celles sans contenu, comme <br>, n’ont pas de balise fermante (d’après LEFEVRE, 2024).
- Les balises peuvent contenir des attributs, syntaxe :
<nomBalise nomAttribut="valeur">, permettant d’ajouter des informations supplémentaires (d’après LEFEVRE, 2024).
- La structure d’un document HTML doit respecter un ordre et une imbrication corrects, avec une hiérarchie claire entre
<html>, <head>, <body>, et les balises sémantiques comme <header>, <footer>, <article>, <nav>.
- Certaines balises obsolètes, comme
<center>, doivent être évitées pour assurer la compatibilité et la conformité aux standards modernes (d’après LEFEVRE, 2024, MDN).
💡 À retenir
Le contenu d’une page web est constitué de textes et de balises structurantes, qui doivent être bien imbriquées et respecter la syntaxe pour garantir un rendu correct et conforme aux standards du HTML5.
📖 10. Balises sans contenu
🔑 Notions clés & Définitions
- Balise sans contenu : balise HTML qui ne contient ni texte ni autres balises, et ne possède pas de balise fermante. Exemple :
<br>.
- Syntaxe particulière : les balises sans contenu utilisent une syntaxe spécifique où la balise est auto-fermante ou ne nécessite pas de balise fermante, comme
<br>.
- Utilisation spécifique : ces balises sont destinées à des fonctions précises, telles que le saut de ligne (
<br>) ou la séparation visuelle, sans ajouter de contenu ou de structure supplémentaire.
- Exemple de balise sans contenu :
<br> pour un saut de ligne, permettant de passer à la ligne suivante sans contenu intermédiaire.
- Code HTML rendu : la balise
<br> insère un saut de ligne dans le rendu de la page, sans afficher de contenu visible.
📝 Points essentiels
- La syntaxe des balises sans contenu est particulière : elles n’ont pas de balise fermante et sont souvent écrites sous la forme
<nomBalise>.
- La balise
<br> est un exemple classique, permettant de créer un saut de ligne, et est utilisée pour des effets de mise en page ou de formatage.
- La norme recommande d’utiliser ces balises pour des fonctions précises, évitant ainsi la surcharge de contenu ou de structure.
- La syntaxe correcte évite les erreurs de parsing : par exemple, écrire
<br> plutôt que <br></br> ou <br /> dans HTML5 (qui accepte cette dernière forme).
- La compréhension de ces balises est essentielle pour structurer efficacement le contenu sans ajouter de contenu superflu.
💡 À retenir
Les balises sans contenu ont une syntaxe spécifique et sont utilisées pour des fonctions précises comme le saut de ligne, permettant une structuration claire et efficace du contenu HTML sans contenu interne.
📅 Repères chronologiques
| Date | Événement |
|---|
| 2014 | Publication officielle de HTML5 par le W3C |
| 1994 | Création du W3C (World Wide Web Consortium) |
| 2014 | Adoption généralisée de HTML5 comme standard |
| 2014 | Contribution du WHATWG à l'évolution du HTML5 |
📊 Tableaux de Synthèse
| Critère | HTML (définition) | Balises HTML | Attributs balises | Structure globale |
|---|
| Auteur / Source | Frédéric LEFEVRE | Frédéric LEFEVRE, MDN | Frédéric LEFEVRE, MDN | Frédéric LEFEVRE |
| Fonction | Langage de balisage pour structurer pages web | Encadrent le contenu, peuvent être sémantiques ou non | Ajoutent des informations complémentaires aux balises | Organise le document avec <html>, <head>, <body> |
| Syntaxe | <balise> et </balise> | <balise> ... </balise> ou <balise /> (auto-fermante) | <balise attribut="valeur"> | <html>, <head>, <body> |
| Rôle | Structurer, référencer médias, hyperliens | Structurer, donner du sens, balises obsolètes à éviter | Personnaliser, préciser le comportement | Définir la hiérarchie et la composition du document |
⚠️ Pièges & Confusions Fréquentes
- Confondre balise sans contenu
<br> avec une balise avec contenu.
- Oublier la déclaration
<!DOCTYPE html> en début de document.
- Utiliser des balises obsolètes comme
<center> au lieu de CSS.
- Mettre des attributs sans respecter la syntaxe (
"valeur" avec double quotes).
- Mal imbrication des balises, notamment
<html>, <head>, <body>.
- Omettre les balises sémantiques (
<header>, <footer>) au profit de balises dépréciées.
- Ne pas respecter l’ordre recommandé :
<html>, <head>, <body>.
- Confondre attribut
class et id ou leur usage.
✅ Checklist Examen
- Connaître la définition de HTML selon Frédéric LEFEVRE.
- Savoir que HTML5 a été publié en 2014 par le W3C.
- Identifier les balises sémantiques principales (
<header>, <footer>, <nav>, <article>).
- Maîtriser la syntaxe des balises HTML :
<balise> ... </balise> et balises sans contenu <br>.
- Reconnaître les balises obsolètes à éviter, comme
<center>.
- Connaître le rôle du
<html>, <head>, <body> dans la structure globale.
- Savoir que la déclaration
<!DOCTYPE html> doit être en première ligne.
- Maîtriser la syntaxe des attributs :
<balise attribut="valeur">.
- Comprendre l’importance des attributs pour la personnalisation.
- Savoir que
<meta> et <title> sont dans <head>.
- Connaître la contribution du WHATWG à l’évolution du HTML.
- Vérifier la bonne imbrication et la conformité syntaxique des balises.
Създайте свои собствени листове за преговор
Импортирайте курса си и AI генерира листове, тестове и флашкарти за 30 секунди.
Генератор на листове