HTML（エイチティーエムエル）とは？初心者向けにわかりやすく解説

HTML

初級

読み方：エイチティーエムエル｜英語：HTML

HyperText Markup Language の略で、ウェブページの内容と構造を作る言語だよ。

やさしい説明

HTML（エイチティーエムエル）とは、ウェブページの内容と構造を作る言語です。正式名称は HyperText Markup Language です。

YouTube のトップページも、学校のホームページも、すべて HTML で作られています。HTML は「文章にラベルを貼る」作業に似ています。

「これは見出しだよ」「これは段落だよ」「これはリンクだよ」と、文章の各部分にタグというラベルを貼っていきます。

図解：HTML・CSS・JavaScript の役割

具体例・使い方

HTML はタグで内容を囲んで書きます。

<h1>私の自己紹介</h1>
<p>名前は田中です。趣味はゲームです。</p>
<a href="https://example.com">好きなサイト</a>
<img src="photo.jpg" alt="プロフィール写真" />

<h1> — いちばん大きい見出し
<p> — 段落（テキストのまとまり）
<a> — リンク（href属性でURLを指定）
<img> — 画像（src属性で画像ファイルを指定）

よく使うHTMLタグ一覧

<h1>〜<h6> — 見出し。h1が最大、h6が最小
<p> — 段落。本文テキストに使う
<a> — リンク。href="URL" で遷移先を指定
<img> — 画像。src と alt を必ず書く
<ul> / <ol> — 箇条書き（順不同/順序付き）リスト
<div> — ブロックレベルのグループ化。CSSと組み合わせてレイアウトに使う
<span> — インラインのグループ化。テキストの一部にスタイルを当てるとき
<button> — ボタン。JavaScriptのクリック処理と組み合わせる

HTMLの基本構造

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>ページのタイトル</title>
  </head>
  <body>
    <h1>こんにちは</h1>
    <p>ページの内容をここに書く</p>
  </body>
</html>

<!DOCTYPE html> — HTML5であることを宣言
<head> — ブラウザに伝える設定（タイトル・文字コードなど）
<body> — 実際にページに表示される内容

よくある疑問

Q: HTML はプログラミング言語なの？

A: 厳密には「マークアップ言語」ですが、ウェブ開発の出発点として「プログラミングの一部」と考えて問題ありません。

Q: HTML だけでウェブサイトは作れる？

A: 内容と構造は作れますが、デザインは CSS、動きは JavaScript が必要です。3つセットで学ぶのが効率的です。

いつ使う？

Webページを作るときは必ずHTMLを使います。自己紹介ページ、ブログ、ゲームの画面、学校の文化祭サイト——インターネットで見るページはすべてHTMLがベースです。

間違いやすいポイント

❌ タグの閉じ忘れ

初心者が最もハマるミスです。<div> を開いたら必ず </div> で閉じましょう。VS Code なら自動で閉じタグを補完してくれます。

❌ HTMLとCSSを混同する

HTMLは「内容と構造」、CSSは「見た目」です。文字の色を変えたいときはHTMLではなくCSSで指定します。style="color: red" をHTMLに直接書くのは避けましょう。