Les documents HTML sont composés d'éléments qui sont marqués par ce qu'on appelle des balises. Vous recognizez les balises aux chevrons. Presque tous les éléments HTML sont marqués par une balise d'ouverture et une balise de fermeture. Ce qui se trouve entre est appelé contenu.
Un exemple:
<h1>PSD-Tutorials.de – votre portail graphique, web et d'apprentissage</h1>
Cette syntaxe place une en-tête de premier niveau dans le document. La balise d'ouverture <h1> indique au navigateur qu'il s'agit d'une telle en-tête. La balise de fermeture </h1> termine l'en-tête. Vous reconnaissez les balises de fermeture par un chevron ouvrant, suivi d'une barre oblique </.
Une question se pose concernant l'écriture des noms des éléments: que se passe-t-il en réalité avec la casse? Comme décrit précédemment, l'accent est mis dans cette série sur HTML5. Vous pouvez effectivement choisir entre majuscules et minuscules. Personnellement, je préfère cependant une écriture entièrement en minuscules et je le ferai aussi dans cette série. Fondamentalement, après HTML5, les éléments suivants seraient corrects:
<h1>PSD-Tutorials.de – votre portail graphique, web et d'apprentissage</h1> <H1>PSD-Tutorials.de – votre portail graphique, web et d'apprentissage</H1> <h1>PSD-Tutorials.de – votre portail graphique, web et d'apprentissage</H1>
Les éléments que vous ouvrez doivent également être refermés. Donc, si vous placez une balise <h1>, vous devez la fermer après la définition de l'en-tête </h1>. Bien qu'il y ait des exceptions en HTML5 comme les éléments de liste et les paragraphes, mais à ce sujet plus tard.
En HTML, il existe également des balises autonomes. Elles sont composées uniquement d'une balise, et non d'une balise ouvrante et d'une balise de fermeture. Un exemple typique est <br />.
Ceci est une ligne.<br /> Ceci est une autre ligne.
Cette balise vide <br /> définie un saut de ligne.
En général, ces balises vides se terminent par une barre oblique, même si ce n'est pas obligatoire en HTML5. Cela fonctionnerait aussi avec ceci:
<br>
Vous apprendrez encore d'autres de ces balises autonomes au fil de cette série.
Emboîter des éléments
Les éléments HTML peuvent également être emboîtés. Imaginez que vous voulez mettre en italique une passage à l'intérieur d'un en-tête. Pour une mise en italique, l'élément i est utilisé.
<h1>PSD-Tutorials.de – <i>votre portail graphique, web et d'apprentissage</i></h1>
Lors de l'emboîtement, veillez à respecter l'ordre correct. On ferme en dernier l'élément ouvert en premier. Dans le cas présent, il s'agit donc de l'élément h1.
Utiliser des attributs
Des attributs peuvent être définis à l'intérieur des balises ou balises autonomes. Ces attributs peuvent assigner des propriétés supplémentaires aux éléments. Dans les anciennes versions d'HTML, on assignait relativement de nombreux attributs aux éléments. Cela était simplement dû au mélange entre structure et design. Par exemple, on attribuait directement des définitions de couleur aux éléments HTML via un attribut correspondant. Actuellement, grâce aussi au CSS, une stricte séparation entre design et structure est possible et doit être respectée. C'est pourquoi il n'y a que relativement peu d'attributs maintenant utilisés.
Un attribut important est id. Cet attribut permet d'assigner un nom unique à un élément HTML, auquel on pourra par exemple se référer via CSS ou JavaScript.
<h1 id="head">PSD-Tutorials.de – votre portail graphique, web et d'apprentissage</h1>
Pour assigner un attribut, ajoutez un espace après le h1. Ensuite, suivez le nom de l'attribut, qui est généralement en minuscules. Après le nom de l'attribut, il y a le signe d'égalité. Ensuite, entre guillemets, suivez la valeur de l'attribut.
Il est également possible d'assigner plusieurs attributs à un élément. Il est par exemple tout à fait courant de définir à un élément une classe et un ID. Un exemple: via id, l'en-tête est identifié de manière unique. La classe, quant à elle, sert à classer l'en-tête dans une certaine catégorie. Ainsi, on peut décider que tous les éléments auxquels la classe blue est assignée seront affichés en couleur bleue. (Plus tard, bien sûr, nous aborderons plus en détail cette thématique de CSS et de couleur).
<h1 id="head" class="blue">PSD-Tutorials.de – votre portail d'apprentissage en graphisme et web</h1>
Les attributs sont séparés les uns des autres par un espace dans ce cas.
Valider le code
Vous avez maintenant appris quelques règles de syntaxe de base. Surtout au début, lorsque vous apprenez le HTML, il est important de respecter ces règles. Ce que vous avez pris l'habitude de faire incorrectement, il est difficile de s'en débarrasser. Vous devriez donc toujours vérifier ou faire valider votre code HTML pour vérifier sa correction. Vous n'avez évidemment pas besoin de le faire vous-même. Il existe des outils en ligne appropriés à cet effet. Vous pouvez par exemple trouver un validateur sous http://validator.w3.org/.
Il est préférable de passer directement à l'onglet Valider par saisie directe. Vous pouvez y coller directement le code HTML à vérifier en copiant-collant. Assurez-vous de coller l'intégralité du code du fichier, y compris la déclaration DOCTYPE.
Pour tester le validateur, copiez ceci dans le champ texte et cliquez ensuite sur le bouton Valider.
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de – votre portail d'apprentissage en graphisme et web</h1> </body> </html>
Le résultat devrait ressembler à ceci :
Tout est en ordre ici. (Dans ce cas, vous pouvez ignorer les deux avertissements). Si le message Ce document a été vérifié avec succès comme HTML5 ! s'affiche, tout est effectivement en ordre. Mais comment cela se présente-t-il en cas d'erreur ? Vous pouvez délibérément introduire une erreur de syntaxe pour le découvrir.
<h1 id=head">PSD-Tutorials.de – votre portail d'apprentissage en graphisme et web</h1>
Ici, la guillemet initial avant head a été oublié. Si vous faites à nouveau valider la syntaxe maintenant, l'erreur sera détectée.
Le validateur affichera alors un message correspondant. Vous pouvez voir exactement ce qui s'est mal passé dans la zone inférieure de la fenêtre.
Il est alors décrit très clairement où se trouve l'erreur.
Ligne 8, colonne 12 : " dans une valeur d'attribut non citée. Causes probables : Attributs qui se suivent ou une chaîne de requête URL dans une valeur d'attribut non citée.
<h1 id=head" >PSD-Tutorials.de</h1>
Vous voyez donc directement dans quelle ligne une entrée incorrecte a été effectuée, et vous pouvez la corriger. Le validateur vous aide donc à créer un code HTML propre. Vous devriez toujours faire valider votre code. En effet, les navigateurs affichent souvent du code HTML correctement, même s'il est incorrect du point de vue syntaxique. Cependant, dans d'autres navigateurs que vous n'avez pas testés pour vos pages, cela peut être tout à fait différent.
