html5のセマンティックタグとは何ですか

html5 セマンティック タグ: 1. header タグ; 2. nav タグ; 3. footer タグ; 4. hgroup タグ; 5. section タグ; 6. Article タグ; 7. Side タグ; 8. Figure タグ; 9. タイムタグ、10. アドレスタグ。

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

HTML セマンティクス:

各 HTML タグには 独自の特定の意味があります (セマンティクス)、セマンティクスは 意味的に使用することを指します適切なタグ を使用すると、ページの構造が 適切になり、ページの要素が意味を持ち、ユーザーと検索エンジンの両方が理解しやすくなります 。 私はより鮮明な例を見ました:

家を建てるとき、ある場所ではレンガを使用し、ある部分ではセラミックタイルを使用する必要があります。家が強く、きちんとしていて美しいように、場所はセメントで覆われなければなりません。

レンガをセラミックタイルに置き換えることに固執すれば、かろうじて家を建てることができますが、そのような家は強度がなく、崩れやすく、外観も美しくありません。

同様に、人生の多くのことは似ています。

を表すために使用するタグ

を使用します。このタグは適切な構造を持ち、人々や検索エンジンにとって理解しやすくなります。もう 1 つの点は、開発と保守が簡単であるということです。私は Web ページの構造をたくさん見てきましたが、それらについて文句を言いたくなります。すべてが混乱しています。タスクの外観を CSS に任せるだけです。

やめてください。見栄えを考えてレイアウトします。 セマンティクスの意味と役割

スタイルが削除または失われた場合、ページは

明確な構造を示すことができます

• ユーザー エクスペリエンス
: たとえば、タイトルと alt は名詞の説明や画像情報の説明に使用され、ラベル タグを柔軟に使用できます。 SEO にとって有益です
• : 検索エンジンは良好なコミュニケーションを確立し、クローラーがより効果的な情報をクロールできるようにします。クローラーはタグに依存して各キーワードのコンテキストと重みを判断します。
他のデバイスが # を解析しやすくします。 ## (スクリーン リーダー、ブラインド リーダー、モバイル デバイスなど) は Web ページを意味のある方法でレンダリングします。
• は チームにとって開発と保守が容易であり、セマンティクスが読みやすくなります。これは Web ページの次のステップです。 重要な傾向として、W3C 標準に従うチームはすべてこの標準に従うため、
差別化が低下する可能性があります
• 。
• セマンティクスでは何に注意すべきでしょうか? # 非セマンティックな p タグと spam タグの使用をできる限り少なくし、HTML5 で新たに追加されたより強力なセマンティック タグを使用します。

使用しないでください。 font、b、... などの様式化されたタグを使用すると、完全に CSS を使用してスタイルを実装できます (さらに、このような「様式化されたタグ」は HTML5 では基本的に廃止されます!)

• テキストを強調し、強いタグを使用して強調を強化し、em タグを斜体で設定してください

• フォーム作成仕様:

  タイトル

  キャプションを使用します,
header
• は thead で囲まれ、

  body

  部分は tbody で囲まれ、
tail
• は tfoot で囲まれます。

  テーブル ヘッダーと一般セルは区別する必要があります。テーブル ヘッダーには th を使用し、セルには td を使用します。フォーム フィールドではフィールドセット タグを使用する必要があります Wrapそれをアップし、凡例タグを使用してフォームの目的を説明します; (正直に言うと、私はこれにはあまり気づきませんでした!)

に対応する説明テキスト各入力タグは label label
• を使用する必要があり、id 属性を通じて対応する入力に関連付けられます。

HTML5 セマンティック タグ:

• 1.header: タグは「Web ページ」または「セクション」のヘッダーを定義します。 。

通常、h1 ～ h6 要素または hgroup が ページ全体

またはコンテンツ ブロックの

タイトル として含まれます。 セクションの目次部分、検索ボックス、ナビゲーション、または関連するロゴを

ラップすることもできます。

<header>
     <h1>毕业生实习</h1>
     <span>2016/08/05</span>
</header>
<!--之前使用的是无语义的div+class-->
<div class=&#39;header&#39;>...</div>

または

<header>
    <hgroup>
        <h1>网站标题</h1>
        <h2>网站副标题</h2>
    </hgroup>
</header>

使用法: は「Web ページ」または任意の「セクション」のヘッダー部分にすることができます。 には何もありません数制限。

hgroup または h1-h6 が単独で適切に機能する場合は、ヘッダーを使用しないでください。

• 2.nav: ナビゲーション リンクの部分を定義します。

• <nav>
      <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">xxx</a></li>
          <li><a href="#">xxx</a></li>
          <li><a href="#">xxx</a></li>
      </ul>
  </nav>
  <!--之前使用的是无语义的div+class-->
  <div class=&#39;nav&#39;>...</div>

使用法:

ページ全体で使用してください

---

メイン ナビゲーション パーツ

。適切でない場合は、nav 要素を使用しないでください。 ページ ナビゲーションに使用できるリンク グループ

,

すべてのリンク グループを nav 要素に配置する必要はありません

,

メインおよび基本のリンク グループのみ
• ;
##Note
• : たとえば、フッターには利用規約を含む 一連のリンク が表示されます。 、ホームページ、著作権表示など、フッター要素の使用が最も適切です。 具体的な用途: 従来のナビゲーション バー、サイドバー ナビゲーション、業界ナビゲーション、ページめくり操作など

##3.フッター タグ: 「Web ページ」または「セクション」のフッターを表します。 。

通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。

如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。

<footer>
  作者：xxxx <br />
 Copyright © xxx.All rights reserved.
</footer>
<!--之前使用的是无语义的div+class-->
<div class=&#39;footer&#39;>...</div>

用法：

• 可以是“网页”或任意“section”的底部部分；
• 没有个数限制，除了包裹的内容不一样，其他跟header类似。
• 多用于包含服务条款，友情链接、作者信息、版权信息等

---

4. hgroup元素：“网页”或“section”的标题

当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合

<hgroup>
    <h1>主标题</h1>
    <h2>HTML 5</h2>
</hgroup>

用法：

• 如果只需要一个h1-h6标签就不用hgroup
• 如果有连续多个h1-h6标签就用hgroup
• 如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签

---

5.section标签：定义文档中含有标题和段落的区域。（强调分段或分块）

<section>
  <h1>section要包含标题</h1>
  <p>section要包含内容...</p>
</section>

用法：

• article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没实际意义的就用p
• 当容器需要标题和内容时，建议使用section标签，若只是普通的容器，应该用p元素较好！section标签非p！

---

6.article：代表独立、完整、可独自被外部引用的内容（博客或报刊中的文章、一遍论坛帖子、一段用户评论或独立的插件、或任何独立的内容）;（强调的是独立性！可含有完整的标题、内容、脚注)

<article>
   <header>
     <h1>标题处</h1>
   </header>
   <p>内容描述</p>
   <footer>脚部声明标注</footer>
</article>

用法：定义一个独立完整的内容部分（可包含标题，内容，脚注）时使用！

article、section间的相互嵌套关系：
拜读博文：http://www.html5jscss.com/html5-semantics-section.html

---

7. aside标签：表示当前页面或文章的附属信息部分，可包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分。

书籍中的定义很长很绕，在收集之后，发现主要有两种用法:（啃下概念）

1.用于article标签之内，此时表示的是该独立内容的附属信息部分；

<article>
        <p>article内容区</p>
        <aside>
            <span>附属信息1</span>
            <span>附属信息2</span>
            <span>附属信息3</span>
        </aside>
    </article>

2.用于article标签之外，此时作为页面或站点全局的附属信息部分。

    <aside>
        <h1>附属信息标题</h1>
        <a href="#">附属信息...</a>
        <a href="#">附属信息...</a>
        <a href="#">附属信息...</a>
    </aside>

用法：

• aside在article内表示主要内容的附属信息
• 在article之外则可做侧边栏，页面或站点全局的附属信息部分
• 如果是广告，其他日志链接或者其他分类导航也可以用

（一句话概括：不同的位置表示为对应区域的附属信息！）

---

8. figure标签：规定独立的流内容（图像、图表、照片、代码等等）。

figcaption标签：用于元素定义figure的标题。

1.一个figure元素内最多只允许放置一个figcaption元素，其他元素可无限放置。

2.figcaption 元素应该被置于 figure元素的第一个或最后一个子元素的位置。

    <figure>
        <figcaption>figure的标题</figcaption>
        <img src="pic.jpg" alt="...">
    </figure>

---

9. time标签：定义时间或日期

<p>定义时间...<time>9:00</time></p>

<p>结合datetime属性定义日期...<time datetime="2016-08-08">时间</time></p>

以上为实践操作中可能会用到的标签，HTML5还新增了很多标签，但因为用途与浏览器兼容性问题，还是为人所慎用的！待拓展！

---

10. address标签：代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。

表示文档或文章的作者/拥有者的联系信息，在body标签中表示文档的作者的联系信息；在article标签中表示文章作者的联系信息；

W3School示例文档：http://www.w3school.com.cn/tags/tag_address.asp

用法：

• 标签不应该用于描述通讯地址，除非它是联系信息的一部分。
• 元素通常连同其他信息被包含在 footer 元素中。

---

总结：掌握语义化含义、作用以及应当注意的细节，HTML5中常用的语义化新标签！知识点不在于多，而研究透彻应学以致用！

推荐教程：《html视频教程》

以上がhtml5のセマンティックタグとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。