「HTMLって聞いたことあるけど、なんだかむずかしそう…」って思うことありますよね。
でも、実はHTMLは、ルールさえわかればだれでも書けるようになる言語なんです。
今回は、「coding of HTML」についてやさしく解説していきます。
はじめての人でも安心して読めるように、タグの使い方やページの作り方を、ひとつひとつ丁寧にお伝えします。
HTMLの基本がわかれば、自分だけのホームページを作ったり、好きなデザインを形にしたりできるようになりますので、ぜひ最後まで読んでみてくださいね。
HTMLの基本構文とは？初心者が押さえるべきポイント
HTMLとは何か？概要と役割
HTML（エイチ・ティー・エム・エル）は、ウェブページを作るための言語です。
ホームページに文字や画像、リンクなどを表示させるためには、HTMLのしくみを理解することが大切です。
HTMLは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略で、文字通り文章を“マークアップ（構造化）”するための言語です。
HTMLの役割は、ウェブページの骨組みを作ることです。
見出しや段落、画像、リンクなどを配置する“設計図”のようなものです。
以下にHTMLの役割をわかりやすくまとめます。
- 文字や画像、動画などの表示を決める
- 見出しや段落などの構造をつける
- リンクやボタンなど、操作できる部分を作る
- 情報を整理して見やすくする
- 検索エンジンに内容を伝える手助けをする
HTMLは、ウェブページを作るうえでの「土台」になります。
はじめての人でも、この基本をおさえれば安心してページを作り始められます。
HTML文書の基本構成
HTMLは、特別なタグと呼ばれる記号を使って書いていきます。
タグは“この部分は見出しです”や“ここは画像を表示する部分です”というように、パソコンに指示を出す役目を持っています。
HTMLの基本的な文書構成は、以下のようになります。
<!DOCTYPE html>
<html>
<head>
<title>ページのタイトル</title>
</head>
<body>
ここに表示する内容を入れます
</body>
</html>
上のコードでは、それぞれのタグがページのどの部分を示しているかをわかりやすく示しています。
次のようなポイントに気をつけると、より理解しやすくなります。
- <html>〜</html>：HTML全体のスタートと終わり
- <head>〜</head>：見えないけれど大事な情報（タイトルなど）
- <body>〜</body>：画面に見える内容を書く部分
- <title>：タブに表示されるページ名
- <!DOCTYPE html>：HTMLのバージョンを宣言する
HTMLの文書は、このようなルールにそって正しく組み立てることが必要です。
きれいな構造を心がけましょう。
よく使われるHTMLタグの種類と意味
HTMLではさまざまなタグが使われますが、初心者がよく使う基本的なタグを知っておくことが大切です。
ここでは、代表的なタグとその意味を紹介します。
- <h1>〜<h6>：見出し（数字が小さいほど大きな見出し）
- <p>：段落を表す
- <a>：リンクをつける
- <img>：画像を表示する
- <ul>・<ol>・<li>：リスト（箇条書き）
- <div>・<span>：範囲を分けたり装飾をかけたりする
- <table>・<tr>・<td>：表を作る
これらのタグを組み合わせて使うことで、ページに意味と形を与えることができます。
タグの使い方を覚えることがHTML習得の第一歩です。
HTMLの記述ルールと注意点
HTMLにはいくつかの基本ルールがあります。
ルールを守らないと、ページが正しく表示されなかったり、バグの原因になることがあります。
以下のルールをしっかり守りましょう。
- タグは<〜>で囲んで使う
- 終了タグ（例：</p>）を書くのを忘れない
- タグの入れ子（ネスト）は正しく
- タグの中の属性は”（ダブルクオーテーション）で囲む
- 全体の構造が読みやすいようにインデントを使う
ルールをしっかり守ると、他の人が見てもわかりやすく、バグの少ないコードになります。
書いたあとは自分で見直すクセをつけましょう。
HTML5との違いと特徴
HTML5は、今のウェブサイトで使われている最新のバージョンです。
HTML4と比べて、より分かりやすく、便利なタグが増えました。
特徴的な点を紹介します。
- <header>や<footer>などのセクション用タグが追加
- <video>や<audio>など、メディアの再生が簡単にできる
- より意味がわかりやすいセマンティック構造
- モバイル対応がしやすくなった
- JavaScriptとの連携が強化された
HTML5はこれからHTMLを学ぶ人にとって、標準となるバージョンです。
古い情報ではなく、HTML5にそった書き方を覚えましょう。
HTMLファイルの作成手順
HTMLファイルは、特別なソフトを使わなくても作ることができます。
パソコンに入っているメモ帳などのテキストエディタを使えばOKです。
作り方の基本は以下の通りです。
- テキストエディタを開く
- HTMLコードを入力する
- [名前を付けて保存]を選ぶ
- ファイル名を「〜.html」にする
- 保存したファイルをブラウザで開く
これだけで、自分だけのHTMLページが完成します。
まずは簡単なページから挑戦してみましょう。
初心者でも理解できるHTMLタグの使い方
見出しタグ（h1〜h6）の使い方
HTMLには、文章の構造をわかりやすくするために「見出しタグ」があります。
このタグは
〜
までの6段階あり、
が一番大きくて重要な見出し、
が一番小さな見出しです。
使い方はとてもシンプルで、タグで見出しの文字をはさむだけです。
<h1>これは大見出しです</h1>
それぞれの見出しタグには使いどころがあります。
以下にポイントをまとめました。
- <h1>：ページのタイトルや一番大切な見出しに使う
- <h2>：h1の下の項目に使う
- <h3>〜<h6>：さらに細かい内容の区切りに使う
- 順番は飛ばさないようにする（h1の次にh3はNG）
- 1ページにh1は基本的に1つだけにする
見出しを正しく使うと、読みやすく、検索エンジンにも伝わりやすいページになります。
タイトルと内容に合ったタグを選びましょう。
段落と改行タグの基本（p・br）
文章を読みやすくするには、「段落」と「改行」をうまく使うことが大切です。
HTMLでは段落を作るときに
タグ、改行したいときに
タグを使います。
タグは文章のまとまりを表します。
使い方は、タグで文章を囲むだけです。
<p>これは段落の文章です。
</p>
一方、
タグは文章の途中で改行したいときに使います。
これは終了タグがいらないのが特徴です。
これは1行目です。
<br>これは2行目です。
以下にポイントをまとめます。
- <p>は文章のまとまりごとに使う
- <br>は改行したい場所に入れる
- たくさんの<br>を使いすぎないようにする
- <p>の中に見出しタグを入れない
- <p>で囲んだ内容は自動で上下にスペースがつく
段落と改行を正しく使うと、見やすくて読みやすい文章になります。
文章を分けるときはこの2つのタグを使い分けましょう。
リンクを作るタグ（aタグ）の使い方
ホームページでよく見かける青い文字のリンクは、HTMLではタグを使って作ります。
クリックすると他のページへ移動できるようにするには、「href」という属性でリンク先を指定します。
基本の書き方は以下の通りです。
<a href="https://example.com">リンク先の名前</a>
リンクタグを使うときの注意点をまとめておきます。
- href属性には移動先のURLを入れる
- リンク文字が短すぎず、内容がわかるようにする
- 外部リンクは新しいタブで開く場合、target=”_blank”を追加
- リンク切れに注意する
- 画像にもリンクをつけることができる
リンクを正しく使うことで、使いやすくて親切なページになります。
行きたい場所へスムーズに案内できるように心がけましょう。
画像を表示するタグ（imgタグ）の書き方
ウェブページに写真やイラストを入れるには、タグを使います。
このタグは終了タグがいらず、属性で画像の情報を指定します。
主に使うのは「src」と「alt」です。
以下のように書きます。
<img src="sample.jpg" alt="サンプル画像">
画像タグのポイントを紹介します。
- src属性に画像ファイルの場所を入れる
- alt属性は画像が表示されないときの説明文
- 画像のサイズはCSSで調整するのが一般的
- ファイル形式は.jpg .png .gifなどが使える
- 画像の読み込みミスを防ぐためにファイル名は正確に
画像を入れることで、見た目にわかりやすく楽しいページになります。
適切な大きさと説明をつけることを忘れないようにしましょう。
リスト表示の方法（ul・ol・li）
情報を整理してわかりやすく伝えるには、リスト（箇条書き）を使うのが効果的です。
HTMLには「ul（順不同リスト）」と「ol（番号つきリスト）」があり、その中に「li（リスト項目）」を入れて使います。
例として、ul（順不同リスト）はこのように書きます。
<ul>
<li>りんご</li>
<li>ばなな</li>
</ul>
ol（番号付きリスト）はこう書きます。
<ol>
<li>まず材料をそろえる</li>
<li>次にまぜる</li>
</ol>
リストを使うときのコツをまとめます。
- ulは順番が関係ない情報に使う
- olは手順や順位など、順番が大事なときに使う
- liタグはulまたはolの中で使う
- リストが多すぎると逆に見づらくなる
- わかりやすい言葉を選ぶ
リスト表示をうまく使えば、情報をコンパクトにまとめて伝えることができます。
文章を箇条書きにするだけで、読む人の理解が深まります。
コーディングの効率を上げるHTMLの書き方
コメントの書き方と活用方法
HTMLでは、コードの中に「コメント」を入れることができます。
コメントとは、パソコンには読まれず、見る人にだけ伝わるメモのようなものです。
あとで見直したときにわかりやすくなるので、とても便利で大切な機能です。
コメントの書き方は、次のようにします。
<!-- ここはメニューの部分です -->
コメントを上手に使うためのコツを紹介します。
- コードの区切りや意味を説明する
- 一時的に消すときの目印にする
- 他の人にも伝わるように書く
- 日本語でも英語でもOK
- 長すぎない短い文章が読みやすい
コメントを入れると、見直しやすく修正もしやすくなるので、特に初心者の方はこまめに入れるようにしましょう。
コードを見やすくするインデントの基本
インデントとは、コードを見やすくするために行の先頭にすき間をあけることです。
タグが増えてくると、インデントがないとどこからどこまでがそのタグの中なのかわかりにくくなってしまいます。
インデントは、スペースやタブで作りますが、書き方はチームや人によって少しずつ違います。
まずは以下のようなルールを守ると、きれいなコードになります。
- タグの中にタグがあるときは1段下げる
- スペース2つか4つでそろえる
- インデントをそろえて階段のように見せる
- タグの開始と終了がそろうようにする
- 読みやすい並びにする
例えば、次のようにインデントをつけるととても見やすくなります。
<ul>
<li>りんご</li>
<li>みかん</li>
</ul>
インデントをそろえるだけで、コードの整理ができてミスも減ります。
書くたびに少しずつ意識するようにしましょう。
再利用しやすいHTML構造の工夫
HTMLを書くときに「あとでまた使いたい」と思うような部分は、最初からわかりやすく作っておくことが大事です。
同じようなパーツを何度も使う場合は、最初からテンプレートのようにしておくと便利です。
以下のような工夫をすると、再利用がしやすくなります。
- クラス名やIDをきちんとつける
- 1つのパーツは1つのブロックにまとめる
- 意味のある名前をつける（例：menu, header, boxなど）
- CSSと分けて考えるようにする
- 同じ形はコピーして使えるようにする
こうすることで、ページ全体の整理がしやすく、時間も短くなります。
何度も書かなくてもいいように、ひと工夫しておきましょう。
セマンティックHTMLの重要性
「セマンティックHTML」とは、意味のあるタグを使ってページの内容を正しく伝える書き方のことです。
たとえば、見出しには
