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>

このように、開始タグ（<***>）と終了タグ（</***>）の間にコンテンツを入れるのが基本。

HTMLタグの種類

では、ここで、HTMLのベーシックなタグをご紹介しましょう。デザインを考慮しなければ、下記のタグだけでも、WEBサイトのコンテンツを構築することは可能です。

見出しタグ（Heading Tags）

<h1>〜<h6>: タイトルや見出しを示す。数字が大きいほど文字が小さくなる。

<h1>これは大きな見出し</h1>
<h2>これは少し小さい見出し</h2>
<h3>これはh2の次に小さい見出し</h3>
<h4>これはh3の次に小さい見出し</h4>
<h5>これはh4の次に小さい見出し</h5>
<h6>これはh5の次に小さい見出し</h6>

段落タグ（Paragraph Tag）

<p>: 段落を作成する。

<p>ここに本文、コンテンツを書いていきます。</p>

リストタグ（List Tags）

• <ul>: 順序なしリスト（箇条書き）を作成。

• <ol>: 順序付きリスト（番号つき）を作成。

• <li>: リストの項目を示す。

<ul>
  <li>ぼごう</li>
  <li>玉ねぎ</li>
</ul>
<ol>
  <li>赤ワイン</li>
  <li>白ワイン</li>
</ol>

改行タグ（Line Break Tag）

<br>: 改行を挿入する。

ここで改行<br>できます。

改行タグは、終了タグなしでも反映されます。

強調タグ（Emphasis Tag）

• <em>: 文字を強調表示する（イタリック）。

• <strong>: 文字を強調表示する（太字）。

<em>これは強調された文字です。</em>
<strong>これはもっと強調された文字です。</strong>

コメントタグ（Comment Tag）

<!-- -->: コメントを挿入する。ブラウザには表示されない。

<!-- これはコメントです。 -->

区分タグ（Division Tag）

<div>: 要素をまとめてグループ化する。

<div>
  <p>ここにまとめたコンテンツが入ります。</p>
</div>

水平線タグ（Horizontal Rule Tag）

• <hr>: 水平線を挿入する。

<p>上のコンテンツ</p>
<hr>
<p>下のコンテンツ</p>

これらはHTMLタグの基本的な種類と、それぞれのタグの事例です。これを組み合わせて、ウェブページを作成する基本を理解できます。

HTMLタグと属性

さらに、こうしたタグはさまざまな「属性」を持つことができます。

属性はタグの動作や見た目を制御します。設置の仕方としては、通常、タグの開始タグ内に記述され、属性名="値"という形式で指定されます。事例を用いた方が分かりやすいので、ここではWEBサイト構築に使われる「リンクタグ」「画像タグ」の２つをを紹介しますね。

リンクタグ（Anchor Tag）

• <a>: リンクを作成する。

• href属性にリンク先のURLを指定。

<a href="https://zoroya.co.jp/">ここをクリックすると「勝てるホームページ作成会社ぞろ屋」のトップページに飛びます</a>

画像タグ（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）と組み合わせて美しく整っ…

このフィールドは空白のままにしてください

お名前

メールアドレス *

ご登録いただくと、月1～2回、更新通知を送らせていただきます。

受信ボックスか迷惑メールフォルダを確認して購読手続きを完了してください。

このフィールドは空白のままにしてください

お名前

メールアドレス *

ご登録いただくと、月1～2回、更新通知を送らせていただきます。

受信ボックスか迷惑メールフォルダを確認して購読手続きを完了してください。