HTMLとは何か
このトピックを終えると
HTMLが何であるかを説明でき、タグを使って簡単なウェブページを自分で作成できるようになります。
ウェブページはドキュメントである
ブラウザに表示されるすべてのウェブページは、実際には1つのドキュメントです。このドキュメントを作成する言語がHTML（HyperText Markup Language）です。
「プログラミング言語」ではありません。HTMLはマークアップ言語であり、コンテンツの構造と意味を示す言語です。「これは見出しです」、「これは段落です」、「これはリンクです」とブラウザに伝えます。
html
<!DOCTYPE html>
<html>
<head>
<title>私の最初のページ</title>
</head>
<body>
<h1>こんにちは</h1>
<p>これはHTMLで作成されたウェブページです。</p>
</body>
</html>このファイルをindex.htmlとして保存し、ブラウザで開くと、見出しと段落が表示されます。サーバーは必要ありません。
タグの原理
HTMLの核心はタグです。角括弧(< >)で囲んで、コンテンツの意味を指定します。
html
<!-- 見出しタグ：h1（最大）～h6（最小） -->
<h1>大きな見出し</h1>
<h2>中間の見出し</h2>
<!-- 段落タグ -->
<p>ここは1つの段落です。</p>
<!-- リンクタグ：href属性にURL -->
<a href="https://google.com">Googleに移動</a>
<!-- 画像タグ：閉じタグなし（セルフクローズ） -->
<img src="photo.jpg" alt="写真の説明">
<!-- リストタグ -->
<ul>
<li>項目1</li>
<li>項目2</li>
</ul>ほとんどのタグは、開始タグ + コンテンツ + 閉じタグで構成されます。<p>コンテンツ</p>のようになります。<img>のように、閉じタグがないものもあります。
構造を覚えておきましょう
すべてのHTMLドキュメントは、同じ骨格を持っています。
html
<!DOCTYPE html> <!-- 「これはHTML5ドキュメントです」宣言 -->
<html> <!-- ドキュメント全体を囲むルート -->
<head> <!-- 見えない情報（タイトル、設定） -->
<title>タブのタイトル</title>
</head>
<body> <!-- 画面に表示されるすべてのコンテンツ -->
<h1>本文開始</h1>
</body>
</html><head>には、ブラウザのタブタイトル、文字エンコーディング、CSSのリンクなどのメタ情報が入り、<body>にはユーザーが実際に見るコンテンツが入ります。この構造は、どのウェブサイトでも同じです。
→ バイオに適用：DevBench — HTML・CSS基礎