「ホームページって、どうやって作るの？」って思ったことありませんか？
いろんな情報が入ったWebページも、じつはHTMLという言語を使ってできているんです。
タグって聞くと難しそうに感じるけど、ルールを覚えれば小学生でもちゃんと理解できます。
今回は、HTMLの基本的なタグの使い方や構造、そして便利な属性について、やさしくわかりやすく解説します。
HTMLタグのしくみがわかると、自分でWebページを作れたり、どんな仕組みでページができているのかが見えてきます。
これからHTMLを学びたい方にとって役に立つ内容ばかりなので、ぜひ最後まで読んで参考にしてみてください。
HTMLとは？基本的な概要と役割
HTMLの定義と目的
HTMLは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略で、Webページを作るための言語です。
インターネット上の文章や画像、リンクなどの情報を整理して表示するために使います。
パソコンやスマートフォンで見ている多くのWebページは、HTMLを使って作られています。
HTMLの目的をわかりやすくまとめると、以下のようになります。
- Webページの内容（見出し、文章、画像など）を整理して表示する
- リンクを使って他のページへ移動できるようにする
- 検索エンジンに内容を伝える役割を持つ
- ブラウザで正しく表示されるように構造を整える
- 他の言語（CSSやJavaScript）と組み合わせて使える
このように、HTMLはWebページの“土台”となるとても大切な言語です。
誰でも覚えやすく、小学生でも使えるくらいシンプルな構造になっています。
WebページにおけるHTMLの役割
Webページは、大きく分けて3つの要素でできています。
その中でHTMLは、情報の“中身”や“構造”を決める役割を持っています。
つまり、ページの見た目ではなく「何が書いてあるか」「どこに何があるか」を整理する言語です。
わかりやすくHTMLの役割をまとめると、次のようになります。
- 文章や見出しを表示する場所を決める
- 画像や動画などをページ内に入れる
- リンクで他のページへつなげる
- フォームを使って情報を入力させる
- ページ全体の構造を整理してわかりやすくする
つまり、HTMLがなければWebページは文字や画像を正しく並べることができません。
HTMLはページを作るための“設計図”のような存在です。
HTMLの歴史と進化
HTMLは1990年代に登場しました。
最初はとてもシンプルで、見出しや段落、リンクなど限られた機能しかありませんでした。
しかし、インターネットが広がる中で、HTMLもどんどん進化していきました。
ここではHTMLの主な進化の流れを紹介します。
- HTML 1.0：最初に作られたバージョン
- HTML 3.2：表やスクリプト機能が追加
- HTML 4.01：より多機能になり、CSSと連携可能に
- HTML5：動画、音声、キャンバスなど多くの新機能を追加
このように、HTMLは時代に合わせて変化しています。
今使われているHTML5は、今後のWeb開発の中心となるバージョンです。
HTMLと他の言語との違い
HTMLはWebページを「構造化」するための言語です。
他にもWeb制作に使われる言語がありますが、それぞれ役割が異なります。
それぞれの違いを以下にまとめます。
- HTML：ページの内容や構造を作る
- CSS：色や文字サイズ、配置などを見た目で調整
- JavaScript：ボタンを押したときの動きなどを作る
このように、HTMLは“なにがあるか”を決める役割、CSSは“どう見せるか”、JavaScriptは“どう動かすか”を担当しています。
Webページはこの3つを組み合わせて作られます。
HTMLファイルの作成方法
HTMLファイルはとても簡単に作れます。
特別なソフトがなくても、パソコンにあるメモ帳で作れます。
以下は基本的なHTMLの書き方の例です。
まずは下のコードを見てください。
<!DOCTYPE html>
<html>
<head>
<title>サンプルページ</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これはHTMLのサンプルです。
</p>
</body>
</html>
このコードを「sample.html」という名前で保存し、ブラウザで開くとWebページとして表示されます。
HTMLは簡単にスタートできるのが魅力です。
HTMLの使用例と活用場面
HTMLは身近な場所でたくさん使われています。
たとえば、ブログ、企業サイト、学校のページなど、インターネット上にあるほとんどのページでHTMLが使われています。
以下はHTMLが活用されている主な場面です。
- 個人のブログやホームページ
- 会社の紹介サイト
- 学校や教育機関のWebページ
- ショッピングサイトの商品ページ
- 予約や申し込みフォーム
このように、HTMLはさまざまな場所で使われており、Webページを作るなら絶対に欠かせない技術です。
HTMLタグの基本構造を理解する
HTML文書の基本構造
HTML文書には決まった形があります。
この基本の形を知らないと、Webページが正しく表示されなかったり、思った通りに動かなかったりします。
正しい構造を守ることで、誰にでも見やすいページが作れます。
基本的なHTMLの構造を以下にまとめます。
- <!DOCTYPE html>：HTML5であることを示す
- <html>：HTML文書の始まりと終わりを示す
- <head>：タイトルや文字コードなどの情報を入れる場所
- <body>：実際に画面に表示される内容を書く場所
たとえば、以下のようなコードが基本構造になります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>ここに文章が入ります。
</p>
</body>
</html>
これがHTML文書の基本構造で、どんなページでもこの形が土台になります。
主要なHTMLタグの役割
HTMLにはたくさんのタグがありますが、その中でもよく使う「基本タグ」を覚えておくと便利です。
これらのタグを理解することで、Webページの骨組みをしっかり作ることができます。
よく使われる主要タグの役割を紹介します。
- <h1>〜<h6>：見出しを表す
- <p>：段落（文章）を表す
- <a>：リンクを作る
- <img>：画像を表示する
- <div>：ブロックのまとまりを作る
これらのタグは、HTMLの基本としてとても大切です。
使いこなせるようになると、自由にページの構成ができるようになります。
タグのネストと階層構造
HTMLでは、タグの中にタグを入れて使うことがあります。
これを「ネスト（入れ子）」と呼びます。
正しくネストしないと、ページがうまく表示されないことがあるので注意が必要です。
ネストを使うときのポイントをまとめます。
- 外側のタグを先に開いて、最後に閉じる
- 内側のタグは外側の中で完結させる
- 順番を間違えるとエラーになる
たとえば、以下のようなコードは正しいネストの例です。
<p>こんにちは、<strong>世界</strong>！</p>
このように、タグの階層構造を守ることで、正しくきれいに表示されるWebページを作ることができます。
DOCTYPE宣言とその意味
HTML文書の最初に書く <!DOCTYPE html> という行は、「この文書はHTML5で書いてあります」とコンピューターに伝えるものです。
この宣言をしないと、ブラウザが古いルールで表示してしまうことがあります。
DOCTYPE宣言には、昔はいくつか種類がありましたが、今はHTML5を使うのが基本です。
以下にポイントをまとめます。
- <!DOCTYPE html> はHTML5の宣言
- ページの一番上に書く
- HTMLのバージョンを明確にする
たった一行ですが、とても重要な意味を持っているので、HTMLを書くときは必ず最初に入れるようにしましょう。
コメントタグの使い方
HTMLでは、コードの中に「コメント」を書くことができます。
コメントはWebページには表示されませんが、自分や他の人が後から見たときに分かりやすくするために使います。
コメントタグの使い方はとても簡単です。
以下のように書きます。
<!-- ここにコメントを書く -->
コメントを使うときのコツを紹介します。
- 複雑なコードの前に説明を書く
- 閉じタグを忘れないようにチェックする
- 見えないメモとして使う
コメントは、初心者でも安心してコードを管理するための便利な道具です。
積極的に活用しましょう。
HTML5で追加された新しいタグ
HTML5では、これまでのHTMLにはなかった便利なタグがいくつも追加されました。
これによって、より意味のあるページ構造を簡単に作ることができるようになりました。
HTML5で追加された代表的なタグは以下の通りです。
- <header>：ページやセクションの見出し部分
- <footer>：ページの下部や著作情報など
- <article>：独立した記事や投稿のまとまり
- <section>：内容ごとの区切り
- <nav>：ナビゲーションリンクのグループ
これらのタグを使うと、検索エンジンにも理解しやすくなり、SEOにも良い影響を与えます。
現代のWeb制作ではHTML5のタグを正しく使うことがとても大切です。
タグの正しい書き方と注意点
HTMLタグを書くときには、いくつかのルールを守る必要があります。
ルールを間違えると、ページがうまく表示されなかったり、検索エンジンに正しく認識されなかったりします。
タグを書くときの注意点を紹介します。
- 開始タグと終了タグをセットで書く
- タグはすべて半角英数字で書く
- 大文字より小文字を使う（HTML5の推奨）
- タグの中にスペースや不要な文字を入れない
- 閉じタグを忘れない
これらを守れば、誰が見ても正しく表示されるHTMLを書けるようになります。
丁寧に確認しながら書きましょう。
よく使われるHTMLタグ一覧と使い方
テキスト関連のタグ
HTMLでは、文章を書くときに使う「テキスト関連のタグ」がたくさんあります。
見出しや段落、強調など、文章をわかりやすく整理するためにとても大事なタグです。
よく使うテキスト関連のタグを以下にまとめます。
- <h1>〜<h6>：見出しのレベルを表す
- <p>：段落を表す
- <br>：改行する
- <strong>：太字で強調する
- <em>：斜め文字で強調する
- <span>：特定の文字に装飾を加える
これらのタグを使いこなすことで、文章にメリハリがついて、読む人にとってもとても見やすくなります。
リンクを作成するタグ
Webページでは、他のページや外部サイトへ移動するための「リンク」がとても大切です。
リンクを作るには <a> タグを使います。
このタグがあることで、Webの世界を自由に行き来できるようになります。
リンクタグの使い方のポイントをまとめます。
- <a href=”URL”>リンクテキスト</a> の形で使う
- href属性には移動先のアドレスを入れる
- target=”_blank” で新しいタブで開く
たとえば、以下のように書くとリンクになります。
<a href="https://example.com">このサイトへ移動</a>
リンクを使えば、ページ同士をつなげることができて、情報がとても探しやすくなります。
画像を挿入するタグ
HTMLで画像を入れるには <img> タグを使います。
このタグは文章の中に写真やイラストなどを表示するために使います。
見た目を楽しくしたり、内容をわかりやすく伝えるためにとても役立ちます。
画像タグの基本的な使い方は以下の通りです。
- src属性に画像ファイルのURLを入れる
- alt属性で画像が表示されないときの説明を入れる
- widthやheight属性でサイズ調整ができる
実際の記述例はこちらです。
<img src="sample.jpg" alt="サンプル画像" width="300">
画像を正しく使えば、読む人がイメージしやすくなって、ページの魅力もアップします。
リストを作成するタグ
箇条書きや番号付きリストを作るときには、「リストタグ」を使います。
HTMLには2つの種類があります。
どちらも情報を整理して、見やすくまとめたいときにとても便利です。
リストタグには以下のようなものがあります。
- <ul>：順番のないリスト（黒丸）
- <ol>：順番のあるリスト（番号付き）
- <li>：リストの項目を表す
以下は番号付きリストの例です。
<ol>
<li>りんご</li>
<li>バナナ</li>
<li>みかん</li>
</ol>
リストを使うと、大事なことを分かりやすく、すっきり見せることができます。
表を作成するタグ
表（テーブル）は、情報を行と列に分けて並べたいときに使います。
たとえば、スケジュール表や価格一覧などに便利です。
HTMLでは <table> タグを使って作成します。
表を作るためのタグを紹介します。
- <table>：表の始まりと終わり
- <tr>：表の行を表す
- <th>：見出しセル（太字）
- <td>：ふつうのセル
下のように書くと、2×2の表が作れます。
<table>
<tr><th>名前</th><th>年齢</th></tr>
<tr><td>たろう</td><td>10</td></tr>
</table>
表を使えば、データや情報をきれいに並べることができて、見た目もスッキリします。
フォーム関連のタグ
フォームは、ユーザーが名前やメールアドレスを入力して送信できる仕組みです。
HTMLでは <form> タグを使って作ります。
問い合わせページや申込フォームなどに欠かせない機能です。
フォームで使う代表的なタグを紹介します。
- <form>：フォーム全体を囲む
- <input>：テキストやボタンなどの入力欄
- <textarea>：複数行の入力欄
- <select>：選択リスト
- <button>：送信ボタン
フォームを使えば、ユーザーとやりとりができるWebページを作ることができます。
レイアウトに使えるタグ
HTMLでは、ページの見た目やブロックの配置を考えるときに使えるタグもあります。
これらのタグは中身の「意味」というより、「まとまり」や「場所」を整理するためのものです。
主に使われるレイアウト用タグは次の通りです。
- <div>：汎用的なブロック
- <section>：内容の区切り
- <header>：上部のヘッダー部分
- <footer>：下部のフッター部分
- <aside>：補足情報などを入れる
レイアウトタグを使えば、ページ全体をわかりやすく整理して、きれいに見せることができます。
HTMLタグに使える主な属性とその意味
グローバル属性とは
HTMLには多くのタグがありますが、どのタグにも共通して使える属性があります。
それを「グローバル属性」といいます。
タグの見た目や動き、識別を手助けしてくれる便利なしくみです。
よく使われるグローバル属性を紹介します。
- id：タグに一つだけ付けられる名前
- class：複数のタグに同じグループ名を付ける
- style：タグに直接デザインをつける
- title：マウスを当てると説明が出る
- hidden：表示しないようにする
これらの属性を使えば、タグに意味を持たせたり、あとでCSSやJavaScriptで操作しやすくなります。
classとidの使い分け
HTMLのタグには、「class」と「id」という属性をよく使います。
見た目を変えたり、特定のタグを選ぶときに役立ちます。
この2つの使い方をきちんと覚えると、コードがスッキリしてわかりやすくなります。
それぞれの違いと使い方をまとめます。
- id：ひとつのページに1回だけ使える
- class：何回でも使える
- idは「#」、classは「.」でCSSから指定する
- idは個別、classはグループとして扱う
たとえば、以下のように書きます。
<div id="main"></div>
<p class="highlight">こんにちは</p>
このように使い分けることで、効率よくWebページを作ることができます。
style属性でのインラインスタイル
HTMLタグに直接デザインをつけたいときには、「style」属性を使います。
これは「インラインスタイル」と呼ばれ、CSSの知識がなくても簡単に色や文字の大きさを変えることができます。
インラインスタイルの例を紹介します。
<p style="color: red; font-size: 20px;">こんにちは！</p>
style属性でよく使う項目をまとめると、以下のようになります。
- color：文字の色
- font-size：文字の大きさ
- background-color：背景色
- margin：外側の余白
- padding：内側の余白
インラインスタイルは便利ですが、たくさん使いすぎると管理が大変なので、基本はCSSファイルでまとめるのがおすすめです。
title属性の使い方
title属性は、マウスカーソルをそのタグの上に置いたときに「ふきだし」で説明を表示するものです。
タグにちょっとしたヒントや意味を伝えるときにとても便利な属性です。
使い方の例はとても簡単です。
<a href="https://example.com" title="このサイトにジャンプします">サイトへ</a>
title属性を使うメリットをまとめます。
- リンク先の説明を入れられる
- アイコンや画像に意味をつけられる
- 読み手に安心感を与える
title属性は、目に見えないけどユーザーに優しい情報を伝えるツールとして、ぜひ使ってみてください。
data属性の活用方法
HTMLには「data属性」という、開発者が自由に使える便利な属性があります。
見た目には表示されませんが、JavaScriptと組み合わせて特別な動きをさせたいときにとても役立ちます。
data属性の基本的な書き方は次のとおりです。
<div data-user="tanaka"></div>
data属性の活用ポイントをまとめます。
- 独自の情報をタグに持たせられる
- JavaScriptで読み取って動きを変えられる
- 複数のタグで異なる値を持たせられる
data属性は見えないけど大事な「データのメモ」として、多くの場面で使われています。
イベント属性（onclickなど）
イベント属性は、ユーザーがボタンを押したり、何かに触れたときに動きを起こすためのものです。
中でも「onclick」は、クリックしたときに何かをするように設定できる代表的な属性です。
以下はonclickの基本的な使い方の例です。
<button onclick="alert('こんにちは！')">クリックしてね</button>
よく使われるイベント属性を紹介します。
- onclick：クリックされたとき
- onmouseover：マウスが乗ったとき
- onchange：値が変わったとき
- onsubmit：フォームが送信されたとき
イベント属性を使えば、Webページに動きや反応を加えることができて、楽しく便利になります。
SEOに役立つ属性の選び方
HTMLの属性には、SEO（検索エンジン最適化）に役立つものもあります。
これらを正しく使うことで、Googleなどの検索にページが見つけられやすくなります。
SEO対策に有効な属性をまとめます。
- alt属性（画像の説明）
- title属性（リンクや画像の説明）
- lang属性（ページの言語指定）
- rel属性（リンクの関係性）
これらの属性を使うと、検索エンジンに正しく内容が伝わり、ページの評価が高くなることがあります。
SEOを意識したHTMLを書きたい人は、ぜひ活用しましょう。
まとめ
これまで、HTMLの基本からタグや属性の使い方までをわかりやすく紹介してきました。
最後に、大事なポイントをもう一度まとめておきましょう。
- HTMLはWebページの土台になる言語
- タグには役割があり、正しい構造が大切
- よく使うタグを覚えるとページが作りやすくなる
- 属性を使えば見た目や動きが変えられる
- SEOを意識した属性は検索に強くなる
これらをしっかり覚えて、さっそく自分だけのHTMLページ作りにチャレンジしてみましょう！
