Cet article est le deuxième de notre série sur les principes fondamentaux du développement Web. Notre premier article expliquait en détail ce qu'est HTML au niveau conceptuel. Nous avons examiné ce qu'est un langage de balisage, quelles sont les balises et comment HTML se compare à d'autres pièces importantes du puzzle du développement Web, telles que CSS.
Rejoignez-nous aujourd'hui pour aller de l'avant et examiner chaque élément de base d'un document HTML. J'expliquerai tout ce qui se trouve en haut d'un fichier HTML qui vous trouble et décrirai la structure de base que vous suivrez pour créer vos propres fichiers HTML.
DOCTYPE
La première chose que vous voyez généralement dans un fichier HTML est la déclaration DOCTYPE. Avant HTML5, cela pouvait être un code très déroutant ressemblant à ceci:
Il y a beaucoup de choses qui se passent ici et tout cela concerne le navigateur Web, le lecteur ou les deux. Le public? une partie ne parle que de la disponibilité, la DTD signifie Définition du type de document, qui déclare la version de HTML utilisée et la section finale est une URL pointant vers la DTD.
Les mots "lâche," (ou transitoire)? strict? et? frameset? fait référence à différentes versions de HTML 4, ce qui permettait un balisage légèrement différent. Celles-ci visaient essentiellement à aider les développeurs à faire la transition entre les anciennes versions de HTML.
Le DOCTYPE HTML5
Il existe plusieurs DOCTYPE parmi lesquels choisir, ce qui peut être une source de confusion monumentale pour les nouveaux développeurs. Heureusement, HTML5 simplifie complètement la situation avec un DOCTYPE simple et rafraîchissant:
Vous voyez comme c'est facile en comparaison? C'est vraiment une belle chose.
Que fait le DOCTYPE?
Maintenant, nous avons vu ce qu'est un DOCTYPE ressemble à mais nous n'avons pas vraiment discuté de ce qu'il Est-ce que. La réponse est que DOCTYPE indique au navigateur le type de HTML à attendre, ce qui a une incidence sur la manière dont le navigateur affiche la page.
En explorant davantage le développement Web, vous découvrirez que l'accent est mis sur le «développement basé sur des normes». L'idée générale est que, si nous respectons tous certaines règles et normes, le développement Web deviendra une pratique plus cohérente et cohérente. C'est mieux pour les développeurs, mieux pour les navigateurs et surtout, mieux pour les utilisateurs.
Les DOCTYPE ont été conçus à l'origine pour déclencher le «mode standard». dans les navigateurs, ce qui signifie que la page a été rendue en utilisant les normes Web les plus récentes. De même, les anciennes pages sans DOCTYPE ont déclenché le mode? Quirks? dans les navigateurs, ce qui permettait d’utiliser des pratiques plus anciennes qui ne fonctionneraient pas correctement en mode standard.
Le nouveau DOCTYPE HTML5, très simple, est pris en charge par tous les principaux navigateurs et déclenche le mode standard dans chacun d'entre eux. DOCTYPE vous aide également à valider votre code, ce qui garantit le respect des normes en vigueur. Chaque page que vous créez doit utiliser un DOCTYPE et, espérons-le, être entièrement conforme aux normes.
Élément racine
Après le DOCTYPE, le code HTML commence vraiment. Ceci est indiqué par l'élément racine HTML. Si votre code HTML entier est un arbre, il s'agit de la racine sur laquelle tout le reste germera.
L'élément racine est défini par un? Tag ,? que nous avons appris dans notre dernier article. Dans ce cas, c'est le? HTML? étiquette.
Notez que l'élément racine inclut un attribut language, dans notre cas, l'anglais. Veillez toujours à indiquer la langue appropriée pour chaque page que vous créez.
Tout ce que nous ajouterons à cette page est situé à l'intérieur de l'élément racine. C'est le conteneur pour chaque morceau d'information et de contenu, la seule exclusion étant le DOCTYPE.
Élément principal
La prochaine chose que vous rencontrerez dans un document HTML est la? Tête? section. La balise head correspond exactement à ce que vous attendez:
Le contenu de la section head est avant tout informatif. Il indique à la fois à votre navigateur et à votre navigateur certaines informations relatives à la page, telles que le titre, le jeu de caractères, etc.
Il y a quelques choses importantes qui vont dans une étiquette de tête. Regardons-les un par un.
Meta Tags
Comme vous pouvez probablement le deviner, les balises méta contiennent des métadonnées sur la page. Les métadonnées prennent de nombreuses formes et peuvent inclure des mots-clés, des auteurs, des descriptions, etc. Voici quelques inclusions notables:
Jeu de caractères
Ceci est assez ennuyeux, le jeu de caractères est généralement défini sur UTF-8 et indique essentiellement au navigateur le codage de caractères à utiliser.
Vos pages doivent absolument inclure une indication du jeu de caractères à utiliser. N'y pensez pas trop, c'est juste une de ces choses que vous devez coller dans votre modèle. Vous trouverez ci-dessous une déclaration de jeu de caractères typique en HTML5.
C'est encore une autre chose qui est devenue plus facile avec HTML5. Découvrez la version de cet extrait requise pour HTML 4.01:
Quelques autres métatags typiques incluent la description et l'auteur. Voici un exemple rapide et explicite de chacun de ceux-ci:
La description
Auteur
Titre
Une autre chose qui se trouve dans la partie principale de votre document est la balise de titre. C'est un morceau de code très simple qui indique simplement ce que vous voulez que le titre de la page soit. Voici un exemple:
Ce titre est généralement présenté à l'utilisateur en haut au centre de la fenêtre du navigateur, sur un onglet, etc.
Liens et scripts
La dernière chose que nous discuterons en ce qui concerne la balise head est l'inclusion de ressources externes. Dans une page Web très simple, vous verrez généralement que ceux-ci se présentent sous la forme d'une feuille de style ou d'un script:
Ici, je charge essentiellement mon fichier CSS ainsi que jQuery (une bibliothèque JavaScript) dans la page. Si ces ressources sont incluses dans les fichiers source mais ne sont pas liées à la section head, elles ne fonctionneront pas.Notez que les liens correspondants peuvent indiquer un élément de la hiérarchie des dossiers locaux (voir ci-dessus) ou un élément hébergé sur un autre serveur Web.
Le lien utilisé ci-dessus pour le fichier CSS utilise un relation de lien (rel =? stylesheet?). Pour plus d'informations sur les relations de liens, consultez cet article.
En outre, au lieu de créer des liens vers des fichiers externes, vous pouvez incorporer du code directement dans l'élément head. Voici un exemple avec CSS, mais la même chose peut être faite via le script? Script? balise et JavaScript (les scripts incorporés sont souvent placés à la fin de l'élément body).
Élément du corps
La dernière partie d'une page HTML est la plus importante. Tout ce qui se trouve à l'intérieur de l'élément body définit le contenu et la structure de votre page. En ce qui concerne le temps de développement, vous utiliserez probablement un modèle défini pour tout ce qui précède et vous passerez quelques minutes à le personnaliser pour des projets spécifiques. Le reste de votre temps HTML sera passé à l'intérieur de l'élément body.
Mettre tous ensemble
Maintenant que nous avons parcouru chaque élément d'un fichier HTML, regroupons tous ces éléments dans un modèle HTML5 extrêmement basique.
Un aperçu
Mille excuses pour la nature mondaine de ce sujet, les débutants sont souvent dégoûtés par l'ennui à ce stade, mais accrochez-vous, le vrai plaisir du HTML réside dans tout ce qui se trouve entre les balises body, ce dont nous n'avons même pas parlé!
Tous ces éléments étaient nécessaires pour brosser un tableau précis de ce qu’est un document HTML. Nous voyons maintenant qu'un document HTML a un DOCTYPE qui indique au navigateur comment rendre la page et aide à garantir que les normes appropriées sont utilisées.
Nous savons également qu'il existe une hiérarchie pour la structure des pages HTML. Presque tout sauf le DOCTYPE est jeté dans l'élément racine, ce qui signifie qu'il s'agit de l'élément? Parent? des éléments de la tête et du corps, qui à leur tour ont leurs propres enfants.
La structure de base d'un document HTML est appelée DOM, ou Document Object Model. C'est presque toujours métaphoriquement appelé arbre et décrit comme image ci-dessus. Notre propre Jack Rocheleau a écrit un aperçu détaillé du DOM intitulé Étude approfondie du modèle de document d'objet du WWW. Pour comprendre la structure de base d’une page HTML, consultez cet article.
Conclusion
Cet article présente un très bref aperçu de la structure d’un squelette HTML et des types d’éléments généralement inclus. Il n’est nullement exhaustif, mais devrait constituer une bonne introduction de base à ces sujets.
Lorsque vous débutez dans le code, la plupart des gens vous donneront simplement un modèle pour tout le code ci-dessus sans vraiment expliquer en quoi cela consiste. Cela peut laisser un trou considérable dans votre éducation, il est donc important de lire ces informations et d'essayer de comprendre ce que vous pouvez.
Restez avec nous dans cette série et revenez bientôt car nous répondons à une autre question importante: Qu'est-ce que le CSS?