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
|
---
title: 'HTML: HyperText Markup Language'
slug: Web/HTML
tags:
- HTML
- HTML5
- Landing
- Web
- l10n:priority
translation_of: Web/HTML
---
<div>{{HTMLSidebar}}</div>
<p class="summary"><span class="seoSummary"><strong>HTML</strong> (HyperText Markup Language) はウェブのもっとも基本的な構成要素です。 HTML はウェブページの基本レイアウトに従ってウェブページの<em>コンテンツ</em>を記述し定義するものです。 HTML に隣接する他の技術としては、ウェブページの表示や表現を記述するもの (<a href="/ja/docs/Web/CSS">CSS</a>) または機能や振る舞いを記述するもの (<a href="/ja/docs/Web/JavaScript">JavaScript</a>) があります。</span></p>
<p>「ハイパーテキスト」はウェブページから別なページに、ウェブサイト内でもウェブサイト間でも、接続するリンクを示します。リンクはウェブの基礎的な特徴です。コンテンツをインターネットにアップロードして他の人々が作成したページにリンクすれば、 World Wide Web の活発な参加者になれます。</p>
<p>HTML ではウェブブラウザーのテキスト、画像、その他のコンテンツを記述するために「マークアップ」を使用します。 HTML のマークアップには、 {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}}, {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("li")}} その他のたくさんの特殊な「要素」を用います。</p>
<p>HTML 要素は文書中で、 "<code><</code>" および "<code>></code>" で囲まれた要素名で構成される「タグ」によって区別されます。タグ内の要素名は、大文字と小文字の区別がありません。つまり、大文字でも、小文字でも、混在して書いても構いません。例えば、 <code><title></code> タグは <code><Title></code> や <code><TITLE></code> やその他の方法で書くことができます。</p>
<p>以下の記事が HTML についてもっと学ぶのに役立ちます。</p>
<h2 id="Key_resources">中心的なリソース</h2>
<dl>
<dt>HTML 入門</dt>
<dd>ウェブ開発が初めてであれば、 HTML とは何か、 HTML の使用方法を説明する<a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTMLの基本</a>をご覧ください。</dd>
<dt>HTML チュートリアル</dt>
<dd>チュートリアルや例を含む HTML の使用方法に関する記事は、<a href="/ja/docs/Learn/HTML">HTML 学習エリア</a>を確認してください。</dd>
<dt>HTML リファレンス</dt>
<dd>広範な <a href="/ja/docs/Web/HTML/Reference">HTML リファレンス</a>の章で、 HTML のすべての要素と属性についての詳細が分かります。</dd>
</dl>
<div class="callout">
<h4 id="Looking_to_become_a_front-end_web_developer">フロントエンドのウェブ開発者を目指している方へ</h4>
<p>ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。</p>
<p><a href="/ja/docs/Learn/Front-end_web_developer"><strong>始めましょう</strong></a></p>
</div>
<h2 class="Tools" id="Beginners_tutorials">初心者向けチュートリアル</h2>
<p><a href="/ja/docs/Learn/HTML">HTML 学習エリア</a>は HTML を基礎から学ぶための複数のモジュールを中心としています。――前提知識は必要ありません。</p>
<dl>
<dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a></dt>
<dd>このモジュールでは、 HTML を文章に適用する方法、ハイパーリンクを作成する方法、 HTML を使用してウェブページを構築する方法など、重要な概念と構文に慣れていく段階を設定します。</dd>
<dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding">マルチメディアとその埋め込み方</a></dt>
<dd>このモジュールでは、ウェブページにマルチメディアを埋め込むための HTML の使い方を探ります。画像を入れるための様々な方法、映像、音声、他のウェブページ全体を含める場合も含みます。</dd>
<dt><a href="/ja/docs/Learn/HTML/Tables">HTML テーブル</a></dt>
<dd>ウェブページ上で表形式のデータを分かりやすく使いやすい方法で表現するのは難しいことです。このモジュールでは、基本的なテーブルのマークアップと、キャプションやサマリーの追加などのより複雑な機能を扱います。</dd>
<dt><a href="/ja/docs/Learn/Forms">HTML フォーム</a></dt>
<dd>フォームはウェブで非常に重要な部分です。――これはウェブサイトとのやり取り（登録やログイン、フィードバックの送信、商品の購入など）に必要な多くの機能を提供します。このモジュールでは、フォームのクライアント側／フロントエンド部分の作成から始めます。</dd>
<dt><a href="/ja/docs/Learn/HTML/Howto">よくある問題解決に HTML を使う</a></dt>
<dd>HTML を使用してウェブページを作成する際に、とてもよくある問題（タイトルの扱い、画像や動画の追加、コンテンツの強調、基本フォームの作成など）を解決する方法を説明する記事の章へのリンクを紹介します。</dd>
</dl>
<h2 id="Advanced_topics" name="Advanced_topics">高度なトピック</h2>
<dl>
<dt class="landingPageList"><a href="/ja/docs/Web/HTML/CORS_enabled_image">CORS を利用した画像</a></dt>
<dd class="landingPageList">{{htmlattrxref("crossorigin", "img")}} 属性と {{glossary("CORS")}} ヘッダーを組み合わせることで、 {{HTMLElement("img")}} 要素で定義された画像を異なるドメインから読み出し、 それを {{HTMLElement("canvas")}} 要素の中で同じドメインから読み出したかのように扱うことができます。</dd>
<dt class="landingPageList"><a href="/ja/docs/Web/HTML/Attributes/crossorigin">CORS 設定属性</a></dt>
<dd class="landingPageList"><a href="/ja/docs/Web/HTTP/CORS">CORS</a> をサポートするいくつかの HTML 要素（{{HTMLElement("img")}} や {{HTMLElement("video")}} など）は <code>crossorigin</code> 属性（<code>crossOrigin</code> プロパティ）を持っており、要素が取得したデータに関する CORS リクエストを設定することができます。</dd>
<dt class="landingPageList"><a href="/ja/docs/Web/HTML/Preloading_content">rel="preload" によるコンテンツの先読み</a></dt>
<dd class="landingPageList">HTML の {{htmlelement("head")}} 要素内において、 {{htmlelement("link")}} 要素で {{htmlattrxref("rel", "link")}} 属性に <code>preload</code> を指定することで、読み込み後すぐにページに必要なリソース、つまりページ読み込みの過程の初期の、ブラウザーの主なレンダリング機構が起動する前に、先読みを始めたいものを指定する宣言的なフェッチリクエストを記述することができます。これにより、ページの最初のレンダリングがブロックされにくくなり、パフォーマンスが向上します。この記事では <code>preload</code> がどのように動作するのかについての基本的なガイドを提供します。</dd>
</dl>
<h2 class="Documentation" id="References">リファレンス</h2>
<dl>
<dt class="landingPageList"><a href="/ja/docs/Web/HTML/Reference">HTML リファレンス</a></dt>
<dd class="landingPageList">HTML は<strong>要素</strong>の集まりで、それぞれの要素がいくつかの<strong>属性</strong>で修飾される場合があります。 HTML 文書は互いに<a href="/ja/docs/Web/HTML/Link_types">リンク</a>で接続されます。</dd>
<dt class="landingPageList"><a href="/ja/docs/Web/HTML/Element">HTML 要素リファレンス</a></dt>
<dd class="landingPageList">すべての {{glossary("HTML")}} {{glossary("Element", "要素")}}の一覧を閲覧します。</dd>
<dt class="landingPageList"><a href="/ja/docs/Web/HTML/Attributes">HTML 属性リファレンス</a></dt>
<dd class="landingPageList">HTML の要素には<strong>属性</strong>があります。これは要素を調整したり、さまざまな方法で振る舞いを調整したりするための付加的な値です。</dd>
<dt class="landingPageList"><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></dt>
<dd class="landingPageList">グローバル属性は、<em>標準仕様で規定されていないものを含む</em>すべての <a href="/ja/docs/Web/HTML/Element">HTML 要素</a>に指定できるものです。つまり、あらゆる標準外の要素も、それを使用することで文書が HTML5 に準拠しなくなるとしても、グローバル属性を受け入れなければならないということです。</dd>
<dt class="landingPageList"><a href="/ja/docs/Web/HTML/Inline_elements">インライン要素</a>と<a href="/ja/docs/Web/HTML/Block-level_elements">ブロックレベル要素</a></dt>
<dd class="landingPageList">通常、 HTML の要素は「インライン」要素または「ブロックレベル」要素のどちらかです。インライン要素は、要素を定義するタグによって指定された範囲のみを占有します。ブロックレベル要素は親要素 (コンテナー) の範囲全体を占有し、それによって「ブロック」を作成します。</dd>
<dt class="landingPageList"><a href="/ja/docs/Web/HTML/Link_types">リンク種別</a></dt>
<dd class="landingPageList">HTML では、2つの文書間の関係を確立し定義するために、さまざまなリンク種別が使用できます。リンク種別を設定できるリンク要素は {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}} などです。</dd>
<dt class="landingPageList"><a href="/ja/docs/Web/Media/Formats">ウェブにおけるメディア種別と形式のガイド</a></dt>
<dd class="landingPageList">{{HTMLElement("audio")}} および {{HTMLElement("video")}} 要素では、外部のソフトウェアの支援を必要とせずにコンテンツの中でネイティブに音声や動画を再生できます。</dd>
<dt class="landingPageList"><a href="/ja/docs/Web/Guide/HTML/Content_categories">HTML コンテンツカテゴリ</a></dt>
<dd class="landingPageList">HTML は数種類のコンテンツで構成され、それぞれのコンテンツは特定のコンテキストで使用することができ、他のコンテンツでは使用できません。同様に、それぞれのコンテンツを含むことができる一連の他のコンテンツカテゴリと、中で使用できる要素、使用できない要素があります。これは、これらのカテゴリのガイドです。</dd>
<dt class="landingPageList"><a href="/ja/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">後方互換モードと標準準拠モード</a></dt>
<dd class="landingPageList">後方互換モードと標準準拠モードの歴史的な情報です。</dd>
</dl>
<h2 class="landingPageList" id="Related_topics">関連トピック</h2>
<dl>
<dt><a href="/ja/docs/Web/HTML/Applying_color">CSS を使って HTML の要素に色をつける</a></dt>
<dd>この記事では、 CSS を使用して HTML コンテンツに色をつける方法、 HTML 文書のどの部分に色付けできるかの一覧、使用する CSS プロパティについて説明します。例えば、パレット作成ツールへのリンクなどが含みます。</dd>
</dl>
|
