Learn/Getting_started_with_the_web/HTML_basics を更新

- 2021/02/20 時点の英語版に同期
- 原語併記マクロを削除

1 files changed, 87 insertions, 84 deletions

diff --git a/files/ja/learn/getting_started_with_the_web/html_basics/index.html b/files/ja/learn/getting_started_with_the_web/html_basics/index.html
index 49a407e593..6d1b296bcd 100644
--- a/files/ja/learn/getting_started_with_the_web/html_basics/index.html
+++ b/files/ja/learn/getting_started_with_the_web/html_basics/index.html
@@ -2,10 +2,13 @@
 title: HTML の基本
 slug: Learn/Getting_started_with_the_web/HTML_basics
 tags:
+  - Beginner
   - CodingScripting
+  - Doctype html
   - HTML
+  - Learn
   - Web
-  - 'l10n:priority'
+  - l10n:priority
   - 初心者
   - 学習
 translation_of: Learn/Getting_started_with_the_web/HTML_basics
@@ -15,41 +18,41 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics
 <div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div>
 
 <div class="summary">
-<p>HTML (<strong>H</strong>yper<strong>t</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage、ハイパーテキスト・マークアップ・ランゲージ)は、 Web サイトのコンテンツに構造を指定するために使うコードです。具体的に言うと、構造というのは、段落や箇条書きのリスト、画像、テーブルなどのようなものです。タイトルが示すように、この記事では、HTML とその機能の基本的な理解ができるように説明します。</p>
+<p>HTML (<strong>H</strong>yper<strong>t</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage、ハイパーテキスト・マークアップ・ランゲージ)は、ウェブサイトのコンテンツの構造を作るために使うコードです。例えば、コンテンツは段落、箇条書きのリスト、画像の使用、データテーブルなどの組み合わせで構成されています。タイトルが示すように、この記事では HTML とその機能の基本的な理解ができるように説明します。</p>
 </div>
 
-<h2 id="So_what_is_HTML_really" name="So_what_is_HTML_really">そもそも HTML とは</h2>
+<h2 id="So_what_is_HTML">HTML とは</h2>
 
-<p>HTML はプログラミング言語ではありません。<em>マークアップ言語</em>と言って、コンテンツの構造を決めるものです。 HTML は <strong>{{Glossary("element", "要素")}}</strong> の集まりでできています。要素とは様々なコンテンツがどのように見えるか、またどのように動くかを表現するためにタグで囲まれたまとまりです。{{Glossary("tag", "タグ")}} は言葉や画像を表示したり、他のページに移動するハイパーリンクを作ったり、文字を斜体にしたり、大きくしたり小さくしたり、色々なことが出来ます。例えば、次の文を見てください。</p>
+<p>HTML は、コンテンツの構造を定義する<em>マークアップ言語</em>です。 HTML は一連の<strong>{{Glossary("element", "要素")}}</strong>で構成されており、これらの要素がコンテンツのさまざまな部分を囲み、一定の表示や動作をさせることができます。{{Glossary("tag", "タグ")}}で囲むと、単語や画像をどこかにハイパーリンクさせたり、単語を斜体にしたり、フォントを大きくしたり小さくしたりすることができます。 例えば、次のようなコンテンツがあるとします。</p>
 
-<pre class="notranslate">My cat is very grumpy</pre>
+<pre>My cat is very grumpy</pre>
 
-<p>上の文を単体で表示したいなら、段落タグ ({{htmlelement("p")}}) で文を囲うことでこれが段落であると指定することができます。</p>
+<p>行を独立させたい場合は、段落タグで囲んで段落であることを指定することができます。</p>
 
-<pre class="brush: html notranslate">&lt;p&gt;My cat is very grumpy&lt;/p&gt;</pre>
+<pre class="brush: html">&lt;p&gt;My cat is very grumpy&lt;/p&gt;</pre>
 
-<h3 id="Anatomy_of_an_HTML_element" name="Anatomy_of_an_HTML_element">HTML 要素の中身</h3>
+<h3 id="Anatomy_of_an_HTML_element">HTML 要素の中身</h3>
 
-<p>この段落要素についてもうちょっと詳しく見ていきましょう。</p>
+<p>この段落要素についてもう少し詳しく見ていきましょう。</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+<p><img alt="" src="grumpy-cat-small.png" style="display: block; margin: 0px auto;"></p>
 
-<p>要素は主に以下のようなもので構成されています:</p>
+<p>要素は主に以下のようなもので構成されています。</p>
 
 <ol>
- <li><strong>{{原語併記("開始タグ", "opening tag")}}:</strong> これは、要素の名前(今回は p)を<strong>山括弧</strong>で囲ったものです。どこから要素が始まっているのかやどこで効果が始まるのかを表しています。今回の場合どこから段落が始まるかを表しています。</li>
- <li><strong>{{原語併記("終了タグ", "closing tag")}}:</strong> これは、要素名の前に<strong>スラッシュ</strong>が入っていることを除いて開始タグと同じです。どこで要素が終わっているかを表しています。今回の場合どこで段落が終わるかを表しています。終了タグの書き忘れは、初心者のよくある間違いで、正しく表示されません。</li>
- <li><strong>{{原語併記("コンテンツ", "content")}}:</strong> 要素の内容です。今回の場合はただの文字です。</li>
- <li><strong>{{原語併記("要素", "element")}}:</strong> 開始タグ、終了タグ、コンテンツで要素を構成します。</li>
+ <li><strong>開始タグ</strong> (Opening tag): これは、要素の名前 (この場合は p) を<strong>山括弧</strong>で囲んだものです。どこから要素が始まっているのか、どこから効果が始まるのかを表します。 — 今回の場合どこから段落が始まるかを表しています。</li>
+ <li><strong>終了タグ</strong> (Closing tag): これは、要素名の前に<strong>スラッシュ</strong>が入っていることを除いて開始タグと同じです。どこで要素が終わるのかを表しています。 — この場合は、段落が終わる場所を表します。終了タグの書き忘れは、初心者のよくある間違いで、おかしな結果になることがあります。</li>
+ <li><strong>コンテンツ</strong> (Content): 要素の内容です。今回の場合はただのテキストです。</li>
+ <li><strong>要素</strong> (Element): 開始タグ、終了タグ、コンテンツで要素を構成します。</li>
 </ol>
 
-<p>要素は{{原語併記("属性", "Attribute")}}を持つことが出来ます。このような感じです:</p>
+<p>要素には属性 (Attribute) を設定することができます。このような感じです。</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+<p><img alt="" src="grumpy-cat-attribute-small.png" style="display: block; margin: 0px auto;"></p>
 
-<p>属性とは要素に対し実際には表示されない追加情報を含んだものです。ここでは <code>class</code> が属性の<em>名前</em>で <code>editor-note</code> が属性の<em>値</em>です。 <code>class</code> 属性を使って要素に識別するための名前を与えていて、後でこの要素を指定してスタイルをつけたり様々なことができるようになります。</p>
+<p>属性には、実際のコンテンツには表示させたくない、要素に関する追加情報が含まれています。ここでは、 <code>class</code> が属性の<em>名前</em>で、 <code>editor-note</code> が属性の<em>値</em>です。 <code>class</code> 属性では、要素に一意ではない識別子を与えることができ、それを使って要素 (および同じ <code>class</code> 値を持つ他の要素) にスタイル情報などのターゲットを設定することができます。</p>
 
-<p>属性は次のような形式です。</p>
+<p>属性は常に次のような形式になります。</p>
 
 <ol>
  <li>要素名 (すでにいくつか属性がある場合はひとつ前の属性) との間の空白</li>
@@ -57,35 +60,35 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics
  <li>引用符で囲まれた属性の値</li>
 </ol>
 
-<div class="blockIndicator note">
-<p><strong>メモ</strong>: ASCII の空白 (または <code>"</code> <code>'</code> <code>`</code> <code>=</code> <code>&lt;</code> <code>&gt;</code> 文字) を含まない単純な属性値は引用符を付けないままにすることができますが、コードの一貫性と理解を容易にするため、すべての属性値を引用することをお勧めします。</p>
+<div class="notecard note">
+<p><strong>注</strong>: ASCII のホワイトスペース (または <code>"</code> <code>'</code> <code>`</code> <code>=</code> <code>&lt;</code> <code>&gt;</code> のいずれかの文字) を含まない単純な属性値は引用符を省略することができますが、コードを一貫性のあるものにし、理解を容易にするため、すべての属性値を引用符で囲むことをお勧めします。</p>
 </div>
 
-<h3 id="Nesting_elements" name="Nesting_elements">要素のネスト</h3>
+<h3 id="Nesting_elements">要素の入れ子</h3>
 
-<p>要素の中に他の要素を入れることも出来ます。これを<strong>ネスト</strong>(または入れ子)と言います。もしあなたの猫が「とっても」機嫌が悪いことを表したいとしたら、「とっても」という単語を {{htmlelement("strong")}} 要素に入れて単語の強調を表すことが出来ます。</p>
+<p>要素の中に他の要素を入れることもできます。これを<strong>ネスト</strong> (または入れ子) と言います。もしあなたの猫が「とっても」機嫌が悪いことを表したいとしたら、「とっても」という単語を {{htmlelement("strong")}} 要素に入れて、単語の強調を表すことができます。</p>
 
-<pre class="brush: html notranslate">&lt;p&gt;私のネコは&lt;strong&gt;とっても&lt;/strong&gt;機嫌が悪い。&lt;/p&gt;</pre>
+<pre class="brush: html">&lt;p&gt;私のネコは&lt;strong&gt;とっても&lt;/strong&gt;機嫌が悪い。&lt;/p&gt;</pre>
 
-<p>しかしながら要素のネストは正しく行われなければなりません。上記の例ではまず始めに {{htmlelement("p")}} 要素が開始され、その次に {{htmlelement("strong")}} 要素が開始されています。そうしたならば、必ず {{htmlelement("strong")}} 要素、 {{htmlelement("p")}} 要素の順で終了しなければなりません。次の例は間違いです。</p>
+<p>しかしながら要素は正しく入れ子にしなければなりません。上記の例では、まず始めに {{htmlelement("p")}} 要素が開始され、その次に {{htmlelement("strong")}} 要素が開始されています。その場合は、必ず {{htmlelement("strong")}} 要素、 {{htmlelement("p")}} 要素の順で終了しなければなりません。次の例は間違いです。</p>
 
-<pre class="example-bad brush: html notranslate">&lt;p&gt;私の猫は&lt;strong&gt;とっても機嫌が悪い。&lt;/p&gt;&lt;/strong&gt;</pre>
+<pre class="example-bad brush: html">&lt;p&gt;私の猫は&lt;strong&gt;とっても機嫌が悪い。&lt;/p&gt;&lt;/strong&gt;</pre>
 
-<p>要素は確実に他の要素の中もしくは外で開始し、終了する必要があります。上記の例のように要素が重複してしまうと、 Web ブラウザはあなたがしようとしていたことを推測してもっともよいと思われる解釈をするため、予期せぬ結果になることがあります。そうならないよう気を付けましょう！</p>
+<p>要素は確実に他の要素の中もしくは外で開始し、終了する必要があります。上記の例のように要素が重複してしまうと、ウェブブラウザーは言おうとしていることを推測してもっとも良いと思われる解釈をするため、予期せぬ結果になることがあります。そうならないよう気を付けましょう！</p>
 
-<h3 id="Empty_elements" name="Empty_elements">空要素</h3>
+<h3 id="Empty_elements">空要素</h3>
 
-<p>コンテンツを持たない要素もあります。そのような要素を<strong>{{原語併記("空要素", "empty elements")}} </strong>と呼びます。 {{htmlelement("img")}} 要素を例に見ていきましょう。</p>
+<p>コンテンツを持たない要素もあります。そのような要素を<strong>空要素</strong> (empty elements) と呼びます。すでに HTML ページにある {{htmlelement("img")}} 要素を例に見ていきましょう。</p>
 
-<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
+<pre class="brush: html">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
 
-<p>この要素は 2 つの属性を持っていますが終了タグ <code>&lt;/img&gt;</code> はありませんし、内部にコンテンツもありません。これは image 要素はその機能を果たすためにコンテンツを囲うものではないからです。 image 要素の目的は画像を HTML ページの表示させたいところに埋め込むことです。</p>
+<p>この要素は 2 つの属性を持っていますが、終了タグ <code>&lt;/img&gt;</code> がありませんし、内部にコンテンツもありません。これは画像要素は、その機能を果たすためにコンテンツを囲むものではないからです。画像要素の目的は、画像を HTML ページの表示させたいところに埋め込むことです。</p>
 
-<h3 id="Anatomy_of_an_HTML_document" name="Anatomy_of_an_HTML_document">HTML 文書の構造</h3>
+<h3 id="Anatomy_of_an_HTML_document">HTML 文書の構造</h3>
 
-<p>ここまでは HTML 要素についてみてきました。しかし要素単体ではあまり役には立ちません。ここからはどのようにしてそれぞれの要素を組み合わせ、 HTML ページ全体を作っていくのかを勉強していきましょう。<a href="/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルを扱う</a>で出てきた <code>index.html</code> に書いてあるコードをもう一度見てみましょう。</p>
+<p>ここまでは HTML 要素についてみてきました。しかし要素単体ではあまり役には立ちません。ここからはどのようにしてそれぞれの要素を組み合わせ、 HTML ページ全体を作っていくのかを勉強していきましょう。<a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>で出てきた <code>index.html</code> に書いてあるコードをもう一度見てみましょう。</p>
 
-<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
   &lt;head&gt;
     &lt;meta charset="utf-8"&gt;
@@ -99,84 +102,84 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics
 <p>この中にあるものは以下の通りです。</p>
 
 <ul>
- <li><code>&lt;!DOCTYPE html&gt;</code> — 文書型宣言です。昔々、 HTML がまだ出来たばかりの頃 (1991～2年)、文書型宣言は HTML ページを正しい書き方がなされているかを示すルールセット (自動エラーチェックなどの便利なもの) に関連付けさせる役割を担っていました。しかし、最近ではそのようなことを気にする人はいなくなり、うまく動くために存在するただの遺産となってしまいました。今はこれだけ知っていれば大丈夫です。</li>
- <li><code>&lt;html&gt;&lt;/html&gt;</code> — {{htmlelement("html")}} 要素です。この要素はページのすべてのコンテンツを囲み、ルート要素とも呼ばれます。</li>
- <li><code>&lt;head&gt;&lt;/head&gt;</code> — {{htmlelement("head")}} 要素です。この要素は HTML ページの、閲覧者に向けて表示<em>されない</em>コンテンツをまとめるための入れ物です。<code>&lt;head&gt;</code>要素は検索エンジン向けのキーワードや説明書き、ページの見た目を変更するための CSS、文字コードの情報などを含みます。</li>
- <li><code>&lt;meta charset="utf-8"&gt;</code> — この要素は文書に対し文字コードを UTF-8 に設定しています。 UTF-8 には人類が使う言語の殆どの文字が含まれています。基本的には指定することにより文書に書いたテキストコンテンツを扱うことが出来ます。指定しない理由は特に無く、指定することで後から出てくる様々な問題を避けることが出来ます。</li>
- <li><code>&lt;title&gt;&lt;/title&gt;</code> — {{htmlelement("title")}} 要素です。ページのタイトルを指定しています。このタイトルはページが読み込まれた時にブラウザのタブに表示され、ブックマーク（お気に入り）に登録した時の名前にもなります。</li>
- <li><code>&lt;body&gt;&lt;/body&gt;</code> — {{htmlelement("body")}} 要素です。 <code>&lt;body&gt;</code> 要素はページの閲覧者に対して見せたいもの<em>すべて</em>を含みます。文字、画像、ビデオ、ゲーム、再生できる音楽など、どんなものでもです。</li>
+ <li><code>&lt;!DOCTYPE html&gt;</code> — 文書型宣言です。これは必須の前置きです。昔々、 HTML がまだ出来たばかりの頃 (1991～2年)、文書型宣言は HTML ページが正しい HTML と見なされるために従わなければならない、一連のルールへのリンクとして機能することを意味していました。つまり、自動エラーチェックなどの有益なものを表すことができました。しかし、最近ではあまり機能しておらず、文書が正しく動作するために必要なだけです。今はこれだけ知っていれば大丈夫です。</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code> — {{htmlelement("html")}} 要素です。この要素は、このページのすべてのコンテンツを囲み、ルート要素と呼ばれることもあります。</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code> — {{htmlelement("head")}} 要素です。この要素は、ページの閲覧者に向けて表示するためのコンテンツではない、 HTML ページに含めたいものをすべて収めるための入れ物です。 <code>&lt;head&gt;</code> 要素は検索エンジン向けの {{Glossary("keyword", "キーワード")}} や説明書き、ページの見た目を変更するための CSS、文字コードの宣言などを含みます。</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code> — この要素は、大部分の書き言葉の文字のほとんどを含む UTF-8 を文書で使用するように設定しています。基本的には、文書はどんなテキストコンテンツでも扱えるようになります。これを設定しない理由はありませんし、後でいくつかの問題を回避するのに役立ちます。</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code> — {{htmlelement("title")}} 要素です。ページのタイトルを指定しています。このタイトルはページが読み込まれた時にブラウザーのタブに表示されます。また、ブックマークやお気に入りに登録した時の説明にも使われます。</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code> — {{htmlelement("body")}} 要素です。これには、テキスト、画像、ビデオ、ゲーム、再生可能なオーディオトラックなど、ページを訪れたウェブの利用者に表示したいすべてのコンテンツが含まれます。</li>
 </ul>
 
-<h2 id="Images" name="Images">画像</h2>
+<h2 id="Images">画像</h2>
 
 <p>もう一度 {{htmlelement("img")}} 要素について見ていくことにしましょう。</p>
 
-<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
+<pre class="brush: html">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
 
-<p>前に説明したように、これは書いたところに画像を埋め込みます。画像ファイルのパスを値に持つ <code>src</code> (source) 属性を指定する事によってその画像を表示できます。</p>
+<p>前に説明したように、ページのこれが現れたところに画像を埋め込みます。画像ファイルのパスを値に持つ <code>src</code> (source) 属性を指定することによってその画像を表示できます。</p>
 
-<p>また、 <code>alt</code> (alternative; 代替) 属性も指定しています。これは以下の様な理由で画像を見られない人に向けて文字で説明をするものです。</p>
+<p>また、 <code>alt</code> (alternative; 代替) 属性も指定しています。これは以下のような理由で画像を見られない人に向けて説明するテキストを指定するものです。</p>
 
 <ol>
- <li>目が不自由な人。著しく目の不自由な人はよくスクリーンリーダーと呼ばれるツールを使っていて、それは画像の <code>alt</code> 属性の内容を読み上げます。</li>
- <li>何らかの理由で画像の表示に失敗した場合。例えば、 <code>src</code> 属性に指定したパスが間違っていたときなどです。ページを保存したり再読み込みしたりするとこのような本来画像があるべき場所に下記のような何かが表示されるでしょう。</li>
+ <li>目が不自由な人。著しく目の不自由な人はよく画面リーダーと呼ばれるツールを使っていて、それが画像の <code>alt</code> 属性の内容を読み上げます。</li>
+ <li>何らかの理由で画像の表示に失敗した場合。例えば、 <code>src</code> 属性の中のパスをわざと正しくないものに変更してみてください。ページを保存したり再読み込みしたりすると、画像の場所に下記のようなものが表示されるでしょう。</li>
 </ol>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p>
+<p><img alt="" src="alt-text-example.png" style="display: block; margin: 0px auto;"></p>
 
-<p><code>alt</code> 属性の内容は「説明する文」であるということが重要です。代替文は画像が伝えたいことをうまく言い表しているべきです。上の「My test image」はあまり良い例ではありません。 Firefox のロゴの代替文字列として適切なのは、「地球を囲む燃えるような狐の Firefox ロゴ」というようなものです。</p>
+<p>alt テキストのキーワードは「説明文」です。 alt テキストは、その画像が何を伝えているのかを読者が十分に理解できるような情報を提供する必要があります。この例では、現在のテキストである「My test image」は全く意味がありません。 Firefox のロゴであれば、「Firefox のロゴ: 地球の周りを燃えるような狐が囲んでいる。」の方がずっと良いでしょう。</p>
 
-<p>あなたが用意した画像に良い代替文字列を付けてみましょう。</p>
+<p>画像に良い代替文字列を付けてみましょう。</p>
 
 <div class="note">
-<p>注記: アクセシビリティについて詳しくは <a href="/docs/Web/Accessibility">MDN のアクセシビリティのページ</a>を参照してください。</p>
+<p>アクセシビリティについて詳しくは <a href="/ja/docs/Learn/Accessibility">MDN のアクセシビリティのページ</a>を参照してください。</p>
 </div>
 
-<h2 id="Marking_up_text" name="Marking_up_text">テキストのマークアップ</h2>
+<h2 id="Marking_up_text">テキストのマークアップ</h2>
 
-<p>この章では、文字列をマークアップするために使用する基本的な HTML 要素をいくつか見ていきます。</p>
+<p>この節では、文字列をマークアップするために使用する基本的な HTML 要素をいくつか見ていきます。</p>
 
-<h3 id="Headings" name="Headings">見出し</h3>
+<h3 id="Headings">見出し</h3>
 
-<p>見出し要素は文書中の見出し、小見出しを指定することができるものです。通常の書籍でも主題、章題、副題があります。 HTML でも同じことが出来ます。 HTML では {{htmlelement("h1")}} から {{htmlelement("h6")}} の 6段階の見出しが用意されていますが、よく使うのはせいぜい 3 つから 4 つほどでしょう。</p>
+<p>見出し要素により、コンテンツの特定の部分を見出し、または小見出しとして指定することができます。本にメインタイトル、章立て、サブタイトルがあるように、 HTML 文書にも見出しがあります。 HTML には {{htmlelement("h1")}} から {{htmlelement("h6")}} の 6 段階の見出しがありますが、よく使うのはせいぜい 3 から 4 まででしょう。</p>
 
-<pre class="brush: html notranslate">&lt;h1&gt;My main title&lt;/h1&gt;
-&lt;h2&gt;My top level heading&lt;/h2&gt;
-&lt;h3&gt;My subheading&lt;/h3&gt;
-&lt;h4&gt;My sub-subheading&lt;/h4&gt;</pre>
+<pre class="brush: html">&lt;h1&gt;メインタイトル&lt;/h1&gt;
+&lt;h2&gt;最上位の見出し&lt;/h2&gt;
+&lt;h3&gt;小見出し&lt;/h3&gt;
+&lt;h4&gt;孫見出し&lt;/h4&gt;</pre>
 
 <p>それでは、あなたの HTML の {{htmlelement("img")}} 要素の上に適切なタイトルを付けてみましょう。</p>
 
 <div class="note">
-<p><strong>メモ</strong>: 見出しレベル1には暗黙のスタイルがあることがわかります。テキストを大きくしたり太字にしたりするために見出し要素を使用しないでください。これらは<a href="/ja/docs/Learn/Accessibility/HTML#Text_content">アクセシビリティ</a>や <a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure">SEO などのその他の理由</a>で使用されます。レベルをスキップせずに、ページ上に意味のある一連の見出しを作成してください。</p>
+<p><strong>注</strong>: 見出しレベル 1 には、暗黙のスタイルがあることがわかりますね。テキストを大きくしたり、太くしたりするために見出し要素を使用しないでください。見出し要素は<a href="/ja/docs/Learn/Accessibility/HTML#text_content">アクセシビリティ</a>や  <a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#why_do_we_need_structure">SEO などの理由</a>で使用されているからです。レベルを飛ばすことなく、意味のある見出しの並びをページ上に作るようにしてください。</p>
 </div>
 
-<h3 id="Paragraphs" name="Paragraphs">段落</h3>
+<h3 id="Paragraphs">段落</h3>
 
-<p>先に説明したように、 {{htmlelement("p")}} 要素は段落を示しています。通常の文章を書く時にはこの要素を頻繁に使うことになるでしょう。</p>
+<p>先に説明したように、 {{htmlelement("p")}} 要素は段落を示しています。通常の文章を書くときにはこの要素を頻繁に使うことになるでしょう。</p>
 
-<pre class="brush: html notranslate">&lt;p&gt;This is a single paragraph&lt;/p&gt;</pre>
+<pre class="brush: html">&lt;p&gt;これは単独の段落です&lt;/p&gt;</pre>
 
-<p>試しに {{htmlelement("img")}} 要素のすぐ下にいくつか段落を作り、文章を書いてみましょう。(文章は <em><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトはどんな見た目にしたいですか？</a></em>から持ってきても良いです。)</p>
+<p>サンプルテキストを (「<a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">ウェブサイトをどんな外見にするか</a>」から持ってきてください) 1 つまたは複数の段落に入れ、 {{htmlelement("img")}} 要素のすぐ下に配置してください。</p>
 
-<h3 id="Lists" name="Lists">リスト</h3>
+<h3 id="Lists">リスト</h3>
 
-<p>多くの Web のコンテンツはリストで出来ており、 HTML にはリストを表すための特別な要素が用意されています。リストは最低 2 つの要素を組み合わせて生成します。主要なリスト形式として番号付きリストと番号なしリストがあります。</p>
+<p>ウェブのコンテンツの多くはリストであり、 HTML にはリストのための特別な要素があります。リストのマークアップは、常に 2 つ以上の要素で構成されています。最も一般的なリストの種類は、順序付きリストと順序なしリストです。</p>
 
 <ol>
- <li><strong>番号なしリスト</strong>は、お買い物リストのようにアイテムの順番が特に関係ない時に使います。番号なしリストは {{htmlelement("ul")}} 要素で囲みます。</li>
- <li><strong>番号付きリスト</strong>は料理のレシピのようにアイテムの順番が関係ある時に使います。番号付きリストは {{htmlelement("ol")}} 要素で囲みます。</li>
+ <li><strong>順序なしリスト</strong>は、お買い物リストのようにアイテムの順番が特に関係ない時に使います。順序なしリストは {{htmlelement("ul")}} 要素で囲みます。</li>
+ <li><strong>順序付きリスト</strong>は料理のレシピのようにアイテムの順番が関係ある時に使います。順序付きリストは {{htmlelement("ol")}} 要素で囲みます。</li>
 </ol>
 
 <p>リストの中に入るそれぞれのアイテムは {{htmlelement("li")}} (list item) 要素の中に書きます。</p>
 
 <p>例えば、次の段落の一部をリストにしたい場合、</p>
 
-<pre class="brush: html notranslate">&lt;p&gt;At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... &lt;/p&gt;</pre>
+<pre class="brush: html">&lt;p&gt;At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... &lt;/p&gt;</pre>
 
 <p>以下のようにマークアップします。</p>
 
-<pre class="brush: html notranslate">&lt;p&gt;At Mozilla, we’re a global community of&lt;/p&gt;
+<pre class="brush: html">&lt;p&gt;At Mozilla, we’re a global community of&lt;/p&gt;
 
 &lt;ul&gt;
   &lt;li&gt;technologists&lt;/li&gt;
@@ -186,22 +189,22 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics
 
 &lt;p&gt;working together ... &lt;/p&gt;</pre>
 
-<p>あなたのページに番号付きリストと番号なしリストを追加してみましょう。</p>
+<p>ページに番号付きリストと番号なしリストを追加してみましょう。</p>
 
-<h2 id="Links" name="Links">リンク</h2>
+<h2 id="Links">リンク</h2>
 
-<p>リンクはとても重要です ―― これが Web をひとつの Web にします。リンクを追加するには、シンプルな要素 {{htmlelement("a")}} を使えばよいです。 <code>a</code> は "anchor" を省略したものです。段落中の文字をリンクにするには次の手順で行います。</p>
+<p>リンクはとても重要です — これがウェブをウェブたらしめているものです。リンクを追加するには、シンプルな要素 {{htmlelement("a")}} を使う必要があります。 <code>a</code> は "anchor" を省略したものです。段落中の文字をリンクにするには次の手順で行います。</p>
 
 <ol>
  <li>リンクにしたい文字を選びます。今回は "Mozilla Manifesto" を選びました。</li>
  <li>選んだ文字を {{htmlelement("a")}} 要素で囲みます。
-  <pre class="brush: html notranslate">&lt;a&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+  <pre class="brush: html">&lt;a&gt;Mozilla Manifesto&lt;/a&gt;</pre>
  </li>
  <li>このように {{htmlelement("a")}} 要素に <code>href</code> 属性を追加します。
-  <pre class="brush: html notranslate">&lt;a href=""&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+  <pre class="brush: html">&lt;a href=""&gt;Mozilla Manifesto&lt;/a&gt;</pre>
  </li>
- <li>このリンクがリンクしたい Web アドレスをこの属性の値に書き込みます。
-  <pre class="brush: html notranslate">&lt;a href="https://www.mozilla.org/en-US/about/manifesto/"&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ <li>このリンクのリンク先になるウェブアドレスを、この属性の値に書き込みます。
+  <pre class="brush: html">&lt;a href="https://www.mozilla.org/en-US/about/manifesto/"&gt;Mozilla Manifesto&lt;/a&gt;</pre>
  </li>
 </ol>
 
@@ -213,11 +216,11 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics
 
 <p>もしまだやってないのなら、ページにリンクを追加してみましょう。</p>
 
-<h2 id="Conclusion" name="Conclusion">まとめ</h2>
+<h2 id="Conclusion">まとめ</h2>
 
-<p>ここまでの説明に沿ってやってきたのなら、下のようなページが出来上がっているはずです (<a href="http://mdn.github.io/beginner-html-site/">ここ</a>でも見られます)。<br>
+<p>ここまでの説明に沿ってやってきたのなら、以下下のようなページができあがっているはずです (<a href="https://mdn.github.io/beginner-html-site/">ここ</a>でも見られます)。<br>
  <br>
- <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p>
+ <img alt="ウェブページのスクリーンショットで、 firefox のロゴ、「mozilla is cool」という見出し、そして 2 段落のテキストが表示されています。" src="finished-test-page-small.png" style="display: block; margin: 0px auto;"></p>
 
 <p>もし途中で行き詰まってしまったなら、 GitHub にある<a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">完成版のコード例</a>と見比べてみてください。</p>
 
@@ -225,15 +228,15 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics
 
 <p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p>
 
-<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+<h2 id="In_this_module">このモジュール</h2>
 
 <ul>
- <li id="Installing_basic_software"><a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li>
- <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどんな外見にするか</a></li>
+ <li id="Installing_basic_software"><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li>
+ <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">ウェブサイトをどんな外見にするか</a></li>
  <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li>
  <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li>
  <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li>
  <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li>
- <li id="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B">Web サイトの公開</a></li>
- <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></li>
+ <li id="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website">ウェブサイトの公開</a></li>
+ <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">ウェブのしくみ</a></li>
 </ul>