タグ解説:主なものを紹介。他にも色々あるので調べてみましょう！
分類分けにはカテゴリー(html4ではブロック要素、インライン要素)がありますが、
ここでは意識せず、適当に分類しています。
htmlの構造系のタグ
| html |
htmlの始まりを<html>,終わりを</html>とする。 |
| head |
ヘッダ情報。具体的内容を表すbody以外全部を示す。 |
| script |
スクリプトタグ。deferやasync等を利用すると、指定したスクリプトの実行タイミングを変えることが出来る |
| meta |
メタ情報を記述する。サイトの説明や文字種などの説明もここで行うことができる。 |
| title |
タイトルをここで囲うことで設定する。 |
| body |
htmlの文書内容 |
| label |
label for="id名"とすることで、チェックボックス等のラベルにすることが出来る |
| iframe |
インラインフレームを作成する。seamlessをつけると境目が無いように出来る |
frameset |
フレームを作成する |
文章構造系タグ
| div |
タグで囲んだ部分をひとまとめとして扱う |
| span |
このタグで囲うことで、囲まれた部分に名前を付けスタイル等の操作が行える 例:<span class=""></span> |
| article |
html5:それだけで内容が完結する記事、セクション |
| section |
html5:意味をひとまとめにしたセクションを表す |
| aside |
html5:補足情報のセクション |
| nav |
html5:ナビゲーションを表す |
| h |
見出しの作成に用いる。<h1>,<h2>のように上下関係をつけることもできる。 |
| p |
段落 |
| ul |
箇条書きにすることができる。項目には<li>;(点の箇条書き)や<ol>(数字の箇条書き)等を使う。 |
| hr |
html4では水平線を引くことができる。html5ではテーマの区切りを表す意味に変わった模様。 |
フォーム系と要素の特徴を表す系のタグ
| a |
URLのリンクをはることができる。<a href="http://どこかのサイト>はよく使う。
<a href="適当なID">として、<xxx id="適当なID">を指定すると、そのタグまで移動することもできる。
また、html5からはdownload属性等もある。 |
| table |
表を作るときに使用。
<tbody>で囲ったものはtableのボディ部を表し、<caption>で囲ったものは見出しを表し、
<tr>で囲ったものはは行を表し、<td>で囲ったものははデータの内容を表す。
尚、本来の目的である表以外、例えばレイアウトを構成するために使うのは好ましくない。CSSでdisplay:table等があるのでそちらを活用しよう。 |
| select |
プルダウンフォーム。<option>が選択肢。<optgroup>とすると、グループ化できる。 |
| input |
入力フォーム。 |
| button |
ボタンを表すタグ |
| textarea |
複数行のテキストフィールド |
| map |
クリッカブルマップを生成。areaでハイパーリンク領域を設定する。 |
| number |
html5:数値を入れるフィールド。step属性を指定すると、上下ボタンでstepで指定した数だけ数値を上下させることができる |
| progress |
html5:プログレスバー |
| meter |
html5:測定値。進捗状況ではなく電力使用量等のパラメータ値をバー等の形式で表示する |
| form |
フォームタグ。action="実行時の動作",method="サーバーにGET,POSTか",target="表示ターゲット。 |
| fieldset |
フォームをグループ化する。<legend>タグと組み合わせて使う |
| datalist |
html5:データリストを定義する。このタグで定義したデータリストを使用する要素はlist="datalistタグのid名"を属性として書くことで使用する。 |
| dl,dt,dd |
定義型リストを作る。dtが定義、ddが説明で、それらをdlで覆う。 |
| menu |
html5:操作メニュー用のタグ。 |
| dialog |
html5:ダイアログを表すタグ。 |
スタイル系のタグ
| br |
改行を行える。 |
| wbr |
html5:このタグを記載された所で改行される |
| b |
太字。意味合い的にも強調したい場合はstrongを使う。 |
| i |
斜体。文章内の意味合い的に強調したい場合はemを使う。 |
| ruby,rt |
読み仮名 |
| pre |
整形済みテキスト。ソース中のスペースや改行をそのまま表示する。 |
| del |
削除線 |
font |
フォントの設定を色々変更 |
u |
下線 |
s |
抹消 |
tt |
等幅 |
blink |
点滅 |
center |
文字などを中央に置くことができるので便利。 |
marquee |
スクロール |
| mark |
html5:マーカーを引く |
音声や動画、画像等
bgsound |
効果音を流す |
| object |
外部リソースを流し込む(汎用的だが、ブラウザ実装に依存する)。プログラムモジュールを識別するIDとしてclassidがあり、パラメータを読み込み用として、paramタグがあったりする。 |
| embed |
html5:プラグインデータ(マルチメディアデータ等)を埋め込む |
| video |
html5:動画を埋め込む。 |
| audio |
html5:音声を埋め込む。 |
| img |
画像を貼り付けるのに使う。<img src="画像ファイルのある場所">のように使う。html5では関連するものとして、figure等がある。
src属性にdataURLを指定すると、画像ファイルを直接指定しなくとも画像を描くことが出来る。 |
| canvas,svg |
html5:画像描画。svgは若干遅いのが難点、imgタグで代えられるならその方が早いかも。 |
その他タグ
| command |
ユーザが実行可能なコマンド。実装されてなさそう。 |
| details |
html5:フローコンテンツ的なもの |
| template |
html5:レンダリングされないテンプレート。javascript等で要素を生成する等UIを弄る時に便利かも。 |
| keygen |
html5:フォーム送信時のキー発行による暗号化 |
タグではなく、属性欄に記述するもの
| autofucus |
html5:ページを開いた時にこの記述があるタグが自動でfocusされる |
| accesskey |
キーボードでアクセスする時の値を入れる。Alt+Ctrl(macの場合)+Access-key値 |
| placeholder |
html5:初期値としての値を入れる |
| required |
html5:入力必須項目のタグに記述し、入力しない場合は警告を表示する |
| multiple |
html5:input type="file"の時に複数ファイルを選択可能にする |
| pattern |
html5:正規表現で入力制限を行う |
| contenteditable |
html5:Contentを編集可能とする。 |
| autocomplete |
html5:自動補完する。 |
| contextmenu |
html5:右クリックメニュー(コンテキストメニュー)的なもの |
| draggable |
html5:ドラッグ可能か否か |
| tabindex |
タブ制御順 |
最終更新：2019年05月03日 13:02
