HTMLチュートリアル

HTMLホーム HTMLの紹介 HTMLエディター HTMLベーシック HTML要素 HTML属性 HTML見出し HTML段落 HTMLスタイル HTMLフォーマット HTMLの引用 HTMLコメント HTMLの色 HTML CSS HTMLリンク HTML画像 HTMLファビコン HTMLテーブル HTMLリスト HTMLブロックとインライン HTMLクラス HTMLID HTMLIframe HTML JavaScript HTMLファイルパス HTMLヘッド HTMLレイアウト HTMLレスポンシブ HTMLコンピューターコード HTMLセマンティクス HTMLスタイルガイド HTMLエンティティ HTMLシンボル HTML絵文字 HTML文字セット HTMLURLエンコード HTMLとXHTML

HTMLフォーム

HTMLフォーム HTMLフォーム属性 HTMLフォーム要素 HTML入力タイプ HTML入力属性 HTML入力フォームの属性

HTMLグラフィックス

HTMLキャンバス HTML SVG

HTMLメディア

HTMLメディア HTMLビデオ HTMLオーディオ HTMLプラグイン HTML YouTube

HTML API

HTMLジオロケーション HTMLドラッグアンドドロップ HTMLWebストレージ HTMLWebワーカー HTML SSE

HTMLの

HTMLの例 HTMLクイズ HTML演習 HTML証明書 HTMLの概要 HTMLアクセシビリティ

HTMLリファレンス

HTMLタグリスト HTML属性 HTMLグローバル属性 HTMLブラウザのサポート HTMLイベント HTMLの色 HTMLキャンバス HTMLオーディオ/ビデオ HTMLDoctypes HTML文字セット HTMLURLエンコード HTML言語コード HTTPメッセージ HTTPメソッド PXからEMへのコンバーター キーボードショートカット

HTMLセマンティック要素


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


セマンティック要素とは何ですか?

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

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

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


HTMLのセマンティック要素

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

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

  • <記事>
  • <脇>
  • <詳細>
  • <figcaption>
  • <図>
  • <フッター>
  • <ヘッダー>
  • <メイン>
  • <マーク>
  • <nav>
  • <セクション>
  • <概要>
  • <時間>
HTMLセマンティック要素


HTML <section>要素

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

W3CのHTMLドキュメントによると、「セクションはコンテンツのテーマ別グループであり、通常は見出しが付いています。」

<section>要素を使用できる場所の例:

  • チャプター
  • 序章
  • ニュースアイテム
  • 連絡先

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

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

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>


HTML <article>要素

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

記事はそれ自体で意味があり、他のWebサイトから独立して配布できる必要があります。

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

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

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

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced 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 is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</article>

</body>
</html>

<section>またはその逆に<article>をネストしますか?

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

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

定義を使用して、これらの要素をネストする方法を決定できますか?いいえ、できません!

<section>したがって、要素を含む<article>要素と<article>要素を含む要素を含むHTMLページが見つかります<section>


HTML <header>要素

この<header>要素は、紹介コンテンツまたは一連のナビゲーションリンクのコンテナを表します。

<header>通常、要素には次のものが含まれます。

  • 1つ以上の見出し要素(<h1>-<h6>)
  • ロゴまたはアイコン
  • 作者情報

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

<記事>のヘッダー: 

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

HTML <フッター>要素

この<footer>要素は、ドキュメントまたはセクションのフッターを定義します。

<footer>通常、要素には次のものが含まれます。

  • 作者情報
  • 著作権情報
  • 連絡先
  • サイトマップ
  • トップに戻るリンク
  • 関連資料

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

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

<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:[email protected]">[email protected]</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>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</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>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</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のセマンティック要素の一部のリストです。

Tag Description
<article> Defines independent, self-contained content
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time

利用可能なすべてのHTMLタグの完全なリストについては、HTMLタグリファレンスにアクセスしてください。