Webページを作るための言語、HTML。聞いたことはあるけど、難しそう…と感じている方もいるかもしれません。
しかし、HTMLの基本は意外とシンプルです。
この記事では、HTMLが初めての方でも理解できるように、基本的な書き方をサンプルのコードを使ってわかりやすく解説していきます。
（有料になっていたらすいません🙇♂️）
HTMLとは？
HTMLは『HyperText Markup Language』の略で、Webページの構造を記述するためのマークアップ言語です（プログラミング言語ではありません）。
Webブラウザ（ChromeやSafariなど）は、このHTMLで書かれたコードを解釈し、私たちが普段見ているWebページを表示しています。
マークアップ言語とは？
マークアップ言語とは、コンピュータに文書の構造や意味を伝えるための言語です。
HTMLでは、タグと呼ばれる特殊な記号を使ってテキストを囲むことで、それが『見出し』なのか『段落』なのか『リスト』なのかを指定します。
例えば、
<h1>これは見出しです</h1>と記述すると、『これは見出しです』というテキストが見出しとして表示されます。
デモはこちらです。
See the Pen
見出しの解説 by junpei (@junpei-sugiyama)
on CodePen.
タグの書き方などは、後ほど詳しく解説します。
HTMLとCSS、JavaScriptの関係
HTMLはWebページの構造を記述するための言語ですが、見た目に関する記述はCSSという別の言語で行います。CSSを使うことで、文字の色や大きさ、背景色などを変更することができます。
また、Webページに動きをつけるにはJavaScriptというプログラミング言語を使います。JavaScriptを使うことで、ボタンをクリックした時の動作や、アニメーションなどを実装することができます。
CSSの基本的な書き方と、JavaScriptのライブラリであるjQueryの基本的な書き方については、以下の記事を参照下さい。
-
【初心者向け】CSSの基本的な書き方をコードサンプル付きで解説
続きを見る
-
【初心者向け】jQueryの基本的な書き方をコードサンプル付きで解説
続きを見る
Web制作学習（コーディング）の第一歩がHTML
この記事を読んでいる人は、Web制作やコーディングの勉強を始めたばかりの人が多いと思います。
そして、HTMLはその第一歩目となります。
HTMLを学び始めてから仕事になるまでの道のりが知りたい人は、Web制作ロードマップの記事を参照下さい。
-
【2024年最新】Web制作独学ロードマップ〜未経験からコーディングとWordPressで稼ぐ！
続きを見る
HTMLの基本的な構造
HTML文書は、特定の構造に従って記述されます。以下に、基本的なHTML文書の構造を示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTMLの基本的な書き方</title>
<link rel="stylesheet" href="styles.css" />
<!-- 外部CSSファイルへのリンク -->
</head>
<body>
<header>
<h1>こんにちは、世界！</h1>
<nav>
<ul>
<li><a href="#about">このサイトについて</a></li>
<li><a href="#contact">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>このサイトについて</h2>
<p>これはHTMLの基本的な書き方の例です。</p>
</section>
<section id="contact">
<h2>お問い合わせ</h2>
<form action="/submit" method="post">
<label for="name">名前:</label>
<input type="text" id="name" name="name" required />
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required />
<input type="submit" value="送信" />
</form>
</section>
</main>
<footer>
<p><small>© 2024 HTML学習サイト</small></p>
</footer>
</body>
</html>
HTMLを書く手順
HTMLを書く順番ですが、特に決まりはありませんが、基本的には上から順番に書いていきます。
- DOCTYPE宣言
- <html>タグ
- <head>タグ
- <body>タグ
まずは、DOCTYPE宣言から書き始めて、<head>タグを書いていきます。headタグの書き方については、以下の記事を参照下さい。
-
【コピペOK！】HTMLのheadタグの書き方を解説
続きを見る
そして<head>タグのコードはブラウザ上（画面上）に表示されず、<body>タグの中に書くコードがブラウザ上（画面上）に表示されます。
これから、<body>タグの中に書くタグについて、解説していきます。
HTMLの基本的な書き方
HTMLを学ぶ上で、タグは最も基本的な要素です。
タグを理解することは、HTML文書の構造を理解し、Webページを思い通りに構築するための第一歩となります。
ここでは、タグの構造、種類、記述ルールなどを詳しく解説し、HTMLの骨組みをしっかりと理解できるようにします。
タグの書き方
HTMLは、タグと呼ばれる要素を使って記述します。タグは、Webページのコンテンツを、ブラウザにどのように表示するかを指示する命令のようなものです。
タグは<と>で囲まれた文字列で、多くのタグは開始タグと終了タグのペアで要素を囲み、その間にコンテンツを記述します。
- 開始タグ: <要素名>
- 終了タグ: </要素名> （/ が追加される）
例えば、<h1>は見出しの開始タグ、</h1>は見出しの終了タグです。開始タグと終了タグで囲まれた部分が、見出し要素となります。
<h1>これは見出しです</h1>
タグの種類
HTMLのタグは、大きく分けて以下の3つの種類に分類できます。
- コンテンツを構造化するタグ: 見出し、段落、リストなど、Webページのコンテンツを構造化するためのタグ。
例：<h1>,<p>,<ul>,<ol>,<li>,<table>,<div>,<span> - コンテンツを追加するタグ: 画像、リンク、動画など、Webページにコンテンツを追加するためのタグ。
例：<img>,<a>,<video>,<audio> - メタ情報を記述するタグ: 文字コード、ページタイトル、外部ファイルへの参照など、Webページに関するメタ情報を記述するためのタグ。
例：<meta>,<title>,<link>
よく使うタグについては、このあと解説します。
単独タグ
一部のタグは、終了タグを持たない単独タグです。
例えば、改行を表す<br>タグや、画像を埋め込む<img>タグなどがあります。
<br>
<img src="image.jpg" alt="画像の説明">なので、以下は間違いになります。
<br></br>
<img src="image.jpg" alt="画像の説明"></img>
タグの入れ子
タグは、入れ子にすることができます。
入れ子にする場合は、内側のタグを先に閉じ、外側のタグを後で閉じるようにします。
<ul>
<li>項目1</li>
<li>項目2</li>
</ul>
タグの記述ルール
- タグ名は大文字・小文字を区別しません（
<p>と<P>は同じ意味）。ただし、小文字で書くのが一般的です。 - タグは、正しく入れ子にする必要があります。開始タグと終了タグの対応関係が崩れると、ページが正しく表示されません。
- 属性は、開始タグの中に記述します。属性値は、ダブルクォーテーション（"）またはシングルクォーテーション（'）で囲みます。
コメントアウト
コードに書くメモのようなものをコメントアウトと呼び、画面には表示されません。
これは、画面に表示されないだけではなく、その行を無効化します。
これは、HTML・CSS・JavaScriptなどで書けますが、言語によって書き方が違います。JavaScriptとPHPは同じですが、この2つとHTML・CSSは書き方が違います。
HTMLのコメントアウトは、<!-- コメントアウト内容 -->という書き方をします。
<!-- これは1行のコメントです -->
<p>この段落はブラウザに表示されます。</p>これは、プロパティの横に書いてもOKです。
<p>この段落はブラウザに表示されます。</p> <!-- これは1行のコメントです -->また、複数行の場合はこのようになります。
<!--
これは複数行にわたる
コメントです。
-->
<p>この段落もブラウザに表示されます。</p>タグを含んだコメントアウトも可能です。
<!-- <div class="example"> この内容は表示されません </div> -->また、直接入力しなくても、コメントアウトしたい行にカーソルを置き、
- Windowsなら『Ctrl + /（め）』
- Macなら『Cmd（⌘） + /（め）』
これでコメントアウトになります（またやれば解除されます）。
コメントアウトの役割ですが、コメントアウトを入れることによって、後からどういう意図で書いたコードなのか分かるようなります。
これは他の人がコードを見たときにも親切なので、全部に書く必要はありませんが、必要に応じて書いておくといいでしょう。
また、メモ代わり以外にも、一時的にコードを無効化したいときなどにも使います。
HTMLでよく使うタグ
HTMLのタグは非常にたくさんあり、最初から全てを使いこなすのは無理があるので、ここではよく使うタグに絞って解説していきます。
headerタグ
<header>タグは、Webページやセクション内のヘッダー部分を表すために使用されます。通常、ロゴやナビゲーションメニューなどが含まれます。
HTMLはこちら。
<header>
<h1>サイトタイトル</h1>
<nav>
<ul>
<li><a href="#home">ホーム</a></li>
<li><a href="#services">サービス</a></li>
<li><a href="#contact">お問い合わせ</a></li>
</ul>
</nav>
</header>ヘッダーの書き方は、こちらの記事で詳しく解説しています。
-
【初めてサイト模写する人向け】シンプルなヘッダーの書き方を解説
続きを見る
navタグ
<nav>タグは、ナビゲーションリンクを含む部分を示します。この要素には、主にメニューやリンク集が含まれます。
<nav>
<ul>
<li><a href="#home">ホーム</a></li>
<li><a href="#about">このサイトについて</a></li>
<li><a href="#contact">お問い合わせ</a></li>
</ul>
</nav><nav>タグはページ内で何度でも使用することは可能ですが、主要なナビゲーションに対して使うタグなので、基本的には1ページにつき1回（大体ヘッダー）と覚えておきましょう。
mainタグ
<main>タグは、ドキュメント内で主たるコンテンツを示すために使用されます。この要素は、ページ内で一度だけ使用することが推奨されています。
HTMLはこちら。
<main>
<!-- 主たるコンテンツ -->
</main>
sectionタグ
<section>タグは、関連する内容のグループ化に使用されます。通常、見出しとともに使用され、そのセクションが何について述べているか明確にします。
HTMLはこちら。
<section id="about">
<h2>このサイトについて</h2>
<p>これはHTMLの基本的な書き方の例です。</p>
</section>基本的には、<section>タグの直下に見出しタグと覚えておきましょう。
見出しタグ（h1〜h6タグ）
見出しは<h1>から<h6>まであり、<h1>が最も重要で、<h6>が最も低いレベルになります。
見出しは情報の階層を示すために重要で、まずは見出しタグから書くのが基本です。
<h1>これは見出し1です</h1>
<h2>これは見出し2です</h2>
<h3>これは見出し3です</h3>実際のコーディングでは、<h4>を使うことはあまりなく、<h5>と<h6>はほぼ使わないと思います。
デモはこちら。
See the Pen
hタグの解説 by junpei (@junpei-sugiyama)
on CodePen.
数字の小さい見出しほどフォントが大きくなっていますが、リセットCSS（reset.css）を使っている場合は、すべて同じサイズになっているかと思います（これはデフォルトの設定）。
段落タグ（pタグ）
段落は<p>タグで囲みます。テキストを段落として表示したい場合に使用します。
<p>これは段落です。文章を記述することができます。</p>
順序付きリスト（olタグ）
リストには、順序付きリスト（番号付き）と順序なしリスト（箇条書き）があります。
順序付きリストは、<ol>タグになります。HTMLはこちら。
<ol>
<li>最初のアイテム</li>
<li>次のアイテム</li>
<li>最後のアイテム</li>
</ol><ol>タグの中には、必ず<li>タグが含まれます。
なので、<ol>タグのみ、<li>タグのみはありません。
デモはこちら。
See the Pen
順序付きリスト by junpei (@junpei-sugiyama)
on CodePen.
順序付きリストは、番号が自動で付きます。
何かの手順などを解説するときには、<ol>タグを使うといいでしょう。
順序なしリスト（ulタグ）
続いて、順序なしリストは、<ul>タグになります。
こちらも<ol>タグ同様に、中には<li>タグを書きます。
HTMLはこちら。
<ul>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>こちらは、<ol>タグと違い、順不同でも成り立つときに使います。
デモはこちら。
See the Pen
順序なしリスト by junpei (@junpei-sugiyama)
on CodePen.
順序なしリストは、番号が付きません。
<ol>タグより、<ul>タグの方が使用頻度は高いと思います。
リンク（aタグ）
<a>タグでリンクを作成します。 href属性にリンク先のURLを指定します。
HTMLはこちら。
<a href="https://www.google.co.jp/">Google</a>デモはこちら。
See the Pen
aタグ by junpei (@junpei-sugiyama)
on CodePen.
<a>タグのテキストは、デフォルトでは青色（一度クリックしたら紫色）で、アンダーラインがあります。
あとは、カーソルを乗せるとポインターが表示され、クリックできるというのが分かりやすくなります。
画像（imgタグ）
<img>タグで画像を表示します。 src属性に画像のファイル名を指定します。 alt属性には、画像の説明を記述します。
HTMLはこちら。
<img src="image.jpg" alt="画像の説明">画像には必ずalt属性を設定し、視覚障害者がスクリーンリーダーで内容を理解できるようにします。
代替テキストは、画像の内容や目的を簡潔に説明するものであるべきです。
例えば、以下のデモの場合、alt属性は『コスモスに囲まれた笑顔のチワワ』になっています。
See the Pen
imgタグ by junpei (@junpei-sugiyama)
on CodePen.
もし装飾目的の画像などでalt属性に書く内容が無い場合は、alt=""と中身を空にしておけばOKです（自体が無いのは好ましくない）。
また、今回はCSSを書かないと大きくなり過ぎるので、画面幅は固定にしています。
フォーム（formタグ）
ユーザーから情報を受け取るためにはフォームが必要です。フォームは<form>タグで作成されます。
HTMLはこちら。
<form action="/submit" method="post">
<label for="name">名前:</label>
<input type="text" id="name" name="name" required>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="送信">
</form>これまでと違い少々複雑ですが、一つずつ補足します。
formタグ（要素）の説明
<form>: フォーム全体を囲むタグ。<label>: フォーム要素にラベルを付けるために使用。<input>: ユーザーから入力を受け取るためのフィールド。type属性: 入力フィールドの種類（例：text, email, passwordなど）。action属性: フォームデータが送信されるURL。method属性: データ送信方法（GETまたはPOST）。required: 入力必須項目として指定する属性。
デモはこちら。
See the Pen
formタグ by junpei (@junpei-sugiyama)
on CodePen.
footerタグ
<footer>タグは、Webページやセクション内のフッター部分を表します。著作権情報や連絡先情報などが含まれることが多く、基本的にはbody閉じタグの前に書かれます。
HTMLはこちら。
<footer>
<p><small>© 2024 会社名. All rights reserved.</small></p>
</footer><small>タグは、
- 免責事項
- 警告
- 法的制限
- 著作権
など、注釈や小さく表示された方がいい文章に対して使います。
使うシーンはかなり限られているので、ひとまずフッターのコピーライト情報に使っておけばいいかと思います（他にもありますが）。
divタグとspanタグ
HTMLのコーディングでよく使うのが<div>タグと<span>タグですが、どちらもタグ自体に意味はありません。
<h1>タグは『大見出し』、<a>タグは『リンク』など意味がありますが、<div>タグと<span>タグはどちらも意味が無いので、初心者の方にとっては使い分けが難しいかも知れません。
divタグとspanタグの違いについては、以下の記事で解説しています。
-
【初心者向け】HTMLタグのdivとspanの意味と違いを解説
続きを見る
HTMLの属性とは
HTMLの属性は要素に追加情報を提供し、その表示や動作を制御するために使用されます。
属性は、要素の開始タグ内に配置され、通常は『属性名＝属性値』という形式で記述されます。
HTMLの属性は、特定の要素に対して設定や情報を付加するもので、要素の振る舞いや外観をカスタマイズします。例えば、<a>タグにはhref属性を指定することでリンク先のURLを設定できます。
HTML属性は開始タグの中に記述し、以下の形式で指定します。
<要素名 属性名="属性値">コンテンツ</要素名>- 属性名: 属性の種類を表す名前です（例: href, src, class）
- 属性値: 属性に設定する具体的な値です（例: リンク先のURL、画像のファイル名）。値はダブルクォーテーション（"）またはシングルクォーテーション（'）で囲む必要があります。
例えば、<a>タグを使ってリンクを作成する場合、リンク先のURLは href 属性で指定します。
属性の種類
HTMLには、様々な属性が存在します。大きく分けると、以下の3つの種類に分類できます。
- グローバル属性: ほとんどのHTML要素に共通して使用できる属性です。
- 要素固有の属性: 特定の要素にのみ使用できる属性です。
- イベントハンドラ属性: ユーザーの操作（クリック、マウスオーバーなど）に応じてJavaScriptのコードを実行するための属性です。
グローバル属性
グローバル属性は、すべてのHTML要素で使用できる属性です。主なグローバル属性には以下があります。
- id: 要素に固有の識別子を指定します。
- class: 要素に分類名（スタイルクラス）を指定します。
- title: 要素に関する補足情報を提供し、ツールチップとして表示されます。
- lang: 要素内の言語を指定します（例：日本語なら『ja』、英語なら『en』）。
特によく使うidとclassについては、また後ほど解説します。
要素固有の属性
特定のHTML要素にのみ適用できる属性も存在します。
<a>タグにはhref（リンク先URL）や、target（リンクが開く方法）があります。<img>タグにはsrc（画像ソース）や、alt（代替テキスト）があります。<input>タグにはtype（入力タイプ）、value（初期値）、placeholder（プレースホルダー）などがあります。
イベントハンドラ属性
イベントハンドラ属性は、ユーザーの操作（クリック、マウスオーバーなど）に応じて、JavaScriptのコードを実行するための属性です。
例えば、onclick属性は、要素がクリックされたときに実行するJavaScriptのコードを指定します。
属性値について
属性値は、各属性が持つ具体的な値です。例えば、alignという属性には『left』（左寄せ）や『right』（右寄せ）といった値が設定できます。
多くの場合、属性値はダブルクォーテーション（"）で囲む必要があります。
属性の記述の注意点
- 引用符で囲む: 属性値は必ずダブルクォーテーションまたはシングルクォーテーションで囲む必要があります。これを怠ると、ブラウザが正しく解釈できません。
- 半角スペース: 複数の属性を指定する場合は、半角スペースで区切ります。
- 大文字小文字: HTMLでは大文字と小文字が区別されないため、一般的には小文字で記述することが推奨されています。
属性とアクセシビリティ
属性を正しく使用することは、Webページのアクセシビリティを向上させるために重要です。
例えば、 タグのalt属性は画像が表示されない場合に代替テキストとして表示されたり、スクリーンリーダーで読み上げられたりします。
また、lang属性は、スクリーンリーダーが正しい言語でコンテンツを読み上げるために役立ちます。
HTMLのid属性とclass属性
先ほどご紹介したグローバル属性のid属性とclass属性ですが、これは要素を特定し、CSSによるスタイリングやJavaScriptによる操作を行うために必要なものです。
これらの属性を正しく理解し活用することで、コーディングがしやすくなります。
id属性（要素の唯一無二のIDを付与）
id属性は、HTML要素に一意の識別子を付与するために使用されます。
この属性は同一ページ内で一度だけ使用でき、同じ値を持つ要素は同一ページに複数存在できません。
これは、idがIDカードのように、要素を特定するための唯一無二の番号となるからです。
使用目的
- スタイル指定: CSSで特定の要素にスタイルを適用するために使用されます。CSSでは、『#id名』という形式で指定します。
- JavaScript操作: JavaScriptで特定の要素を操作する際に、
document.getElementById()メソッドを使用してアクセスします。 - ページ内リンク: idを使ってページ内の特定の位置にリンクすることができます。例えば、
<a href="#mySection">ジャンプ</a>とすると、IDがmySectionの要素までスクロールします。
注意点
- id名は大文字と小文字が区別されます。
- 空白や特殊文字を含むことはできません（ハイフンやアンダースコアは使用可能）。
- 数字で始めることはできません。
id属性の主な用途の例
id属性の主な用途は、以下の3つになります。
CSSでのスタイリング
特定の要素のみにスタイルを適用する場合に、id 属性を使用して要素を指定します。
<h2 id="main-title">メインタイトル</h2>#main-title {
color: blue;
font-size: 36px;
}このようにスタイル指定はできますが、なるべくスタイル指定はidではなくclassで行うのがおすすめです。
その理由については、CSSの基本的な書き方で解説しています。
JavaScriptでの操作
JavaScriptで特定の要素を取得し、内容を変更したりイベントを追加したりする場合に、id 属性を使用して要素を指定します。
<button id="myButton">クリック</button>document.getElementById("myButton").addEventListener("click", function() {
alert("ボタンがクリックされました！");
});
ページ内リンク
id属性をアンカーとして使用することで、ページ内の特定の場所にリンクすることができます。
<h2 id="section1">セクション1</h2>
<a href="#section1">セクション1へ移動</a>
class属性（要素をグループ化）
class属性は、HTML要素に対して複数の分類名を付与するために使用されます。
idと違って、同一ページに同じclass名を持つ複数の要素が存在できるため、一括でスタイルを適用する際に便利です。
使用目的
- CSSでのスタイル指定: CSSで複数の要素に同じスタイルを適用するために使用されます。CSSでは、.class名という形式で指定します。
- JavaScript操作: JavaScriptで特定のclass名を持つ要素を操作する際にも使用できます。例えば、
document.getElementsByClassName("class名")でそのクラス名を持つすべての要素を取得できます。
注意点
- 同じclass名を持つ複数の要素が存在可能です。
- class名には空白を含むことができませんが、複数のclass名をスペースで区切って指定できます（例：class="class1 class2"）。
class属性の主な用途の例
class属性の主な用途は、以下の2つになります。
CSSでのスタイリング
複数の要素に同じスタイルを適用する場合に、class属性を使用して要素をグループ化します。
<p class="highlight">強調表示された段落1</p>
<p class="highlight">強調表示された段落2</p>.highlight {
background-color: yellow;
}
JavaScriptでの操作
JavaScriptで特定のclassを持つ要素をまとめて取得し操作する場合に、class属性を使用して要素をグループ化します。
<ul>
<li class="list-item">項目1</li>
<li class="list-item">項目2</li>
<li class="list-item">項目3</li>
</ul>let listItems = document.getElementsByClassName("list-item");
for (let i = 0; i < listItems.length; i++) {
listItems[i].style.color = "red";
}
複数のclass属性の指定
1つの要素に、複数のclass属性を指定することができます。
その場合は、class名をスペースで区切ります。
<p class="highlight important">重要で強調表示された段落</p>上記の例では、<p>要素にhighlightとimportantの2つのクラスを指定しています。
id属性とclass属性の命名規則
id属性とclass属性の名前は、CSSやJavaScriptで使用する際に問題が発生しないように、適切な命名規則に従う必要があります。
- 使用できる文字は、英字、数字、ハイフン (-)、アンダースコア (_) です。
- 先頭は英字である必要があります。
- 予約語（HTML要素名など）は使用できません。
idとclassの違いと使い分け
これはCSSの話にもなりますが、idとclassの基本的な使い分けは以下になります。
- 単一の要素を特定する場合は、id属性を使用します。
- 複数の要素をグループ化する場合は、class属性を使用します。
| 特徴 | id | class |
| 一意性 | ページ内で一つだけ | 同じ名前を持つ複数可 |
| 使用目的 | 特定の要素へのスタイルや操作 | 複数要素へのスタイル適用 |
| CSS記法 | #id名 | .class名 |
| JavaScript | getElementById() | getElementsByClassName() |
これを見てもちょっと分かりにくいと思うので、基本的には全ての要素にclass属性を付けて、id属性はJavaScriptやページ内リンクで使用する要素だけ付けるのが分かりやすいかと思います。
まとめ
HTMLはコーディングの基礎であり、その基本的な書き方や構造を理解することは非常に重要です。
本記事では、HTML文書の基本構造や主要なタグについて詳しく解説しました。
当ブログでは、コーディングに関する記事だけでなく、WordPressオリジナルテーマ制作に関する記事もたくさんあるので、これからWeb制作をする人はぜひ参考にしてみて下さい。
以上になります。
