Éléments sémantiques HTML5

Sémantique = sens.

Éléments sémantiques = sens de l'élément.

Qu'est-ce qu'un élément sémantique ?

Un élément sémantique L'élément peut décrire clairement sa signification aux navigateurs et aux développeurs.

Exemples d'éléments sémantiques : <div> et <span> - pas besoin de prendre en compte le contenu.

Exemples d'éléments sémantiques : <form>, <table> et <img> ; - définit clairement son contenu.

Aucun exemple d'élément sémantique : <div> et <span> - Pas besoin de considérer le contenu.
Exemples d'éléments sémantiques : <form>, <table> ; , et <img> - définit clairement son contenu

<title> est une balise sémantique typique qui définit le titre du document

Nouvel élément sémantique en HTML5
. De nombreux sites Web existants contiennent le code HTML suivant : <div id="nav">, <div class="header"> ou <div id="footer">, pour indiquer les liens de navigation, les en-têtes, et bandes-annonces.

HTML5 fournit de nouveaux éléments sémantiques pour identifier les différentes parties d'une page Web :
<header>
<nav>
<section> ;
<article> ;
<aside>
<figcaption>
<figure>
<footer>

HTML5 <section> La balise ; définit une section (section, section) dans le document. Tels que les chapitres, les en-têtes, les pieds de page ou d’autres parties du document.

Selon la documentation HTML5 du W3C : Une section contient un ensemble de contenu et son titre.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>
<section>
  <h1>沁园春 雪</h1>
  <p>北国风光， 千里冰封， 万里雪飘。 望长城内外， 惟余茫茫。 大河上下， 顿失滔滔。 山舞银蛇， 原驰蜡象。 欲与天公誓比高。 须睛日， 看红装素裹， 分外妖娆。 江山如此多娇， 引无数英雄竞折腰。 昔秦皇汉武， 略疏文采； 唐宗宋祖， 稍逊风骚。 一代天骄， 成吉思汗， 只识弯弓射大雕。 俱往矣， 数风流人物， 还看今朝。</p>
</section>
<section>
  <h1>我爱这土地</h1>
  <p>假如我是一只鸟， 我也应该用嘶哑的喉咙歌唱： 这被暴风雨所打击着的土地， 这永远汹涌着我们的悲愤的河流， 这无止息地吹刮着的激怒的风， 和那来自林间的无比温柔的黎明</p>
</section>
</body>
</html>

L'élément HTML5 <article>

<article> définit un contenu indépendant. .

<article> Exemples d'utilisation d'éléments :

Message du forum

Article de blog

Actualités

Commentaire

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<article>
  <h1>Internet Explorer 9</h1>
  <p> Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>
</body>
</html>

Élément HTML5 <nav> La balise

<nav> définit la partie du lien de navigation. L'élément

<nav> est utilisé pour définir la zone des liens de navigation de la page. Cependant, tous les liens ne doivent pas nécessairement être inclus dans l'élément

< ! 🎜>

L'élément

HTML5 <aside>

<aside> définit le contenu en dehors de la zone principale de la page (comme une barre latérale). Le contenu de la balise

aside doit être lié au contenu de la zone principale.

L'élément HTML5 <header>

<header> du document

L'élément <header> est utilisé pour définir la zone d'affichage d'introduction du contenu.

Vous pouvez utiliser plusieurs éléments <header> 🎜>

Éléments HTML5 <footer>

<footer> L'élément décrit la zone inférieure du document. L'élément

Un pied de page contient généralement l'auteur du document, les informations de copyright, les conditions d'utilisation liées, les informations de contact, etc.

Vous pouvez utiliser plusieurs éléments <footer> >

Éléments HTML5 <figure> et <figcaption>La balise

<figure> spécifie le contenu du flux indépendant (images, graphiques, photos, code, etc.). Le contenu de l'élément

<figure> doit être lié au contenu principal, mais ne doit avoir aucun impact sur le flux des documents s'il est supprimé. La balise

<figcaption> définit le titre de l'élément <figure> L'élément

<figcaption> élément. .

Écrivez un exemple complet et vous comprendrez après l'avoir comparé :

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>语义元素</title>
</head>
<body>
    <!--结构元素-->
    <header>头部</header>
    <section>表示一个段落：用于区域的章节表述</section>
    <footer>区域的页脚部分</footer>
    <nav>菜单 导航</nav>
    <article>表示文章的主体内容</article>
    <!--块级元素 用于区域的划分-->
    <aside></aside>
    <figure>
        <figcaption></figcaption>
    </figure>
    <code>表示一段代码</code>
    <dialog>表示对话
        <dt>说话的人</dt><dd>内容</dd>
    </dialog>
    <!--语义元素-->
    <mtter>一定范围的数值</mtter>
    <time></time>
    <progress>进度条</progress>
    <video>视频</video>
    <audio>音频</audio>
    <!--交互元素-->
    <details>一段具体内容 通过某个方法显示</details>
    <datagrid>用来控制客户端数据显示</datagrid>
    <menu>动态交互菜单</menu>
    <command>命名</command>
    <!--显示文章案例-->
    <article>
        <header>
            <h1>HTML head 头部分的标签</h1>
            <time>2015年12月12日</time>
        </header>
        <p>HTML head 头部分的标签、元素有很多，涉及到浏览器对网页的渲染，SEO等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代，head 头部结构，移动端的meta 元素，显得更为重要。了解每个标签的意义，写出满足自己需求的head 头标签，是本文的目的。本篇以一丝的文章为基础，进行扩展总结介绍常用的head中各个标签、元素的意义以及使用场景。</p>
        <footer>
            <p>http://www.baidu.com</p>
        </footer>
    </article>
    <!--评论-->
    <section>
    <h2>评论</h2>
        <article>
            <header>
                <h3>张帅</h3>
                <p><time pubdata datatime="2013-09-23 10:00 - 11:00">一小时前</time></p>
            </header>
            <p>评论内容</p>
        </article>
        <article>
            <header>
                <h3>张帅</h3>
                <p><time pubdata datatime="2013-09-23 10:00 - 11:00">一小时前</time></p>
            </header>
            <p>评论内容</p>
        </article>
    </section>
</body>
</html>

Formation continue

nouveau fichier

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>语义元素</title> </head> <body>  <header>头部</header> <section>表示一个段落：用于区域的章节表述</section> <footer>区域的页脚部分</footer> <nav>菜单导航</nav> <article>表示文章的主体内容</article>  <aside></aside> <figure> <figcaption></figcaption> </figure> <code>表示一段代码</code> <dialog>表示对话 <dt>说话的人</dt><dd>内容</dd> </dialog>  <mtter>一定范围的数值</mtter> <time></time> <progress>进度条</progress> <video>视频</video> <audio>音频</audio>  <details>一段具体内容通过某个方法显示</details> <datagrid>用来控制客户端数据显示</datagrid> <menu>动态交互菜单</menu> <command>命名</command>  <article> <header> <h1>HTML head 头部分的标签</h1> <time>2015年12月12日</time> </header> <p>HTML head 头部分的标签、元素有很多，涉及到浏览器对网页的渲染，SEO等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代，head 头部结构，移动端的meta 元素，显得更为重要。了解每个标签的意义，写出满足自己需求的head 头标签，是本文的目的。本篇以一丝的文章为基础，进行扩展总结介绍常用的head中各个标签、元素的意义以及使用场景。</p> <footer> <p>http://www.baidu.com</p> </footer> </article>  <section> <h2>评论</h2> <article> <header> <h3>张帅</h3> <p><time pubdata datatime="2013-09-23 10:00 - 11:00">一小时前</time></p> </header> <p>评论内容</p> </article> <article> <header> <h3>张帅</h3> <p><time pubdata datatime="2013-09-23 10:00 - 11:00">一小时前</time></p> </header> <p>评论内容</p> </article> </section> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Éléments sémantiques HTML5

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]