HTMLとは？初心者にもわかるWebページの仕組みと基本構造

html

「ホームページを作りたい」「ブログのデザインをカスタマイズしたい」そんなとき必ず出てくるのが HTML という言葉です。

でも、「HTMLってそもそも何？」「プログラミング言語なの？」「どんなことができるの？」と疑問に思う方も多いでしょう。

この記事では、HTMLとは何か、どういう役割があるのか、基本の書き方まで、初心者の方でもわかるようにやさしく解説します。

スポンサーリンク

HTMLとは何か？

HTMLの正式名称と意味

正式名称

HTML は「Hyper Text Markup Language（ハイパーテキスト マークアップ ランゲージ）」の略です。

言葉の意味を分解してみよう

Hyper Text（ハイパーテキスト）

  • 普通のテキストを超えた（Hyper）テキスト
  • リンクで他のページとつながっているテキスト
  • クリックするだけで別のページに移動できる

Markup（マークアップ）

  • 文章に印やしるしをつけること
  • 「ここは見出し」「ここは段落」など意味を示すこと
  • まるで文章に付箋を貼るようなイメージ

Language（言語）

  • コンピューターとやり取りするためのルール
  • 決められた書き方に従って書く約束事

簡単に言うと

HTMLとは Webページの文章や構造を決めるためのルール のことです。まるで文章の設計図のようなものです。

HTMLの歴史と発展

HTMLの誕生

1990年代初頭

  • インターネットの普及とともに誕生
  • 最初は簡単な文書を共有するために作られた
  • 研究者同士が情報を交換する手段として開発

現在のHTML5

HTML5の特徴

  • 2014年に正式リリース
  • 動画や音声を簡単に埋め込める
  • スマートフォンにも対応
  • より豊かな表現が可能

なぜHTMLが重要なの？

Web の基盤技術

すべてのWebページがHTMLで作られている

  • Google、YouTube、Facebook
  • あなたが見ているこのページも
  • どんなに複雑なサイトでも基本はHTML

学習のメリット

個人でできること

  • 自分のホームページを作れる
  • ブログのカスタマイズができる
  • 企業サイトの仕組みが理解できる

仕事での活用

  • Web制作の基礎知識
  • デジタルマーケティングに役立つ
  • IT業界での基本スキル

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

プログラミング言語との違い

プログラミング言語の特徴

計算や判断ができる

  • JavaScript：「もしボタンが押されたら色を変える」
  • Python：「1から100まで足し算する」
  • Java：「ユーザーがログインしたかどうか判断する」

命令を処理して動きを作る

  • データを保存する
  • 条件によって動作を変える
  • 繰り返し処理を行う

HTMLの特徴

文章に意味をつけるだけ

  • 「ここは見出しです」
  • 「ここは段落です」
  • 「ここはリンクです」

動きや計算はできない

  • ボタンを押しても何も起こらない
  • 足し算や引き算はできない
  • データを保存することもできない

マークアップ言語とは

マークアップの概念

身近な例：新聞や雑誌

  • 大見出し、中見出し、小見出し
  • 本文の段落
  • 写真のキャプション
  • これらの「役割」を示すのがマークアップ

HTMLでのマークアップ

タグで意味を示す

<h1>これは大見出し</h1>
<h2>これは中見出し</h2>
<p>これは本文の段落です。</p>

なぜマークアップが必要なの？

コンピューターは文章の意味がわからない

  • 人間は見た目で「ここが見出し」とわかる
  • コンピューターにははっきり教える必要がある
  • タグで「これは見出しですよ」と伝える

HTMLの基本的な役割

Webページの構造を作る

文書の構造化

紙の文書との比較

  • 紙：見た目で構造を表現（大きな文字、太字など）
  • HTML：タグで構造を表現（<h1>、<strong>など）

HTMLでできる構造化

見出しの階層

<h1>第1章 HTMLの基本</h1>
  <h2>1-1 HTMLとは</h2>
    <h3>HTMLの意味</h3>
    <h3>HTMLの歴史</h3>
  <h2>1-2 HTMLの書き方</h2>

リストの表現

<ul>
  <li>買い物リスト</li>
  <li>牛乳</li>
  <li>パン</li>
  <li>卵</li>
</ul>

リンクによるページ同士の接続

ハイパーリンクの仕組み

リンクの作り方

<a href="https://example.com">他のサイトへのリンク</a>
<a href="page2.html">同じサイト内の別ページ</a>
<a href="#section1">同じページ内の別の場所</a>

なぜリンクが重要なの？

インターネットの網の目構造

  • 世界中のページがリンクでつながっている
  • 情報を素早く移動できる
  • 関連する情報を簡単に参照できる

検索エンジンへの情報提供

SEOとHTMLの関係

検索エンジンがHTMLを読む

  • GoogleやYahooはHTMLの構造を解析
  • 適切なHTMLは検索結果に表示されやすい
  • タイトルタグや見出しタグが特に重要

具体例

<title>おいしいパンの作り方 - 初心者向けレシピ</title>
<h1>初心者でも簡単！おいしいパンの作り方</h1>
<h2>必要な材料</h2>
<h2>作り方の手順</h2>

基本的なHTMLの書き方

HTMLの基本構造

必須の要素

DOCTYPE宣言

<!DOCTYPE html>
  • HTMLのバージョンをブラウザに教える
  • HTML5では <!DOCTYPE html> と書くだけ

html要素

<html lang="ja">
</html>
  • ページ全体を囲む
  • lang="ja" で日本語のページであることを示す

head要素の役割

ページの情報を記述

<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
  <meta name="description" content="ページの説明">
</head>

head内の主要な要素

  • <title>: ブラウザのタブに表示されるタイトル
  • <meta charset="UTF-8">: 文字エンコーディングの指定
  • <meta name="description">: 検索結果に表示される説明文

body要素の役割

実際に表示される内容

<body>
  <h1>ページの見出し</h1>
  <p>本文の内容</p>
</body>

よく使われる基本タグ

見出しタグ

h1からh6まで

<h1>最も重要な見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
<h4>さらに小さな見出し</h4>
<h5>より小さな見出し</h5>
<h6>最も小さな見出し</h6>

段落と改行

段落（p要素）

<p>これは一つの段落です。</p>
<p>これは別の段落です。</p>

改行（br要素）

<p>一行目<br>二行目</p>

リンクタグ

基本的なリンク

<a href="https://example.com">外部サイトへのリンク</a>
<a href="page2.html">同じサイト内のページ</a>
<a href="mailto:test@example.com">メールアドレス</a>
<a href="tel:03-1234-5678">電話番号</a>

画像タグ

画像の表示

<img src="image.jpg" alt="画像の説明">

alt属性の重要性

  • 画像が表示されないときの代替テキスト
  • 視覚障害のある方のためのテキスト
  • SEOでも重要な要素

リストの作り方

順序なしリスト（ul）

買い物リストなど

<ul>
  <li>りんご</li>
  <li>バナナ</li>
  <li>オレンジ</li>
</ul>

順序ありリスト（ol）

手順や順番があるもの

<ol>
  <li>材料を準備する</li>
  <li>野菜を切る</li>
  <li>炒める</li>
  <li>味付けをする</li>
</ol>

HTMLだけでできることとできないこと

HTMLだけでできること

文書の構造化

情報の整理

  • 見出しと本文の区別
  • リストによる項目の整理
  • リンクによる関連付け

基本的な表示

  • テキストの表示
  • 画像の表示
  • リンクの設置

フォームの作成

入力フォームの基本

<form>
  <label for="name">お名前:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">送信</button>
</form>

HTMLだけではできないこと

見た目のデザイン

色や装飾

  • 文字の色を変える
  • 背景色を設定する
  • フォントを変更する
  • レイアウトを調整する

これらにはCSSが必要

動的な機能

ユーザーとのやり取り

  • ボタンを押したときの動作
  • フォームの入力チェック
  • ページ内容の動的変更

これらにはJavaScriptが必要

HTML、CSS、JavaScriptの役割分担

建物にたとえると

HTML: 建物の骨組み

  • どこに部屋があるか
  • どこに窓やドアがあるか
  • 建物の基本構造

CSS: 建物の内装・外装

  • 壁の色や材質
  • 家具の配置
  • 照明やカーテン

JavaScript: 建物の設備

  • 電気やエアコン
  • 自動ドアやエレベーター
  • インターホンやセキュリティ

実際のWebページでの例

ニュースサイトの場合

<!-- HTML: 記事の構造 -->
<article>
  <h1>ニュースのタイトル</h1>
  <p class="date">2024年1月1日</p>
  <p>記事の本文...</p>
  <button id="share-button">シェア</button>
</article>

/* CSS: 見た目の装飾 */
h1 {
  color: #333;
  font-size: 24px;
}
.date {
  color: #666;
  font-size: 14px;
}

// JavaScript: ボタンの動作
document.getElementById('share-button').addEventListener('click', function() {
  alert('シェアしました！');
});

まとめ

HTMLは Webページの構造を決めるためのマークアップ言語 です。

HTMLの特徴

  • プログラミング言語ではなく、文章に意味をつけるためのもの
  • タグを使って文書の構造を表現
  • すべてのWebページの基礎となる技術

HTMLの役割

  • 見出し、段落、リンクなどの文書構造を定義
  • 検索エンジンに情報を提供
  • 他のページとの接続を可能にする

他の技術との関係

  • CSS: 見た目を整える
  • JavaScript: 動きをつける
  • この3つでWebサイトが完成

HTMLの基本を理解すると、ブログやホームページのちょっとしたカスタマイズも自分でできるように

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました