Top
Blog
Web制作ガイド
HTMLコードの基本を徹底解説！初心者でもすぐに活用できるサンプル付き

HTMLコードの基本を徹底解説！初心者でもすぐに活用できるサンプル付き

2025.10.03

Share On

HTMLとは？Webページが作られる仕組みの基本
HTMLコードの最も基本的な骨格とテンプレート
Webページの情報を定義するheadタグの役割
ブラウザに表示される内容を記述するbodyタグ
これだけは覚えたい！頻出HTMLタグのコード一覧
見出しを作成するh1〜h6タグの使い方
文章の段落を意味するpタグの書き方
別ページへのリンクを設置するaタグの活用法
画像を表示させるimgタグの基本コード
箇条書きリストを作るul・ol・liタグ
情報を整理するtableタグで表を作成する方法
HTMLコードを書く上で知っておきたい3つの基本ルール
開始タグと終了タグで要素を囲む
タグの機能を拡張する「属性」の指定方法
タグの入れ子（ネスト）構造は正しく記述する
サンプルで学ぶ！HTMLですぐにできる活用方法
WYSIWYGでSEO施策を自分で対応
表やリストをきれいに整える
Google Analyticsなどの外部タグを追加
修正したい場所を正しく伝える
まとめ

Webサイトがどのような仕組みで表示されているか、気になったことはありませんか。また、CMSで入力する際にもっとうまく入力ができたらいいなと感じることはありませんか？そういったWebにおける画面を構成する根幹をなすのがHTMLコードです。この記事では、HTMLの基本的な考え方から具体的なコードの書き方まで分かりやすく解説します。 Webページ作成で頻繁に利用するタグのサンプル一覧や、実務ですぐに使える活用例も紹介します。

HTMLとは？Webページが作られる仕組みの基本

HTMLとは「HyperTextMarkupLanguage」の略称で、Webページの構造を定義するための言語です。普段私たちがブラウザで見ているWebサイトのテキストや画像、リンクなどの要素は、すべてHTMLによってその役割や意味が指定されています。 HTMLがサイト全体の骨格を作り、CSSという言語でデザインを、JavaScriptという言語で動的な機能を加えるのが、Webページ作成の基本となる仕組みです。

HTMLコードの最も基本的な骨格とテンプレート

HTMLコードを記述する際は、決まった骨格に沿って作成します。すべてのHTMLファイルは、まず初めにHTML文書であることを宣言するを記述し、その後にタグが続きます。タグの中には、Webページの設定情報を記述するタグと、実際にブラウザに表示される内容を記述するタグの2つが含まれるのが基本的な構造です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
  </head>
  <body>
    <h1>こんにちはHTML</h1>
    <p>これは段落です。</p>
  </body>
</html>

Webページの情報を定義するheadタグの役割

headタグは、Webページの設定情報を記述する部分であり、ブラウザで直接表示されることはありません。このタグの中には、ブラウザのタブに表示されるページのタイトルを定義するtitleタグや、文字コードを指定するmetaタグ、外部のCSSファイルを読み込むためのlinkタグなどが配置されます。これらの情報は、ユーザーの目には見えませんが、ページを正しく表示させたり、検索エンジンにページの内容を適切に伝えたりするために非常に重要な役割を担っています。

ブラウザに表示される内容を記述するbodyタグ

bodyタグはWebページの本体ともいえる部分でブラウザの画面上に実際に表示されるすべてのコンテンツをこのタグ内に記述します。例えば見出しや文章の段落画像リンク表などユーザーが閲覧する情報のほとんどがbodyタグの中に配置されます。 Webサイトの見た目や内容を構成する中心的な部分でありHTMLコーディングを行う上で最も多くの時間を費やす箇所です。このタグに記述された内容がWebページの主要な情報として表示されます。

これだけは覚えたい！頻出HTMLタグのコード一覧

Webページを作成する上で、使用頻度の高い基本的なHTMLタグは限られています。ここでは、最低限覚えておきたい10個の代表的なタグをリストアップし、それぞれの役割と書き方を解説します。これらのタグの使い方をマスターするだけで、見出しや段落、画像やリンクを含むシンプルなWebページの構造を組み立てることが可能です。まずはこの一覧で紹介するタグから学習を始めましょう。

見出しを作成するh1〜h6タグの使い方

h1からh6までのhタグは、文章の見出しを作成するために使用します。

<h1>サイトのタイトル（h1）</h1>
<h2>章の見出し（h2）</h2>
<h3>節の見出し（h3）</h3>
<h4>小見出し（h4）</h4>
<h5>さらに細かい見出し（h5）</h5>
<h6>最も小さい見出し（h6）</h6>

h1が最も大きな見出しで、数字が大きくなるにつれてh2、h3と見出しのレベルが下がっていきます。これらのタグは単に文字を大きくする目的で使うのではなく、文章の構造を論理的に示す役割を持ちます。例えば、ページ全体のタイトルをh1、章のタイトルをh2、節のタイトルをh3といった使い分けをします。この階層構造を正しく使うことは、検索エンジンがページの内容を理解する上でも重要です。

文章の段落を意味するpタグの書き方

pタグは「Paragraph」の略で、文章のひとつの段落を示すために使用します。

<p>これは1つ目の段落です。</p>
<p>これは2つ目の段落です。</p>

テキストをとで囲むことで、そこが意味のある文章のまとまりであることをブラウザに伝えます。 pタグで囲まれたテキストは、通常、前後に自動で一行分の余白が確保され、他の要素と区別されます。テキストエディタ上で改行してもブラウザの表示には反映されないため、段落を分けたい場合は必ずpタグを使います。文章のラインを区切るだけでなく、意味的なまとまりを作るのがこのタグの役割です。

別ページへのリンクを設置するaタグの活用法

aタグはAnchorの略で、他のWebページやファイルへのハイパーリンクを作成する際に使用します。

<a href="<https://example.com>">外部サイトへ移動</a>
<a href="/about" target="_blank">別タブで開く</a>

基本的な使い方は、href属性にリンク先のURLを指定し、aタグで囲んだテキストや画像をクリックできるようにします。例えば、と記述すると、囲まれた要素が指定したURLへのリンクになります。また、target="_blank"という属性を追加すると、リンクを新しいタブで開くように設定することも可能です。 Webサイト内のページ移動や外部サイトへの参照に不可欠なタグです。

画像を表示させるimgタグの基本コード

imgタグは、Webページ上に画像を表示するために使用するタグです。

<img src="dog.jpg" width="200" height="160" alt="芝生の上で遊ぶ犬">
<img src="decoration.png" width="200" height="160" alt="">

このタグはpタグなどとは異なり、終了タグを持たない「空要素」という特徴があります。画像の埋め込みには、src属性で表示したい画像のファイルパスやURLを指定し、alt属性でその画像の内容を説明する代替テキストを記述するのが基本コードです。 alt属性は、画像が表示できなかった場合に代わりにテキストを表示したり、音声読み上げソフトが内容を伝えたりするために重要です。

箇条書きリストを作るul・ol・liタグ

箇条書きのリストを作成する際には、ul、ol、liという3つのタグを組み合わせて使用します。

<ul>
  <li>リンゴ</li>
  <li>バナナ</li>
</ul>

<ol>
  <li>手を洗う</li>
  <li>材料を切る</li>
</ol>

ulタグは「UnorderedList」の略で、順序のないリスト（行頭文字が「・」など）を作成します。一方、olタグは「OrderedList」の略で、1,2,3...のような番号付きの順序があるリストを作ります。どちらのリストの場合も、個々のリスト項目はliタグ（ListItem）で一つずつ囲む必要があります。これらのタグを使うことで、情報を整理し、視覚的に分かりやすく表現できます。

情報を整理するtableタグで表を作成する方法

tableタグを使用すると、Webページ内に行と列から成る表を作成できます。

<table>
  <tr>
    <th>商品</th>
    <th>価格</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>100円</td>
  </tr>
</table>

表の作成には、表全体を囲むtableタグの他に、行を定義するtrタグ、見出しセルを作成するthタグ、データセルを作成するtdタグなどを組み合わせて記述します。料金プランの比較や仕様一覧など、整理されたデータを表示するのに非常に便利です。かつてはレイアウト目的で使われることもありましたが、現在では本来の目的である表形式のデータを示すために使用するのが一般的です。

HTMLコードを書く上で知っておきたい3つの基本ルール

HTMLコードを正しく機能させるためには、守るべきいくつかの基本的なルールが存在します。これらのルールを無視して入力すると、Webページが意図した通りに表示されなかったり、エラーの原因になったりします。タグの囲み方、追加情報の与え方、そしてタグの組み合わせ方という3つのポイントを理解することで、構造的に正しいHTMLを作成できるようになり、効率的なコーディングが可能になります。

開始タグと終了タグで要素を囲む

HTMLの基本的なルールとして、ほとんどの要素は「開始タグ」と「終了タグ」の一対で構成されます。例えば、段落を示すpタグの場合、が開始タグで、スラッシュ（/）が付いたが終了タグです。この2つのタグでテキストなどのコンテンツを挟むことで、その範囲が段落であることを示します。このルールにより、ブラウザはどこからどこまでが一つの要素なのかを正確に解釈できます。ただし、改行を示すbrタグや画像を示すimgタグなど、一部には終了タグを必要としない「空要素」と呼ばれる例も存在します。

タグの機能を拡張する「属性」の指定方法

「属性」は、HTMLタグに特定の情報を追加して、その機能を拡張したり、動作を制御したりする役割を持ちます。属性は、開始タグの中に「属性名="値"」という形式で記述します。例えば、aタグにhref="URL"という属性を指定することでリンク先を定義したり、imgタグにsrc="画像の場所"を指定して表示する画像を決めたりします。一つのタグに複数の属性を指定することも可能です。まずはaタグにリンク先とは別の情報を与えるtarget属性を追加して、動作の違いを試してみるのがおすすめです。

タグの入れ子（ネスト）構造は正しく記述する

HTMLでは、あるタグの中に別のタグを入れる「入れ子（ネスト）」構造でマークアップしていくのが基本です。

このネスト構造には重要なルールがあり、タグは必ず内側から順番に閉じなければなりません。具体的には、強調のように、先に書いたpタグを後で閉じる必要があります。

<!-- NG：タグが交差している -->
<p>
	<strong>
		太字
	<p>
</strong>

<!-- OK：正しく入れ子になっている -->
<p>
	<strong>
		太字
	</strong>
</p>

このように、タグが交差するような記述は間違いであり、表示崩れの原因となります。最近のテキストエディタや開発者向けアプリは、この構造を支援する機能が充実しています。

サンプルで学ぶ！HTMLですぐにできる活用方法

HTMLの知識は、Webサイトをゼロから作成するだけでなく、日々の業務やWebサイト運営においても役立つ場面が数多くあります。例えば、ブログの更新やCMS（コンテンツ管理システム）でのコンテンツ作成時に、HTMLを少し知っているだけで表現の幅が大きく広がります。ここでは、HTMLの基本知識を応用して、すぐに実践できる具体的な活用方法をサンプルとともに紹介します。

WYSIWYGでSEO施策を自分で対応

ブログやCMSでよく使われるWYSIWYG（見たまま編集できる）エディタは便利ですが、SEOの観点からは最適なコードが出力されないことがあります。例えば、単に文字を太くする操作ではタグが使われることがありますが、SEOでは意味的に重要であることを示すタグの方が好ましいとされています。 HTMLの知識があれば、エディタのソースコード表示に切り替え、見出しタグの階層を正しく設定したり、画像のalt属性を適切に記述したりするなど、より効果的なSEO施策を自分で行うことが可能です。

表やリストをきれいに整える

コンテンツ内で情報を分かりやすく整理するために、表やリストは非常に有効な手段です。多くのエディタには表を作成する機能がありますが、セルの結合など複雑なレイアウトを組むのは難しい場合があります。 HTMLを知っていれば、<table>タグにcolspan（横方向のセル結合）やrowspan（縦方向のセル結合）といった属性を直接書き加えることで、より見やすい表にカスタマイズできます。また、<ul>や<ol>を使ったリストも、入れ子構造にすることで階層的に情報を提示でき、読者の理解を助けます。

Google Analyticsなどの外部タグを追加

Webサイトのアクセス解析ツールであるGoogleAnalyticsや各種Web広告の計測タグなどは指定されたHTMLコードをサイトに埋め込むことで機能します。これらのコードは通常全ページ共通のheadタグ内やbodyタグの直後などに設置するよう指示されます。 HTMLの基本構造特にheadとbodyの役割を理解していればどこに何を記述すればよいかを正しく判断できます。これにより外部業者に依頼せずとも自分で迅速に解析ツールや広告タグの導入管理が行えます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
    
    <!-- Google Analytics -->
    <script async src="<https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX>"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-XXXXXXXXXX');
    </script>
    <!-- End Google Analytics -->
    
  </head>
  <body>
  </body>
</html>

修正したい場所を正しく伝える

Webサイトの制作会社や開発者に修正を依頼する際、HTMLの知識があるとコミュニケーションが格段にスムーズになります。例えば、「トップページのこの部分の文章」といった曖昧な指示ではなく、「h2の見出しテキストを修正してください」や「フッターのリスト項目に一つ追加してください」のように、具体的なタグを挙げて指示できます。ブラウザの開発者ツールを使えば、該当箇所のHTMLを確認できるため、ピンポイントで修正箇所を伝えられ、認識の齟齬や手戻りを防ぐことにつながります。

まとめ

本記事ではHTMLコードの基本的な仕組みから具体的なタグの使い方実践的な活用法までを解説しました。 HTMLはWebページを構成する最も基本となる言語でありその構造はhtmlheadbodyという骨格で成り立っています。見出し段落リンク画像といった頻出タグを覚え開始タグと終了タグで囲む属性で機能を追加する入れ子構造を正しく記述するといったルールに従うことで誰でもWebページの構造を記述できます。この基本を習得すればWeb制作の世界が大きく広がるでしょう。

株式会社デパートでは、さまざまなWebサイトの制作、システム開発から運用・保守などトータルにサポートしています。ぜひお気軽にご相談ください。