「HTMLを勉強したいけど、何から始めればいいのか分からない」って不安になりますよね。
タグがいっぱい出てきて、難しそうに感じてしまう人も多いと思います。
この記事では、これからHTMLを学ぶ初心者の方に向けて、すぐに使えるサンプルコードとその使い方をわかりやすくまとめました。
実際に手を動かして試せるようなコードを中心に紹介しています。
基本的なHTMLの書き方やよく使うタグの意味が分かれば、自分だけのWebページを作れるようになりますので、ぜひ最後まで読んで参考にしてください。
HTMLの基本構造と書き方を知ろう
HTMLとは何かを理解しよう
HTMLとは、Webページを作るためのマークアップ言語です。
マークアップ言語というのは、文章の中に「ここは見出しです」や「ここは画像です」といった目印を付けて、コンピューターが理解しやすくする言語のことです。
HTMLを使えば、文章・画像・リンクなどをWebページ上に正しく配置することができます。
ここでは、HTMLの特徴を簡単に紹介します。
- Webページの構造を決めるための言語
- タグ（例：<h1>や<p>など）で囲んで意味を伝える
- ブラウザがタグを読み取ってページを表示する
- HTMLは英語ベースで直感的に書ける
- メモ帳などのテキストエディタでも書ける
これらを理解すれば、HTMLの基本がつかめてきます。
初心者にとってもとてもやさしい言語なので、安心して学んでいきましょう。
HTMLファイルの作り方と保存方法
HTMLを書くには特別なソフトは必要ありません。
WindowsやMacに入っているメモ帳やテキストエディタで簡単に始めることができます。
まずは基本の流れを見てみましょう。
- メモ帳などのテキストエディタを開く
- HTMLコードを書く（例：<html>〜</html>）
- 「名前を付けて保存」を選ぶ
- ファイル名の後ろに「.html」を付ける（例：sample.html）
- 文字コードは「UTF-8」を選ぶ
保存したHTMLファイルは、ダブルクリックするだけでブラウザで開くことができます。
はじめてでもすぐに表示できるので、楽しく学べます。
基本的なHTMLタグの役割と使い方
HTMLでは、いろいろなタグを使って、Webページの構造を作っていきます。
タグは「< >」で囲まれた英単語のようなものです。
ここで、代表的なタグをいくつか紹介します。
- <html> ページ全体を囲むタグ
- <head> 情報や設定をまとめる部分
- <body> ページに表示される内容を記述する場所
- <h1>〜<h6> 見出しのタグ（数字が小さいほど大きな見出し）
- <p> 段落を表すタグ
- <a> リンクを作るタグ
それぞれのタグには意味と使い方があり、正しく使うことで見やすいページが作れます。
DOCTYPE宣言とHTMLのバージョン
HTMLを書くとき、最初の1行目に「DOCTYPE宣言」という特別な一文を書きます。
これは、使うHTMLのバージョンをブラウザに伝えるためのものです。
現在もっとも使われているのは「HTML5」です。
HTML5では、以下のように書きます。
<!DOCTYPE html>
この一行を最初に入れるだけで、ブラウザはHTML5としてページを解釈してくれます。
DOCTYPE宣言を書かないと、レイアウトが崩れたり表示がうまくいかないことがあるので必ず入れるようにしましょう。
headタグとbodyタグの役割
HTMLでは、ページの構成を2つの大きな部分に分けます。
それがheadタグとbodyタグです。
まずは、それぞれの役割を簡単に紹介します。
- <head> タイトルや文字コードなど、ページの情報を入れる場所
- <body> 実際にブラウザに表示される内容を入れる場所
たとえば、headの中にはこんなコードを書きます。
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
そして、bodyの中には見出しや文章、画像などを入れていきます。
headとbodyの役割を理解することで、より正しいHTMLページが作れるようになります。
正しいHTMLの書き方と文法
HTMLを書くときは、いくつか基本的なルールを守る必要があります。
ルールを守ることで、ブラウザが正しくページを表示してくれます。
よく使う文法ルールを紹介します。
- タグは<タグ名>〜</タグ名>のように開始と終了が必要
- タグの中にはタグを入れ子にして使うことができる
- 終了タグを忘れずに書く
- 半角の英数字でタグを書く（全角はNG）
- タグの間には必要なだけスペースや改行を入れてOK
これらを意識しながらHTMLを書くことで、エラーのない正しいコードを書くことができます。
始めのうちはゆっくり確認しながら練習していきましょう。
初心者におすすめのHTMLサンプルコード
シンプルなHTMLページのサンプル
HTMLの基本を理解するには、まずとてもシンプルなページを作ってみるのがおすすめです。
ここでは見出しと段落だけを使った、簡単なサンプルコードを紹介します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<h1>はじめてのHTML</h1>
<p>これは段落の文章です。
</p>
</body>
</html>
このコードは、基本中の基本です。
ブラウザで開くと「はじめてのHTML」という大きな文字と、その下に「これは段落の文章です」と表示されます。
まずはここから始めてみましょう。
見出し・段落・改行の基本例
Webページに文字を表示するには、見出しタグや段落タグを使います。
また、文の途中で改行したいときも、特別なタグが必要です。
以下のポイントを意識すると、上手に書けます。
- <h1>〜<h6>は見出しに使う
- <p>は段落に使う
- <br>で1行だけ改行できる
- タグはきちんと閉じることが大事
たとえば次のように使います。
<h2>今日の出来事</h2>
<p>今日は公園に行きました。
<br>楽しかったです。
</p>
タグの役割を覚えると、読みやすい文章をWeb上で作れるようになります。
リンクと画像を表示するサンプル
HTMLを使えば、他のページへ移動するリンクや、写真などの画像を自由に表示できます。
見た目がぐんと楽しくなります。
ここで、リンクと画像を表示するためのタグと使い方を紹介します。
- <a href=”URL”>リンクテキスト</a> でリンクを作る
- <img src=”画像のURL” alt=”説明”> で画像を表示
- 画像にはalt属性を付けて説明を書く
- リンク先や画像URLは正しいものを入れる
たとえば、こんなコードになります。
<a href="https://www.example.com">公式サイトへ</a>
<img src="https://www.example.com/image.jpg" alt="サンプル画像">
リンクと画像を組み合わせると、Webページがもっと楽しくなります。
リストと表（table）の使い方例
たくさんの情報を分かりやすく整理して表示するには、リストと表（テーブル）が便利です。
項目ごとに並べたり、表形式でまとめたりできます。
まずはリストの使い方から紹介します。
- <ul>で順不同のリストを作る
- <ol>で番号付きリストを作る
- <li>で各項目を書く
つぎに、表の基本の書き方です。
<table>
<tr><th>名前</th><th>年齢</th></tr>
<tr><td>たろう</td><td>10</td></tr>
</table>
リストや表を使うことで、情報をきれいにまとめて表示できます。
フォーム入力欄の簡単サンプル
Webページから情報を入力してもらうには、フォームを使います。
名前を入れる欄や、送信ボタンなどがこれにあたります。
以下のような要素を使ってフォームを作ります。
- <form> 全体を囲むタグ
- <input type=”text”> テキスト入力欄
- <input type=”submit”> 送信ボタン
- <label>で入力欄の説明をつける
シンプルなフォームの例を紹介します。
<form>
<label>名前：</label>
<input type="text" name="namae">
<input type="submit" value="送信">
</form>
このようなフォームを使えば、Webページで情報を集めたり連絡を受け取ることができます。
コメントの書き方と活用例
HTMLの中には、実際には表示されない「コメント」を書くことができます。
あとで見直すときの目印になったり、他の人が見るときの説明になります。
コメントを書くときは、次のようなルールを守りましょう。
- <!– と –> で囲む
- 表示には影響しない
- コードの意味や注意点を残せる
- メモ代わりに使える
たとえば、こんなふうに使います。
<!-- ここからメインコンテンツ -->
<div>内容です</div>
<!-- ここまで -->
コメントを上手に使うことで、コードの整理がしやすくなりますし、学習の効率もアップします。
よく使うHTMLタグとその使い方
テキスト装飾系タグの使用例
HTMLでは、文字を太くしたり、斜めにしたり、強調したりするためのタグがたくさんあります。
こうしたテキスト装飾のタグを使うと、Webページの見た目がよくなり、読む人に伝わりやすくなります。
以下は、テキストの装飾によく使われるタグです。
- <b> 文字を太字にする
- <i> 文字を斜体にする
- <u> 文字に下線を引く
- <mark> ハイライト（黄色マーカー）
- <small> 小さい文字にする
- <strong> 重要な文字を太字で強調
たとえば、次のようなコードになります。
<p>これは <strong>とても大切</strong> な言葉です。
</p>
装飾をうまく使うことで、伝えたい部分がはっきりします。
構造を整えるためのタグの使い方
Webページを見やすく整えるためには、文章の構造をきちんと作ることが大切です。
そのために使うのが、セクションや区切りのタグです。
使う場面をイメージしながら、次のタグを覚えてみましょう。
- <div> 大きなまとまりを作る
- <section> セクション（章）を分ける
- <article> 記事やブログの内容を囲む
- <header> ページやセクションの上部
- <footer> ページの一番下の部分
例えば次のように使います。
<section>
<h2>プロフィール</h2>
<p>わたしの紹介です。
</p>
</section>
タグで見た目だけでなく意味も整理されるので、検索エンジンにもやさしくなります。
インライン要素とブロック要素の違い
HTMLでは、タグの種類によって「インライン要素」と「ブロック要素」に分かれます。
これは、表示のされ方が変わる大事なルールです。
ここで、それぞれの特徴を簡単にまとめます。
- インライン要素は文章の中に入る（例：<a>、<span>）
- ブロック要素は段落やブロックとして表示される（例：<div>、<p>）
- ブロック要素の中にインライン要素を入れることが多い
- インライン要素の中にブロック要素は入れられない
たとえば次のような違いです。
<p>これは <span>強調</span> の例です。
</p>
<div>これはブロックです。
</div>
違いを覚えておくと、レイアウトを思い通りに作るヒントになります。
画像や動画の埋め込み方法
Webページに画像や動画を入れると、より伝わりやすく、楽しいページになります。
HTMLではそれぞれ専用のタグを使います。
まずは使い方をまとめて紹介します。
- <img> 画像を表示する
- src属性に画像のURLを指定
- alt属性で画像の説明を書く
- <video>タグで動画を表示
- controls属性で再生ボタンなどを表示
たとえば、画像と動画の基本的な埋め込み例はこちらです。
<img src="photo.jpg" alt="風景写真">
<video src="movie.mp4" controls></video>
メディアを活用することでページに動きが出て、見る人の印象もアップします。
metaタグの基本的な使い方
HTMLのheadタグの中には、ページの情報をコンピューターに伝えるタグを入れます。
その代表がmetaタグです。
見た目には表示されませんが、とても大切な役割を持っています。
ここでは、よく使うmetaタグを紹介します。
- <meta charset=”UTF-8″> 文字コードの指定
- <meta name=”description” content=”ページの説明”>
- <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
たとえば、こんなコードになります。
<head>
<meta charset="UTF-8">
<meta name="description" content="初心者向けHTML解説">
</head>
metaタグはSEOやスマホ対応にも関わる重要な部分なので、忘れずに入れておきましょう。
リンク（aタグ）の詳細な使い方
Webページでは、他のページへ移動するリンクを作るのがとてもよくあります。
そのとき使うのがaタグです。
リンクの使い方をしっかり覚えることで、より便利なページが作れます。
aタグの使い方は次の通りです。
- <a href=”URL”>リンクテキスト</a> で基本のリンク
- 外部サイトに飛ばすときも同じ形
- target属性で別タブ表示もできる（_blank）
- メールリンクも作れる（mailto:）
- ページ内リンクも可能（#見出し名）
例として、次のコードを見てみましょう。
<a href="https://www.example.com" target="_blank">外部サイトへ</a>
aタグを使いこなせば、サイト内の移動や情報の案内がスムーズになります。
HTMLの練習に役立つコーディングTips
コーディングを始める前の準備
HTMLを勉強する前に、しっかり準備をしておくことがとても大切です。
道具をそろえておけば、スムーズにコーディングを始められますし、ミスも減らすことができます。
準備として必要なことを以下にまとめました。
- パソコンまたはタブレットを用意する
- テキストエディタ（メモ帳やVS Codeなど）を使う
- ブラウザ（ChromeやEdgeなど）を用意する
- 保存場所（フォルダ）を作っておく
- 文字コードはUTF-8に設定する
これらの準備ができていれば、すぐにHTMLの勉強が始められます。
安心して学習をスタートするための大事なステップです。
無料エディタのおすすめと使い方
HTMLを書くときには、テキストエディタというソフトを使います。
これは文字を書くための道具で、コードを分かりやすく表示してくれるものが便利です。
初心者におすすめの無料エディタをいくつか紹介します。
- VS Code（ビジュアルで見やすく、補助機能も充実）
- Sublime Text（動作が速く、見た目もきれい）
- Atom（カスタマイズしやすい）
- メモ帳（Windows標準、簡単に使える）
たとえばVS Codeの使い方は次の通りです。
- VS Codeをインストールする
- 新しいファイルを作って拡張子を「.html」にする
- コードを書く
- 右クリックして「ブラウザで開く」などの拡張機能を使う
エディタを使うと色分けや補完機能がついて、コーディングがもっと楽になります。
コードを書く時に意識すべきポイント
HTMLを書くときは、ただ書くだけでなく、きれいに整理して書くことが大切です。
読む人も、自分も分かりやすくなります。
きれいなコードを書くために意識したいポイントを紹介します。
- インデント（字下げ）をそろえる
- 閉じタグを忘れないようにする
- 意味のある名前をつける（classやidなど）
- コメントを使ってメモを書く
- 一度書いたらブラウザで確認する
これらを意識することで、バグも減り、見た目も整ったページになります。
習慣にしておくと、あとで困りません。
レイアウトを整えるための工夫
HTMLだけでも、タグを使い分ければ見やすいレイアウトを作ることができます。
最初はCSSを使わなくても、基本のHTMLだけでできる工夫があります。
レイアウトをよくするための簡単な工夫をまとめました。
- 見出しタグ（<h1>〜<h3>）でページを分ける
- <br>や<hr>を使って空白を入れる
- <div>でグループをまとめる
- <ul>や<table>で情報を整理する
- <img>や<video>でアクセントを加える
これだけでも見た目に違いが出て、読みやすくなります。
まずはHTMLだけで工夫するところから始めてみましょう。
コーディングミスを防ぐコツ
HTMLの練習中に間違えてしまうことはよくあります。
でも、少しの工夫でミスを減らすことができます。
ここでは、ミスを防ぐために気をつけるポイントを紹介します。
- タグは必ず閉じる（例：</p>）
- 半角と全角を間違えない
- 入れ子の順番に注意する
- 保存時はUTF-8を選ぶ
- こまめにブラウザで確認する
これらを守れば、初歩的なエラーが少なくなり、勉強もスムーズになります。
学習を継続するための練習方法
HTMLの勉強を長く続けるには、毎日少しずつ触ることが大切です。
楽しみながら学べる方法を見つけると、モチベーションも続きます。
楽しく続けられる練習方法をいくつか紹介します。
- 毎日1つのタグを使ってミニページを作る
- 好きなサイトの構造を真似してみる
- 友達や家族に見せるページを作る
- 勉強した内容をノートにまとめる
- 無料の学習サイトで毎日1問解く
毎日の小さな積み重ねが、自信と実力につながります。
まずは気楽に、楽しく始めましょう。
まとめ
今回の記事では、HTMLをこれから始める初心者の方に向けて、基本の知識から実際に使えるサンプルコードまでを紹介しました。
もう一度、特に大事なポイントを振り返ってみましょう。
- HTMLはタグで構造を作る言語
- 見出しや段落など基本タグを覚えることが第一歩
- 画像・リンク・フォームなど実用タグも練習が大事
- テキストエディタとブラウザがあればすぐ始められる
- 毎日少しずつコードを書くことが上達の近道
まずは1つのサンプルを真似して、自分だけのWebページを作ってみましょう。
今日からあなたもHTMLコーダーの仲間入りです！
