HTML入門(ゼロからの基本)

HTMLは、Webページの見出し・文章・画像・リンクといった「中身」をタグで組み立てるための言語です。ブラウザがHTMLを読み取り、私たちが見るページとして表示します。

HTMLとは(Webページを作る言語)

HTMLは、Webページの構造を作るマークアップ言語です。マークアップ言語とは、文章に「ここが見出し」「ここが段落」といった目印(タグ)を付けて意味を示す言語のことです。

名前はHyperText Markup Languageの略で、ブラウザに表示されるWebページはHTMLで記述されています。仕様はHTML Living Standardとして公開されています。

入門の段階で押さえることは「HTMLは中身と構造の担当」という1点です。見た目の装飾はCSS、動きはJavaScriptと、Webページは3つの言語が役割分担しています。

HTMLの基本 - タグと要素の仕組み

HTMLは、タグで文章を挟んで意味を与えます。基本の形は「開始タグ+内容+終了タグ」の3点セットです。

タグ・要素・属性とは

タグは<p>のように山かっこで囲んだ目印で、<p>が開始タグ、</p>が終了タグです。開始タグから終了タグまでのひとまとまりを要素と呼びます。

属性は、開始タグの中に書く追加情報です。たとえばリンクを作る<a href="URL">では、href属性がリンク先の場所を指定しています。

最小のHTMLの例(コピペ)

以下は、そのままブラウザで表示できる最小構成のHTMLです。テキストエディタに貼り付けて「index.html」の名前で保存し、ダブルクリックで開くと表示を確認できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのHTML</title>
</head>
<body>
  <h1>はじめてのWebページ</h1>
  <p>HTMLで作った最初の段落です。</p>
</body>
</html>

1行目の<!DOCTYPE html>は「この文書はHTML」という宣言です。<head>にはページの設定を、<body>には画面に表示される中身を書きます。

HTMLの基礎知識 - HTML5とCSSの関係

HTML5は、HTMLの5番目のバージョンとして広まった呼び名です。現在の仕様はバージョン番号を持たない「HTML Living Standard」としてWHATWGが更新し続けており、HTML5は歴史的な呼び名になっています。書き方そのものは変わらないため、HTML5向けの教材も基礎学習にはそのまま使えます。

CSSは、HTMLで作った構造に色・サイズ・配置などの見た目を与える言語です。HTMLが「何が書いてあるか」、CSSが「どう見せるか」を分担するため、2つはセットで学びます。

学習の順番もこの分担どおりで、先にHTMLでページの骨組みを作れるようになり、その後CSSで装飾する流れが定番です。CSSとの組み合わせ方は「HTMLとCSSの基本と使い方」のページで扱っています。