HTML5 タグ図鑑

HTML5 タグ図鑑

 

HTML/CSSマスターの世界へようこそ。
このページでは、ホームページ作成の基本となるHTML5タグ全種類を図鑑としてまとめています。
タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

リンゴ
僕と一緒にHTMLの知識を深めていこう!
HTML5 タグ図鑑
 
タグをアルファベット順で探す

ページ全般

 
HTML5 ページ全般

<!DOCTYPE html>
ドキュメントタイプを宣言する

<html>
HTML文書であることを示す

<head>
文書のヘッダ情報を表す

<body>
文書の本体を表す

<title>
文書にタイトルを付ける

<base>
相対URLの基準となるURLを指定する

<link>
文書同士の関係性を表す

<meta>
文書に関する情報(メタデータ)を表す

<style>
スタイルシートを指定する

<script>
文書にスクリプトを組み込む

<noscript>
スクリプトが利用できない環境用の表示内容を指定する

セクション

 
HTML5 セクション

<section>
一つのセクションを表す

<nav>
ナビゲーションを表す

<article>
内容が独立したコンテンツを表す

<aside>
余談や補足情報を表す

<h1>〜<h6>
見出しを付ける

<header>
ページやセクションのヘッダー部分を表す

<footer>
ページやセクションのフッター部分を表す

<address>
サイトやコンテンツに関する連絡先情報を表す

グループ化

 
HTML5 グループ化

<p>
段落を表す

<hr>
テーマの変わり目を表す

<pre>
ソースコードなどを入力した通りに表示する

<blockquote>
他の情報源からの引用・転載文を表す

<ul>
順序のないリストを表示する

<ol>
番号付きのリストを表示する

<li>
リストの項目を表示する

<dl>
記述リストを表示する

<dt>
記述リストにおける用語の部分を表す

<dd>
記述リストにおける用語の説明分を表す

<figure>
本文から参照される図版を表す

<figcaption>
図版にキャプションを付ける

<main>
文書のメインコンテンツを指定する

<div>
特定の範囲をグループ化する

テキスト

 
HTML5 テキスト

<a>
リンクを設定する

<em>
強調する部分を表す

<strong>
強い重要性を表す

<small>
注釈や細目を表す

<s>
すでに正確ではなくなった内容を表す

<cite>
引用元の作品のタイトルを表す

<dfn>
定義される用語を表す

<abbr>
略語や頭字語を表す

<time>
日付や時間を表す

<code>
プログラムのソースコードを表す

<q>
短いテキストを引用する

<var>
変数を表す

<kbd>
ユーザーが入力する内容を表す

<data>
コンピューター向けのデータを指定する

<samp>
プログラムの出力サンプルを表す

<sup>
上付き文字を表示する

<sub>
下付き文字を表示する

<i>
イタリックで表記される部分を表す

<b>
太字で表記される部分を表す

<u>
テキストをラベル付けする

<mark>
テキストをハイライト表示させる

<ruby>
テキストにルビ(ふりがな)を付ける

<rb>
ルビ(ふりがな)の対象となるテキストを指定する

<rt>
ルビ(ふりがな)として表示するテキストを指定する

<rtc>
テキストに2種類のルビ(ふりがな)を振る

<rp>
ルビ(ふりがな)を囲む記号を指定する

<bdi>
テキストの表記方向を前後から独立させる

<bdo>
テキストの表記方向を指定する

<span>
特定の範囲をグループ化する

<br>
改行する

<wbr>
改行してもよい位置を指定する

<ins>
内容の追加を表す

<del>
内容の削除を表す

埋め込み

 
HTML5 埋め込み

<img>
画像を表示する

<picture>
レスポンシブイメージを文書内に埋め込む

<map>
イメージマップを作成する

<area>
イメージマップのリンク領域を設定する

<iframe>
インラインフレームを作成する

<embed>
プラグインデータを埋め込む

<object>
外部コンテンツを埋め込む

<param>
プラグインのパラメータを指定する

<video>
動画ファイルを再生する

<audio>
音声ファイルを再生する

<source>
再生するファイルを複数指定する

<track>
メディアに字幕を入れる

<template>
スクリプトで利用するHTMLコードのテンプレートを表す

<canvas>
スクリプトを使って図形を描く

テーブル

 
HTML5 テーブル

<table>
表(テーブル)を作成する

<tr>
表(テーブル)の横一行を表す

<td>
表(テーブル)のデータセルを作成する

<th>
表(テーブル)の見出しセルを作成する

<caption>
表(テーブル)にキャプション(タイトルや説明文)を付ける

<colgroup>
表(テーブル)の縦列をグループ化する

<col>
表(テーブル)の列を表す

<thead>
表(テーブル)のヘッダー部分を表す

<tbody>
表(テーブル)の本体部分を表す

<tfoot>
表(テーブル)のフッター部分を表す

フォーム

 
HTML5 フォーム

<form>
入力・送信フォームを作る

<input>
入力フォームの部品を作る

<button>
ボタンを作る

<textarea>
複数行のテキスト入力欄を作る

<select>
プルダウンメニューを作る

<option>
プルダウンメニューや入力候補の選択肢を作る

<optgroup>
プルダウンメニューの選択肢をグループ化する

<datalist>
入力候補のリストを作る

<fieldset>
フォーム部品をグループ化する

<legend>
部品グループにキャプションを付ける

<label>
フォーム部品とラベルを関連付ける

<output>
計算結果の出力欄を作る

<progress>
作業の進捗状況を表示する

<meter>
特定範囲内の測定値を表示する

インタラクティブ

 
HTML5 インタラクティブ

<details>
リクエストに応じて詳細情報を表示させる

<summary>
詳細情報の要約・キャプション・説明を表す

<menu>
ポップアップメニューを表す

<menuitem>
ポップアップメニューの項目を表す

 
 

アルファベット順で探す