Sémantique HTML5 - principale

Dès 2013, l'élément

a été officiellement ajouté à la spécification HTML du W3C. Jusqu'à présent, la définition de cet élément était très complète, il est donc temps d'examiner de plus près quand il est utilisé. est approprié d’utiliser l’élément

　L'objectif principal de la spécification du W3C

　

Cela aide les lecteurs d’écran et les appareils d’assistance à savoir où commence le contenu principal de la page. La spécification W3C décrit

comme :

Le contenu principal d'un document ou d'une application. La zone de contenu principale comprend du contenu qui se rapporte directement ou s'étend au sujet central du document ou à la fonctionnalité principale de l'application.

Depuis que l'élément

a été inclus dans la spécification HTML, l'élément est revenu à sa définition HTML4.

L'élément body représente le contenu du document une fois. Pourquoi est-il stipulé qu’une page ne peut être utilisée qu’une seule fois ? Même si les détails ne m'intéressent pas, certains points semblent logiques.

Selon la spécification, si vous essayez d'utiliser plusieurs balises

dans un document, le validateur W3C générera une erreur.

Une autre exigence pour l'élément

est qu'il ne peut pas être utilisé comme nœud d'élément enfant de

,

,

,

,

Utilisez

Tout comme les autres nouveaux éléments HTML5, tous les navigateurs ne peuvent pas reconnaître

et y ajouter des styles prédéfinis. Vous devrez peut-être en faire un élément à part entière au niveau du bloc. Fichier CSS.

main {display:block;}

Parfois, afin de prendre en charge certaines versions inférieures des navigateurs IE, vous devrez peut-être également utiliser JavaScript pour créer cet élément.

Bien sûr, vous pouvez également utiliser html5shiv.

<script type="text/javascript">document.createElement(&#39;main&#39;);</script>

La façon la plus simple d'utiliser l'élément

. Classe d’éléments

Alors, à quoi cela devrait-il ressembler en pratique ? Vous trouverez ci-dessous la structure du document avant d'utiliser l'élément

Ensuite, utilisez l'élément

<header>Header</header>
    <div id="content">Main Content</div>
    <footer>Footer</footer>

D'accord, c'est si simple qu'en moins d'une minute, nous pouvons réécrire le document dans le dernier style HTML5.

Résumé

  <header>Header</header>
    <main id="content">Main Content</main>
    <footer>Footer</footer>

Comme vous pouvez le voir, utiliser l'élément

est super simple et ne prend que quelques minutes, il est donc maintenant vraiment temps d'introduire l'élément

pour développer le site internet.

Ce qui précède est le contenu de la sémantique HTML5 - main Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

Étiquettes associées：

HTML5 ，语义化，main

source：php.cn

Article précédent：Surveiller les performances front-end à l'aide de l'API HMTL5 Article suivant：Plusieurs "nouveautés" concernant HTML5 et CSS3

Déclaration de ce site Web

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

Derniers articles par auteur

• Matériel vidéo sur la création de votre propre framework PHP à partir de zéro
  2023-03-15 16:54:01
• Exemple d'analyse de la façon dont PHPMailer utilise la boîte aux lettres QQ pour compléter la fonction d'envoi d'e-mails
  2023-03-15 12:26:02
• Introduction à la façon de recevoir des e-mails en IMAP en php
  2023-03-14 18:58:01
• Exemple de mise en œuvre rapide de la déduplication de tableau en PHP
  2023-03-14 11:30:01
• Résumé de l'utilisation de tous les attributs de la balise en html
  1970-01-01 08:00:00
• Résumé des connaissances de base de PHP (nécessaire aux débutants pour débuter)
  2023-03-16 15:20:01
• Introduction à l'utilisation de typeof en JavaScript
  1970-01-01 08:00:00
• Introduction à l'utilisation de la méthode confirm() en JavaScript
  1970-01-01 08:00:00
• Une introduction détaillée à l'attribut HTML5 Placeholder
  1970-01-01 08:00:00
• Comment implémenter la sélection unique, la sélection multiple et la sélection inversée dans les formulaires dans ReactJS
  1970-01-01 08:00:00

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

0

3

2347

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

0

11

2476

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

0

1

2099

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...

Depuis 2024-04-18 23:52:34

0

1

1978

Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel

Depuis 2024-04-16 10:10:18

0

0

2049

Rubriques connexes

Plus>

• Quelles sont les méthodes de production de production d'animation html5 ?
• La différence entre HTML et HTML5
• La différence entre bond0 et bond1
• Comment définir la transparence en CSS
• iexplore.exe
• Historique des opérations de la table de vue Oracle
• Tri des tableaux JS : méthode sort()
• Méthodes de lecture et d'écriture de fichiers Java DBF