Structure et sémantique de HTML5 (3) : compétences du didacticiel elements_html5 au niveau du bloc sémantique

HTML5 ajoute également des éléments purement sémantiques au niveau des blocs :
figure à part Dialog
J'ai utilisé les deux premiers éléments dans des articles et des livres. Le troisième élément que je n'utilise pas très souvent, il est principalement utilisé pour le texte écrit.
à part
L'élément de côté représente des instructions, des conseils, des barres latérales, des citations, des notes supplémentaires, etc., c'est-à-dire du contenu en dehors de la ligne principale du récit. Par exemple, dans les articles de DeveloperWorks, vous voyez souvent des barres latérales écrites sous forme de tableau. Voir le Code 3 pour les barres latérales de DeveloperWorks écrites en HTML4.

.xf-value

The.xf-valueselectorusedherestylestheinput
fieldvaluebutnotitslabel.Thisisactuallyinconsistent
withthecurrentCSS3draft.Theexamplereallyshouldusethe
::valuepseudo-classinsteadlikeso:

input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em}

.xf-valueLe sélecteur .xf-valueutilisé ici restyle lavaleur du champ d'entrée mais pas son étiquette. Ceci est en fait incompatible avec le projet CSS3 actuel. L'exemple devrait vraiment utiliser la pseudo-classe ::value comme ceci :input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em} Cependant, Firefox ne prend pas en charge cette syntaxe.
En HTML5, cette barre latérale peut être écrite de manière plus significative, voir la barre latérale Code 4 DeveloperWorks écrite en HTML5.

.xf-value

Le.xf-valuesélecteur utilisé ici restyle la
valeur du champ de saisie, mais pas son étiquette. Ceci est en fait incompatible
avec le projet CSS3 actuel. L'exemple devrait vraiment utiliser le
::valueps eudo - classinsteadlikeso :

input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em}

Cependant, Firefox ne prend pas en charge cette syntaxe.

Le navigateur peut décider où placer cette barre latérale (peut-être avec un peu de code CSS).
figure
L'élément figure représente une image au niveau du bloc et peut également contenir des descriptions. Par exemple, dans de nombreux articles de DeveloperWorks, vous pouvez voir un diagramme DeveloperWorks de code 5 écrit en HTML4 avec un tel balisage. Le résultat est présenté dans la figure 1.
Figure 2. Boîte de dialogue Installer MozillaXForms

MozillaXForms0.7Unsigned"
src="installdialog.jpg" border="0"height ="317"hspace="5"vspace="5"width="331"/>



Figure 1. Boîte de dialogue InstallMozillaXForms

En HTML5, ce diagramme peut être écrit de manière plus sémantique, voir le diagramme DeveloperWorks du code 6 écrit en HTML5.

Figure 2. Boîte de dialogue Installer MozillaXForms

MozillaXForms0.7Unsigned"
src="installdialog.jpg" border="0"height="317 "hspace="5"vspace="5"width="331"/>


Plus important encore, les navigateurs (en particulier les lecteurs d'écran) peuvent clairement relier les figures et les descriptions entre elles.
L'élément figure ne peut pas seulement afficher des images. Vous pouvez également l'utiliser pour ajouter des descriptions aux éléments audio, vidéo, iframe, objet et intégrés.
dialog
L'élément de dialogue représente une conversation entre plusieurs personnes. L'élément HTML5dt peut représenter le locuteur et l'élément HTML5dd peut représenter le contenu du discours. Par conséquent, la conversation peut être affichée de manière raisonnable dans les anciens navigateurs. Le code 7 montre un célèbre dialogue du « Dialogue concernant les deux principaux systèmes mondiaux » de Galilée.
Code 7. Dialogue galiléen écrit en HTML5

Simplicius

Selon la ligne droite AF,
et non selonlacourbe, tel étant déjà exclu
pour telle cause.

Sagredo

Mais je ne devrais prendre ni l'un ni l'autre,
vu que la ligne droite AF passe obliquement. Je devrais
tracer une ligne perpendiculaire à CD, car celle-ci me semblerait
la plus courte, tout en étant unique parmi le
nombre infini de lignes plus longues et inégales qui peuvent
être tirées du point A vers tout autre point opposé
lineCD.

Salviati

Votre choix et la raison pour laquelle vous
ajoutez-le semblent les plus excellents. Alors maintenant, nous avons
que la première dimension est déterminée par une ligne droite;
la seconde (à savoir, la largeur) par une autre ligne droite, et
non seulement droite, mais à angle droit par rapport à celle qui
détermine la longueur. nous avons défini les deux
dimensions d'une surface; c'est , longueur et largeur .

Mais supposons que vous deviez déterminer la hauteur, par
par exemple, quelle est la hauteur de cette plate-forme par rapport au trottoir
en bas. Étant donné que depuis n'importe quel point de la plate-forme, nous
pouvons dessiner des lignes infinies, courbes ou droites, et de toutes
longueurs différentes, jusqu'aux points infinis du trottoir
ci-dessous, laquelle de ces lignes utiliseriez-vous ?

Il y a un débat sur la syntaxe exacte de cet élément. Certaines personnes souhaitent intégrer du texte autre qu'un dialogue (comme des indications scéniques dans un script) dans l'élément de dialogue, et d'autres n'aiment pas étendre le rôle des éléments dt et dd. Bien qu’il existe des controverses sur la syntaxe spécifique, la plupart des gens s’accordent sur le fait qu’exprimer le dialogue de cette manière sémantique est une bonne chose.
　
　(À suivre)