HTMLは、Webサイト制作の基礎となる重要な言語です。しかし、いざ勉強を始めようとすると、何から始めればいいのか、どんな点に注意すればいいのか迷ってしまうことも多いですよね。
そこで今回は、これからHTMLを学ぶ初心者の方に向けて、知っておくべきHTMLのポイントを徹底解説します。記事を読み終える頃には、基本的なHTMLの知識を身につけ、実際にWebサイト制作を始める準備が整っているはずです。
- HTMLの基礎を学びたい方
- コーディング初心者の方
- HTMLについて復習したい方
HTMLとは？
HTMLとは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略で、Webブラウザで表示されるWebページの構造や内容を記述するための言語です。見出し、段落、画像、リンクなど、Webページの各要素を定義することで、ブラウザがどのようにページを解釈し、表示するのかを指示します。
HTMLの知識は、Web制作のスキルを習得したい方にとって必須と言えるでしょう。
HTMLの基本構造
HTMLはタグ（tags）によって構成されています。
タグは角括弧<>で囲まれ、要素（elements）を定義します。
タグにはたくさんの種類があり、どのタグで挟むかによってその部分の役割が変わります。
基本的なHTMLファイルの構造は以下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウェブデザインパレット</title>
</head>
<body>
<h1>HTMLとは？Webサイトを作成するための基本的な書き方と注意点</h1>
<p>HTMLとはWebページの土台を作るための言語です。</p>
</body>
</html>DOCTYPE（ドックタイプ）宣言
1行目<!DOCTYPE html>はDOCTYPE（ドックタイプ）宣言と呼ばれ、ブラウザに対してHTMLのバージョンやルールを指定する宣言です。HTMLファイルの一番初めに記載します。
htmlタグ
2行目<html lang="ja">ここにHTMLコードを書きます</html>
コード全体をhtmlタグで囲みます。これはHTMLの文書であるということを表していて、HTMLファイルを作成するときには必ず書きます。
lang属性を設定することで、HTML文書全体がどの言語で書かれているかを指定します。｢ja｣は日本語を意味します。
headタグ
3行目<head>ここにWebページの情報を記述します</head>
ページタイトルや説明文、読み込むファイルの指定などを記述します。
headタグの中の情報はブラウザ上に直接は表示されません。
文字コードの指定
4行目
<meta charset=”UTF-8″>は文字コードの指定です。指定していないと文字化けが発生してしまうことがあるので、必ず記述するようにしましょう。
titleタグ
5行目<title>ここにWebページのタイトルを記述します</title>
ブラウザのタブや、検索したときのページタイトルとして表示されます。
bodyタグ
7行目<body>ここに記述されたものがブラウザ上で表示されます</body>
bodyタグの中に書かれた内容が、Webページの実際のコンテンツ部分です。
HTMLタグの基本
HTMLタグには、コンテンツの意味や構造を定義する役割があります。
bodyタグ内でよく使うタグをご紹介します。
h1〜h6タグ
<h1>〜<h6>は見出しタグと呼ばれ、見出しを示すときに使用します。<h1>が1番大きい見出しで、数字が大きくなるほど小さい見出しになります。
<h1>これは見出し1</h1>
<h2>これは見出し2</h2>
<h3>これは見出し3</h3>
<h4>これは見出し4</h4>
<h5>これは見出し5</h5>
<h6>これは見出し6</h6>
pタグ
<p>は段落タグで、テキストの段落を示します。複数の段落がある場合、それぞれの段落は独立して<p></p>で囲まれます。
<p>これは段落です。</p>
<p>これは別の段落です。</p>これは段落です。
これは別の段落です。
aタグ
<a>はリンクを表すタグです。href属性を使用してリンク先のURLを指定します。
<a href="https://blog.mimosa-design.net/">これはリンクです</a>imgタグ
<img>は画像を表示するためのタグです。src属性で画像のURLを指定し、alt属性で画像の代替テキストを指定します。<img>では終了タグは使いません。
<img src="https://blog.mimosa-design.net/wp-content/uploads/2024/06/Web-Design-Pallet_logo_o-300x40.png" alt="Web Design Pallet">
ul / ol / liタグ
<ul><ol><li>はリスト表示するためのタグです。タグの組み合わせによってリストの項目が変わります。
ulタグ & liタグ
<li>を<ul>ではさむと、箇条書きのリストが表示されます。
<ul>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>- アイテム1
- アイテム2
- アイテム3
olタグ & liタグ
<li>を<ol>ではさむと、番号付きのリストが表示されます。
<ol>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ol>- アイテム1
- アイテム2
- アイテム3
table / tr / th / tdタグ
<table>: 表全体を囲むタグです。<tr>: 表の行を定義します。各行はこのタグで開始し、終了します。<th>: 表のヘッダーセルを定義します。ヘッダーセルは通常、列の見出しとして使用されます。<td>: 表のデータセルを定義します。各セルはこのタグで囲まれます。
<table border="1">
<tr>
<th>名前</th>
<th>年齢</th>
<th>都市</th>
</tr>
<tr>
<td>山田太郎</td>
<td>25</td>
<td>東京</td>
</tr>
<tr>
<td>鈴木一郎</td>
<td>30</td>
<td>大阪</td>
</tr>
</table>| 名前 | 年齢 | 都市 |
|---|---|---|
| 山田太郎 | 25 | 東京 |
| 鈴木一郎 | 30 | 大阪 |
brタグ
HTMLコード内では、Enterキーで改行しても、ブラウザ上ではその改行は反映されません。<br>は、HTMLコンテンツ内で改行を挿入するために使用されます。段落内でも、文章中の任意の場所で改行を行うことができます。<br>には終了タグがありません。単独で使用されます。
<p>これは段落の一部です。
これは改行されません。</p>
<p>これは段落の一部です。<br>ここで改行されます。</p>これは段落の一部です。 これは改行されません。
これは段落の一部です。
ここで改行されます。
コメントアウト
HTMLのコメントアウトとは、ソースコードの一部を無効化し、ブラウザに表示させない機能です。メモや説明などを記述するために使用され、コードの見やすさや理解しやすさを向上させるのに役立ちます。
コメントアウトしたい文章を<!--と-->で囲みます。
<!--
複数行にわたる
コメントも
コメントアウト
できます
-->
<p>これは段落の一部です。</p>これは段落の一部です。
これらのタグを使って、Webページのコンテンツを構造化し、視覚的に整理することができます。それぞれのタグの使い方を理解することで、Webページの制作やメンテナンスがより効果的になります。
HTMLの注意点
HTMLを書く際にはいくつかの注意点があります。
半角英数字で書く
タグに全角文字や日本語を使うことはできません。半角英数字で、基本的に小文字で書きましょう。
| 良い例 | 悪い例 |
|---|---|
| <p>HTMLの注意点</p> | <ｐ>HTMLの注意点</ｐ> |
入れ子（ネスト）のルール
HTMLでは開始タグと終了タグの間に別のタグが入っている、「入れ子」と呼ばれる構造が頻繁に用いられます。この入れ子構造において、必ず開始タグから順に終了タグを記述しましょう。タグの閉じ忘れにも注意が必要です。
| 良い例 | 悪い例 |
|---|---|
| <p><a href=”test.jp”>HTMLの注意点</a></p> | <p><a href=”test.jp”>HTMLの注意点</p></a> |
適切なマークアップ
マークアップとは、HTMLの要素やコンテンツをタグで囲んだり属性を付与したりすることです。どの部分が見出しであるか、段落であるか、リンクであるかなどを明示することによって、コンピューターによる解釈やWebブラウザによる表示を可能にする仕組みです。SEO対策においても重要です。
| 良い例 | 悪い例 |
|---|---|
| <h1>これは見出しです</h1> <p>これは段落です</p> | <p>これは見出しです</p> <h1>これは段落です</h1> |
おすすめの学習教材
書籍
プログラミング学習サイト
さいごに
今回は、HTMLについて最低限知っておくべきポイントを解説しました。
HTMLは、Webページを作成するための基本的な言語です。
今回ご紹介したポイントを参考に、ぜひ実際に簡単なWebページを作成し、見出しや段落、画像の挿入などを試してみましょう。
