HTMLとは？ホームページの基本

そもそもHTMLとは？

HTMLは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略です。日本語にすると「ハイパーテキスト（リンクでつながる文章）に印をつける言語」。文章のどの部分が見出しで、どこが段落で、どこがリンクなのかを、ブラウザに教えるための仕組みです。

1991年にティム・バーナーズ＝リーが発明し、Webの誕生と一緒に広まりました。30年以上たったいまも、世界中のWebページの土台はHTMLです。

仕組み：タグで「ここは○○です」と印をつける

HTMLは、文章を <h1> や <p> といった「タグ」で囲むことで、その部分が何なのかを示します。タグは開きタグと閉じタグのペアで使い、ブラウザはタグを見て自動的にレイアウトを組み立てます。

HTMLは見た目より「意味」を書く

HTMLを書くときは、文字を大きくしたいから <h1> を使う、という考え方だけだと少し危険です。<h1> はページの主題、<h2> は大きな区切り、<p> は段落、<ul> は箇条書きというように、文章の意味を示す役割があります。見た目の色や余白はCSSで調整します。意味が整理されたHTMLは、検索エンジンや音声読み上げソフトにも伝わりやすく、あとからデザインを変えるときにも扱いやすくなります。

よく使うHTMLタグ8つ

HTMLには100種類以上のタグがありますが、最初に覚えるべきものは8つだけです。下の8タグだけで、自己紹介ページやブログ風サイトはひと通り作れます。

最小サンプル：自己紹介ページ

HTMLファイルは、メモ帳でも書けます。下のコードをコピペして「mypage.html」という名前で保存し、ダブルクリックでブラウザで開いてみてください。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>マイページ</title>
</head>
<body>
  <h1>こんにちは、ゆうきです</h1>
  <p>趣味はサッカーとプログラミングです。</p>
  <ul>
    <li>数学</li>
    <li>英語</li>
  </ul>
</body>
</html>

表示されないときの確認

最初のHTMLでうまく表示されないときは、コードの内容より先にファイル名と保存場所を確認します。拡張子が .txt のままだとブラウザでHTMLとして開けません。Windowsなら「ファイル名拡張子」を表示し、mypage.html になっているか見ます。次に、タグの閉じ忘れ、半角の山かっこ、文字コードがUTF-8になっているかを確認します。エラーを探す練習も、Web制作の大事な一部です。

気をつけたい落とし穴

将来どう役立つ？

HTMLが書けると、自分のポートフォリオサイトや部活動の紹介ページを作る土台になります。さらに、HTMLが読めるとブラウザの開発者ツールでページの構造を確認できるので、Webの裏側を具体的に見られます。デザイナー、ライター、マーケター、エンジニアのどの仕事でも、ページの構造を理解していると会話がしやすくなります。

今日からできること

まとめ