※この記事にはプロモーションが含まれています
WEBサイトを作成する際に避けては通れない言葉の一つが「HTML」。ごく簡潔に言えば、「WEBサイトの骨組みを作るための言葉のルール」です。
この記事では、主にワードプレスで300件近い制作実績があり、日本最大級のクラウドソーシングサービス「ココナラ」のWEB制作ランキング１位を数十回獲得したホームページ制作会社ぞろ屋が、HTMLについて、初心者でもわかりやすいようにシンプルに解説します。
最後まで目を通していただくと、初めてWEBデザインや開発に触れる人だけでなく、ホームページの構造をざっくり理解したい人にとっても参考になるでしょう。
HTMLとは？
HTML（HyperText Markup Language：ハイパーテキスト マークアップ ランゲージ）は、ホームページを作成するための”マークアップ言語”です。言い換えれば、WEBサイトの骨組みや構造を定義するためのルールを設置すること。ウェブブラウザは、HTMLコードを読み取って、テキストや画像、リンクなどのコンテンツを表示します。
HTMLの基本構造
HTMLは、特別な「言葉」を使ってWEBサイトを構築します。その言葉というのが「タグ」と呼ばれるもの。タグは「 < > 」このような角括弧で囲まれたテキストで、要素を定義します。
例えば、<h>タグは見出しを、<p>タグは段落を定義すると決まっていて、そのルールに従うことで、WEBサイトに表示させるんですね。
<h3>これは見出しです</h3>
<p>これは段落の始まりです。WEBサイトのコンテンツはここに書かれます。</p>WEBサイトへの表示結果
これは見出しです
これは段落の始まりです。WEBサイトのコンテンツはここに書かれます。
このように、開始タグ（<***>）と終了タグ（</***>）の間にコンテンツを入れるのが基本。
HTMLタグの種類
では、ここで、HTMLのベーシックなタグをご紹介しましょう。デザインを考慮しなければ、下記のタグだけでも、WEBサイトのコンテンツを構築することは可能です。
見出しタグ（Heading Tags）
<h1>〜<h6>: タイトルや見出しを示す。数字が大きいほど文字が小さくなる。
<h1>これは大きな見出し</h1>
<h2>これは少し小さい見出し</h2>
<h3>これはh2の次に小さい見出し</h3>
<h4>これはh3の次に小さい見出し</h4>
<h5>これはh4の次に小さい見出し</h5>
<h6>これはh5の次に小さい見出し</h6>WEBサイトへの表示結果
これは大きな見出し
これは少し小さい見出し
これはh2の次に小さい見出し
これはh3の次に小さい見出し
これはh4の次に小さい見出し
これはh5の次に小さい見出し
段落タグ（Paragraph Tag）
<p>: 段落を作成する。
<p>ここに本文、コンテンツを書いていきます。</p>WEBサイトへの表示結果
ここに本文、コンテンツを書いていきます。
リストタグ（List Tags）
<ul>: 順序なしリスト（箇条書き）を作成。
<ol>: 順序付きリスト（番号つき）を作成。
<li>: リストの項目を示す。
<ul>
<li>ぼごう</li>
<li>玉ねぎ</li>
</ul>
<ol>
<li>赤ワイン</li>
<li>白ワイン</li>
</ol>WEBサイトへの表示結果
- ぼごう
- 玉ねぎ
- 赤ワイン
- 白ワイン
改行タグ（Line Break Tag）
<br>: 改行を挿入する。
ここで改行<br>できます。WEBサイトへの表示結果
ここで改行
できます。
できます。
強調タグ（Emphasis Tag）
<em>: 文字を強調表示する（イタリック）。
<strong>: 文字を強調表示する（太字）。
<em>これは強調された文字です。</em>
<strong>これはもっと強調された文字です。</strong>WEBサイトへの表示結果
これは強調された文字です。 これはもっと強調された文字です。
コメントタグ（Comment Tag）
<!-- -->: コメントを挿入する。ブラウザには表示されない。
<!-- これはコメントです。 -->WEBサイトへの表示結果
区分タグ（Division Tag）
<div>: 要素をまとめてグループ化する。
<div>
<p>ここにまとめたコンテンツが入ります。</p>
</div>WEBサイトへの表示結果
ここにまとめたコンテンツが入ります。
水平線タグ（Horizontal Rule Tag）
<hr>: 水平線を挿入する。
<p>上のコンテンツ</p>
<hr>
<p>下のコンテンツ</p>WEBサイトへの表示結果
上のコンテンツ
下のコンテンツ
これらはHTMLタグの基本的な種類と、それぞれのタグの事例です。これを組み合わせて、ウェブページを作成する基本を理解できます。
HTMLタグと属性
さらに、こうしたタグはさまざまな「属性」を持つことができます。
属性はタグの動作や見た目を制御します。設置の仕方としては、通常、タグの開始タグ内に記述され、属性名="値"という形式で指定されます。事例を用いた方が分かりやすいので、ここではWEBサイト構築に使われる「リンクタグ」「画像タグ」の２つをを紹介しますね。
リンクタグ（Anchor Tag）
<a>: リンクを作成する。
href属性にリンク先のURLを指定。
<a href="https://zoroya.co.jp/">ここをクリックすると「勝てるホームページ作成会社ぞろ屋」のトップページに飛びます</a>WEBサイトへの表示結果
画像タグ（Image Tag）
<img>: 画像を表示する。
src属性に画像のURL
alt属性に画像の説明を指定。（画像が表示されない場合の説明文。SEO的に有効とされています。）
<img src="https://zoroya.co.jp/wp-content/uploads/2023/08/ape-2710658_640.jpg" alt="ゴリラがGoogポーズしている画像">WEBサイトへの表示結果
まとめ
以上、HTMLの基本的な概念について事例を用いてシンプルに解説しました。
WEBサイトというのは、HTMLのタグや属性を使ってページの構造やコンテンツを定義し、ウェブブラウザがそれを読み取って表示しているんですね。
HTMLはWEBサイトを構築するための基本的な言語であり、WEB開発の出発点といえます。そこにCSSやJavascriptなどでデザイン装飾して、コンテンツをより伝わりやすく、魅力的に見せるわけです。
「なるほど、基礎構造は何となくわかったから、どういう風に装飾していくのかざっくり理解したいな」
と思われた方は、下記の記事もご参考ください。
あわせて読みたい
CSSとは？基本的な概念と役割の解説 CSS（Cascading Style Sheets）はWEBサイトのスタイル、レイアウト、デザインを定義するための言語であり、HTML（HyperText Markup Language）と組み合わせて美しく整っ…