Parlons de la compréhension sémantique de l’une des fonctionnalités majeures du HTML5

Cet article vous apporte des connaissances pertinentes sur la sémantique en HTML. La soi-disant sémantique signifie que vous pouvez découvrir la structure humanisée avec HTML lui-même. J'espère que cela sera utile à tout le monde.

Avant de parler de ce qu'est la sémantique, jetons un coup d'œil au contexte de la sémantique.

Dans l'article précédent, j'ai mentionné la fonctionnalité la plus importante du HTML, à savoir les balises. Mais le projet est vaste, et il y a tellement d’étiquettes que je n’arrive pas à les comprendre. Certains noms étaient bizarres, et ceux qui voulaient les conserver ont été persuadés de partir, et le travail d'équipe a conduit au début des combats en équipe !

La sémantique est donc urgente !

Qu'est-ce que la sémantique

En fait, cela n'a pas d'importance lorsque nous écrivons du HTML, car les utilisateurs ne peuvent pas voir à quoi vous ressemblez à l'intérieur et ils n'ont pas besoin de le voir.

Parce que vous avez les beaux vêtements du CSS, même si votre HTML est en désordre, CSS peut le faire briller.

Mais les utilisateurs ne peuvent pas le voir, les développeurs le peuvent ! Par conséquent, la plus conviviale de cette sémantique est celle des développeurs eux-mêmes.

La soi-disant sémantique signifie que vous pouvez expérimenter une structure humanisée avec le HTML lui-même !

Les avantages de la sémantique

• Même sans CSS, la page peut également présenter une bonne structure de contenu et une bonne structure de code. De cette façon, les développeurs peuvent comprendre vos intentions en un coup d’œil et briser la glace en une seconde !

• Optimisé pour le référencement. S’il est convivial pour les développeurs, il l’est également pour les bugs des développeurs !

  Lorsque les balises sont appliquées correctement et reflètent le poids des mots-clés souhaités dans leur contexte, les robots des moteurs de recherche sont de votre côté. Ensuite, le trafic du site Web viendra, n'est-ce pas ?

• Peut prendre en charge certains appareils spéciaux (lecture aveugle, appareils mobiles), la traduction de pages Web, etc.

• Le plus intuitif, c'est que vos coéquipiers veulent coopérer avec vous ! Vos coéquipiers adorent la sémantique de votre code !

  La sémantique est plus lisible et les équipes qui suivent les normes du W3C suivent toutes cette norme, ce qui peut réduire la différenciation. (Job-hopping et intégration rapide ?)

Penser sémantiquement au travail

• N'utilisez pas de balises de style pur, ces CSS nous aideront à le faire. Tels que : b, font, u et autres balises.

• Le texte qui doit être souligné peut être inclus dans des balises strong ou em (le style par défaut de strong est gras (n'utilisez pas b), em est en italique (n'utilisez pas i). Utilisez les balises mark pour indiquer marqué/ Texte en surbrillance.

  Mais vous pouvez toujours envisager d'utiliser CSS.

• Le texte de description correspondant à chaque étiquette d'entrée doit utiliser l'étiquette d'étiquette, définir l'attribut id pour l'entrée et définir for=someld dans l'étiquette d'étiquette. Le texte est associé à l'entrée correspondante.

• Le champ du formulaire doit être entouré de la balise Fieldset et la balise Legend doit être utilisée pour décrire l'objectif du formulaire

• doit utiliser - <h6> code> pour représenter le titre <code><h1> - <h6></h6> </h1>来表示标题。

• 当用CSS写样式的时候命名也需要遵循HTML的结构，体现出语义化的本质。

语义化的标签

1、<header></header> 标签定义文档的页眉

通常包含页面的正副标题。

<header>
<h1>他真的是美男子吗?</h1>
<p>据现场勘查，他真的是美男子！</p>
</header>

2、<footer></footer>标签定义文档或节的页脚

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

可以在一个文档中使用多<footer></footer>元素。

<footer>
  <p>Posted by: 美男子</p></footer>

3、<main></main>标签规定文档的主要内容。

<main></main>元素中的内容对于文档来说应当是唯一的。

它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。

在一个文档中，不能出现多个 <main></main> 元素。<main></main>元素不能是以下元素的后代：<article></article>、<aside></aside>、<footer></footer>、<header></header>或 <nav></nav>。

<main>
  <h1>我的介绍</h1>
  <p>我是一个聪明的孩子</p></main>

4、<section></section> 标签定义文档中的片段。

比如章节、页眉、页脚或文档中的其他部分。

<section>
  <h1>PRC</h1>
  <p>The People's Republic of China was born in 1949...</p></section>

5、<article></article> 标签规定独立的自包含内容

比如文章下的评论之类的

<article>
   <h1>我为什么聪明呢</h1>
   <p>我聪明的秘诀是我爱思考</p></article>

6、<aside></aside> 标签定义其所处内容之外的内容。

用来装载非正文类的内容。例如广告，成组的链接，侧边栏等等。

<p>聪明的研究</p><aside>
  <h1>我为什么聪明呢</h1>
  <p>我聪明的秘诀是我爱思考</p></aside>

7、<nav></nav>

Lors de l'écriture de styles avec CSS, le nom doit également suivre la structure du HTML, reflétant l'essence de la sémantique

1. ;header>. La balise ; définit l'en-tête du document

contient généralement le principal et les sous-titres de la page

<nav>
<ul>
<li><a>百度</a></li>
<li><a>归子莫</a></li>
</ul>
</nav>

2 La balise <footer></footer> définit le pied de page. document ou section

Le pied de page contient généralement. Auteur du document, informations sur les droits d'auteur, lien vers les conditions d'utilisation, informations de contact, etc.

Vous pouvez utiliser plusieurs éléments <footer></footer> dans un seul document

rrreee

3. <main> La balise </main> spécifie le contenu principal du document

🎜Le contenu de l'élément <main></main> doit être unique au document. Il ne doit pas contenir de contenu qui apparaît de manière répétée dans le document, tel qu'une barre latérale, une barre de navigation, des informations de droits d'auteur, un logo du site ou un formulaire de recherche. 🎜

🎜 Plusieurs éléments <main></main> ne peuvent pas apparaître dans. un seul document. L'élément ; ne peut pas être un descendant des éléments suivants : <article></article>, <aside></aside>, <footer> </footer>, <header></header> ou <nav></nav> 🎜

rrreee🎜4. La balise définit un fragment dans le document 🎜🎜Tel que des chapitres, des en-têtes, des pieds de page ou d'autres parties du document 🎜rrreee🎜5. La balise <article></article> spécifie un contenu autonome indépendant🎜🎜. comme les commentaires sous un article. 🎜rrreee🎜6. La balise <aside></aside> définit le contenu en dehors du contenu dans lequel il se trouve. 🎜🎜Utilisé pour charger du contenu non textuel. Tels que des publicités, des groupes de liens, des barres latérales, etc. 🎜rrreee🎜7. L'élément <nav></nav> représente la zone de lien de navigation de la page. 🎜🎜Utilisé pour définir la partie de navigation principale de la page. 🎜rrreee🎜Un modèle sémantique🎜🎜Regardons d'abord une image. 🎜🎜🎜🎜🎜Il semble qu'une structure HTML soignée soit très claire. 🎜🎜Résumé🎜🎜Certains amis le demanderont certainement, les codes sont généralement écrits à l'aide de frameworks, et il n'est fondamentalement pas nécessaire de les utiliser. Il ne s'agit pas d'écrire des sites Web personnels ou officiels, mais d'écrire du H5 ou un backend de type professionnel. gestion. 🎜

En fait, pour les sites Web personnels ou officiels, la sémantique a une valeur pratique. De plus, cette question a également été fréquemment posée lors des entretiens ces dernières années. Le plus important est d’apprendre le sens de la sémantique. Obtenez la sémantique du code, y compris les fonctions de dénomination, la dénomination des composants et la division des fonctions métier des composants. Toujours sur la route !

Tutoriel recommandé : "Tutoriel vidéo HTML"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!