files/ja/glossary/semantics/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

---
title: Semantics (セマンティクス)
slug: Glossary/Semantics
tags:
  - CodingScripting
  - Glossary
  - HTML
  - semantics
  - セマンティクス
  - セマンティック
  - 用語集
translation_of: Glossary/Semantics
---
<p><span class="seoSummary">プログラミングでは、<strong>セマンティクス</strong>とは、コードの断片の<em>意味</em>を指します。たとえば、「JavaScript でその行を実行すると、どのような効果があるのか？」、「その HTML 要素には、どのような目的や役割があるのか？」 (「どのように見えるのか？」ではなく)。</span></p>

<h2 id="JavaScript_でのセマンティクス">JavaScript でのセマンティクス</h2>

<p>JavaScript において、文字列の引数を取り、その文字列を <code>textContent</code> とする {{htmlelement("li")}} 要素を返す関数を想像してみてください。 <code>build('Peach')</code> または <code>createLiWithContent('Peach')</code> という関数名の場合、何をするのかを理解するためにコードを見る必要があるのはどちらでしょうか？</p>

<h2 id="CSS_でのセマンティクス">CSS でのセマンティクス</h2>

<p>CSS において、さまざまな種類の果物を表すために <code>li</code> 要素でリストをスタイル付けすることを想像してみてください。 <code>div &gt; ul &gt; li</code> または <code>.fruits__item</code> で選択された DOM の一部が何であるか分かるのはどちらでしょうか？</p>

<h2 id="HTML_でのセマンティクス">HTML でのセマンティクス</h2>

<p>たとえば、 {{htmlelement("h1")}} 要素はセマンティック要素で、「ページの最上位の見出し」の役割 (または意味) をまとったテキストを提供します。</p>

<pre class="brush: html">&lt;h1&gt;これは最上位の見出しです&lt;/h1&gt;</pre>

<p>既定では、見出しのように見えるように大きなフォントサイズが与えられます (あなたが望むものに見えるようにスタイルを設定することもできます) が、もっと重要なのはセマンティックな意義が複数の方法で使用されることです。たとえば、検索エンジンは、その内容をページの検索ランキング ({{glossary("SEO")}} 参照) に影響する重要なキーワードと見なし、読み上げソフトは、視覚障碍のあるユーザーがページを移動するのを助けるための道標として使用できます。</p>

<p>一方、どの要素も最上位の見出しのように見せることができます。次ののことを想像してみてください。</p>

<pre class="brush: html">&lt;span style="font-size: 32px; margin: 21px 0;"&gt;これは最上位の見出しですか？&lt;/span&gt;</pre>

<p>これは最上位の見出しのように表示されますが、セマンティックな意義はありませんので、上記のように特別なメリットはありません。したがって、 HTML 要素を適材適所に使用することをお勧めします。</p>

<p>HTML は既定の表示スタイルに基づくのではなく、入力される<em>データ</em>を表現するためにコーディングするべきです。プレゼンテーション (どのように見えるか) は、完全に <a href="/ja/docs/Web/CSS">CSS</a> の責任です。</p>

<p>セマンティックなマークアップを書くことの利点の中には、次のようなものがあります。</p>

<ul>
 <li>検索エンジンが内容を重要なキーワードとして理解し、ページの検索ランキングを上げる ({{glossary("SEO")}} を参照)</li>
 <li>読み上げソフトが、目の不自由なユーザーがページを操作するのを補助するための標識として利用することができる</li>
 <li>意味のあるコードのブロックを見つけることは、セマンティックまたは名前空間のついたクラスがあるにしろないにしろ、延々と <code>div</code> の中を検索するより明らかに簡単である</li>
 <li>開発者に目立たせるデータの種類を提案することができる</li>
 <li>セマンティックな名前は、正しいカスタム要素やコンポーネントの名前を反映する</li>
</ul>

<p>どのマークアップを使用するか迷ったときは、自分自身に「どの要素が掲載しようとしているデータを最もよく説明または表現しているか」と自問してみてください。例えば、これはデータのリストか？順序付きか順序なしか？これは節と関連情報の補足から成る記事か？定義の一覧になっているか？キャプションを必要としている図または画像か？サイト内でグローバルのヘッダーおよびフッターに加えてヘッダーやフッターを持つべきか？などです。</p>

<h2 id="Semantic_elements" name="Semantic_elements">セマンティック要素</h2>

<p>これらは、およそ100ある利用可能なセマンティック<a href="/ja/docs/Web/HTML/Element">要素</a>の<em>一部</em>です。</p>

<ul>
 <li>{{htmlelement("article")}}</li>
 <li>{{htmlelement("aside")}}</li>
 <li>{{htmlelement("details")}}</li>
 <li>{{htmlelement("figcaption")}}</li>
 <li>{{htmlelement("figure")}}</li>
 <li>{{htmlelement("footer")}}</li>
 <li>{{htmlelement("header")}}</li>
 <li>{{htmlelement("main")}}</li>
 <li>{{htmlelement("mark")}}</li>
 <li>{{htmlelement("nav")}}</li>
 <li>{{htmlelement("section")}}</li>
 <li>{{htmlelement("summary")}}</li>
 <li>{{htmlelement("time")}}</li>
</ul>

<h2 id="Learn_more" name="Learn_more">より詳しく知る</h2>

<ul>
 <li>MDN の <a href="/ja/docs/Web/HTML/Element#Inline_text_semantics">HTML 要素リファレンス</a></li>
 <li>MDN の <a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Problems_solved_by_HTML5">HTML のセクションとアウトラインの使用</a></li>
 <li>Wikipedia 上の {{interwiki("wikipedia", "意味論#コンピュータ科学", "コンピュータ科学におけるセマンティクスの意味")}}</li>
</ul>

<section class="Quick_links" id="Quick_Links">
<ul>
 <li><a href="/ja/docs/Glossary">MDN 用語集</a>

  <ul>
   <li>{{Glossary("SEO")}}</li>
  </ul>
 </li>
 <li>HTML におけるセマンティック要素の一部
  <ul>
   <li>{{htmlelement("article")}}</li>
   <li>{{htmlelement("aside")}}</li>
   <li>{{htmlelement("details")}}</li>
   <li>{{htmlelement("figcaption")}}</li>
   <li>{{htmlelement("figure")}}</li>
   <li>{{htmlelement("footer")}}</li>
   <li>{{htmlelement("header")}}</li>
   <li>{{htmlelement("main")}}</li>
   <li>{{htmlelement("mark")}}</li>
   <li>{{htmlelement("nav")}}</li>
   <li>{{htmlelement("section")}}</li>
   <li>{{htmlelement("summary")}}</li>
   <li>{{htmlelement("time")}}</li>
  </ul>
 </li>
</ul>
</section>