MENU

HTMLタグ一覧

HTMLのタグについて、主要なタグをカテゴリ別にまとめました。


目次

基本的な文書構造を定義するタグ

これらのタグは、すべてのHTML文書の**基本構造**を形成するために不可欠です。

タグ名説明
<!DOCTYPE html>文書タイプをHTML5として宣言します。これはタグではなく、必須の宣言です。
<html>HTML文書全体のルート(根元)要素です。すべてのコンテンツはこのタグ内に記述します。
<head>ブラウザには表示されない、文書のメタ情報(タイトル、文字コード、CSSなど)を記述するエリアです。
<body>実際にブラウザに表示される、Webページのすべてのコンテンツ(テキスト、画像、リンクなど)を記述するエリアです。

コンテンツを構造化するタグ

コンテンツの意味を明確にし、セクションに分けるためのタグです。

タグ名説明
<header>ページのヘッダー部分(ロゴ、ナビゲーションなど)を定義します。
<nav>ナビゲーションリンクのグループ(メニューなど)を定義します。
<main>ページの主要なコンテンツを定義します。1つのページに1つだけ使用します。
<article>独立した記事やブログ投稿、ニュース記事など、それ自体で完結するコンテンツを定義します。
<section>文書内のテーマ別コンテンツのセクションを定義します。
<aside>メインコンテンツとは直接関連性の低い、補足的なコンテンツ(サイドバーなど)を定義します。
<footer>ページのフッター部分(著作権情報、連絡先など)を定義します。

テキストと見出し

文章を構成するための基本的なタグです。

タグ名説明
<h1>〜<h6>見出しを定義します。<h1>が最も重要で、<h6>が最も重要度の低い見出しです。
<p>段落(パラグラフ)を定義します。
<a>別のページやWebサイトへのハイパーリンクを作成します。
<br>改行を挿入します。
<hr>水平線を挿入し、テーマの区切りを示します。
<strong>テキストを太字にし、重要であることを強調します。
<em>テキストを斜体にし、強調(emhasize)します。
<span>インライン要素として、文章の一部にスタイルを適用する際に使用します。特別な意味はありません。
<div>ブロックレベル要素として、コンテンツをグループ化する際に使用します。レイアウト作成によく使われます。

リスト、表、メディア

情報を整理して表示するためのタグです。

タグ名説明
<ul>順序のない(un-ordered)リスト(箇条書き)を定義します。
<ol>順序のある(ordered)リスト(番号付き)を定義します。
<li><ul>または<ol>内のリスト項目を定義します。
<table>表(テーブル)全体を定義します。
<thead>テーブルのヘッダー部分を定義します。
<tbody>テーブルの本体部分を定義します。
<tr>テーブルの行(row)を定義します。
<th>テーブルのヘッダーセルを定義します。
<td>テーブルのデータセルを定義します。
<img>画像を挿入します。src属性で画像のファイルパスを指定します。
<video>ビデオを埋め込みます。
<audio>音声を埋め込みます。
<iframe>別のHTML文書を現在のページ内に埋め込みます。

フォームと入力要素

ユーザーからの入力を受け付けるためのタグです。

タグ名説明
<form>ユーザーからの入力を受け付けるフォーム全体を定義します。
<input>テキスト入力欄、ボタン、チェックボックス、ラジオボタンなど、さまざまな入力部品を作成します。
<textarea>複数行のテキスト入力欄を作成します。
<button>クリック可能なボタンを作成します。
<label>フォームの入力部品に対応するラベル(説明文)を定義します。
<select>ドロップダウンリスト(プルダウンメニュー)を作成します。
<option><select>内で、リストの項目を定義します。

より高度なタグ

Web制作に慣れてきたら覚えておきたいタグです。

タグ名説明
<address>連絡先情報を定義します。
<cite>作品のタイトル(本、映画、歌など)を定義します。
<code>プログラミングコードの断片を定義します。
<data>コンテンツにマシンが読み取れる形式のデータを付加します。
<details>ユーザーがクリックして表示・非表示を切り替えられるウィジェットを作成します。
<dialog>ダイアログボックスやウィンドウを定義します。
<figure>図、写真、コードリストなど、自己完結型のコンテンツを定義します。
<figcaption><figure>のキャプション(説明文)を定義します。
<time>日付や時刻を定義します。
<wbr>任意の位置で改行できる場所を定義します。
<canvas>スクリプト(JavaScript)を使用して、グラフィックスを描画する領域を定義します。
<template>ページ読み込み時には表示されない、再利用可能なコンテンツのテンプレートを定義します。
よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

大学卒業後、Web制作会社に入社し、コーポレートサイトやECサイト、キャンペーンサイトなど幅広い案件を担当。企画・設計からデザインディレクション、進行管理、納品後の運用改善までトータルで携わる。クライアントの課題整理から戦略立案まで踏み込む提案力と、円滑なチームマネジメントに定評がある。

・Webサイト構築の企画・情報設計
・UI/UX改善提案
・制作進行管理・品質管理
・マーケティング視点での運用改善

Webサイトは“つくって終わり”ではなく、運用しながら成果を伸ばしていくものだと考えています。お客様のビジネスとユーザーの両方にとって価値のあるWebサイトを、戦略から実装まで全力でサポートいたします。

目次