この章では、HTML の基本的な書き方について説明します。まずは、HTML の基本構造と、よく使うタグについて学びましょう。
1. HTML の基本構造を理解しよう
HTML は、タグと呼ばれる < と > で囲まれた記号を使って、ウェブページの構造を記述していきます。まずは、HTML の基本的な構造を見てみましょう。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初めての HTML</title>
</head>
<body>
<h1>こんにちは、世界！</h1>
<p>これは私の最初のウェブページです。</p>
</body>
</html>これが HTML の最も基本的な形です。一つずつ見ていきましょう。
<!DOCTYPE html> って何？
これは、この文書が HTML5 で書かれていることを宣言するためのものです。HTML にはいくつかのバージョンがあり、<!DOCTYPE html> と書くことで、最新のバージョンである HTML5 を使うことを宣言しています。必ず HTML 文書の最初に書く必要があります。
<html>, <head>, <body> の役割
<html>：これは、HTML 文書の始まりと終わりを示すタグです。すべての HTML タグは、この<html>タグの中に書く必要があります。lang="ja"はこの HTML が日本語で書かれていることを示しています。検索エンジンがそのサイトを理解する一助になりますので、この属性は必ず書きましょう。<head>：ここには、ウェブページのタイトルや説明、文字コードなど、ウェブページ自体に関する情報を書きます。この部分に書かれた内容は、ブラウザの画面には直接表示されません。<body>：ここには、実際にブラウザに表示される内容を書きます。見出し、段落、画像、リンクなど、ウェブページに表示したいものはすべてこの<body>タグの中に書きます。
<meta> タグで文字化け対策！
<head> タグの中にある <meta charset="UTF-8"> は、この HTML 文書の文字コードが UTF-8 であることを指定しています。文字コードとは、コンピュータが文字をどのように扱うかを決めるルールのようなものです。
UTF-8 は世界中のほとんどの言語を扱うことができる文字コードで、これを使うことで文字化けを防ぐことができます。特に理由がない限り、UTF-8 を指定しておけば問題ありません。
<meta name="viewport"...は、スマートフォンなどの画面の小さな端末でウェブサイトを最適に表示させるためのおまじないです。width=device-widthで、画面の幅とウェブサイトの幅を一致させます。initial-scale=1.0は、初期の拡大率を100%にするための指定です。
<title> タグでタイトル設定
<title>タグは、ブラウザのタブに表示される部分です。
2. よく使うタグを覚えよう
HTML にはたくさんのタグがありますが、ここではよく使う基本的なタグを紹介します。
見出し (<h1> ～ <h6>)
見出しは、ウェブページのタイトルやセクションの見出しを表すタグです。<h1> が最も大きな見出しで、数字が大きくなるにつれて、見出しのレベルが下がり、文字が小さくなります。
html
<h1>これは最も大きな見出しです</h1>
<h2>これは2番目に大きな見出しです</h2>
<h3>これは3番目に大きな見出しです</h3>
<h4>これは4番目に大きな見出しです</h4>
<h5>これは5番目に大きな見出しです</h5>
<h6>これは最も小さな見出しです</h6>見出しは、ウェブページの構造を明確にするために重要な役割を果たします。適切な見出しを使うことで、ユーザーにとっても、検索エンジンにとっても、理解しやすいウェブページになります。
段落 (<p>)
段落は、文章のまとまりを表すタグです。
html
<p>これは段落です。ここに文章を書きます。</p>
<p>これも別の段落です。段落を分けることで、文章が読みやすくなります。</p><p> タグで囲まれた部分は、前後に改行が入ります。
改行 (<br>)
改行は、文章の途中で改行したいときに使うタグです。
html
<p>この文章の途中で<br>改行します。</p><br> タグは、終了タグが不要な空要素と呼ばれるタグの一つです。
リンク (<a>)
リンクは、他のウェブページや、同じページ内の別の場所に移動するためのタグです。
html
<a href="https://www.google.com/">Google へ移動</a>href 属性に移動先の URL を指定します。
新しいタブで開くには？
リンクをクリックしたときに、新しいタブで開きたい場合は、target="_blank" 属性を追加します。
html
<a href="https://www.google.com/" target="_blank">Google へ移動（新しいタブで開く）</a>画像 (<img>)
画像は、ウェブページに画像を表示するためのタグです。
html
<img src="images/logo.png" alt="ロゴ画像">src 属性に画像ファイルのパスを指定します。
alt 属性は超重要！
alt 属性は、画像が表示されない場合に代わりに表示されるテキストを指定します。また、スクリーンリーダーなどの音声読み上げソフトを使うユーザーにも、画像の内容を伝えることができます。
alt 属性は、アクセシビリティの観点から非常に重要です。必ず適切なテキストを設定するようにしましょう。
リスト (<ul>, <ol>, <li>)
リストは、箇条書きを表示するためのタグです。
<ul>：順序のないリスト（番号なしリスト）<ol>：順序のあるリスト（番号付きリスト）<li>：リストの項目
html
<ul>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
</ul>
<ol>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
</ol>強調 (<strong>, <em>)
<strong>：特に強調したい部分に使います。一般的に、太字で表示されます。<em>：文脈上、強調したい部分に使います。一般的に、斜体で表示されます。
html
<p>これは<strong>とても</strong>重要なことです。</p>
<p>私は<em>強く</em>そう思います。</p>テーブル (<table>, <tr>, <th>, <td>)
テーブルは、表を作成するためのタグです。
<table>：表全体を囲むタグ<tr>：表の行 (row) を表すタグ<th>：表の見出しセル (table header) を表すタグ<td>：表のデータセル (table data) を表すタグ
html
<table>
<tr>
<th>名前</th>
<th>年齢</th>
<th>出身地</th>
</tr>
<tr>
<td>山田太郎</td>
<td>30歳</td>
<td>東京</td>
</tr>
<tr>
<td>佐藤花子</td>
<td>25歳</td>
<td>大阪</td>
</tr>
</table>