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> | ページ読み込み時には表示されない、再利用可能なコンテンツのテンプレートを定義します。 |