Comme dans les fichiers HTML externes, l’organisation du balisage est distincte de son style, de son format et de son comportement. Bien que vous puissiez certainement modifier le style des éléments ou du texte avec JavaScript, il est plus intéressant de modifier réellement l'organisation de la présentation de votre balisage.
N'oubliez pas que votre balisage ne fournit qu'une organisation, un cadre, et vous serez sur la voie du succès. Faites un petit pas de plus et vous verrez comment le navigateur prend toute cette organisation de texte et la transforme en quelque chose de super intéressant, un ensemble d'objets, dont chacun peut être modifié, ajouté ou supprimé.

Avantages du balisage de texte

Avant de parler des navigateurs Web, il convient de réfléchir aux raisons pour lesquelles le texte brut constitue le meilleur choix pour stocker du HTML (voir d'autres idées sur le balisage pour plus d'informations). Quels que soient les avantages et les inconvénients, rappelons simplement que le HTML est envoyé sur le réseau au navigateur Web à chaque fois qu'une page est consultée (par souci de brièveté, les caches, etc. ne sont pas pris en compte). Il n’existe vraiment pas de moyen plus efficace de transmettre du texte. Objets binaires, représentations graphiques de pages, blocs de balisage réorganisés, etc., tous plus difficiles à transmettre sur le réseau que les fichiers texte brut.

De plus, le navigateur ajoute également à la gloire. Les navigateurs d'aujourd'hui permettent aux utilisateurs de modifier la taille du texte, de redimensionner les images, de télécharger le CSS ou le JavaScript de la page (dans la plupart des cas), et bien plus encore, ce qui exclut complètement l'envoi de tout type de représentation graphique de la page au navigateur. Cependant, le navigateur a besoin du code HTML brut pour pouvoir appliquer n'importe quel traitement à la page dans le navigateur, plutôt que de faire confiance au navigateur pour gérer cette tâche. De même, séparer CSS de JavaScript et CSS du balisage HTML nécessite un format qui peut être facilement séparé. Encore une fois, les fichiers texte constituent la meilleure méthode pour cette tâche.

Enfin, rappelez-vous que les nouveaux standards (tels que HTML 4.01 et XHTML 1.0 et 1.1) promettent de séparer le contenu (les données de la page) de la présentation et du style (généralement appliqués par CSS). Si les programmeurs devaient séparer le HTML du CSS et forcer ensuite le navigateur à récupérer une représentation de la page qui colle les différentes parties de la page, ils perdraient la plupart des avantages de ces normes. Garder ces parties séparées lorsqu'elles arrivent au navigateur donne à celui-ci une flexibilité sans précédent pour obtenir le HTML du serveur.

Réflexions supplémentaires sur

l'édition de texte brut avec balisage : vrai ou faux ?
Le texte brut est idéal pour stocker le balisage, mais ne convient pas pour le modifier. L'utilisation d'IDE, tels que Macromedia DreamWeaver ou le plus puissant Microsoft® FrontPage®, pour manipuler le balisage des pages Web est populaire. Ces environnements fournissent souvent des raccourcis et une aide pour créer des pages Web, en particulier lors de l'utilisation de CSS et de JavaScript, qui proviennent tous deux de fichiers autres que le balisage réel de la page. Peu importe que beaucoup de gens préfèrent encore le bon vieux Notepad ou vi (j'avoue que j'en fais partie). Quoi qu’il en soit, le résultat final est un fichier texte rempli de balises.

Texte sur le Web : les bonnes choses

ont été dites : le texte est le meilleur support pour les documents, comme le HTML ou le CSS, transmis des milliers de fois sur le Web. Quand je dis qu'il est difficile pour un navigateur de représenter du texte, je fais spécifiquement référence à la conversion du texte en une page graphique visuelle que l'utilisateur peut visualiser. Cela n'a rien à voir avec la manière dont le navigateur récupère réellement la page à partir du navigateur Web ; dans ce cas, le texte reste le meilleur choix.

Inconvénients du balisage de texte

Tout comme le balisage de texte présente des avantages surprenants pour les concepteurs et les créateurs de pages, il présente également des inconvénients assez surprenants pour les navigateurs. Plus précisément, il est difficile pour les navigateurs de représenter directement le balisage du texte visuellement à l'utilisateur (voir d'autres idées sur le balisage pour plus de détails). Considérez les tâches courantes suivantes du navigateur :

· Appliquer des styles CSS (généralement à partir de plusieurs feuilles de style dans des fichiers externes) au balisage en fonction du type d'élément, de la classe, de l'ID et de sa position dans le document HTML.
·Appliquer des styles et un formatage à différentes parties du document HTML en fonction du code JavaScript (généralement situé dans un fichier externe).
·Modifiez les valeurs des champs de formulaire en fonction du code JavaScript.
· Basé sur le code JavaScript, prend en charge les effets visuels tels que le retournement et l'échange d'images.

La complexité ne réside pas dans le codage de ces tâches ; tout y est assez simple. La complexité vient du fait que le navigateur implémente réellement l'action demandée. Si le balisage est stocké sous forme de texte, par exemple, si vous souhaitez saisir du texte (text-align: center) dans l'élément p de la classe center-text, comment y parvenir ?

·Ajouter des styles en ligne au texte ?
· Appliquer des styles au texte HTML dans le navigateur et garder simplement le contenu centré ou non ?
· Appliquer du HTML sans style, puis appliquer le formatage par la suite ?

Ces problèmes très difficiles expliquent pourquoi si peu de gens écrivent des navigateurs aujourd’hui. (Celui qui a écrit le navigateur doit accepter mes plus sincères remerciements.)

Il ne fait aucun doute que le texte brut n'est pas un bon moyen de stocker le HTML du navigateur, bien que le texte soit la meilleure solution pour obtenir le balisage de la page. Ajoutez à cela la capacité de JavaScript à modifier la structure de la page et les choses deviennent un peu plus nuancées. Le navigateur doit-il réécrire la structure modifiée sur le disque ? Comment conserver la dernière version du document ?

Certes, le texte n’est pas la réponse. Il est difficile de le modifier, il est difficile de lui appliquer des styles et des comportements, et il est fondamentalement très éloigné de la nature dynamique des pages Web d'aujourd'hui.

recours aux arborescences

(du moins celle choisie par les navigateurs Web actuels) consiste à utiliser une structure arborescente pour représenter le HTML. Voir le Listing 1, une page HTML assez simple et ennuyeuse qui représente le balisage de cet article.

dans le balisage de texte

Des arbres, des arbres, partout

Bienvenue sur une page vraiment ennuyeuse.

Revenez bientôt.

Le navigateur accepte la page et la convertit en une arborescence, comme le montre la figure 1.

Pour que cet article continue de progresser, je l'ai un peu simplifié. Les experts en DOM ou XML seront conscients de l'impact des espaces sur la façon dont le texte d'un document est représenté et décomposé dans l'arborescence d'un navigateur Web. Une compréhension superficielle ne fait que rendre les choses ambiguës, donc si vous voulez comprendre l'impact de l'espace blanc, c'est votre meilleur pari, sinon continuez simplement à lire et n'y pensez pas. Lorsque cela devient un problème, vous saurez alors tout ce dont vous avez besoin.

Mis à part l'arrière-plan de l'arborescence, la première chose que vous remarquerez peut-être est que tout dans l'arborescence commence par l'élément HTML le plus externe, l'élément html. En utilisant la métaphore d’un arbre, c’est ce qu’on appelle l’élément racine. Ainsi, même s’il s’agit du niveau inférieur de l’arbre, lorsque vous regardez et analysez l’arbre, je commence généralement par celui-ci. Si cela fonctionne, vous pourriez renverser tout l’arbre, mais cela étire un peu la métaphore de l’arbre.

Les lignes partant de la racine représentent la relation entre les différentes parties étiquetées. Les éléments head et body sont des enfants de l'élément racine HTML ; title est un enfant de head et le texte "Des arbres, des arbres, partout" est un enfant de title. L'arborescence entière est organisée de cette manière jusqu'à ce que le navigateur obtienne une structure similaire à la figure 1.

Quelques termes supplémentaires

Pour rester fidèle à la métaphore de l'arbre, la tête et le corps sont appelés branches du HTML. On les appelle branches parce qu’elles ont leurs propres enfants. Lorsque vous atteignez la fin de l'arbre, vous arriverez au texte principal, comme « Des arbres, des arbres, partout » et « vraiment » ; celles-ci sont souvent appelées feuilles parce qu'elles n'ont pas d'enfants. Vous n'avez pas besoin de vous souvenir de tous ces termes, il est beaucoup plus facile d'imaginer simplement la structure arborescente lorsque vous essayez de comprendre ce que signifie un terme particulier.

Valeurs des objets

Maintenant que vous comprenez une terminologie de base, il est temps de se concentrer sur le petit rectangle qui contient le nom et le texte de l'élément (Figure 1). Chaque rectangle est un objet ; le navigateur résout certains problèmes de texte en son sein. En utilisant des objets pour représenter chaque partie d'un document HTML, vous pouvez facilement modifier l'organisation, appliquer des styles, autoriser JavaScript à accéder au document, et bien plus encore.

Types d'objet et

marqueurs de propriété Chaque type possible possède son propre type d'objet. Par exemple, les éléments HTML sont représentés par le type d'objet Element. Le texte du document est représenté par le type Texte, les attributs sont représentés par le type Attribut, et ainsi de suite.

Ainsi, non seulement les navigateurs Web peuvent utiliser un modèle objet pour représenter des documents (évitant ainsi d'avoir à gérer du texte statique), mais ils peuvent également utiliser des types d'objet pour indiquer immédiatement ce qu'est quelque chose. Le document HTML est analysé et converti en une collection d'objets, comme le montre la figure 1, et des éléments tels que les crochets angulaires et les séquences d'échappement (par exemple, utilisez < pour < et > pour >) ne sont plus un problème. Cela rend le travail du navigateur (au moins après avoir analysé le code HTML d'entrée) beaucoup plus facile. Il est facile de déterminer si quelque chose est un élément ou un attribut et de déterminer comment gérer les objets de ce type.

En utilisant des objets, un navigateur Web peut modifier les propriétés de ces objets. Par exemple, chaque objet élément possède un élément parent et une liste d’éléments enfants. Ainsi, l’ajout d’un nouvel élément enfant ou d’un nouveau texte ajoute simplement un nouvel élément enfant à la liste des éléments enfants de l’élément. Ces objets ont également une propriété de style, donc changer rapidement le style d'un élément ou d'un segment de texte est très simple. Par exemple, pour utiliser JavaScript pour modifier la hauteur d'un div, ressemblez à ceci :

someDiv.style.height = "300px" ;

En d'autres termes, un navigateur Web permet de modifier très facilement l'apparence et la structure d'une arborescence à l'aide d'un objet. propriétés. Comparez cela aux choses compliquées qu'un navigateur doit faire en interne pour représenter une page sous forme de texte : chaque modification apportée à une propriété ou à une structure nécessite que le navigateur réécrive le fichier statique, l'analyse et le réaffiche à l'écran. Avec les objets, tout cela est résolu.

Maintenant, prenez un moment pour développer certains documents HTML et les décrire avec une arborescence. Bien que cela puisse paraître une requête inhabituelle (surtout dans un article comme celui-ci qui contient si peu de code), si vous espérez pouvoir manipuler ces arbres, vous devez vous familiariser avec leur structure.

En chemin, vous découvrirez peut-être des choses étranges. Par exemple, considérez ce qui suit :

Qu'arrive-t-il à l'attribut ?
· Qu'en est-il du texte divisé en éléments (tels que em et b) ?
· Qu'en est-il du HTML qui n'est pas correctement structuré (par exemple, lorsque la balise p de fermeture est manquante) ?

Une fois familiarisés avec ces problématiques, vous serez en mesure de mieux comprendre les sections suivantes.

La rigueur est parfois une bonne chose

Si vous essayez l'exercice que je viens de mentionner, vous pourriez rencontrer des problèmes potentiels avec l'arborescence marquée (sinon, croyez-moi sur parole !). En fait, certains problèmes seront rencontrés dans le listing 1 et la figure 1. Tout d’abord, regardez comment l’élément p est décomposé. Si vous demandez au développeur Web moyen "Quel est le contenu textuel de l'élément p ?", la réponse la plus courante sera "Bienvenue sur une page Web vraiment ennuyeuse". Si vous comparez cela avec la figure 1, vous verrez que cette réponse (bien que logique) n’est tout simplement pas correcte.

En fait, l'élément p a trois objets enfants différents, dont aucun ne contient le texte complet « Bienvenue sur une page Web vraiment ennuyeuse ». Vous trouverez des parties du texte telles que « Bienvenue dans un » et « Page Web ennuyeuse », mais pas la totalité. Pour comprendre cela, rappelez-vous que tout ce qui se trouve dans le balisage doit être converti en un objet d'un certain type.

De plus, l'ordre n'a pas d'importance ! Pouvez-vous imaginer comment un utilisateur réagirait à un navigateur Web si celui-ci affichait les objets corrects, mais dans un ordre différent de celui que vous avez fourni dans le code HTML ? Que se passe-t-il si le paragraphe est pris en sandwich entre le titre de la page et le titre de l'article, et que ce n'est pas ainsi que vous organisez vous-même votre document ? Évidemment, le navigateur doit conserver l’ordre des éléments et du texte.

Dans cet exemple, l'élément p comporte trois parties différentes :

· Le texte avant l'élément em · L'élément em lui-même · Le texte après l'élément em

Si vous ratez cet ordre, vous risquez de vous concentrer sur la mauvaise partie du texte. Pour que tout reste en ordre, l'élément p a trois objets enfants, dans l'ordre indiqué dans le HTML du Listing 1. De plus, le texte clé "vraiment" n'est pas un élément enfant de p ; c'est un élément enfant de em, un élément enfant de p.

Il est très important de comprendre ce concept. Bien que le texte "vraiment" apparaisse probablement avec le texte d'un autre élément p, il s'agit toujours d'un enfant direct de l'élément em. Il peut avoir un format différent de celui des autres textes p et peut être déplacé indépendamment des autres textes.

Pour garder cela à l'esprit, essayez de schématiser le HTML dans les listings 2 et 3 pour vous assurer que le texte possède le bon élément parent (quelle que soit la façon dont le texte apparaîtra finalement à l'écran).

Listing 2. Balisage

Faites très attention, d'accord ?

Listing 3. Une imbrication d'éléments plus intelligente

ÉtapesProcessus
1Déterminez l'élément racine.
2Traitez d'abord la tête,
comme c'est généralement facile.
3Parcourez le corps.
prenez votre temps.

Ce lien n'est pas actif, mais s'il l'était, les réponses
à cela serait
soyez là. Mais faites l'exercice quand même !

Vous trouverez les réponses à ces exercices dans les fichiers GIF à la fin de cet article, tricky-solution.gif dans la Figure 2 et trickier-solution.gif dans la Figure 3. Ne regardez pas, prenez le temps d’y répondre automatiquement en premier. Cela vous aidera à comprendre à quel point les règles s'appliquent lors de l'organisation de l'arborescence et vous aidera réellement à maîtriser le HTML et sa structure arborescente.

Et les attributs ?

Rencontrez-vous des problèmes lorsque vous essayez de savoir quoi faire avec les propriétés ? Comme mentionné précédemment, l'attribut a son propre type d'objet, mais l'attribut n'est en effet pas un enfant de l'élément qui l'affiche. L'élément imbriqué et le texte ne sont pas au même "niveau" d'attribut, comme vous le remarquerez. réponses aux exercices des listings 2 et 3 Aucune propriété n'est affichée.

Les propriétés sont en fait stockées dans le modèle objet utilisé par les navigateurs, mais elles présentent des cas particuliers. Chaque élément possède une liste de propriétés disponibles, distincte de la liste des objets enfants. Ainsi, un élément div peut avoir une liste contenant un attribut « id » et un autre attribut « class ».

N'oubliez pas que les attributs d'un élément doivent avoir des noms uniques, c'est-à-dire qu'un élément ne peut pas avoir deux attributs "id" ou deux "class". Cela rend la liste facile à maintenir et à accéder. Comme vous le verrez dans le prochain article, vous pouvez simplement appeler une méthode telle que getAttribute("id") pour obtenir la valeur d'un attribut par son nom. Des appels de méthode similaires peuvent également être utilisés pour ajouter des propriétés ou définir (réinitialiser) la valeur des propriétés existantes.

Il convient de souligner que le caractère unique des noms d'attributs rend cette liste différente de la liste des sous-objets. Un élément p peut avoir plusieurs éléments em, de sorte que la liste d'objets enfants peut contenir plusieurs doublons. Bien que les listes d'enfants et les listes de propriétés fonctionnent de la même manière, l'une peut contenir des doublons (enfants d'un objet) alors que l'autre ne le peut pas (propriétés d'un objet élément). Enfin, seuls les éléments ont des attributs, donc les objets texte n'ont pas de liste supplémentaire pour stocker les attributs.

HTML désordonné

Avant de passer à la façon dont les navigateurs convertissent le balisage en une représentation arborescente, il y a un autre sujet qui mérite d'être exploré, à savoir la façon dont les navigateurs gèrent le balisage qui n'est pas bien formé. Bien formé est un terme largement utilisé en XML et a deux significations fondamentales :

· Chaque balise d'ouverture a une balise de fermeture correspondante. Ainsi, chaque

du document correspond à