BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

HTML5でよく使われるセマンティックタグの説明

2022-02-06 17:24:26

クイッククエリ

記事｜脇｜ナビ｜セクション｜ヘッダー｜フッター

建築プレビュー

nav ナビゲーションリンクを定義するセクション

トップページ、サービス情報ページ、著作権情報ページなど、サイトのナビゲーションリンクをフッターに表示します。 

<nav>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">CSS</a></li>
       <li><a href="#">Html5</a></li>
    </ul>
</nav>

記事 定義記事

個別の記事コンテンツ、フォーラムの投稿、ニュース、ブログの投稿、ユーザーのコメントなどを表示するためにロードします。artilceはネストすることができ、内側のartilceは外側の記事タグに所属しています。 

<article>
    <h1> title</h1>
    <p> content</p>
    <article> User reviews</article>
    <article> Reply to comment</article>
</article>

section ドキュメント内のセクションを定義します。

章、ヘッダー、フッター、または文書の他の部分を指します。 

<section>
   <h1>title1</h1>
   <p>content1</p>
</section>
<section>
   <h1>Heading 2</h1>
   <p>content2</p>
</section>

aside 記事のサイドバーを定義する

広告、グループ化されたコンテンツ、リンク、サイドバー、など。 

<aside>
     <h1> Sidebar title 1</h1>
     <p> This is sidebar content 1</p>
</aside>
<aside>
     <h1> Sidebar title 2</h1>
     <p> This is sidebar content 3</p>
</aside>

header ドキュメントのヘッダーを定義します。

通常、いくつかのガイダンスとナビゲーション情報 

<header> 
     <p>logo</p> 
     <nav>
          <ul>
               <li>Home</li>
               <li>Html5</li>
          </ul>
     </nav> 
</header>

footer 文書やセクションのフッターを定義します。

通常、この要素には作成者の名前、文書が作成された日付、および/または連絡先情報が含まれます。 

<footer> 
  <p>© 2019 All Rights Reserved. </p>
</footer>

参考文献

1 html5 http://caibaojian.com/html5
2 w3school（ワースリースクール https://www.w3school.com.cn/
3 MDN https://developer.mozilla.org/zh-CN/docs/Web/HTML/

他のユーザーが追加したものは以下の通りです。

Baidu IFE Task 1では、ページ構造を構築するよう求められました。これは簡単なように見えますが、意味付けを十分に考慮する必要があります。この記事では、HTML5のセマンティック化におけるページ構造のセマンティック化について、いくつかの経験と理解について簡単に説明します。

1. セマンティック化が必要な理由

修正が容易、メンテナンスが容易
アクセシブルな読書支援。
SEOのための検索エンジンフレンドリー。
将来的にリッチブラウザに対応可能な、将来性のあるHTMLです。

2. 構造的セマンティクス

セマンティック要素に共通しているのは、「何もしない」ということです。言い換えれば、セマンティック要素は単にページの構造を正規化するだけで、本質的にコンテンツに影響を与えるものではありません。

下図は典型的なページ構成です。

ヘッダー

1つ目はコンテンツのタイトルをマークアップすること、2つ目は上の画像にあるように、ページのヘッダーをマークアップすることです。header>は、一般に、必要な場合（コンテンツのタイトルに他の情報：発行時刻、著者など）を除いて、コンテンツでは使用されません。したがって、ページには複数の<header>要素が含まれることがあります。HTML5によれば、<header>はすべて何らかのレベルでヘッダーを含むべきであり、暗黙的または明示的に含むべきです。通常は表示したくないヘッダーをdisplay: noneに設定し、一方では仕様を遵守し、他方ではページのデザインを損なわずにアクセス性を提供することができます。

ナビゲーションバー

ナビゲーションバーに<nav>を使うのは当たり前のようで、さらに、記事群へのリンクにも使われることが多いようです。一つのページに複数の<nav>要素を含むことができますが、通常はページのメインナビゲーションセクションにのみ使用されることが多いようです。
HTML5では、サイドバーで<nav>タグを使用する例が2つ挙げられています。The Missing Manual』に記載されています。 

<! -- Case 1 -->
<nav>
  <! -- this is the link -->
  <aside></aside>
  <aside></aside>
</nav>

<! -- Case 2 -->
<aside>
  <nav>
    <! -- this is the link -->
  </nav>
  <section></section>
  <div></div>
</aside>

サイドバーにリンクとは別のブロックが含まれている場合は、2番目のオプションを使用する方が明らかに適切です。

ナビゲーションには通常、一連のリンクが含まれており、リンクはリストを使って整理されるのが一般的です。 

<nav>
  <ul>
    <li><a href="#" title="link">link</a></li>
    <li><a href="#" title="link">link</a></li>
    <li><a href="#" title="link">link</a></li>
  </ul>
</nav>

備考

<aside> 要素は、単なるサイドバーではなく、周囲のテキストと密接に関連しないコンテンツを表します。また、記事は <aside> 要素には、記事への追加コンテンツの説明、アイデアの説明、関連コンテンツへのリンクなどがあります。

を指定した場合 <aside> がサイドバーで使用されている場合、ページ全体の追加コンテンツを表します。通常の広告エリア、検索、共有リンクは、サイドバーに配置されます。サイドバーでは <section> 要素は、通常ヘッダーを含むセクションを指定します。

alt;section>タグがタグ付けに適しているコンテンツブロックです。

ページ本文と並べて表示される小さなコンテンツブロック。
独立したコンテンツ、リスト、フォームなど。
CMSシステムにおける記事カテゴリーのブロックのような、グループ化されたコンテンツ。
長い文書の一部で、ページのアウトラインを適切に指定するためだけのものである可能性がある。
div>タグは、他のタグを使うのが面倒な場合に、まだ使用可能です。これは、新しいセマンティック要素が登場する前に、私たちが常に行っていたことです。

フッター

全て込み"と同じです。 <header> 要素では、規格上 <footer> タグには、著作権、出典情報、法的制約などのテキストまたはリンク情報のみを含めることができます。フッターに他のコンテンツを含めたい場合は、おなじみの <div> を使用すると便利です。 

<div>
  <aside>
  <! -- other content -->
  </aside>
  
  <footer>
    <! -- Legal, copyright, sources, contact information, etc. -- >
  </footer>
</div>

メインコンテンツ

HTML5以前のバージョンでは、ページの本文を指定するタグがなく、関連書籍には「head、tail、sidebarなど他の部分を削除したら、残るのは当然メイン部分」と書かれていることが多いです。

しかし、HTML5.1では <main> タグで本文を識別します。 このタグは <main> タグは、ページ上の他のブロック要素に含めることはできません。 <body> サブタグ、またはグローバルな <div> のサブタグを使用します。 <main> タグは、画面読み上げツールがページの主要部分を識別するのに役立ち、訪問者が有用な情報をすばやく入手できるようにします。

記事

<article> 完全な、自己完結したコンテンツのブロックを表します。例えば、記事やニュース記事など。 <article> は、完全なタイトル、記事の傍線、投稿時間、本文を含むべきである。セマンティックとプレゼンテーションの間に矛盾がある場合、例えば記事を複数のページに表示する必要がある場合、各ページの記事領域は、以下のように分離される必要があります。 <article> タグを使用します。

記事に図版が含まれる場合は、新しいセマンティック要素 <figure> タグを使用します。 

<article>
  <h1>title</h1>
  <p>
    <! --content -->
  </p>
  <figure>
    <img src="#" alt="illustration">
    <figcaption> This is an illustration</figcaption>
  </figure>
</article>

上記の場合 <figcaption> には、イラストの詳細な説明が書かれており <img> の alt 属性は省略可能です。

要約

以上、HTML5でよく使われるセマンティックタグについて簡単に紹介しましたが、お役に立てれば幸いです。これからもスクリプトハウスのウェブサイトをよろしくお願いします。

この記事が皆様のお役に立つと思われる場合は、ご自由に転載してください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します