先生と生徒の会話形式で理解しよう

生徒

「先生、Webページってどうやって作られているんですか？」

先生

「WebページはHTMLという言語で作られています。読み方はHTML（エイチティーエムエル）です。」

生徒

「えーエイチティーエムエル？それって何語なんですか？」

先生

「では、HTMLの意味や仕組み、使い方を初心者でもわかりやすく見ていきましょう！」

1. HTMLとは？意味と読み方

HTMLは、HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、読み方はHTML（エイチティーエムエル）です。日本語では『超文章構造記述言語』と訳されることもあります。

Webページの骨組みを作るための言葉で、文字や画像、リンクなどをブラウザに伝える役割があります。

2. HTMLの役割と用途

HTMLは次のような役割があります：

こうした仕組みで、文章をわかりやすく構成し、画像や別のページへのリンクを貼れるようになります。

HTMLは「タグ」で構成されます。タグは“<タグ名>…</タグ名>”のような形で、開始タグと終了タグで囲みます。たとえば、<p>こんにちは</p>のように。

タグは命令みたいなもので、「これは見出しですよ」「これは画像ですよ」とブラウザに教えています。

HTML文書は次のような構造を持ちます：

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>ページタイトル</title>
  </head>
  <body>
    コンテンツ
  </body>
</html>

このテンプレートが基本形で、すべてのHTMLファイルはこれに沿って作られます。

HTMLは構造を作り、CSS（シーエスエス）は見た目を整え、JavaScript（ジャバスクリプト）は動きを追加します。三者が揃うことで、見た目がきれいで使いやすいWebページになります。

HTMLは長年進化しており、現在主に使われているのはHTML5です。HTML5は音声や動画の埋め込み、アニメーション対応など多彩な機能が追加されています。

古いHTML（HTML4）に比べて、今のブラウザはHTML5に対応しており、よりリッチなWeb体験が可能です。

検索エンジン最適化（SEO）では、見出しタグの使い方や適切なキーワード配置が重要です。<title>や<h1>にターゲットキーワードを入れることで、検索にヒットしやすくなります。

画像表示には<img src="…" alt="説明文">のようにalt属性を入れましょう。alt属性は視覚に障がいのある人への説明になり、SEOやアクセシビリティ改善にも役立ちます。

HTMLはメモ帳でも書けるので、初心者もすぐに学べます。ブログ作成、ポートフォリオサイト、企業サイトなど、あらゆるWeb制作に活用できます。

基本から学べば、Webページを自分で作る楽しさも味わえます！