Quelle est la différence entre un élément et une balise? Quand devrais-je utiliser fort et quand devrais-je utiliser gras? Que diable est le DOM? Lorsque vous débutez dans la conception Web, l'un des plus grands obstacles à surmonter est toujours le jargon. Autant de termes techniques sont jeté de manière désinvolte et rarement expliqués clairement qu'il est facile de se perdre.
Cette série servira d'introduction de base à certains termes que chaque nouveau concepteur de sites Web devrait ajouter à son vocabulaire. Ce ne sera pas une liste de vocabulaire exhaustive, mais plutôt une introduction à quelques termes qui m’ont semblé difficile à comprendre lorsque j’étais débutant. Nous allons commencer par HTML aujourd'hui et passer à CSS dans un avenir proche.
HTML et HTML5
HTML
HTML signifie HyperText Markup Language. Pour mieux comprendre ce terme, coupons-le en morceaux.
Hypertexte
L'hypertexte est simplement du texte affiché sur un appareil numérique utilisant des liens actifs pour faciliter la navigation. Par exemple, pour accéder à cette page, vous avez probablement cliqué sur un texte qui a redirigé votre navigateur vers le bon emplacement.
Langage de balisage
Un langage de balisage est un moyen d'annoter des documents. Avec un langage de balisage, nous pouvons transformer du texte brut en documents richement formatés en utilisant une syntaxe spéciale qui indique à l'analyseur comment afficher les informations et les éléments qui lui sont transmis.
Mettre ensemble?
En gardant cela à l’esprit, le HTML est un moyen d’annoter puis de formater des documents pour un affichage qui dépend en grande partie d’un système permettant des liens textuels. C'est le fondement même du fonctionnement du Web.
HTML5
HTML5 est exactement ce que cela ressemble, la cinquième grande itération de HTML. HTML5 remplace HMTL 4.01 et XHTML 1.1. Ainsi, chaque fois que vous voyez des références à ces langues, sachez que HTML5 est la syntaxe la plus récente.
HTML5 apporte une tonne de nouvelles fonctionnalités, éléments et modifications de syntaxe au HTML, trop nombreuses pour être énumérées ici de manière exhaustive. Parmi les éléments que vous pourrez voir régulièrement, citons un élément de la toile pour le rendu des graphiques, un nouveau doctype simplifié, la possibilité d’incorporer de la vidéo sans plug-in personnalisé comme Flash et de nouvelles API pour les développeurs d’applications Web.
Pour tout savoir sur HTML5, parcourez les nombreuses ressources suivantes:
- HTML5 Rocks
- Plongez dans HTML5
- HTML5 Doctor
Sur la sémantique
HTML sémantique
Lorsque j'ai commencé à concevoir des sites Web, j'entendais cette phrase quotidiennement et cela me rendait fou. Tout le monde semblait toujours s'armer de ce qui était sémantique et de ce qui ne l'était pas. Il s’avère que la raison en est simple: un Web sémantique est meilleur.
Fondamentalement, le concept de base est que votre marquage doit transmettre le plus de sens possible. Pour ce faire, vous devez utiliser les éléments tels qu'ils ont été conçus et d'une manière qui communique clairement avec toute personne ou tout élément examinant votre code.
Par exemple, il était courant que les développeurs structurent des pages Web entières à l'aide de tableaux HTML. Le problème, c’est que l’élément table a un objectif très spécifique: afficher une table d’informations (pensez à une table de tarification ou à un tableau de comparaison des caractéristiques). Quand tu vois le
div
Bien que nous abordions le sujet de la conception de sites Web sémantiques, nous pourrions également discuter de l'élément le plus argumenté à propos de l'élément depuis la table: div:. Si vous avez déjà jeté un coup d'œil à la source d'une page HTML, il y a de fortes chances que vous voyiez des divs partout. Alors qu'est-ce que c'est qu'une div?
Le terme? Div? est court pour? division.? Si vous pensez que c'est un peu vague, vous avez raison. En fait, l'objectif de l'élément div est d'être vague. Les div sont fondamentalement un conteneur générique pour des blocs de contenu qui ne peuvent pas être décrits autrement au niveau sémantique.
Ceci conduit bien sûr à l’idée que les div sont des créatures non sémantiques, ce qui signifie qu’une div en elle-même n’a pas vraiment de sens. Par conséquent, compte tenu des principes que nous avons exposés dans les définitions précédentes, les div devraient être utilisées le moins possible, du moins en théorie. En pratique, beaucoup de développeurs sont assez généreux avec eux.
Étant donné leur polyvalence et leur utilité pour créer des structures faciles à cibler avec CSS, nous utilisons instinctivement des tonnes de divs. Cependant, dans la mesure du possible, vous devriez toujours rechercher quelque chose de plus sémantique. Par exemple, considérons le bloc de code suivant qui était assez populaire avant HTML5.
Avec l'ID, nous avons en quelque sorte infusé un sens, mais la div elle-même est toujours un élément générique et indésirable. Avec HTML5, nous pouvons abandonner la div et utiliser l'élément d'en-tête beaucoup plus sémantique.
em vs italique et fort vs gras
Celui-ci peut vraiment devenir difficile, surtout parce que HTML5 offre une signification sémantique légèrement modifiée pour ces termes. Commençons par em vs italic.
La spécification relative à l’utilisation de l’élément italique indique qu’il est désormais utilisé pour un texte "décalé du contenu qui l’entoure sans indiquer d’importance ou de poids supplémentaire, et pour lequel la présentation typographique classique est un texte en italique".
La clé ici est que l’élément italique n’apporte aucune emphase supplémentaire, contrairement à la balise em. Pensez-y simplement comme une humeur ou une voix différente.
Les exemples incluent une désignation taxonomique, un terme technique, une phrase idiomatique d'une autre langue, une pensée ou un nom de navire.
Cela contraste avec l'élément em, qui est utilisé pour le stress emphatique. Ici, nous essayons en fait de communiquer que vous parleriez le contenu de l'élément différemment du reste de la phrase.
Pour aller plus loin, l'élément gras a été modifié pour avoir une signification presque identique à celle de l'élément italique: «être décalé du contenu qui l'entoure sans transmettre d'emphase ou d'importance supplémentaire et pour lequel la présentation typographique classique est en gras».
Une fois encore, nous constatons que l’essentiel est que nous n’ajoutons pas vraiment d’emphase, mais que nous suivions la convention typographique. Par exemple, un script peut mettre en gras les noms de personnage.
Sinon, vous devriez utiliser fort pour transmettre «une importance forte». Par exemple, les messages d'avertissement utilisent souvent cette convention.
Avec Strong, vous pouvez même utiliser la nidification pour transmettre plus de niveaux d’importance.
Pour en savoir plus sur ces quatre éléments, consultez HTML5 Doctor, qui explique en détail les modifications apportées à HTML5 et explique comment les utiliser.
Les attributs
Classe vs ID
L'une des différences les plus critiques que vous devez comprendre en tant que concepteur Web frontal est la différence entre un clasa et un ID. Considérez les deux extraits suivants, comprenez-vous en quoi ils sont différents?
Heureusement, la différence est en réalité très simple à comprendre: les identifiants sont uniques et les classes sont récupérables. Par exemple, l'utilisation suivante de HTML n'est pas valide car j'ai utilisé le même identifiant sur deux éléments différents.
La solution ici est de changer ces identifiants en classes. La même classe peut être appliquée à autant d'éléments que vous le souhaitez. Le fait de cibler une classe dans votre CSS vous permettra de styliser plusieurs éléments en une fois.
Certains sont allés jusqu'à dire qu'il ne fallait jamais utiliser d'identifiants, mais plutôt se tourner vers les classes, car elles sont plus polyvalentes. L'argument est logique, mais pour être honnête, je n'y adhère pas vraiment et je trouve toujours des utilisations valables pour les identifiants.
Autre jargon
Eléments vs Tags
D'une part, cette distinction ne semble pas être la chose la plus critique au monde. Après tout, de nombreux développeurs utilisent ces termes de manière interchangeable. Cependant, une compréhension correcte de la structure de base du HTML constitue le fondement d’une solide formation en développement Web. Cela peut sembler tatillon, mais ces deux termes signifient en réalité des choses différentes.
Pour illustrer notre propos, commençons par le niveau le plus élémentaire. Ce qui suit est une? Balise de début? pour un élément de liste.
De même, voici la balise? End? pour un élément de liste.
Chacun de ceux-ci est une balise à part entière. Cependant, ils ne sont pas des éléments. Voici à quoi ressemble l'élément d'élément de liste.
En résumé, HTML est composé d'éléments et les éléments sont composés de balises et de contenu. Généralement, un élément comprend une balise de début, un contenu et une balise de fin, mais certaines balises se ferment automatiquement, ce qui rend cette terminologie un peu délicate.
Mettre à jour!
Quand Paul Irish dit que vous avez tort, voyons les choses en face. Je ne peux pas prétendre connaître un dixième des choses que ce gars peut réciter sur le développement Web dans son sommeil et j'apprécie vraiment qu'il prenne le temps de nous indiquer la bonne direction à ce sujet dans les commentaires.
J'ai vérifié un grand nombre de sources de différences pour ces définitions et, finalement, j'ai bricolé la mienne ensemble en fonction des points sur lesquels il semblait y avoir un accord. Cependant, dans cette vidéo, Paul décrit ce qu’est réellement un élément, qui est beaucoup plus que vous ne le pensez. En fin de compte, il conclut que ce n'est pas la plus grosse affaire au monde, mais tant que nous sommes sur le sujet, nous ferions aussi bien de nous assurer de bien faire les choses!
DOM
C'est une autre chose qui m'a beaucoup perturbé lorsque j'ai commencé à écrire du HTML. J'ai constamment entendu des gens parler de "DOM". mais je pensais que cela ressemblait à quelque chose de trop technique que je ne comprendrais probablement pas. Je savais qu'il y avait un DOM et peut-être que les gens voulaient le traverser, mais je n'avais aucune idée de ce que cela voulait dire. La réponse évidente, c’est le modèle objet de document. m'a pas eu où.
Il s'avère que le DOM est en fait assez facile à comprendre. Au niveau le plus élémentaire, il fait simplement référence à la structure d’une page Web et nous donne une convention claire pour visualiser et faire référence à chaque élément.
En d'autres termes, le DOM est l'arbre généalogique d'une page Web. En haut, vous avez le document, qui s'étend jusqu'à l'élément racine ou html, puis les éléments head et body. Si nous examinons l'élément body ci-dessous, nous constatons qu'il se divise en d'autres éléments, chacun pouvant avoir son propre contenu et ses propres sous-éléments.
Nous nous référons aux relations dans l’arbre DOM, tout comme à celles d’un arbre généalogique. Si un élément est à l'intérieur d'un autre, il s'agit d'un enfant d'un parent. Si deux éléments partagent directement un parent, ils sont frères et soeurs.
Cette structure et ce verbiage nous donnent une interface pour interagir avec des éléments spécifiques via une page Web. Par exemple, en JavaScript ou même en HTML, vous pouvez utiliser vos connaissances du DOM pour cibler le premier enfant d'une liste non ordonnée, c'est-à-dire le premier élément li à l'intérieur de l'élément ul.
Aller plus loin
La définition ci-dessus est vraiment une version simplifiée de ce qu'est le DOM. Une fois que vous avez bien compris la façon dont le DOM définit la structure des documents HTML, vous pouvez passer aux définitions plus complexes, ce qui, espérons-le, aura maintenant un peu plus de sens. Consultez la définition du W3C pour une discussion beaucoup plus approfondie.
Ici, vous verrez le DOM appelé API de programmation pour les documents qui définissent une structure d'objet. Vous verrez également que cette API contient divers modules, tels que CSS et MouseEvents, qui peuvent être implémentés de différentes manières.
Bloc vs.Éléments en ligne
Lorsque vous créez des éléments en HTML et que vous définissez leur style en CSS, vous constaterez que le navigateur interprète différents éléments de différentes manières du point de vue de la disposition.
Lorsque vous créez un élément de niveau bloc, tel qu'un paragraphe ou un div, il apparaît sur une nouvelle ligne ou ligne du flux de document. Ainsi, si vous créez trois paragraphes, ils apparaîtront empilés verticalement dans l'aperçu en direct plutôt qu'horizontalement sous forme de colonnes. Une autre distinction importante ici est que les éléments de niveau bloc peuvent avoir une largeur et une hauteur spécifiques.
Un élément en ligne est par contre rendu? En ligne? avec le contenu avant et après. Par exemple, si vous insérez un élément fort dans un paragraphe, cela ne créera pas de nouvelle ligne mais maintiendra le flux du paragraphe. Les éléments en ligne ont une hauteur et une largeur automatiquement définies par leur contenu, ces valeurs ne peuvent pas être spécifiquement exprimées.
Changer le comportement
Utiliser le CSS? Display? propriété, nous pouvons changer le comportement de certains éléments. Par exemple, je prends ici une ancre, qui est par défaut un élément en ligne, et demande au navigateur de la restituer comme s'il s'agissait d'un élément de niveau bloc. Cette ligne recevra désormais sa propre ligne définie sur une hauteur et une largeur spécifiques.
En fait, nous avons récemment abordé ce sujet dans notre article sur l'utilisation de? Display: inline-block? comme alternative aux flotteurs. Vérifiez ceci ici.
Avec quels termes luttez-vous?
J'espère que ce bref glossaire de termes HTML a jeté un peu de lumière sur certains sujets potentiellement déroutants. Chacun de ceux-ci m'a fait trébucher à un moment ou à un autre alors ne vous sentez pas du tout s'il y a quelque chose que vous n'avez jamais tout à fait compris avant.
Pendant que nous sommes sur le sujet, y a-t-il d'autres termes HTML qui vous confondent actuellement ou vous ont confondu dans le passé? Faites-nous savoir dans les commentaires et assurez-vous de vérifier bientôt pour notre rafraîchissement de vocabulaire CSS!