Anatomie d'un document :
Les éléments constituant un document HTML sont :
- <!DOCTYPE html> : artefact historique qui doit être inclus pour tout fonctionne bien.
- <html> … </html> : racine d'un document HTML ; cet élément est le contenant de tout le code de la page.
- <head> … </head> : conteneur pour inclure dans une page HTML tout content non affiché (mots-clés, description de la page, style CSS, déclaration de jeu de caractères.
- <body> … </body> : contenu à afficher par le navigateur.
Il est fortement conseillé d'introduire des documentaires dans les documents HTML. Ces commentaires sont ignorés par le navigateur et sont invisibles pour les utilisateurs. Un commentaire est balisé par les symboles suivants : <!-- … -->
Langage principal du document :
Il est possible de définir la langue d'un document en ajoutant l'attribut lang à la balise <html> : <html lang = 'fr'>. Les moteurs de recherche indexent plus efficacement lorsque le langage est défini. Il est également possible de définir des sous-sections dans un document pour qu'elles soient reconnues comme étant en différentes langues.
En-tête d'un document :
L'en-tête d'un document HTML, balisée par <head>, est une partie qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme :
- <title> : définition du titre.
- <meta … > : définition des métadonnées utilisées pour décrire les propriétés du document
- <link … > : définition des liens.
Définition du titre de la page :
Le titre représente l'intitulé du document HTML global, à ne pas confondre avec <h1>. Cet intitulé ne fait pas partie du contenu du document, il est utilisé de manières différentes. Par exemple, cet élément utilisé est utilisé par les navigateurs pour marquer une page (suggestion du navigateur) ou pour les résultats de recherche.de la page.
Définition des métadonnées :
Les métadonnées sont des données qui décrivent des données et le langage HTML à une manière « officielle » d'ajouter des métadonnées à un document à l'aide de la balise <meta>. De nombreux éléments contiennent des métadonnées décrites par deux attributs :
- name : type de la métadonnée (type d'informations contenu),
- content : contenu réel de la métadonnée.
Une description qui incorpore des mots-clés relatifs au contenu de la page peut améliorer le positionnement de la page dans la liste de recherches par pertinence créée par un moteur de recherche (SEO : Search Engine Optimization).
Application : encodage des caractères
Cette métadonnée, <meta charset="utf-8">, définit l'encodage des caractères du document (jeu de caractères autorisé à être utilisé). Le jeu de caractères utf-8 qui comporte la quasi-totalité des caractères de toutes les écritures connues; il peut gérer tout contenu textuel.
Application : Auteur et description d'un document
Ces deux métadonnées décrivent respectivement l'auteur du document et sa description :
- <meta name = "author" content = "Arthur Miller">
- <meta name = "description" content = "Apprentissage du langage HTML">
La métadonnée auteur (author) fait référence à l'auteur de la page tandis que la description (description) peut améliorer le positionnement de la page dans la liste de recherches par pertinence créée par un moteur de recherche (SEO : Search Engine Optimization).
Définition des liens :
Les balises link permettent d'établir des liens vers les ressources nécessaires au document HTML ; ces liens permettent de faire référence à des icônes, des feuilles de style ou des scripts. Ces balises s'appuient sur au moins deux attributs :
- rel : définition du type de lien,
- href : lien vers le fichier.
Application : définition d'icônes personnalisées
Ces icônes sont affichées par les navigateurs lors de l'affichage de la page (dans l'onglet affichant la page). Si la plupart des navigateurs acceptent les formats .gif et .png, il peut être intéressant d'utiliser le format ICO pour un bon fonctionnement avec Internet Explorer 6.
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" sizes="72x72"> où :
- rel définit le type d'icône,
- href définit le lien vers le fichier (à la racine du dossier),
- type définit le type d'image,
- size définit la taille de l'icône.
Application : définition de feuilles de style :
Un site Web utilise des feuilles de style CSS pour définir l'aspect :
- rel = "stylesheet" : définition du type de document,
- href = "css/fichier-css.css" : chemin d'accès au fichier.
Les balises du corps :
L'un des principaux buts d'un document HTML est de structurer du texte en lui donnant du sens pour que le navigateur puisse l'afficher correctement ; cette structuration facilite la lecture d'un document. Les balises sont utilisées pour ajouter du sens au texte : titre, paragraphe, liste, etc.
Les principales balises associées à des éléments de bloc sont :
- Titres : <h1>, <h2>, <h3>, <h4>, <h5>, <h6> sont 6 éléments de titre qui représentent chacun un niveau de titre différent ; <h1> représentant le titre principal et <h6> le titre de plus bas niveau. La logique de structuration du document dépend de l'utilisateur.
- Division : <div> définit un conteneur générique de flux qui n'a aucun effet sur le contenu
- Paragraphe : <p> définit un paragraphe simple.
- Listes : <ul> définit une liste énumérée (non ordonnée) et <ol> une liste ordonnée> et <li> un élément de liste ; il est possible d'imbriquer des listes. <dl> définit une liste descriptive comportant des termes <dt> et leur définition <dd>.
- Citation : <bloquote> définit une citation dans un paragraphe :
Cette citation ...
- Détails de contact : <address> balise les détails de contact ; cet élément est utilisé pour marquer les coordonnées de la personne ayant écrit le document HTML.
Règles de bonnes pratiques sur les titres :
- Il est préférable de n'utiliser qu'un seul <h1> par page (niveau principal).
- Il faut utiliser les balises de titre dans l'ordre correct et logique.
- Il est déconseillé d'utiliser plus de trois niveaux de titre dans une page.
Les principales balises associées à des éléments en ligne sont :
- Conteneur : <span> définit un conteneur générique en ligne pour les contenus phrasés ; il ne représente rien de particulier, il peut utilisé pour grouper des éléments pour les mettre en forme.
- Emphase : <em> est un élément pour faire ressortir, mettre en emphase, une partie du texte (souvent affiché en italique).
- Forte importance : <strong> est un élément qui précise que le texte a une importance particulière (souvent affiché en gras).
- Pertinence : <mark> est un élément pour marquer ou surligner un texte à cause de sa pertinence dans le contexte.
- Incise : <q>
est un élément utilisé pour mettre du texte en incise
. - Italique : <i> est un élément utilisé pour différencier un morceau de texte du texte principal.
- Gras : <b> est un élément utilisé pour mettre une partie du texte en gras.
- Soulignement : <u> est un élément pour souligner une partie du texte.
- Citation : <cite> est un élément pour afficher le titre d'une œuvre.
- Abréviation : <abbr> est un élément pour afficher la description d'un acronyme : HTML.
- Exposant et indice : <sup> est une élément pour afficher un exposant exposant et <sub> est un élément pour affiche un indice indice.
- Heures et dates : <time> est balise pour marquer les heures et les dates dans un format lisible par machine ; elle est utilisée pour attacher un horodatage non ambigu lisible par machine.
Cas particulier du code informatique, il existe plusieurs balises pour mettre en forme du code informatique :
- <code> : balise pour marquer du code informatique.
- <pre> : balise pour conserver les espaces et les tabulations.
- <var> : balise pour marquer les variables.
- <kbd> : balise pour marquer les touches de clavier à presser sur l'ordinateur.
- <samp> : balise pour marquer une sortie de programme.