【HTML】タグチートシート
基本のタグ
DOCTYPE宣言
どのバージョンのHTMLで作られているかをブラウザに伝える
<!DOCTYPE html>
html
HTMLの要素は全てこのタグで囲む
<html></html>
head
ページの情報は全てこのタグで囲む
<head></head>
body
ページに表示される内容は全てこのタグで囲む
<body></body>
headタグ内で使うタグ
title
ページにタイトルを指定する (検索エンジンの検索結果画面に表示されたり、ブラウザのタブに表示されます)
<title></title>
meta
ページの情報を指定する (文字コードの指定やページのキーワード,説明などを記述する)
<meta charset="UTF-8">
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>