よく使うHTMLのタグ一覧・解説

HTMLとは？

HTMLは、主にウェブページを作成するため使用される言語です。

HTMLは、HyperText Markup Language（ハイパーテキストマークアップランゲージ）の略で、テキストを用いて文書の構造や意味関連付けを行います。

HTMLは、難易度の低さや開発環境の構築が不要で、自分のパソコン上で記述が行えるなどの手軽さがHTMLの魅力でもあります。

HTMLのテンプレートコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>

ブロック要素とインライン要素の違いをわかりやすく解説！

タグの一覧に入る前に、簡単にhtmlで使用されているタグの種類を説明します。

タグの種類は、主にブロック要素とインライン要素、そしてテーブルに分かれます。

他のサイトでは、主にブロック要素とインライン要素！という所が多いかと思いますが、テーブルはレンダリング時の計算方法が異なるため、別で考えないと実務で詰まります。

特にテーブルを多く使用するバックエンドエンジニアの方は上記の知識は必須です。

HTMLタグ一覧

<!DOCTYPE html>	HTML5のテンプレート付き。DOCTYPE宣言について
<html>〜</html>	htmlタグの基本的な意味と使用方法を初心者向けに解説
<head>〜</head>	html headタグの書き方　メタデータ・SEO対策
<title>〜</title>	html titleタグの使い方は重要、SEO対策の基本
<base>	html baseタグで基準のURLを指定
<link>	html linkタグとaタグの違いと書き方・意味
<meta>	html metaタグ書き方・意味
<style>〜</style>	html内にCSSを記述するstyleタグの書き方・意味
<body>〜</body>	html body タグ書き方・意味
<article>〜</article>	html article タグ書き方・意味
<section>〜</section>	html section タグ書き方・意味
<nav>〜</nav>	htmlでナビゲーションを作成。navタグ書き方・意味
<aside>〜</aside>	html aside タグ書き方・意味
<h1>〜</h1>	html h1タグ(見出し) の書き方・意味
<h2>〜</h2>	html h2タグ(見出し) の書き方・意味
<h3>〜</h3>	html h3タグ(見出し) の書き方・意味
<h4>〜</h4>	html h4タグ(見出し) の書き方・意味
<h5>〜</h5>	html h5タグ(見出し) の書き方・意味
<h6>〜</h6>	html h6タグ(見出し) の書き方・意味
<header>〜</header>	html header タグ書き方・意味
<footer>〜</footer>	html footer タグ書き方・意味
<address>〜</address>	htmlのaddressタグで電話番号や問い合わせを作成
<p>〜</p>	html pタグ(段落) の余白削除・書き方・意味
<hr>	htmlのhrタグで横線を作る書き方・意味
<pre>〜</pre>	html pre タグ書き方・意味
<blockquote>〜</blockquote>	html blockquoteタグで長文の引用を指定する書き方・意味
<ol>〜</ol>	htmlでリスト作成。olタグ書き方・意味
<ul>〜</ul>	htmlでリスト作成。ulタグ書き方・意味
<li>〜</li>	htmlでリストを作成。liタグ書き方・意味
<dl>〜</dl>	html dlタグでお知らせを作成。書き方・意味
<dt>〜</dt>	html dtタグでお知らせを作成。書き方・意味
<dd>〜</dd>	html ddタグでお知らせを作成。書き方・意味
<figure>〜</figure>	htmlのfigureタグで画像・テキストの関連付け。書き方・意味
<figcaption>〜</figcaption>	html figcaptionタグで画像・テキストを表示。書き方・意味
<main>〜</main>	html mainタグで主な内容を指定。書き方・意味
<div>〜</div>	html divタグとは？特徴・書き方・意味
<a>〜</a>	htmlのaタグでアンカーリンクを設置！書き方・意味
<em>〜</em>	html em タグ書き方・意味
<strong>〜</strong>	htmlのstrongタグで文字を強調・太字に！書き方・意味
<small>〜</small>	htmlのsmallタグで注釈・小文字指定。書き方・意味
<s>〜</s>	htmlのsタグで打ち消し線を作成。書き方・意味
<cite>〜</cite>	htmlのciteタグで作品タイトルの引用を示す。書き方・意味
<q>〜</q>	html qタグで短い文章の引用を示す。書き方・意味
<dfn>〜</dfn>	html dfn タグ書き方・意味
<abbr>〜</abbr>	html abbrタグで文字の略称を示す。書き方・意味
<code>〜</code>	html codeタグでCSSやJavascriptのプログラムコードを記述。書き方・意味
<var>〜</var>	html varタグで変数や引数を定義。書き方・意味
<samp>〜</samp>	html samp タグ書き方・意味
<kbd>〜</kbd>	html kbdタグでキーボードで入力する内容を示す。書き方・意味
<data>〜</data>	html dataタグで様々なデータを指定。書き方・意味
<sub>〜</sub>	html subタグで下付き文字を表示する書き方・意味
<sup>〜</sup>	html supタグで注釈や*マークの書き方・意味
<time>〜</time>	html timeタグで時間や日にちを表す。書き方・意味
<i>〜</i>	html iタグで文字を斜め、イタリックにする書き方・意味
<b>〜</b>	html bタグで文字を太字にする書き方・意味
<u>〜</u>	html uタグで文字に架線を引く書き方・意味
<mark>〜</mark>	html markタグで文字を黄色くハイライトにする書き方・意味
<ruby>〜</ruby>	html rubyタグでふりがな・ルビを振る書き方・意味
<rb>〜</rb>	html rbタグ書き方・意味
<rt>〜</rt>	html rtタグでふりがなを振る書き方・意味
<rtc>〜</rtc>	html rtcタグで複数のふりがな・ルビを振る書き方・意味
<rp>〜</rp>	html rpタグでルビの内容を記述する書き方・意味
<bdi>〜</bdi>	html bdiタグで文字方向を自動変更する書き方・意味
<bdo>〜</bdo>	html bdoタグで文字方向を変更する書き方・意味
<span>〜</span>	html spanタグで汎用的なインライン要素を作成する書き方・意味
<br>〜</br>	html brタグで改行を挿入する書き方・意味
<wbr>〜</wbr>	html wbrタグで改行する書き方・意味
<img>〜</img>	html imgタグで画像を表示する書き方・意味
<div>〜</div>	html divタグで画像の切り替えをする書き方・意味
<iframe>〜</iframe>	html iframeタグでファイルの埋め込み・書き方・意味
<embed>〜</embed>	html embedタグで音声や動画の埋め込みを行う書き方・意味
<object>〜</object>	html objectタグで画像や動画など様々なデータの埋め込みの書き方・意味
<param>〜</param>	html paramタグでyoutubeの動画や音声・画像にパラメータを付与する書き方・意味
<video>〜</video>	html videoタグで動画ファイルの埋め込みをする書き方・意味
<audio>〜</audio>	html audioタグで音声データを埋め込む書き方・意味
<track>〜</track>	html trackタグで音声・画像ファイルに字幕を埋め込む書き方・意味
<source>〜</source>	html sourceタグでsrcなどソースファイルの代替ファイルを指定する書き方・意味
<map>〜</map>	html mapタグでイメージマップを作成する書き方・意味
<area>〜</area>	html areaタグでイメージアップを作成する書き方・意味
<table>〜</table>	html tableタグで表を作成し枠線の間隔を調整する書き方・意味
<caption>〜</caption>	html captionタグでtable(表)のタイトルを指定する書き方・意味
<colgroup>〜</colgroup>	html colgroupタグでtable(表)の列の属性をまとめて指定する書き方・意味
<col>〜</col>	html colタグでtable(表)の行をまとめて指定する書き方・意味
<tbody>〜</tbody>	html tbodyタグで行をグループ化する書き方・意味
<thead>〜</thead>	html theadタグでtable(表)のヘッダー部分をグループ化する書き方・意味
<tfoot>〜</tfoot>	html tfootタグでtable(表)のフッター部分をグループ化する書き方・意味
<tr>〜</tr>	html trタグでtable(表)の行(レコード)を定義する書き方・意味
<td>〜</td>	html tdタグでtable(表)の列(カラム)を定義する書き方
<th>〜</th>	html thタグでtable(表)の見出しセルを定義する書き方・意味
<form>〜</form>	html formタグでお問合せフォームを定義する書き方・意味
<fieldset>〜</fieldset>	html fieldsetタグでフォームの入力項目をグループ化する書き方・意味
<legend>〜</legend>	html legendタグでフォームのグループにタイトル・説明の書き方・意味
<label>〜</label>	html labelタグでフォームの項目名を関連づけする(ラベル付け)する書き方・意味
<input>	html inputタグでフォームのテキスト入力欄・ボタンを作成する書き方・意味
<select>〜</select>	html selectタグでフォームのセレクトボックスを作成する書き方・意味
<option>〜</option>	html optionタグでセレクトボックスの選択肢を作成する書き方・意味
<optgroup>〜</optgroup>	html optgroupタグでメニューの選択肢(option)をグループ化する書き方・意味
<textarea>〜</textarea>	html textareaタグでフォームの長文の入力欄を作成する書き方・意味
<button>〜</button>	html buttonタグでボタンを作成する書き方・意味
<datalist>〜</datalist>	html datalistタグで入力候補をユーザーに提示する書き方・意味
<output>〜</output>	html outputタグでJavaScriptによる計算の出力結果の書き方・意味
<progress>〜</progress>	html progressタグで処理の進捗状況などを表示する書き方・意味
<meter>〜</meter>	html meterタグでディスクの使用量・投票量などの測定値を表示する書き方・意味
<script>〜</script>	html scriptタグでJavascriptの記述や外部のjsファイルを読み込む方法の書き方・意味
<noscript>〜</noscript>	html noscriptタグでscriptタグに対応していないブラウザへのメッセージの書き方・意味
<template>〜</template>	html templateタグでscriptによる文書への挿入・複製が可能なHTMLの断片を定義する書き方・意味
<canvas>〜</canvas>	html canvasタグで図形を描画する書き方・意味
<details>〜</details>	html detailsタグで簡易アコーディオンを作成する書き方・意味
<summary>〜</summary>	html summaryタグとdetailsタグで簡易アコーディオンを作成する書き方・意味
<menu>〜</menu>	html menuタグでメニューを作成する書き方・意味
<menuitem>〜</menuitem>	html menuitemタグでメニューの項目を作成する書き方・意味
<ins>〜</ins>	html insタグでSEO対策！insertで要素を追加したことを伝える書き方・意味
<del>〜</del>	html delタグでSEO対策！deleteで要素を削除したことを伝える書き方・意味

CSSプロパティ・値一覧

HTMLと並行して覚えたい言語といえばCSSです。

HTMLとCSSはセットのようなものですので、使い方やどんなプロパティがあるかを知っておくと、デザイン・レイアウトの難易度や実装できる幅が大きく変わってきます。

ですので、より多くのCSSを知り、デザインの幅を広げてみましょう！

background-clip	background-clip:背景の適用範囲を指定する
background-origin	background-origin:背景の基準位置を指定する
background-size	background-size:背景画像のサイズを指定する
border-radius	border-radius:角丸をまとめて指定する
border-top-left-radius	border-top-left-radius:左上の角丸を指定する
border-top-right-radius	border-top-right-radius:右上の角丸を指定する
border-bottom-left-radius	border-bottom-left-radius:左下の角丸を指定する
border-bottom-right-radius	border-bottom-right-radius:右下の角丸を指定する
border-image	border-image:画像の枠線を指定する
border-image-source	border-image-source:画像の枠線に使用する画像ファイルを指定する
border-image-slice	border-image-slice:ボーダー画像の使用範囲を指定する
border-image-width	border-image-width:画像の枠線の太さを指定する
border-image-outset	border-image-outset:ボーダー画像の領域がボーダーボックスを超えて拡がる量を指定する
border-image-repeat	border-image-repeat:画像ボーダーの繰り返し方法を指定する
box-shadow	box-shadow:要素に影(シャドウ)をつける
opacity	opacity:要素の透明度を指定する
rgba()関数：色の透明度も指定可能！	rgba()関数:色と透明度を指定する
color-profile	color-profile:カラープロファイルを指定する
rendering-intent	rendering-intent:描画の際のカラープロフィールを指定する
linear-gradient()関数	linear-gradient()関数:線形グラデーションを指定する
radial-gradient()関数	radial-gradient()関数:円形グラデーションを指定する
repeating-linear-gradient()関数	repeating-linear-gradient()関数:繰り返しの線形グラデーションを指定する
repeating-radial-gradient()関数	repeating-radial-gradient()関数:繰り返しの円形グラデーションを指定する
flex-flow	flex-flow:flexboxの子要素の配置方向と折り返し方法をまとめて指定する
flex-direction	flex-direction:flexboxの子要素の配置方向を指定する
flex-wrap	flex-wrap:flexboxの子要素の折り返し方法を指定する
order	order:flexboxの子要素の表示順序を指定する
flex	flex:flexboxの子要素の幅についてまとめて指定する
flex-basis	flex-basis:flexboxの子要素の基本幅を指定する
flex-shrink	flex-shrink:flexboxの子要素の縮み方の比率を指定する
flex-grow	flex-grow:flexboxの子要素の伸び方の比率を指定する
grid-template-rows	grid-template-rows:グリッドトラックの縦方向のサイズリストを指定する
grid-template-columns	grid-template-columns:グリッドトラックの横方向のサイズリストを指定する
grid-template-areas	grid-template-areas:名前付きグリッド領域を指定する
grid-template	grid-template:グリッドトラックのリストについてまとめて指定する
grid-auto-rows	grid-auto-rows:サイズリストでは不明確なグリッドトラックの縦方向のサイズを指定する
grid-auto-columns	grid-auto-columns:サイズリストでは不明確なグリッドトラックの横方向のサイズを指定する
grid-auto-flow	grid-auto-flow:グリッドアイテムの自動配置のされ方を指定する
grid	grid:グリッドについてまとめて指定する
grid-row-start	grid-row-start:行グリッドの開始位置やサイズ（グリッドスパン）を指定する
grid-column-start	grid-column-start:列グリッドの開始位置やサイズ（グリッドスパン）を指定する
grid-row-end	grid-row-end:行グリッドの終了位置やサイズ（グリッドスパン）を指定する
grid-column-end	grid-column-end:列グリッドの終了位置やサイズ（グリッドスパン）を指定する
grid-row	grid-row:行グリッドの開始と終了についてまとめて指定する
grid-column	grid-column:列グリッドの開始と終了についてまとめて指定する
grid-area	grid-area:行グリッド・列グリッドの開始と終了についてまとめて指定する
columns	columns:からむ幅とカラム数を指定する
column-width	column-width:カラム幅を指定する
column-count	column-count:カラム数を指定する
column-gap	column-gap:アイテム同士の縦方向の間隔を指定する
column-rule	column-rule:カラムの区切り線のスタイル・幅・色を指定する
column-rule-color	column-rule-color:カラムの区切り線の色を指定する
column-rule-style	column-rule-style:カラムの区切り線のスタイルを指定する
column-rule-width	column-rule-width:カラムの区切り線の幅を指定する
column-span	column-span:要素がまたがる（横切る）カラム数を指定する
column-fill	column-fill:カラム同士の高さ（内容量）を揃えるかどうかを指定する
break-before	break-before:ボックス前でのカラムの区切り方法を指定する
break-after	break-after:ボックス後でのカラムの区切り方法を指定する
break-inside	break-inside:ボックス途中でのカラムの区切り方法を指定する
orphans	orphans:改ページされる際の前ページの最低行数を指定する
widows	widows:改ページされる際の次ページの最低行数を指定する
box-decoration-break	box-decoration-break:ボックスが改行する際の表示形式を指定する
align-content	align-content:flexboxの子要素全体の交差軸方向の揃え位置を指定する
justify-content	justify-content:flexboxの子要素全体の主軸方向の揃え位置を指定する
place-content	place-content:flexboxの親要素全体の交差軸方向と主軸方向の揃え位置をまとめて指定する
align-items	align-items:flexboxの子要素の交差軸方向のデフォルト揃え位置を指定する
justify-items	justify-itemsflexboxの子要素のアイテムの主軸方向のデフォルト揃え位置を指定する
place-items	place-items:flexboxの子要素の交差軸方向と主軸方向のデフォルト揃え位置をまとめて指定する
align-self	align-self:flexboxの子要素の個別アイテムの縦方向の揃え位置を指定する
justify-self	justify-self:flexboxの子要素の個別アイテムの横方向の揃え位置を指定する
place-self	place-self:flexboxの子要素の個別アイテムの縦方向と横方向の揃え位置をまとめて指定する
row-gap	row-gap:アイテム同士の横方向の間隔を指定する
column-gap	column-gap:アイテム同士の縦方向の間隔を指定する
gap	gap:アイテム同士の横方向と縦方向の間隔をまとめて指定する
object-fit	object-fitで画像を指定したサイズにフィットさせる
object-position	object-position:画像などのボックスへの配置位置を指定する
image-orientation	image-orientation:横向きや逆さまの画像を回転させて正しい向きに補正する
image-rendering	image-rendering:画像が拡大・縮小された際の描画方法を指定する
image-resolution	image-resolution:画像を描画する際の解像度を指定する
mix-blend-mode	mix-blend-mode:背景色と要素のブレンド方法を指定する
background-blend-mode	background-blend-mode:背景色と背景画像のブレンド方法を指定する
isolation	isolation:要素をスタッキングコンテキストから分離する
shape-outside	shape-outside:フロート要素への回り込みの形状を指定する
shape-image-threshold	shape-image-threshold:画像ファイルから図形を抽出する際の不透明度を指定する
shape-margin	shape-margin:フロート要素への回り込みの形状にマージンを指定する
clip-path	clip-path:要素をクリッピング（切り抜き）する
clip-rule	clip-rule:SVGグラフィックス要素の塗りつぶし方法を指定する
mask-image	mask-image:マスクレイヤーとなるイメージを指定する
mask-mode	mask-mode:マスクのモード（輝度値・アルファ値）を指定する
mask-repeat	mask-repeat:マスクレイヤーイメージの繰り返し方法を指定する
mask-position	mask-position:マスクレイヤーイメージの位置を指定する
mask-clip	mask-clip:マスク適用の範囲を指定する
mask-origin	mask-origin:マスク適用の基準位置を指定する
mask-size	mask-size:マスクレイヤーイメージのサイズを指定する
mask-composite	mask-composite:複数マスクの合成方法を指定する
mask	mask:マスクに関する指定をまとめて行う
mask-border-source	mask-border-source:マスクボーダー画像として使用する画像を指定する
mask-border-mode	mask-border-mode:マスクボーダーのモード（輝度値・アルファ値）を指定する
mask-border-slice	mask-border-slice:マスクボーダー画像の使用範囲を指定する
mask-border-width	mask-border-width:マスクボーダーの太さを指定する
mask-border-outset	mask-border-outset:マスクボーダー領域がボーダーボックスを超えて拡がる量を指定する
mask-border-repeat	mask-border-repeat:マスクボーダーの繰り返し方法を指定する
mask-border	mask-border:マスクボーダーに関する指定をまとめて行う
transform	transformでアニメーション！要素を動かすプロパティ
transform:matrix()	transform:matrix():要素に2D変形を適用する
transform:matrix3d()	transform:matrix3d():要素に3D変形を適用する
transform:translate()	transform:translate():要素の表示位置を移動させる
transform:scale()	transform:scale():要素を拡大・縮小表示する
transform:rotate()	transform:rotate():要素を回転表示する
transform:skew()	transform:skew():要素を傾斜変形させる際に使用
transform:perspective()	transform:perspective():3D変形の遠近効果を調節する際に使用
transform-origin	transform-origin:変形させる要素の中心点の位置を指定
transform-style	transform-style:子要素を平面か立体的に表示するかを指定
perspective	perspective:3D変形させた要素の奥行きを指定
perspective-origin	perspective-origin:3D変形させた要素の奥行きの起点を指定
backface-visibility	backface-visibility:3D空間で変形した要素の背面の表示方法を指定
transition	transition:transitionの値をまとめて指定する
transition-duration	transition-duration:変化に掛かる時間を指定する
transition-timing-function	transition-timing-function:変化のタイミング・進行割合を指定する
transition-delay	transition-delay:変化がいつ始まるかを指定する
animation	animation:アニメーションについてまとめて指定する
animation-name	animation-name:アニメーション名を指定する
animation-duration	animation-duration:アニメーション一回分の時間の長さを指定する
animation-timing-function	animation-timing-function:アニメーションのタイミング・進行割合を指定する
animation-iteration-count	animation-iteration-count:アニメーションの繰り返し回数を指定する
animation-direction	animation-direction:アニメーションを交互に反転再生させるかどうかを指定する
animation-play-state	animation-play-state:再生中か一時停止かを指定する
animation-delay	animation-delay:アニメーションがいつ始まるかを指定する
text-transform	text-transform:テキストを大文字・小文字・全角文字への変換を指定する
white-space	white-space:ソース中のホワイトスペース・改行の表示方法を指定する
word-break	word-break:テキストや単語の改行方法を指定する
overflow-wrap	overflow-wrap:単語やテキストの改行方法を指定する
word-wrap	word-wrap:テキストや単語を途中で改行方法
text-align	text-align:ブロックコンテナ内の行の揃え位置・均等割付を指定する
word-spacing	word-spacing:単語の間隔を指定する
letter-spacing	letter-spacing:文字の間隔を調節する
text-decoration	text-decorationでリンクの下線を削除！テキストを装飾しよう！
text-shadow	text-shadow:テキストに影をつける。サンプルコードあり！
overflow-x	overflow-x:はみ出た要素の左右の表示方法を指定する
overflow-y	overflow-y:はみ出た要素の上下の表示方法を指定する
overflow	overflow:hidden・scrollなど。はみ出た要素の表示方法を指定しよう
overflow-style	overflow-style:スクロール方法の優先度を指定する
box-sizing	box-sizing:ボックスサイズの算出方法を指定する
resize	resize:ユーザーが要素のサイズを変更できるかどうかを指定する
calc()関数	calc()関数で幅調整！テンプレコード付きでわかりやすい。
attr()関数	attr()関数で属性を取得！テンプレコード付きでわかりやすい！