Le meilleur didacticiel Balises sémantiques HTML5 en 2024, dans ce didacticiel, vous pouvez apprendre Qu'est-ce que des éléments sémantiques?,support du navigateur,HTML5 nouveaux éléments sémantiques,HTML5 élément <section>,Exemples,HTML5 élément <article>,Exemples,HTML5 <nav> élément,Exemples,HTML5 <aside> élément,Exemples,HTML5 élément <header>,Exemples,HTML5 <footer> élément,Exemples,HTML5 <figure> et <figcaption> élément,Exemples,Nous pouvons commencer à utiliser ces éléments sémantiques font?,Internet Explorer 8 et les versions antérieures de problèmes IE,
Sémantique = sens.
éléments sémantiques = éléments de sens.
A éléments sémantiques peuvent décrire clairement leur importance pour le navigateur et les développeurs.
Des exemples d'éléments non-sémantiques: <div> et <span> - quel que soit le contenu.
Des exemples d'éléments sémantiques: <form>, <table> et <img> - définit clairement son contenu.
Internet Explorer 9+, Firefox, Chrome, Safari et Opera supporte des éléments sémantiques.
Remarque: Internet Explorer 8 et les versions antérieures ne prennent pas en charge cet élément , mais le fond de l'article fournit une solution compatible.
De nombreux sites existants comprennent le code suivant de HTML: <div id = "nav">, <div class = "header">, ou <div id = "footer">, pour indiquer les liens de navigation, la tête et la queue.
HTML5 offre un nouveau éléments sémantiques pour définir une autre partie de la page Web:
<Section> définit la section du document (section, section). Tels que les chapitres, en-têtes, pieds de page, ou d'autres parties du document.
Selon le document HTML5 W3C: section contient un ensemble de contenu et son titre.
<Article> définit le contenu indépendant. .
<Article> élément Exemple:
<Nav> pour définir la section de liens de navigation.
<Nav> est utilisé pour définir la page liens de navigation certaines régions, mais pas tous les liens doivent être inclus dans l'élément <nav>!
<En dehors> définit le contenu de la page au-delà de la zone principale de contenu (comme la barre latérale).
Contenu de côté l'étiquette doit être associée à la zone de contenu principal.
<Header> élément décrit la zone de tête du document
<Header> élément note décrit la zone d'affichage est utilisé pour définir le contenu.
Dans la page que vous pouvez utiliser plusieurs élément <header>.
L'exemple suivant définit la tête de l'article:
<Footer> élément décrit la zone inférieure du document.
<Footer> élément doit contenir les éléments qu'il contient
Un pied de page contient généralement l'auteur du document, les informations de copyright, liens conditions d'utilisation, les informations de contact, etc.
Document Vous pouvez utiliser plusieurs <footer> élément.
<Figure> balise spécifiée contenu de flux séparé (images, graphiques, photographies, code, etc.).
Contenu <figure> élément doit être associé au contenu principal, mais si elle est retirée, ne répondent pas à l'impact du flux de documents.
<Figcaption> définit le titre <figure> élément.
<Figcaption> élément doit être placé dans l'élément "figure" de la première ou dernière position de l'élément enfant.
Les éléments ci-dessus sont des éléments de bloc (sauf <figcaption>).
Pour ces blocs et éléments prennent effet dans toutes les versions du navigateur, vous devez configurer les attributs de fichier de feuille de style (code de style ci-après permet d'anciens navigateurs prennent en charge les éléments de niveau bloc dans ce chapitre):
IE8 et les versions antérieures de IE ne peuvent pas être rendus dans ces éléments, les effets CSS, de sorte que vous ne pouvez pas utiliser <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, ou autre les éléments HTML5.
Solution: Vous pouvez utiliser le script HTML5 Shiv Javascript pour résoudre les problèmes de compatibilité de IE. HTML5 Shiv Télécharger: http://code.google.com/p/html5shiv/
Une fois téléchargé, le code suivant dans la page:
Le code ci-dessus lorsque la version du navigateur moins de IE9 va charger html5shiv.js fichier, vous devez le placer dans le <head>, parce que le navigateur IE est nécessaire après le chargement de la tête rendant ces nouveaux éléments HTML5