HTML要素の使用方法と理解方法
HTMLドキュメントは、HTML要素で構成されています。 ほとんどのHTML要素には、コンテンツ（テキストや画像など）と、コンテンツの解釈方法（見出しや段落テキストなど）をブラウザに指示するHTMLタグが含まれています。 HTML要素を使用して、HTMLドキュメントのさまざまな部分に構造、セマンティクス、およびフォーマットを追加できます。 HTML要素は、コンテンツの一部をラップするHTMLタグを開いたり閉じたりすることによって作成されることがよくありますが、常にそうとは限りません。
以下は、HTML要素の各部分にラベルを付ける図です。
実際にHTMLを調べてみましょう。 HTMLプロジェクトの設定で作成した「index.html」ファイルに次の行を貼り付けてみてください。
<strong>My strong text</strong>
この例では、<strong>タグは、テキストを開始タグと終了タグのペアで囲むことにより、強力なフォーマットを追加します。 終了タグは常にスラッシュ（/）で示されることに注意してください。
注：<strong>タグは、テキストに太字スタイルを追加するのと非常によく似ています。 太字の<b>タグを使用しても同じスタイリング効果を実現できますが、<strong>タグは、テキストが非常に重要であることを示す太字のスタイリングおよびの意味を追加します。 がテキストの重要性に注意したいため、太字のスタイルを使用している場合は、必ず<strong>タグを使用してください。これにより、スクリーンリーダーがユーザーに重要性を通知できるようになります。
同様に、強調タグ<em>は、テキストが強調されていることを示すイタリックスタイルおよびの意味を追加します。 イタリックタグ<i>は、テキストにイタリックスタイルを追加するだけです。 イタリックスタイルを使用している場合なぜならテキストを強調したい場合は、必ず<em>タグ。スクリーンリーダーがユーザーに強調を通知できるようにします。<$>
このHTMLコードの結果を確認するために、ブラウザに「index.html」ファイルをロードできます。 ファイルはオンラインではありませんが、ブラウザはHTMLファイルをWebページドキュメントであるかのように解釈できます。 保存された更新のみがレンダリングされるため、ブラウザにロードする前に必ず「index.html」ファイルを保存してください。
ブラウザでオフラインHTMLファイルを表示する方法
ブラウザでオフラインHTMLファイルを表示するには、次の方法があります。
- ファイルをブラウザにドラッグアンドドロップします
CTRL + Left Click（Macの場合）またはRight Click（Windowsの場合）ブラウザでファイルを開く- ファイルのフルパスをコピーして、ブラウザバーに貼り付けます
Visual Studio Codeテキストエディターを使用している場合は、左側のファイル「index.html」でCTRL + Left Click（Macの場合）またはRight Click（Windowsの場合）を使用してファイルパスをコピーできます。ハンドパネルで「コピーパス」を選択します。 次に、下のgifに示すように、Webブラウザにパスを貼り付けます。
<$>[注] ノート ：ブラウザにファイルをロードするには、ファイルをコピーすることが重要です絶対パス 、（ルートディレクトリからの相対的なファイルの場所を参照）ではなく、 相対パス 、（現在の作業ディレクトリに関連するファイルを参照します）。 Visual Studio Codeでは、「コピーパス」は完全なファイルパスを指します。 ただし、このチュートリアルの他の部分では、ファイルの相対パスを使用することに注意してください。
ブラウザにファイルをロードすると、次のページが表示されます。
私の強いテキスト
他のHTML要素を試してみましょう。 「practice.html」ファイルの次の行で、<em>要素を追加してみてください。これにより強調が追加されます。
<strong>My strong text</strong>
<em>My emphasized text</em>
ファイルを保存し、ブラウザでファイルをリロードします。 次のようなものを受け取るはずです。
私の強いテキスト 私の強調したテキスト
最初のフレーズは強力なフォーマットでスタイル設定し、2番目のフレーズは強調してスタイル設定する必要があります。 ただし、2つのフレーズを並べて配置すると驚かれるかもしれません。 テキストエディタの2行目に<em>My emphasized text</em>を追加した場合、「強調されたテキスト」が「私の強いテキスト」の下の行に表示されることを期待していたかもしれません。 」をWebブラウザで表示します。 ただし、<strong>や<em>などの特定のHTML要素では、追加のHTML要素で改行を指定する必要があります（改行が必要な場合）。 次のチュートリアルでその理由を説明します。
