【HTML】タグチートシート

基本のタグ

DOCTYPE宣言

どのバージョンのHTMLで作られているかをブラウザに伝える

<!DOCTYPE html>

html

HTMLの要素は全てこのタグで囲む

<html></html>

head

ページの情報は全てこのタグで囲む

<head></head>

body

ページに表示される内容は全てこのタグで囲む

<body></body>

headタグ内で使うタグ

title

ページにタイトルを指定する (検索エンジンの検索結果画面に表示されたり、ブラウザのタブに表示されます)

<title></title>

link

外部ファイルの読み込みを指定する (外部のCSSファイルなどを指定し、読み込む)

<link rel="stylesheet" href="style.css">

style

スタイルシートをインラインで記述する

<style></style>

グループ化するタグ

div

他タグをグループ化する (※他に適切なタグがない場合の最終手段として使用する事を推奨)

<div></div>

header

ヘッダー要素をグループ化する (Webサイトのサイトタイトルやナビゲーションメニューなどをグループ化)

<header></header>

footer

フッター要素をグループ化する (Webサイトの関連文書へのリンクや著作権情報などをグループ化)

<footer></footer>

section

1つのセクションをグループ化する (Webサイトの意味や機能のあるグループなどをグループ化)

<section></section>

nav

ナビゲーション要素をグループ化する (Webサイトの他のページへのリンクやページ内リンクなどをグループ化)

<nav></nav>

article

記事要素をグループ化する (Webサイトの記事ページ情報などをグループ化)

<article></article>

aside

補足情報をグループ化する (Webサイトの本文と関連するけど特に区別するべき要素などをグループ化)

<aside></aside>

テキスト系のタグ

h1 ~ h6

見出しを表示する (最重要項目をh1タグで、キーワード関連をh2タグを使う事を推奨)

<h1></h1>

p

段落を表示する

<p></p>

ul

順序のないリストを表示する (リスト項目はliタグを使用)

<ul></ul>

ol

順序のあるリストを表示する (リスト項目はliタグを使用)

<ol></ol>

li

リストの項目を表示する

<li></li>

埋め込み系のタグ

a

ハイパーリンクを表示する (href属性の値には相対パスと絶対パスのどちらでも指定できる)

<a href=""></a>

img

画像を表示する (指定できる画像フォーマットはPNG・JPG・GIF・SVG・PDF)

<img src="">

iframe

インラインフレームを埋め込む (WEBページ内に別のWEBページを表示する)

<iframe src=""></iframe>

embed

プラグインデータを埋め込む (指定できるプラグインデータはMPEG・FLASH・QuickTime・WAVEファイル)

<embed src=""></embed>

video

動画を埋め込む

<video src=""></video>

audio

音声を埋め込む

<audio src=""></audio>

テーブル系のタグ

table

テーブルを表示する

<table></table>

caption

テーブルに見出しを表示する (tableタグの最初の子要素として使用)

<caption></caption>

thead

テーブルのヘッダ部分をグループ化する

<thead></thead>

tbody

テーブルのボディー部分をグループ化する

<tbody></tbody>

tr

テーブルの横一列をグループ化する

<tr></tr>

th

テーブルの見出しセルを表示する (テーブル要素の左側に表示される要素に使用)

<th></th>

td

テーブルのデータセルを表示する

<td></td>

フォーム系のタグ

form

フォーム要素をグループ化する

<form action=""></form>

label

フォーム部品と項目名をリンクする

<label for=""></label>

input

フォーム部品を表示する

<input type="text"></input>

textarea

複数行のテキスト入力欄を表示する

<textarea></textarea>

select

セレクトボックスをグループ化する (セレクト項目はoptionタグを使用)

<select></select>

option

セレクト項目を表示する

<option value=""></option>

button

ボタンを表示する

<button type="submit"></button>

その他のタグ

コメントアウトする (Webページに表示されない)

<!-- -->

br

改行する

<br>