HTML講座 / HTMLとは何か、Webページでの役割を理解する

HTML（HyperText Markup Language）は、Webページの見出し、段落、リンクなどの意味と構造を記述するマークアップ言語です。CSSは主に見た目を整え、JavaScriptは操作に応じた動作などを担当します。まずは、内容の役割に合うHTML要素を選ぶことから始めます。

HTMLは何を表す言語か

同じ文字列でも、ページの題名、説明の段落、別ページへのリンクでは役割が違います。HTMLはタグを使って、その違いをブラウザーや支援技術に伝えます。計算や条件分岐を主な目的とする言語ではなく、文書の内容を整理し、相互に関連付けるための言語です。

要素の意味を確認するときは、WHATWGのHTML標準の導入を参照できます。見た目が似ているだけで別の要素を代用せず、内容の役割から選びます。

Webページの構造を作る

見出しにはh1〜h6、段落にはp、リストにはulやolを使います。さらに、主要なナビゲーションや本文の領域、入力フォームも表現できます。ブラウザーに文字を表示できるだけでなく、どこが見出しで、どこから本文が始まるかを明確にすることが大切です。

タグをファイルのどこに置くかは、HTML文書の基本構造で確認できます。構造を理解してから色や余白を加えると、表示上の問題とHTMLの問題を切り分けやすくなります。

HTML・CSS・JavaScriptの違い

これは学習の出発点となる分類です。HTMLにも標準の開閉操作を持つ要素があり、CSSにも状態に応じた表示やアニメーションがあります。「動くものはすべてJavaScript」と考える必要はありません。

タグと表示結果を対応させる

次の断片では、h1が見出し、pが段落、ulとliが箇条書きを作ります。英語の例文は表示内容なので、自分の文章に置き換えられます。

<h1>Today’s notes</h1>
<p>HTML structures content.</p>
<ul>
  <li>Heading</li>
  <li>Paragraph</li>
</ul>

ブラウザーでは大きな見出し、段落、箇条書きとして表示されます。文字の大きさや間隔はブラウザーの初期スタイルやCSSで変わりますが、各要素の意味は変わりません。

HTMLファイルを保存して試す

プレーンテキストを編集できるエディターとブラウザーを用意します。次のコード全体をコピーし、UTF-8でindex.htmlとして保存して開いてください。必要な基本構造も含まれているため、別のHTMLファイルに入れ子にして貼り付ける必要はありません。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today’s notes</title>
  </head>
  <body>
    <h1>Today’s notes</h1>
    <p>HTML structures content.</p>
    <ul>
      <li>Heading</li>
      <li>Paragraph</li>
    </ul>
  </body>
</html>

headのtitleはタブの題名、bodyのh1はページ内の見出しです。まずtitleだけ変更し、保存して再読み込みします。次にh1、段落の順に変更し、変化する場所を比較したら元に戻します。日本語の例文に変える場合はhtmlのlangもjaにします。タグや属性の読み方はHTMLの基本文法で詳しく学べます。