TECH I.S.

HTMLセマンティック要素

セマンティック要素＝意味を持つ要素。

セマンティック要素とは

セマンティック要素は、ブラウザーと開発者の両方にとってその意味を明確に説明します。

非セマンティック要素の例:<div>と<span>-その内容については何も言いません。

セマンティック要素の例:<form>、<table>、と<article>-その内容を明確に定義します。

HTMLの意味要素

多くのWebサイトには、<div id="nav"> <div class="header"> <div id="footer">のようなHTMLコードが含まれており、ナビゲーション、ヘッダー、およびフッターを示しています。

HTMLには、Webページのさまざまな部分を定義するために使用できるセマンティック要素がいくつかあります。

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>
HTML Semantic Elements

HTML<section>要素

<section>要素は、ドキュメント内のセクションを定義します。

HTMLドキュメントによると、「セクションとは、通常、見出しを持つコンテンツのテーマごとのグループです。」

例<section>要素を使用できます:

  • 章
  • 序章
  • ニュース項目
  • 連絡先

Webページは通常、紹介、コンテンツ、および連絡先情報のセクションに分割できます。

例

ドキュメント内の2つのセクション

<section> <h1>世界自然保護基金</h1> <p>世界自然保護基金(WWF)は、環境の保護、研究、回復に関する問題に取り組んでいる国際組織で、以前は世界自然保護基金と呼ばれていました。 WWFは1961年に設立されました。</p> </section> <section> <h1>WWFのパンダのシンボル</h1> <p>WWFのシンボルとなったパンダ。WWFの有名なパンダのロゴは、WWFの設立と同じ年に北京動物園からロンドン動物園に譲渡されたチチという名前のパンダに由来します。</p> </section>

HTML<article>要素

<article>要素は、独立した自己完結型のコンテンツを指定します。

記事はそれ自体で意味をなすものでなければならず、Webサイトの他の部分とは独立して配布できるものでなければなりません。

場所の例<article>要素を使用できます:

  • フォーラムの投稿
  • ブログ投稿
  • ユーザーコメント
  • 商品カード
  • 新聞記事

例

独立した自己完結型のコンテンツを含む 3 つの記事

<article> <h2>Google Chrome</h2> <p>Google Chrome(グーグルクローム)は、2008年にGoogleによって開発されたWebブラウザーです。Chromeは、現在世界で最も人気のあるWebブラウザーです。</p> </article> <article> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox(モジラ ファイアフォックス)は、Mozillaが開発したオープンソースのWebブラウザです。Firefoxは、2018年1月以来、2番目に人気のあるWebブラウザーです。</p> </article> <article> <h2>Microsoft Edge</h2> <p>Microsoft Edge(マイクロソフト エッジ)は、Microsoftが開発したWebブラウザーで、2015年にリリースされました。Microsoft EdgeはInternet Explorerに代わって登場しました。</p> </article>

例 2

CSSを使用して<article>要素のスタイルを設定します。

<html> <head> <style> .all-browsers {   margin: 0;   padding: 5px;   background-color: lightgray; } .all-browsers > h1, .browser {   margin: 10px;   padding: 5px; } .browser {   background: white; } .browser > h2, p {   margin: 4px;   font-size: 90%; } </style> </head> <body> <article class="all-browsers">   <h1>Most Popular Browsers</h1>   <article class="browser">     <h2>Google Chrome</h2> <p>Google Chrome(グーグルクローム)は、2008年にGoogleによって開発されたWebブラウザーです。Chromeは、現在世界で最も人気のあるWebブラウザーです。</p>   </article>   <article class="browser">     <h2>Mozilla Firefox</h2> <p>Mozilla Firefox(モジラ ファイアフォックス)は、Mozillaが開発したオープンソースのWebブラウザです。Firefoxは、2018年1月以来、2番目に人気のあるWebブラウザーです。</p>   </article>   <article class="browser">     <h2>マMicrosoft Edge</h2> <p>Microsoft Edge(マイクロソフト エッジ)は、Microsoftが開発したWebブラウザーで、2015年にリリースされました。Microsoft EdgeはInternet Explorerに代わって登場しました。</p>   </article> </article> </body> </html>

<article>を<section>に入れ子構造にするか、しないか?

<article>要素は、独立した自己完結型のコンテンツを指定します。 <section>要素は、ドキュメントのセクションを定義します。

定義を使用して、それらの要素を入れ子構造にする方法のどちらが正解などとは決まりがありません。

したがって、次のようなHTMLページが見つかります。<section>含む要素<article>要素、および<article>含む要素<section>要素。

HTML<header>要素

<header>要素は、紹介コンテンツまたは一連のナビゲーションリンクのコンテナを表します。 <header>要素には通常、次のものが含まれます。
  • 1つ以上の見出し要素(<h1> - <h6>)
  • ロゴまたはアイコン
  • 著者情報

注：1つのHTMLドキュメントに複数の<header>要素を含めることができます。ただし、<header>を<footer>、<address>または別の<header>要素内に配置することはできません。

例

<article>のヘッダー

<article>   <header>     <h1>WWFは何をしているのですか?</h1>     <p>WWFの使命:</p>   </header>   <p>WWFの使命は、地球の自然環境の悪化を食い止めることです。人と自然が共生する未来をつくります。</p> </article>

HTML<フッター>要素

<footer>要素は、ドキュメントまたはセクションのフッターを定義します。 <footer>要素には通常、次が含まれます。
  • 著者情報
  • 著作権情報
  • 連絡先
  • サイトマップ
  • トップへ戻るリンク
  • 関連文書

1つのドキュメントに複数の<footer>要素を含めることができます。

例

ドキュメントのフッターセクション

<footer>   <p>著者: Hege Refsnes</p>   <p><a href="mailto:hege@example.com">hege@example.com</a></p> </footer>

HTML<nav>要素

<nav>要素は一連のナビゲーションリンクを定義します。

ドキュメントのすべてのリンクが<nav>要素内にある必要はないことに注意してください。この<nav>要素は、ナビゲーション リンクの主要なブロックのみを対象としています。
障害のあるユーザー向けのスクリーンリーダーなどのブラウザーは、この要素を使用して、このコンテンツの初期レンダリングを省略するかどうかを決定できます。

例

一連のナビゲーションリンク:

<nav>   <a href="/html/">HTML</a> |   <a href="/css/">CSS</a> |   <a href="/js/">JavaScript</a> |   <a href="/jquery/">jQuery</a> </nav>

HTML<aside>要素

<aside>要素は、それが配置されているコンテンツ以外のコンテンツを定義します(サイドバーなど)。 <aside>コンテンツは周囲のコンテンツに間接的に関連している必要があります。

例

配置されているコンテンツとは別に、いくつかのコンテンツを表示します。

<p>私の家族と私はこの夏、エプコットセンターを訪れました。天気も良く、エプコットも最高でした！家族みんなで楽しい夏を過ごせました！</p> <aside> <h4>エプコットセンター</h4> <p>エプコットはウォルト・ディズニー・ワールド・リゾートのテーマパークで、エキサイティングなアトラクション、国際的なパビリオン、受賞歴のある花火、季節ごとの特別イベントが特徴です。</p> </aside>

例 2

CSSを使用して<aside>要素のスタイルを設定します。

<html> <head> <style> aside {   width: 30%;   padding-left: 15px;   margin-left: 15px;   float: right;   font-style: italic;   background-color: lightgray; } </style> </head> <body> <p>私の家族と私はこの夏、エプコットセンターを訪れました。天気も良く、エプコットも最高でした！家族みんなで楽しい夏を過ごせました！</p> <aside> <p>エプコットセンターは、ウォルトディズニーワールドリゾートのテーマパークで、エキサイティングなアトラクション、国際的なパビリオン、受賞歴のある花火、季節ごとの特別イベントが特徴です。</p> </aside> <p>私の家族と私はこの夏、エプコットセンターを訪れました。天気も良く、エプコットも最高でした！家族みんなで楽しい夏を過ごせました！</p> <p>私の家族と私はこの夏、エプコットセンターを訪れました。天気も良く、エプコットも最高でした！家族みんなで楽しい夏を過ごせました！</p> </body> </html>

HTMLの<figure>および<figcaption>要素

<figure>タグは、イラスト、図、写真、コードリストなどの自己完結型コンテンツを指定します。 <figcaption>タグは、<figure>要素のキャプションを定義します。<figcaption>要素は、<figure>の最初または最後の子として配置できます。 <img>要素は、実際の画像/イラストを定義します。

例

<figure>   <img src="pic_trulli.jpg" alt="Trulli">   <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption> </figure>

セマンティック要素を使用する理由

W3Cによると、「セマンティックWebにより、アプリケーション、企業、およびコミュニティ間でデータを共有および再利用できます。」

HTMLの意味要素

以下は、HTML のセマンティック要素の一部のリストです。


タグ 説明
<article> 独立した自己完結型のコンテンツを定義します
<aside> ページコンテンツ以外のコンテンツを定義します
<details> ユーザーが表示または非表示にできる追加の詳細を定義します
<figcaption> <figure> 要素のキャプションを定義します
<figure> イラスト、図、写真、コードなどの自己完結型コンテンツを指定します リストなど
<footer> ドキュメントまたはセクションのフッターを定義します
<header> ドキュメントまたはセクションのヘッダーを指定します
<main> ドキュメントの主な内容を指定します
<mark> マーク/ハイライトされたテキストを定義します
<nav> ナビゲーションリンクを定義します
<section> ドキュメントのセクションを定義します
<summary> <details> 要素の可視見出しを定義します
<time> 日付/時刻を定義します

利用可能なすべての HTMLタグの完全なリストについては、HTMLタグリファレンスを参照して下さい。



チュートリアル