Un autre aspect important de la séparation entre structure et présentation est l’utilisation du balisage sémantique pour structurer le contenu du document. La présence d'un élément XHTML signifie que la partie du contenu marqué a une signification structurelle correspondante et qu'il n'y a aucune raison d'utiliser un autre balisage. En d'autres termes, ne laissez pas CSS faire ressembler un élément HTML à un autre élément HTML, par exemple en utilisant
au lieu d'un en-tête de balise
Premièrement, il s'agit de la différence entre la sémantique et les styles par défaut. Le style par défaut est l'expression de certaines balises couramment utilisées définies par le navigateur. Je pense personnellement que son objectif principal est de permettre à chacun de comprendre intuitivement le balisage et les attributs. Il est évident que la série Hx ressemble beaucoup au titre, en raison de la taille de la police en gras et plus grande. , sont utilisés pour les distinguer des autres mots et jouent un rôle d'emphase. Les listes et les tableaux vous indiquent clairement ce qu'ils font.
Deuxièmement, l’avantage le plus important des pages Web sémantiques est qu’elles sont conviviales pour les moteurs de recherche. Avec une bonne structure et une bonne sémantique, votre contenu Web sera naturellement facilement exploré par les moteurs de recherche et vous pourrez économiser beaucoup d’efforts dans la promotion de votre site Web.
,
,
,
,
,
, sont utilisés comme titres, par ordre décroissant d'importance.
est le niveau le plus élevé. Par exemple :
<h1>文档标题</h1>
<h2>次级标题</h2>
Copier après la connexion
Au lieu d'utiliser
Document Title
, ou Document Title, les moteurs de recherche n'utiliseront évidemment pas ce dernier. un dans le titre.
Marque de paragraphe, après avoir connu
en tant que paragraphe, vous n'utiliserez plus paragraphes. Le texte dans
sera automatiquement renvoyé à la ligne et l'effet de retour à la ligne est meilleur que . Les espaces entre les paragraphes peuvent également être contrôlés à l’aide de CSS, ce qui permet de distinguer facilement et clairement les paragraphes les uns des autres. L'utilisation de la hauteur de ligne permet de définir facilement l'espacement entre les lignes, puis de définir des effets tels que des lettrines, ce qui est parfait. Par exemple :
Les listes non ordonnées sont si courantes qu'elles sont largement utilisées par tout le monde. Les listes ordonnées sont également assez couramment utilisées. Dans le processus de normalisation du Web,
est également davantage utilisé dans les barres de navigation. À l'origine, la barre de navigation était une liste, et lorsque votre navigateur ne prend pas en charge CSS, les liens de navigation restent très pratiques. Cela fonctionne bien, mais l'esthétique est un peu décalée. Par exemple :
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
Copier après la connexion
<ol>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ol>
Copier après la connexion
,
,
dl est une "liste de définitions". Par exemple, ce type de liste peut être utilisé pour les explications et les définitions de mots dans le dictionnaire. Par exemple :
<dl>
<dt>Dog</dt>
<dd>A carnivorous mammal of the family Canidae.</dd>
</dl>
Les forums et les blogs utilisent souvent pour marquer de courtes citations sur une seule ligne lorsqu'ils en citent d'autres. Les navigateurs Web reconnaîtront automatiquement le contenu compris entre . Malheureusement, IE ne le reconnaît pas et parfois, peut entraîner des problèmes d'accessibilité. Pour cette raison, certaines personnes vous recommandent d'éviter d'utiliser et d'insérer manuellement des balises de citation. En ajoutant une seule ligne de contenu de référence dans un contenant la classe appropriée, vous pouvez styliser la référence avec CSS, mais cela n'a aucune signification sémantique. Vous pouvez lire The Q tag (http://peintomark.org/archives/2002/05/04/the_q_tag) écrit par Mark Pilgrim pour connaître son point de vue sur le traitement des problèmes liés à Pour les citations longues d'un ou plusieurs paragraphes, utilisez
. CSS peut être utilisé pour définir des styles pour les références. Notez qu'un paragraphe d'article ne peut pas être placé directement dans
, le contenu cité doit également être inclus dans un élément, généralement
. L'attribut cite peut être utilisé avec et
pour fournir l'adresse source du contenu cité. Il convient de noter que si vous utilisez la balise au lieu de la balise pour citer le contenu, vous ne pouvez pas utiliser l'attribut cite. Par exemple :
<cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman.
Copier après la connexion
<p> <cite>孔子</cite>曰：<q>学而不思则罔，思而不学则殆</q>.</p>
Copier après la connexion
<p>The W3C says that <q cite="http://www.w3.org/TR/REC-html40/
struct/text.html#h-9.2.1">The presentation of phrase elements
depends on the user agent.</q>.</p>
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
