Langage de balisage - production de pages title_HTML/Xhtml_web

Solutions de conception standardisées - Manuel de langage et de style de balisage
Solutions de normes Web Le manuel de balisage et de style
Partie 1 : Commencez avec le balisage à partir de la syntaxe de balisage
Titres du chapitre 2
Aperçu :
Non seulement toutes les pages Web ont besoin de titres, mais si elles sont correctement balisées, elles peuvent ajouter à la conception et à la convivialité d'un site Web tout un quelques-uns.
En termes d'apparence, le titre d'une page Web utilise généralement une taille de police plus grande et peut utiliser une couleur ou une police différente de celle du texte principal. La fonction du titre est de « décrire brièvement le sujet abordé ». les chapitres suivants", le W3C le décrit ainsi - Afficher un résumé de chaque paragraphe dans une page Web.
Comment créer un titre de page pour utiliser au mieux les informations que nous souhaitons afficher ? Dans ce chapitre, nous étudiera plusieurs méthodes couramment utilisées pour traiter les titres, essaiera de trouver celle qui nous est la plus utile, puis nous utiliserons quelques trucs et astuces CSS pour décorer la meilleure méthode
La meilleure façon. pour créer un titre de document Quelle est une bonne façon ?
Avant de répondre à cette question, supposons que nous plaçons maintenant le titre en haut du document et examinons trois façons d'obtenir un effet similaire.
Méthode A : Est-ce que cela a du sens ?
Super Cool Page Title
Bien que < La balise ;span> est utilisée dans certains cas. L'occasion est une balise pratique, mais pour le titre de la page, cela ne veut pas dire grand-chose. Le seul avantage de l'utilisation de cette méthode est que nous pouvons spécifier un style CSS pour la classe de titre afin de créer le titre. le texte ressemble à un titre.
.heading {
font-size: 24px;
font-weight: bold;
color: blue;
}
Désormais, tous les titres marqués avec la classe de titre Tout deviendront plus gros, plus épais et bleus, ce qui est génial, non ? Mais que se passe-t-il si quelqu'un accède à cette page en utilisant un navigateur qui ne prend pas en charge CSS
Par exemple, si nous ? mettre le style CSS à l'ancienne dans un fichier de feuille de style externe que le navigateur ne prend pas en charge - ou que se passe-t-il lorsqu'un lecteur d'écran lit la page pour les utilisateurs handicapés. Les utilisateurs accédant à la page par ces moyens ne pourront pas voir (entendre ? ) le titre et le corps du texte. La différence. Les méthodes d'annotation telles que
class="heading" décrivent légèrement la signification du contenu de la balise, mais modifier le style d'affichage par défaut.
Lorsque le moteur de recherche explorera cette page, il ignorera la balise comme si elle n'y était pas, et n'augmentera pas le poids des mots-clés qui peuvent y être inclus. Ceci sera abordé plus loin dans ce chapitre. Mentionnez davantage sur la relation entre les moteurs de recherche et les titres de page
Enfin, puisque la balise conteneur au niveau du bloc, par exemple ou

afin de lui faire occuper une ligne propre. Même si vous ajoutez les conteneurs nécessaires, les navigateurs ne prennent pas en charge. CSS affichera toujours le texte dans sa manière originale pour que les utilisateurs puissent le voir. Il n'y a aucune différence entre le titre et le texte.
.                                                                         #p#
Méthode B : Combinaison de P et B

Super Cool Page Title

La méthode B utilise la balise paragraphe, qui nous donnera l'affichage des éléments au niveau du bloc souhaité, et la balise mettra le texte en gras (sur la plupart des navigateurs) - mais lorsque nous marquons les titres importants de cette manière , nous devons toujours faire face au même manque de résultats sémantiques.
Contrairement à la méthode A, l'existence de la balise même si elle manque de définition de style CSS, dans la plupart des navigateurs, le texte sera toujours présenté en gras. Cependant, comme pour la balise , les moteurs de recherche n'augmenteront pas le poids des mots clés pour le texte en gras dans le paragraphe
Il est difficile d'ajouter des styles
En utilisant une simple combinaison de styles. Les balises p et b nous empêchent d'ajouter un style différent à ce titre par rapport aux autres paragraphes. Peut-être souhaitons-nous mettre l'accent sur le titre d'une manière unique et ajouter une définition et une structure au contenu de la page - mais utiliser After utilise cette méthode pour le faire apparaître en gras. , nous n'avons aucun moyen de faire ces choses.
Méthode C : Style et substance

Super Cool Page Title
Haha , voici notre bon ami, la balise de titre. Les balises de titre existent depuis le début, mais de nombreux concepteurs de sites Web ne parviennent toujours pas à les utiliser de manière cohérente. Si elles sont utilisées correctement, les balises de titre peuvent fournir un point d'ancrage pour le contenu de la page. structure flexible, indexable et modifiable en termes de style.
Du point de vue des balises elles-mêmes, vous adorerez sa simplicité. Elles ne nécessitent pas de balises de conteneur supplémentaires. On peut même dire que cette méthode peut économiser quelques octets par rapport à. les deux premières méthodes, qui peuvent être ignorées, mais chaque octet de moins est un changement.

à

représentent respectivement six couches de titres, du plus important

au moins important

. Ils sont eux-mêmes des éléments de niveau bloc et peuvent être autonomes sans conteneur supplémentaire. . Une seule ligne, simple et efficace - le meilleur outil pour le travail.
Styles faciles à définir
Parce que la balise

La balise

sera utilisée plusieurs fois dans le texte, nous pouvons donc utiliser CSS pour y ajouter différents styles (nous en discuterons en profondeur dans "Plus de techniques" dans ce chapitre).
Plus important encore, même sans en ajoutant des définitions de style, la balise de titre ressemble clairement à un titre ! Le navigateur utilisera des polices de grande taille et des polices grasses pour afficher le contenu de

, même si toutes les définitions de style sont supprimées de la page. Vous pouvez toujours voir la structure. du document, car la balise de titre correcte décrit la signification du contenu, pas la méthode de présentation (Figure 2-1)

Figure 2-1 : Utilisation des balises de titre après s'être détachée des styles Page. content
Les lecteurs d'écran, les PDA, les téléphones mobiles et autres navigateurs visuels et non visuels peuvent également reconnaître et traiter correctement le contenu de la balise de titre, soulignant son importance par rapport aux autres contenus de la page. Utilisez la balise < ;span> qui ne prennent pas en charge (ou ne peuvent pas prendre en charge) CSS ne penseront pas que c'est quelque chose de spécial.
Styles par défaut ennuyeux
Dans l'histoire de la conception Web, les concepteurs évitent simplement d'utiliser les balises de titre car sans style, les balises de titre ressemblent à des monstres. Choisissez l'une des deux, et certaines d'entre elles évitent d'utiliser

car la taille de police par défaut est trop grande ou

balise de titre.
Cependant, il y a un point important qui mérite d'être souligné. Nous pouvons facilement modifier le style de ces balises de titre selon nos propres préférences en définissant du CSS - par exemple,

chose qui occupe la moitié de l'écran. Plus tard, je montrerai comment utiliser simplement les styles CSS pour définir des balises de titre afin de vous aider à surmonter votre peur de

.
Convivial pour les moteurs de recherche
C'est le plus grand avantage. Les moteurs de recherche aiment beaucoup les polices en gras dans les balises ou les paragraphes

~

beaucoup de temps, mais cela peut aider les moteurs de recherche à indexer votre page et à permettre aux utilisateurs de trouver plus facilement votre page.
Les robots des moteurs de recherche attachent une grande importance au contenu de la balise de titre, vous voudrez peut-être empiler quelques mots-clés Après avoir traité les balises

我希望透過比較集中常用的方法後,你能發覺正確使用標題標籤的好處.不管是視覺,非視覺瀏覽器或者其他設備,都能正確的歷屆標題的含義,並且以適當的方法展現它們,搜索引擎也會為他們建立索引,你也可以輕鬆的以css應用和修改需要顯示的效果.