Learn/HTML/Introduction_to_HTML を更新

- 2021/07/10 時点の英語版に同期
- conflicting 版を削除

4 files changed, 30 insertions, 118 deletions

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 7410a6628c..f97fa909da 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -4433,7 +4433,7 @@
 /ja/docs/Web/Guide/HTML/HTML5/HTML5_のフォーム	/ja/docs/Learn/Forms
 /ja/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5	/ja/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5
 /ja/docs/Web/Guide/HTML/Introduction	/ja/docs/Learn/HTML/Introduction_to_HTML
-/ja/docs/Web/Guide/HTML/Obsolete_things_to_avoid	/ja/docs/conflicting/Learn/HTML/Introduction_to_HTML
+/ja/docs/Web/Guide/HTML/Obsolete_things_to_avoid	/ja/docs/Learn/HTML/Introduction_to_HTML
 /ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines	/ja/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines
 /ja/docs/Web/Guide/Localizations_and_character_encodings	/ja/docs/orphaned/Web/Guide/Localizations_and_character_encodings
 /ja/docs/Web/Guide/Performance/Using_web_workers	/ja/docs/Web/API/Web_Workers_API/Using_web_workers
@@ -4993,7 +4993,7 @@
 /ja/docs/Web_Content_Accessibility_Guidelines_1.0	/ja/docs/orphaned/Web_Content_Accessibility_Guidelines_1.0
 /ja/docs/Web_Developer_Extension_(external)	https://addons.mozilla.org/ja/firefox/addon/60
 /ja/docs/Web_Development	/ja/docs/conflicting/Web/Guide
-/ja/docs/Web_Development/Historical_artifacts_to_avoid	/ja/docs/conflicting/Learn/HTML/Introduction_to_HTML
+/ja/docs/Web_Development/Historical_artifacts_to_avoid	/ja/docs/Learn/HTML/Introduction_to_HTML
 /ja/docs/Web_Development/Introduction_to_Web_development	/ja/docs/conflicting/Web/Guide/Introduction_to_Web_development
 /ja/docs/Web_Development/Mobile	/ja/docs/Web/Guide/Mobile
 /ja/docs/Web_Development/Mobile/Responsive_design	/ja/docs/Web/Progressive_web_apps
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index fca43d120a..dd6adbe04c 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -48197,14 +48197,6 @@
       "yyss"
     ]
   },
-  "conflicting/Learn/HTML/Introduction_to_HTML": {
-    "modified": "2019-03-24T00:14:45.209Z",
-    "contributors": [
-      "SphinxKnight",
-      "ethertank",
-      "yyss"
-    ]
-  },
   "conflicting/Learn/JavaScript/Building_blocks/Events": {
     "modified": "2019-11-20T21:35:36.010Z",
     "contributors": [
diff --git a/files/ja/conflicting/learn/html/introduction_to_html/index.html b/files/ja/conflicting/learn/html/introduction_to_html/index.html
deleted file mode 100644
index f98cd5c402..0000000000
--- a/files/ja/conflicting/learn/html/introduction_to_html/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: Historical artifacts to avoid
-slug: conflicting/Learn/HTML/Introduction_to_HTML
-tags:
-  - HTML
-  - NeedsContent
-  - NeedsTechnicalReview
-translation_of: Learn/HTML/Introduction_to_HTML
-translation_of_original: Web/Guide/HTML/Obsolete_things_to_avoid
-original_slug: Web/Guide/HTML/Obsolete_things_to_avoid
----
-<h2 id="導入">導入</h2>
-
-<p>多くの人々はページのソースを見てコピー &amp; ペーストすることで、元のサイトが上手に作成されているかを考えることなく HTML、CSS、JavaScript を学習しました。これは、過去には必要であったかもしれないが現在は無意味になっているコーディングの慣習を習得してしまうことを意味します。このページでは、時間がたつにつれて不要あるいは悪い慣習になった事柄を説明します。</p>
-
-<h2 id="Doctype">Doctype</h2>
-
-<p>(X)HTML には 10 種類ほどの <a class="external" href="http://en.wikipedia.org/wiki/Document_Type_Declaration">doctype</a> があります。それらの違いはわずかです (違いがない場合もあります)。HTML5 の doctype の使用を推奨します。</p>
-
-<pre>&lt;!DOCTYPE html&gt;</pre>
-
-<p>これはすべてのブラウザ (Internet Explorer 6 を含む) で標準準拠モードになります。</p>
-
-<h2 id="&lt;meta>_要素と_charset_属性">&lt;meta&gt; 要素と <code>charset</code> 属性</h2>
-
-<p>以下の記述を含むソースコードを見ることがよくあります:</p>
-
-<pre>&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
-</pre>
-
-<p>ところが、すべての Web ブラウザ (Internet Explorer 6 を含む) は以下のように短縮した場合でも同様に動作します:</p>
-
-<pre>&lt;meta charset="UTF-8" /&gt;
-</pre>
-
-<p>すばらしい <a class="external" href="http://blog.whatwg.org/the-road-to-html-5-character-encoding">リバースエンジニアリング</a> や <a class="external" href="http://lists.w3.org/Archives/Public/public-html/2007Jul/0550.html#replies">プラグマティズム</a> によってこの知識を獲得しました。これを使用してください。</p>
-
-<ul>
- <li>HTML5 ではこの挙動を元にして、この構文が正式に採用されたという経緯があります。HTML5 で用いるのが良いでしょう。また、HTML5 で以前の構文を利用する事もできます。</li>
- <li>Web 開発者の中には、適切なセマンティクスやユーザビリティを持つ HTML となっているかチェックする為に Lynx というテキストブラウザを利用する人がいます。新しい構文を用いると Lynx での表示に支障が出る場合がある点に注意して下さい。</li>
-</ul>
-
-<h2 id="Non-existing_&lt;meta>_elements" name="Non-existing_&lt;meta>_elements">存在しない <code>&lt;meta&gt;</code> 要素</h2>
-
-<p>多数の非推奨、非標準、不使用な値がいまだにサイトからサイトへコピーされています。特に以下の値は使用しないでください:</p>
-
-<ul>
- <li><code>&lt;meta name="MSSmartTagsPreventParsing" content="true"&gt;</code>。これは Internet Explorer 6 の<em>ベータ</em>版でしか役に立ちません。このバージョンはもはや使用されず、またスマートタグ機能は削除されており復活することはないでしょう。</li>
- <li><code>&lt;meta name="robots" content="all"&gt;</code>。robots 値が存在して、また正当であれば、<code>all</code> のような存在しない値を使用してはいけません。既定値は <code>index, follow</code> であり、これは基本的に、存在しない値 <code>all</code> で想定される動作です。<code>&lt;meta&gt;</code> 全体を削除してください。</li>
- <li><code>&lt;meta name="copyright" content="</code><code>…</code><code>"&gt;</code>。この meta は存在しません。このタグは削除して著作権表示のページまたは箇所を作成して、それに <code>rel="copyright"</code> 値を持つ {{HTMLElement("link")}} HTML 要素でリンクしてください。</li>
- <li><code>&lt;meta name="rating" content="</code><code>…</code><code>"&gt;。</code>この meta は存在しません。<code>&lt;meta&gt;</code> 全体を削除してください。</li>
-</ul>
-
-<h2 id="スクリプト内の_HTML_コメント">スクリプト内の HTML コメント</h2>
-
-<p>かつては一部のブラウザのみが {{ HTMLElement("script") }} タグを認識していました。そのためスクリプトとして解釈されるべきテキストを、ブラウザが表示してしまうことがありました。この現象に対する自然なアイデアは、スクリプトを HTML のコメントに収めることでした。この方法では、スクリプトを実行するブラウザはそのスクリプトを実行し、スクリプトを認識しないブラウザはスクリプトを無視しました。</p>
-
-<p>そのような時期から、我々は以下のような記述を受け継いできました:</p>
-
-<pre>&lt;script&gt;&lt;!--
-var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-document.write(unescape("%3Cscript src='" + gaJsHost + "bla.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-//--&gt;
-&lt;/script&gt;
-</pre>
-
-<p>または以下のような記述:</p>
-
-<pre>&lt;script type="text/javascript"&gt;
-&lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!--
-Blabla.extend(MyFramework.settings, { "basePath": "/" });
-//--&gt;&lt;!]]&gt;
-&lt;/script&gt;
-</pre>
-
-<p>このような記述は、今日では無意味です。スクリプトを実行しないブラウザであっても、 {{ HTMLElement("script") }} タグを無視します。スクリプトだけを {{ HTMLElement("script") }} 要素の開始タグと終了タグの間に記述してください。また、{{ htmlattrxref("src", "script") }} 属性で指定する別のファイルにスクリプトを含めることもよいです。合わせて、HTML5 の {{ htmlattrxref("async", "script") }} 属性や {{ htmlattrxref("defer", "script") }} 属性を用いることも考えてみましょう。</p>
-
-<h2 id="もはや使用すべきではない要素">もはや使用すべきではない要素</h2>
-
-<h3 id="font">font</h3>
-
-<p>&lt;font&gt; タグに代わり、CSS を用いて要素や id/class セレクタにフォントスタイルを適用してください。</p>
-
-<h3 id="b_i_u">b, i, u</h3>
-
-<p>これらは少々議論の余地がありますが、適切な場合はできる限り、それぞれ {{ HTMLElement("strong") }}、 {{ HTMLElement("em") }}、CSS (<code>text-decoration:underline</code>) を適用した {{ HTMLElement("span") }} を用いるようにしてください。</p>
-
-<p>これらのうちどの要素を選択するかは、裁量に任せます。一部の開発者向けページでは、単純に {{ HTMLElement("b") }} を {{ HTMLElement("strong") }} で、{{ HTMLElement("i") }} を {{ HTMLElement("em") }} で置き換えるようにアドバイスしています。<strong>このアドバイスに従うことは悪い考えです。</strong> {{ HTMLElement("strong") }} は特に重要な記述のため、一方 {{ HTMLElement("em") }} はそれ以外に強調する記述のための要素です。たとえば、文字をイタリック体にする目的で単純に {{ HTMLElement("em") }} を用いるのは悪い考えです。強調しないイタリック体の文字列は、CSS で <code>font-style:italic</code> を用いて実現してください。同様に、書籍や芸術作品のタイトルは伝統的にイタリック体のテキストで記載しますが、このような箇所は {{ HTMLElement("em") }} や {{ HTMLElement("i") }} より {{ HTMLElement("cite") }} 用を用いる方が、より意味を持ちます。</p>
diff --git a/files/ja/learn/html/introduction_to_html/index.html b/files/ja/learn/html/introduction_to_html/index.html
index 6711d0012a..b91dc66ee2 100644
--- a/files/ja/learn/html/introduction_to_html/index.html
+++ b/files/ja/learn/html/introduction_to_html/index.html
@@ -15,51 +15,59 @@ translation_of: Learn/HTML/Introduction_to_HTML
 ---
 <div>{{LearnSidebar}}</div>
 
-<p class="summary">本来、{{glossary("HTML")}} は、要素で構成される極めてシンプルな言語です。HTMLは、テキストの断片に、文書における他とは異なる意味 (段落なのか？箇条書きなのか？表の一部なのか？) を与え、文書を論理的なセクションに構成し (ヘッダを持つのか？コンテンツを３段組にするのか？ナビゲーションメニューを持つのか？) 、ページに画像や動画のようなコンテンツを貼り付けるために使うことができます。このモジュールでは、これらのうち最初の２つについて紹介し、HTMLを理解する上で知る必要がある基本的な概念や文法について紹介します。</p>
+<p class="summary">本来、{{glossary("HTML")}} は、要素で構成される極めてシンプルな言語です。HTMLは、テキストの断片に、文書における他とは異なる意味 (段落なのか、箇条書きなのか、表の一部なのか) を与え、文書を論理的なセクションに構成し (ヘッダを持つのか、コンテンツを 3 段組にするのか、ナビゲーションメニューを持つのか) 、ページに画像や動画のようなコンテンツを貼り付けるために使うことができます。このモジュールでは、これらのうち最初の 2 つについて紹介し、 HTML を理解する上で知る必要がある基本的な概念や文法について紹介します。</p>
 
-<h2 id="前提条件">前提条件</h2>
+<div class="callout">
+  <h4 id="Looking_to_become_a_front-end_web_developer">フロントエンドのウェブ開発者を目指している方へ</h4>
 
-<p>このモジュールを始めるにあたり、HTML の知識は一切必要ありません。しかし、最低でもコンピューターを利用したり、ウェブを受動的に利用 (つまり単にそれらを見たり、コンテンツを消費する) したりすることについては、慣れ親しんでいるべきです。<a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアをインストールする</a>に挙がっている基本的な作業環境を整えておき、<a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルを扱う</a>にあるような、ファイルを作成して管理する方法についても理解するべきです。これらの記事は両方共に、完全な初心者用のモジュール「<a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web">Web入門</a>」の一部です。</p>
+  <p>ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。</p>
+
+  <p><a href="/ja/docs/Learn/Front-end_web_developer"><strong>始めましょう</strong></a></p>
+
+</div>
+
+<h2 id="Prerequisites">前提条件</h2>
+
+<p>このモジュールを始めるにあたり、 HTML の知識は一切必要ありません。しかし、最低でもコンピューターを利用したり、ウェブを受動的に利用する (つまり、ただ見てコンテンツを消費する) ための基本的な知識を持っている必要があります。<a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアをインストールする</a>に挙がっている基本的な作業環境を整えておき、<a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルを扱う</a>にあるような、ファイルを作成して管理する方法についても理解するべきです。これらの記事は両方共に、完全な初心者用のモジュール「<a href="/ja/docs/Learn/Getting_started_with_the_web">Web入門</a>」の一部です。</p>
 
 <div class="note">
-<p><strong>注</strong>：自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは <a href="http://jsbin.com/">JSBin</a> や <a href="https://thimble.mozilla.org/">Thimble</a> のようなオンラインコーディングプログラムで試すことが可能です。</p>
+<p><strong>注</strong>：自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは <a href="https://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> のようなオンラインコーディングプログラムで試すことが可能です。</p>
 </div>
 
-<h2 id="ガイド">ガイド</h2>
+<h2 id="Guides">ガイド</h2>
 
-<p>このモジュールは以下の記事を含んでいます。これらを読むことで、HTMLの基礎理論の全てを学び、スキルを試すのに十分な機会が得られるでしょう。</p>
+<p>このモジュールには、以下の記事が含まれています。これらの記事では、 HTML の基本的な理論をすべて説明し、いくつかのスキルを試すための十分な機会を提供しています。</p>
 
 <dl>
- <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML入門</a></dt>
- <dd>HTML を開始するための、完全な基本を網羅します — 要素、属性やその他の重要な用語を定義します。この用語を聞いたことがあるかもしれませんし、ここが言語に溶け込んでいる所です。また HTML 要素が構成される方法や、典型的な HTML ページが校正される方法を示し、その他の重要な言語機能を説明します。進むにつれ、HTML で遊んでみて、興味が沸いてくるでしょう！</dd>
+ <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a></dt>
+ <dd>始めに、 HTML の絶対的な基本を網羅します。 — 要素、属性、その他の重要な用語を定義し、それらが言語のどこに当てはまるかを示しています。また、典型的な HTML ページがどのように構成されているか、 HTML 要素がどのように構成されているかを示し、その他の重要な基本的言語機能を説明します。また、 HTML に興味を持ってもらうために、いくつかの HTML で遊んでみましょう。</dd>
  <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Headとは? HTML のメタデータ</a></dt>
- <dd>HTML ドキュメントの Head は、ページが読み込まれてもウェブブラウザーで表示<strong>されない</strong>部分です。これはページ{{htmlelement("title", "タイトル")}}や、(HTML コンテンツを CSS でスタイリングする場合に) {{glossary("CSS")}} へのリンクや、カスタム favicon や、メタデータ (HTML についてのデータ、例えば誰が書いたかや、文書を記述する重要なキーワードなど) です。</dd>
+ <dd>HTML 文書の {{Glossary("Head","head")}} は、ページが読み込まれたときにウェブブラウザーに表示されない部分です。ここには、ページのタイトル ({{htmlelement("title")}})、 {{glossary("CSS")}} へのリンク (HTML コンテンツを CSS でスタイル付けしたい場合)、独自のファビコンへのリンク、メタデータ (誰が書いたか、文書を説明する重要なキーワードなど、 HTML に関するデータ) などの情報が含まれています。</dd>
  <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a></dt>
  <dd>HTML の主な役割の1つは、テキストの意味付け (<strong>セマンティクス</strong>としても知られます) で、それによってブラウザーは正しくテキストを表示する方法がわかります。この記事では HTML を使ってテキストブロックを見出しとパラグラフに分けたり、単語を強調/重要にしたり、リストを作成したりする方法を見て行きます。</dd>
  <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクを作成する</a></dt>
  <dd>ハイパーリンクは本当に重要です — これはウェブをウェブにしているものです。この記事ではリンクを作成するのに必要な文法を表して、リンクの最も良いやり方を考察します。</dd>
  <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">上級のテキスト整形</a></dt>
  <dd>HTML ではテキスト整形用として、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a> の記事で扱ってきてない多くの要素があります。ここでの要素はあまり知られてないですが、知っておくと役立ちます。ここでは引用や、説明リストや、コンピューターのコードや関連するテキスト、下付き上付きや、連絡先情報などのマークアップを学習します。</dd>
- <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">ドキュメントとウェブサイトの構造</a></dt>
- <dd>ページの個々の部分 (例えば「パラグラフ」や「画像」) を定義するのと同様に、ウェブサイトのエリアも (例えば「ヘッダー」、「ナビゲーションメニュー」、「本文のカラム」) HTML で定義されます。この記事では基本的なウェブサイトの構造を計画する方法と、構造を表現する HTML を書く方法を見て行きます。</dd>
- <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTMLをデバッグする</a></dt>
+ <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">文書とウェブサイトの構造</a></dt>
+ <dd>ページの個々の部分 (例えば「段落」や「画像」) を定義するのと同様に、ウェブサイトの領域 (例えば「ヘッダー」、「ナビゲーションメニュー」、「本文のカラム」) も HTML で定義されます。この記事では基本的なウェブサイトの構造を計画する方法と、構造を表現する HTML を書く方法を見て行きます。</dd>
+ <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML をデバッグする</a></dt>
  <dd>HTML を書くのは良いですが、うまくいかなくて、コードのエラーが収まらない場合はどうでしょうか？この記事では手助けとなるいくつかのツールを紹介します。</dd>
 </dl>
 
-<h2 id="評価">評価</h2>
+<h2 id="Assessments">評価</h2>
 
-<p>以下の評価で、上記のガイドにある HTML 基礎の理解をテストできます。</p>
+<p>以下の評価で、上記のガイドにある HTML 基礎の理解度をテストすることができます。</p>
 
 <dl>
  <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">手紙をマークアップする</a></dt>
- <dd>早かれ遅かれ、手紙を書くことを学びます; これはテキストフォーマットの技術をテストするのにも役立ちます！この評価ではマークアップすべき手紙が与えられます。</dd>
+ <dd>早かれ遅かれ、手紙を書くことを学びます。これはテキストフォーマットの技術をテストするのにも役立ちます！この評価ではマークアップすべき手紙が与えられます。</dd>
  <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">コンテンツページを構造化する</a></dt>
  <dd>この評価では、ヘッダー・フッター・ナビゲーションメニュー・メインコンテンツ・サイドバーを含む、簡単なコンテンツページを構造化する HTML の能力をテストします。</dd>
 </dl>
 
-<h2 id="関連情報">関連情報</h2>
+<div class="note">
+<h4 id="Feedback">フィードバック</h4>
 
-<dl>
- <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Web literacy basics 1</a></dt>
- <dd><em>HTML 概論</em>のモジュールで話されたたくさんのスキルを見て回ったりテストしたりできる、素晴らしい Mozilla ファウンデーションのコースです。学習者はこの6つのモジュールにて Web について読んだり書いたり参加したりするのに慣れていきます。製作と共同作業を通じて Web の基礎を発見してください。</dd>
-</dl>
+<p>今回のようなガイドやチュートリアルの改善のために、<a href="https://www.surveygizmo.com/s3/4871248/MDN-Guides-Survey">こちらのアンケート</a>にご協力ください。</p>
+</div>