HTML-CSS: La Structure de base d’une page en HTML5

Structure de base d’une page en HTML5

En programmation comme dans beaucoup d’autres disciplines, vous l’aurez compris, il y a des règles.

Ainsi, toute page écrite en HTML5 doit comporter une certaine structure, un « squelette » qui sera toujours le même. Ce squelette est bien évidemment constitué de divers éléments.

Tout d’abord, toute page HTML5 doit commencer par la déclaration de ce qu’on appelle un « doctype ». Le doctype, comme son nom l’indique, sert à indiquer le type du document. Dans notre cas, le type de document est HTML. On écrira donc :

Notez bien le point d’exclamation, obligatoire, au début de cet élément un peu particulier.

Ensuite, pour que notre page HTML5 soit valide, il va nous falloir indiquer trois nouveaux éléments

: html, head (« en-tête ») et body (« corps de page »). L’élément html va contenir toute la page.

L’élément head contiendra entre autres, le titre de la page, l’encodage utilisé et des meta-data (des données invisibles pour les utilisateurs mais essentielles – nous en reparlerons plus tard).

L’élément body contiendra tout le contenu de notre page (paragraphes, images, tableaux, etc.). Voilà où nous en sommes rendus pour le moment :

Mais ce n’est pas fini ! Pour que la page soit valide, l’élément head doit lui même contenir un élément title, qui correspond au titre de la page et le meta charset qui prendra comme valeur le type d’encodage choisi.

 

Pour les langues latines, nous choisirons généralement la valeur « utf-8 ». Voici à quoi vous devriez arriver en pratique :

Et voilà, vous venez, sans vous en rendre compte, de créer votre première page valide en

HTML5 ! Retenez bien ce schéma, il sera toujours le même quelque soit la page HTML5 que vous créerez.

Comment Afficher un document en HTML5 dans le navigateur?

La première chose à faire, une fois un nouveau fichier ouvert dans votre éditeur de texte, est d’en changer le type pour mettre votre document en « html ». Pour cela, deux solutions : soit vous trouvez l’onglet où vous pourrez définir le type de votre document, soit vous enregistrez-sous votre document en lui donnant un nom du type : document.html. Cela aura pour effet de changer le type de document en un document HTML.

Ensuite, pour visualiser votre fichier dans un navigateur, vous avez à nouveau deux choix. Soit votre éditeur possède une option vous proposant de pré-visualiser votre document dans le navigateur de votre choix (c’est le cas de Komodo), soit vous devrez enregistrer votre document (sur votre bureau, par exemple), puis double cliquer dessus, tout simplement, afin que la page s’ouvre dans votre navigateur par défaut.

Pensez bien à enregistrer dans votre éditeur votre document à chaque fois que vous souhaitez l’ouvrir dans votre navigateur et à rafraîchir la page dans votre navigateur si votre document était déjà ouvert (ctrl+r ou cmd+r) sans quoi vous ne verrez aucun changement.

Cela semble évident mais si vous saviez le nombre d’heures que nous avons tous perdu en cherchant pourquoi telle ou telle chose ne fonctionnait pas… Alors que nous avions simplement oublié d’enregistrer les changements effectués au préalable ou de rafraîchir notre document !

HTML: Bonnes pratiques, règles et commentaires

Le HTML permet d’imbriquer des éléments les uns à l’intérieur des autres. C’est même l’une des possibilités qui font toute sa force.

Dans l’exemple précédent, par exemple, notre élément title était à l’intérieur de notre élément head, lui même contenu dans un élément html.

Toutefois, si le HTML permet d’imbriquer des éléments les uns dans les autres, vous devrez toujours faire bien attention de refermer les balises dans le bon ordre : le dernier élément ouvert est toujours le premier refermé.

Autre bonne pratique : l’indentation. Indenter son code, c’est tout simplement l’aérer en ajoutant des espaces au début de certaines lignes afin de le rendre plus lisible pour vous comme pour les autres.

Il n’y a pas de règle absolue concernant l’indentation, certains accentuant plus ou moins le retrait en début de ligne. Pour ma part, j’utilise une tabulation (la touche à gauche du a) à chaque fois que j’ouvre une nouvelle balise à l’intérieur d’un élément. Cela permet de bien hiérarchiser son code et de voir immédiatement quel élément est imbriqué dans quel autre.

Troisième et dernière bonne pratique : commenter son code.

Commenter son code, c’est tout simplement y ajouter des commentaires. Ces commentaires sont spéciaux : il ne seront pas visibles par vos visiteurs (à moins que ceux-ci n’affichent le code source de la page).

Voici comment on écrit un commentaire en HTML :

Pourquoi commenter son code :

1. Tout d’abord, pour vous. En effet, lorsque vous commencerez à véritablement savoir coder, vos pages vont s’allonger et se complexifier. Commenter va alors devenir indispensable pour vous repérer dans votre page web et pour vous rappeler pourquoi vous avez fait telle chose de telle façon.
2. Ensuite, pour les personnes à qui vous pourriez distribuer votre code. Rappelez vous qu’il existe autant de manières de coder que d’esprits humains ou presque et qu’il est donc essentiel de donner des indications sur votre code afin que les personnes puissent le comprendre plus rapidement et plus facilement.

En bref : commenter n’est pas un luxe mais souvent ce qui sépare un développeur moyen d’un bon développeur, tout simplement.

Attention à ne jamais mettre d’informations sensibles en commentaire, comme des mots de passe par exemple. En effet, rappelez vous que tout le monde peut avoir accès au code source de votre page, et donc à votre code HTML.

Pour vous en convaincre, n’hésitez pas à aller sur n’importe quel site (Wikipédia par exemple), puis à faire un clic droit sur la page et choisir l’option « inspecter l’élément » ou « afficher le code source » selon votre navigateur.

Vous aurez alors accès au code HTML de la page, quelque soit le site.