MENU
  1. ホーム
  2. HTML&CSS
  3. HTMLにおける基本構造の書き方とタグの使い方【タグ一覧表あり】

HTMLにおける基本構造の書き方とタグの使い方【タグ一覧表あり】

HTML&CSS
html-basic-002

ここでは、Webサイトでは欠かせない「HTML」について学べます。

初心者にも分かりやすいように、実際のHTMLコードやCSSで違いを表現しながら解説します。

目次

HTMLとは

HTML（HyperText Markup Language）は、Webサイトを作成する最も基本的な言語です。

テキストを<>で囲んだタグでマークアップし、見出し、段落、ハイパーリンク、画像などのデータ構造をブラウザに指示します。

HTMLはWebサイトの骨組みを担い、CSSで装飾、JavaScriptで動きを制御します。

HTMLの特徴
  • Webサイトの骨格：サイト構造を定義するもの
  • タグによる構造化：<h1>, <p>, <a>タグといった役割
  • ハイパーテキスト：リンクによる複数ページの相互関連
  • プログラミング言語ではない：文章の意味付けを行う言語
  • ブラウザ表示：ソースコードを表示して確認可能

また、HTMLで記述される代表的なタグの一例は以下になります。

ページの土台
  • <html>：HTML文書の開始と終了（すべての親）。
  • <head>：文書情報（タイトル、文字コード、CSSの読み込みなど）。
  • <body>：ブラウザの画面に表示される全コンテンツの本体。
レイアウトの骨組み（セマンティックHTML）
  • <header>：ページの導入部。ロゴやサイト名、検索窓などを配置。
  • <nav>：ナビゲーション。主要なページメニューやリンクの集まり。
  • <main>：メインコンテンツ。そのページの主役となる内容（1ページに1つ）。
  • <section>：章・節。テーマごとにコンテンツを区切る単位。
  • <footer>：ページの最下部。著作権（CopyRight）や連絡先などを記載。
中身を構成する要素
  • <h1>~<h6>：見出し（1が一番大きく重要）。
  • <p>：段落（一般的なテキスト）。
  • <a>：リンク（他ページや別サイトへ飛ばす）。
  • <img>：画像の埋め込み。
  • <ul> / <li>：箇条書きリスト（メニューや項目羅列に多用）。
  • <div>：汎用的な「箱」。デザインやレイアウト調整のグループ化に使用。
  • <span>：文中の一部を囲う。特定の文字だけ色を変える時などに使用。
ユーザーとのやり取り（フォーム）
  • <form>：入力フォーム全体の囲み。
  • <input>：1行テキスト入力、チェックボックス、送信ボタンなど。
  • <button>：汎用的なボタン（クリックして実行）。

上記のように並べて確認すると、HTMLは大きな箱（body）の中に役割ごとの箱（header/main/footerなど）を積み上げ、中身（h1/p/a/imgなど）を詰めていく作業だと視覚的に見えてくるはずです。

WebページはHTMLのみだと未完成

あなたがよく目にするWebページはHTMLによって構成されていますが、HTMLのみだと未完成です。

例えば、以下の簡易的なHTMLコードを確認していきましょう。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>ゼロからWebデザインを勉強しよう！</h1>
  <p>まずはHTMLについて学びましょう</p>
</body>
</html>

上記のコードを.htmlファイルで保存し、ブラウザ表示すると以下になります。

html-basic-001

これだと、とても簡素なデザインで文字の羅列になってしまいます。
CSSと呼ばれるデザインコードを追加することで、サイト全体のレイアウトや各HTMLタグの役割をデザインによって明確化できます。
ここでは、上記のHTMLタグである<h1>タグにCSSによるデザインを施します。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <style>
    .heading-1 {
      position: relative;
      margin: 0 0 25px 9px;
      padding: .5em .8em;
      background-color: #2589d0;
      color: #ffffff;
    }
    
    .heading-1::before {
      position: absolute;
      top: 0;
      left: -9px;
      z-index: 1;
      width: 5px;
      height: 135%;
      border-radius: 3px;
      background-color: #660000;
      content: '';
    }
    
    .heading-1 span::before,
    .heading-1 span::after {
      position: absolute;
      left: -9px;
      width: 20px;
      height: 3px;
      border-radius: 3px;
      background-color: #c99; /* 紐の色は固定 */
      content: '';
    }
    
    .heading-1 span::before {
      top: 44%;
      transform: rotate(-25deg);
    }
    
    .heading-1 span::after {
      top: 54%;
      transform: rotate(25deg);
    }
  </style>
</head>
<body>
  <h1 class="heading-1">ゼロからWebデザインを勉強しよう！</h1>
  <p>まずはHTMLについて学びましょう</p>
</body>
</html>

今回は、直接<head>内にCSSを記述していますが、一般的に「外部CSSファイルを作成し、HTMLの<head>タグ内で読み込む」方法が推奨されます。

html-basic-002

このように、CSSを適用することでデザイン性を高めることができます。

HTMLにおける書き方の基本

ここでは、「HTMLをどのように書けばよいか」の基本を解説していきます。

HTMLにおける書き方の基本
  • HTMLの基本はタグで挟む
  • HTMLはタグの中にタグを書く
  • 開始タグの中に属性（プロパティ）が書ける

HTMLの基本はタグで挟む

HTMLには<>と</>が多く使われています。

この<>は『タグ』と呼びます。

HTMLでは、タグで文や画像などを挟むといった基本構造になります。

<div>タグの中身</div>

このように<タグ名>と</タグ名>で様々なものを挟みます。

それぞれ開始タグ、終了タグと呼ばれて基本的にセットで使われます。

<div>タグの中身</div>

開始タグ〜終了タグまでのカタマリは要素と呼ばれます。

ここでは、<div>タグ要素になります。

タグには多くの種類があり「どのタグで挟むか」によってタグの役割（＝意味）が変わります。

<h1>ゼロからWebデザインを勉強しよう！</h1>
<p>まずはHTMLについて学びましょう</p>

たとえば<p>と</p>で挟んだものは「段落」を意味します。

<h1>と</h1>で挟んだものは「大見出し」を意味します。

HTMLはタグを使って文字や画像に役割を与えて書きます。

役割を作ることで訪問者にとっては見やすく、Googleなどの検索エンジンにとっては内容を認識しやすいWebページになります。

このHTMLを別名で構造化データと呼び、HTMLが整理されているほど内部SEO対策になり、結果Googleなどの検索エンジンで評価を高め、検索順位が上がる仕組みになっています。

HTMLはタグの中にタグを書く

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>ゼロからWebデザインを勉強しよう！</h1>
  <p>まずはHTMLについて学びましょう</p>
</body>
</html>

HTMLコードを確認すると、タグの間に別タグが入っている部分が多くあります。

<h1>を見ると、<body>さらには<html>の中に入っています。

タグの中にタグが入ることを「入れ子構造」と呼びます。

タグの種類によって「このタグは中に書いてOK、このタグはNG」といったルールがあるため注意が必要です。

開始タグの中に属性（プロパティ）が書ける

<h1 class="h1-title">ゼロからWebデザインを勉強しよう！</h1>
<p class="h1-text">まずはHTMLについて学びましょう</p>

タグの種類によっては、開始タグの中に属性（プロパティ）を入れる場合があります。

なお、属性はタグ名のあとに半角スペースを空けてから書きます。

HTMLファイルの基本構造

タグの書き方が分かったら、次にブラウザで表示させたコードを順番に解説します。

HTMLファイルの基本構造
  • HTMLファイルは最初の宣言を記述
  • <html>タグでコード全体を挟む
  • <head>はWebページ情報を記述
  • <title>は検索エンジンやブラウザに認識され使用される
  • 画面表示は<body>内のみ

HTMLファイルは最初の宣言を記述

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>ゼロからWebデザインを勉強しよう！</h1>
  <p>まずはHTMLについて学びましょう</p>
</body>
</html>

HTMLファイルの先頭に<!DOCTYPE html>があります。

このタグは「このファイルはHTML文書」といった宣言の役割になります。

HTMLバージョンで異なりますが、最新のHTML5では<!DOCTYPE html>と記述することが決まっています。

終了タグはありません。

<html>タグでコード全体を挟む

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>ゼロからWebデザインを勉強しよう！</h1>
  <p>まずはHTMLについて学びましょう</p>
</body>
</html>

HTMLコードを確認すると、<html>タグがあり、終了タグ</html>は1番下にあります。

これは「<html>タグの開始と終了」を表しています。

HTMLファイルを作成するときには必ず記述する必要があります。

<head>はWebページ情報を記述

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>ゼロからWebデザインを勉強しよう！</h1>
  <p>まずはHTMLについて学びましょう</p>
</body>
</html>

<head>~</head>の中はWebページの情報や設定を記述します。

例えば、「フォントの読み込み設定（CDN）」「検索エンジンやブラウザがページを理解させる情報」「CSSファイルの読み込み設定」などを<head>タグ内に書きます。

<head>タグの情報は、基本的にWebページの画面に直接表示されません。

<title>は検索エンジンやブラウザに認識され使用される

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>ゼロからWebデザインを勉強しよう！</h1>
  <p>まずはHTMLについて学びましょう</p>
</body>
</html>

ここでは、<head>タグ内に<title>タグを記述しています。

<title>CODE STOCK<title>が該当します。

<title>タグは、Webページのタイトルを示します。

ブラウザや検索エンジン、X（旧：twitter）などのSNSに伝える役割を持ちます。

html-basic-001

例えば、<title>タグ内の文はページ名としてブラウザのタブに表示されます。

検索エンジンに表示されるページタイトルも、基本的には<title>タグ内の文字が使われます。

また、<head>タグ内の<meta charset="UTF-8">は、文字コードを指定するものです。

画面表示は<body>内のみ

Webページ画面に表示されるのは、<body>~</body>で挟んだものだけです。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>ゼロからWebデザインを勉強しよう！</h1>
  <p>まずはHTMLについて学びましょう</p>
</body>
</html>
html-basic-001

なお、<body>タグは基本的に1ページに1回しか使うことができません。

HTMLで多用するタグの書き方

ここでは、HTMLで多用する代表的なタグを解説します。

HTMLで多用する代表的なタグ
  • <h1>~<h6>タグ：見出しタグ
  • <p>タグ：段落タグ
  • <img>タグ：画像タグ
  • <a>タグ：リンクタグ
  • <ul> / <ol> / <li>タグ：箇条書きタグ
  • <br>タグ：改行タグ
  • <!–>タグ：コメントアウトタグ

<h1>~<h6>タグ：見出しタグ

h1〜h6タグは見出しを作るタグです。

h1が１番大きい見出しであり、数字が大きくなるほど小さい見出しになります。

例えば、Webメディアやブログなどでh1~h6タグを利用すると構造化データとして階層構造が出来上がり、重要な内容ほどh1タグになるため、SEO対策につながります。

<h1>ｈ１は１番大きい見出し</h1>
<h2>ｈ２は２番目に大きい見出し</h2>
<h3>ｈ３は３番目に大きい見出し</h3>
<h4>ｈ４は４番目に大きい見出し</h4>
<h5>ｈ５は５番目に大きい見出し</h5>
<h6>ｈ６は１番小さい見出し</h6>
html-basic-002

おしゃれな見出しデザインを見てみたい！といった人は、「【html&css】コピペだけ！おしゃれな見出し（ラベル）デザイン37選」を一読ください。

Code Stock
【html&css】コピペだけ！おしゃれな見出し（ラベル）デザイン37選 【HTML/CSS】コピペで使えるおしゃれな見出し（ラベル）デザイン37選！シンプル・かわいい・リボン風など、Web制作に役立つおしゃれなCSSコードをプレビュー付きで一挙紹介…

<p>タグ：段落タグ

pタグ<p>~</p>は最もよく使われます。

<p>タグは段落を表し、ブログなどの文章では何度も使います。

<p>ここに文章を書きます。</p>
html-basic-003

<img>タグ：画像タグ

<img>タグは画像を貼るために使います。

少し書き方が特殊なので注意が必要です。

imgでは終了タグは使いません。

また、imgで貼ることができるのは、JPG/PNG/GIF/SVG/webpなどの画像形式だけです。

PDFデータや動画データを貼ることはできません。（GIFアニメーションは貼れます。）

imgタグの中には様々な属性が書けます。

<img src="http://su-gi-rx.com/wp-content/uploads/2026/02/code-stock-top-hero.png" alt="メインビジュアル" />

src=" "の中には画像のファイル名とURLを記述します。

ページが開かれた時、srcに書かれた画像が読み込まれます。

alt=" "の中には代替テキストといったものを記述します。

こ画像が読み込めなかった時に代替するテキストを表示する文になります。

最後のスラッシュ/は「終了タグ」を短縮したものです。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
<img src="http://su-gi-rx.com/wp-content/uploads/2026/02/code-stock-top-hero.png" alt="メインビジュアル" />
</body>
</html>
html-basic-004

<a>タグ：リンクタグ

<a href="リンク先のURL">文字を書くことや別タグをaタグで囲うことも可能です。</a>

リンクを作るには<a>の中にhref="リンク先のURL"を記述します。

aタグで挟んだものはリンクボタンになります。

ここでは、テキストリンクを作ってみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
<a href="https://su-gi-rx.com/">Code Stock｜UIコピペサイトはこちら！</a>
</body>
</html>
html-basic-005

実際にリンクをクリックすると、本サイトへ遷移することができます。

<ul> / <ol> / <li>タグ：箇条書きタグ

HTMLでは箇条書き用コードが用意されています。

<ul>と<li>のペア、もしくは<ol>と<li>のペアで使用します。

<ul>
<li>ひとつめの項目</li>
<li>ふたつめの項目</li>
<li>みっつめの項目</li>
</ul>
html-basic-006

ulの代わりにolを使うと、番号型の箇条書きになります。

<ol>
<li>ひとつめの項目</li>
<li>ふたつめの項目</li>
<li>みっつめの項目</li>
</ol>
html-basic-007

<li>タグの数は増やすことができます。

記載したい箇条書きの数だけ<li>~</li>を増やせます。

<br>タグ：改行タグ

HTMLコードでは、Enterを押して改行を追加してもブラウザに表示される文で改行が反映されません。

pタグなどを使えばその前後で改行が入りますが、もし改行を挿入したい場合は<br>タグを使いましょう。

<br>には終了タグは必要ありません。

<p>これは例です</p>
<p>ここで<br>改行しています。</p>
html-basic-008

<!–>タグ：コメントアウトタグ

HTMLコード内で<!--と-->で挟んだコードはブラウザ上で非表示になります。

これはコメントアウトと呼ばれ、コード内にメモ書きをする時に便利です。

コメントアウトはWebページに訪れた人が読むことはありません。

ただし、ブラウザ機能であるデベロッパーツールを開き、HTMLコードを確認するとコメントアウトが確認できてしまうためWebサイトをリリースする際は削除するとよいでしょう。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
<p>これは例です。</p>
<!-- コメントアウトタグで囲まれた箇所は非表示です。 -->
<p>コメントアウトの部分はブラウザ上で非表示になります。</p>
</body>
</html>
html-basic-009

上記の画像のように、コメントアウトの部分はブラウザ上に表示されていないことが分かります。

なお、コメントアウトタグで囲めば、タグごと非表示にすることも可能です。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
<p>これは例です。</p>
<!-- コメントアウトタグで囲まれた箇所は非表示です。
<p>コメントアウトの部分はブラウザ上で非表示になります。</p>
-->
</body>
</html>
html-basic-010

タグ内のclassとidについて

classとidは開始タグ内に書く属性（プロパティ）の1つです。

<p id="example"> や<h2 class="name"> といった記述ができます。

classとidについて
  • classとidの書き方
  • classとidの違い
  • classとidはどんなタグにも付与できる
  • classとidを付与するとCSSでデザインも付与できる

classとidの書き方

classとidは、他の属性と同じようにタグ名の後に半角スペースを空けて記述します。

管理名であるclassとidは自身で決められます。

<タグ名 class=”好きな管理名”>～<タグ名>
<タグ名 id=”好きな管理名”>～<タグ名>
<タグ名 class=”好きな管理名” id=”好きな管理名”>～<タグ名>

両方を挿入することも可能です。

日本語のclassやidをつけるのはやめましょう。

classとidは英数字にしましょう。

先頭に数字を書くのはNGであり、アルファベットから始まるclass/idにしましょう。

classとidの違い

classとidの違いは以下になります。

classとidの違い
  • class：同じclassを利用可能
  • id：1つのHTML文書内で同じidは使えない

利用すると分かりますが、classを使い回すことで特定ボタンをHTML内に何度も使う場面が発生します。

その際に、CSSはひとつのclassのみで全てに反映させることができます。

また、idは一つに指定されていないとアンカーテキストなどでエラーが発生するために一意に決まることになります。

現時点では理解できなくても、使っていくうちにclassとidの違いが体感できると思うので問題ありません。

classとidはどんなタグにも付与できる

ここでは、<h1>タグにclass="heading-1"付与します。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1 class="heading-1">ゼロからWebデザインを勉強しよう！</h1>
  <p>まずはHTMLについて学びましょう</p>
</body>
</html>

なお、classとidはどのタグにも書くことができます。

classとidを付与するとCSSでデザインも付与できる

ここでは、<h1>タグにclass="heading-1"が付与できているため、CSSによるデザインを施します。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <style>
    .heading-1 {
      position: relative;
      margin: 0 0 25px 9px;
      padding: .5em .8em;
      background-color: #2589d0;
      color: #ffffff;
    }
    
    .heading-1::before {
      position: absolute;
      top: 0;
      left: -9px;
      z-index: 1;
      width: 5px;
      height: 135%;
      border-radius: 3px;
      background-color: #660000;
      content: '';
    }
    
    .heading-1 span::before,
    .heading-1 span::after {
      position: absolute;
      left: -9px;
      width: 20px;
      height: 3px;
      border-radius: 3px;
      background-color: #c99; /* 紐の色は固定 */
      content: '';
    }
    
    .heading-1 span::before {
      top: 44%;
      transform: rotate(-25deg);
    }
    
    .heading-1 span::after {
      top: 54%;
      transform: rotate(25deg);
    }
  </style>
</head>
<body>
  <h1 class="heading-1">ゼロからWebデザインを勉強しよう！</h1>
  <p>まずはHTMLについて学びましょう</p>
</body>
</html>
html-basic-002

classやidを付与することでCSSを適用できます。

<div>タグと<span>タグについて

<div>タグと<span>タグの考え方を理解すれば、HTMLの基本は勉強できた状態だと言えるでしょう。

<div>タグと<span>タグのついて
  • <div>タグと<span>タグの違い
  • <div>タグと<span>タグはまとまりを作る
  • まとまりごとにWebデザインを変更可能

<div>タグと<span>タグの違い

<div>タグと<span>タグの違いは以下になります。

<div>タグは前後に改行が追加される
<span>タグは前後に改行が追加されない

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
<p>これは<div>例文</div>です。</p>
</body>
</html>
html-basic-012
<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
<p>これは<span>例文</span>です。</p>
</body>
</html>
html-basic-011

<span>タグのように前後の改行が入らないタグをインライン要素、<div>タグのように前後に改行の入るタグをブロック要素と呼びます。

これは、displayといった属性（プロパティ）であり、とても奥が深いためここでは解説を割愛します。

<div>タグと<span>タグはまとまりを作る

<div>~</div>や<span>~</span>はコードにまとまりを作るコードです。

例えば、<div>タグで複数コードを２つのまとまりに分けてみましょう。

classを”area-one”、”area-two”とします。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
<div class="area-one">
  <p>これは例文１です。</p>
  <p>これは例文２です。</p>
</div>
<div class="area-two">
  <p>これは例文３です。</p>
  <p>これは例文４です。</p>
</div>
</body>
</html>
html-basic-013

まとまりを作っただけなのでブラウザで見ても変化はありません。

まとまりごとにWebデザインを変更可能

では、各classに対してbackgroundといったCSSをそれぞれ付与してみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <style>
    .area-one {
      background: red;
    }
    .area-two {
      background: blue;
    }
  </style>
</head>
<body>
<div class="area-one">
  <p>これは例文１です。</p>
  <p>これは例文２です。</p>
</div>
<div class="area-two">
  <p>これは例文３です。</p>
  <p>これは例文４です。</p>
</div>
</body>
</html>
html-basic-014

上記のように<div>タグに対してbackgroundといった属性で色を指定することで反映させることができます。

Webデザインの核であるCSSを勉強しよう

HTMLの基本が理解できたら、いよいよCSSの勉強になります。

CSSを理解することでWebデザインを施すことができます。

また、Webデザインに幅が広がることで、様々な見た目やアニメーションによる高度なサイトも作成可能になります。

本サイトのHTML&CSS入門講座の流れは、HTML&CSSの基本を押さえながらWordPress上で実施していく実践型になります。

以下は、初心者でも分かりやすいCSSの入門編になります。

絶賛準備中

HTML&CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次