HTML5のタグ(抜粋)
詳細はW3C HTML5(英語)。
タグの書き方
- <タグ名 属性名1="属性値1" 属性名2="属性値2" >要素の中身</タグ名>
汎用の属性値 - class="クラス名"
- 要素を指定したクラスに割り当てる。複数のクラスを割り当てることも可(スペースで繋ぐ)。
※クラス-当該要素をより細かく意味づけして分類する - id="ID"
- 要素にIDを割り振る
※ID-ページ中その要素固有のIDを割り振る(ページ内外から#id名でその場所を指示することができる)
HEAD要素
- メタデータ
-
- タイトル…<title>文書(ページ)のタイトル </title>☆
- メタ情報…<meta>
文書(ページ)の様々な情報(文字コードなど)☆metaの属性 - name="文字列" content="文字列"
- メタデータ名とその内容をセットで指定
- charset="文字コード名"
- ページで使用される文字コード
- 外部ソース(スタイルシートなど)へのリンク…<link>☆
linkの属性 - rel="文字列"(必須)
- リンク先との関係(stylesheetなど)
- href="URL"(必須)
- リンク先ファイルのURL
- ページ内スタイルシート…<style>スタイル設定</style>☆
BODY要素
- 文章構造の記述
-
- ひとまとまりのコンテンツ…<article>見出し+section要素など様々な要素</article>☆
- セクション(章や節)…<section>見出し+様々な要素</section>☆
- ナビゲーション…<nav>サイト内へのリンクなど</nav>☆
- 補足情報…<aside>nav要素など様々な要素</aside>☆
- 見出し(ページ全体、章や節など)…<h1-6>見出しにする文字列</h1-6>☆
- ヘッダー…<header>見出し要素、nav要素など</header>☆(<head>との違いに注意)
- フッター…<footer>address要素など</footer>☆
- 著者情報…<address>著者に関する説明文、連絡先など</address>☆
- コンテンツの区分
-
- サイト内の主要コンテンツ
- <main>見出し、article、nav要素など様々な要素、一文書中に一つ</main>☆
- 段落など
-
- 段落…<p>文、図など</p>☆
- 区切り…<hr>☆
- 整形済み…<pre>すでに整形された書式(改行など)で書かれたソース類</pre>
- 無色透明のブロック…<div>様々な要素</div>
- 引用
-
- 引用…<blockquote>引用する要素全体</blockquote>☆
blockquoteの属性 - cite="URL"
- 引用元のURL
- 引用…<blockquote>引用する要素全体</blockquote>☆
- リスト
-
- リスト(順序のあるリスト…<ol>☆、順序のないリスト…<ul>☆)
- リスト項目…<li>項目</li>☆
olの属性 - reversed="reversed"
- リストの並び順を降順にする
- start="数値"
- リストの開始番号
sample <ol reversed="reversed" start="3">
<li>Three</li>
<li>Two</li>
<li>One</li>
</ol>- Three
- Two
- One
<ul>
<li>A</li>
<li>あ</li>
<li>α</li>
</ul>- A
- あ
- α
- 定義リスト…<dl>☆
- 定義する用語…・<dt>用語</dt>☆
- 用語の説明…<dd>説明文</dd>☆
sample <dl>
<dt>定義</dt>
<dd>内容</dd>
</dl>- 定義
- 内容
- リスト(順序のあるリスト…<ol>☆、順序のないリスト…<ul>☆)
- 図示など
-
- 図示…<figure>
- コンテンツの説明…<figcaption>コンテンツの説明文</figcaption>
- 画像・リスト・表など
- 図示…<figure>
- 表
-
- 表…<table>☆
- 表の説明…<caption>表の説明文</caption>
- 列単位でまとめる…<colgroup>
- span属性を用いる
colgroupの属性 - span="数値"
- グループ化する列数
- 要素にcolを入れる…<col>
colの属性 - span="数値"
- まとめる列数
※colgroup,colはともにth,tdを包含する要素ではない=th,tdの中のスタイル設定に原則的に影響を及ぼせない
主に列幅や背景色を決めるときに用いる。cf.幅の設定
- span属性を用いる
- (表のヘッダー…<thead>)省略されることが多い
- 行…<tr>☆
- 見出しセル…<th>見出し内容</th>☆
- 行…<tr>☆
- (表本体…<tbody>)
- 行…<tr>☆
- データセル…<td>データ内容</td>☆
th,tdの属性 - colspan="数値"
- セルを結合する列数
- rowspan="数値"
- セルを結合する行数
- 行…<tr>☆
- (表のフッター…<tfoot>)
- 行…<tr>☆
- <td>フッターの内容</td>☆
- 行…<tr>☆
sample <table> <caption>表のタイトル</caption> <colgroup> <col class="groupA"><col span="2" class="groupB"> </colgroup> <colgroup span="2" class="groupC"> <thead> <tr> <th>グループA</th><th>グループB</th><th>グループB</th><th>グループC</th><th>グループC</th> </tr> </thead> <tbody> <tr> <td>グループA-1</td><td>グループB1-1</td><td>グループB2-1</td><td rowspan="2">グループC1-1</td><td>グループC2-1</td> </tr> <tr> <td>グループA-2</td><td colspan="2">グループB1-2</td><td>グループC2-2</td> </tr> </tbody> <tfoot> <tr> <td colspan="5">※色はスタイルシート</td> </tr> </tfoot> </table>
表のタイトル グループA グループB グループB グループC グループC グループA-1 グループB1-1 グループB2-1 グループC1-1 グループC2-1 グループA-2 グループB1-2 グループC2-2 ※色はスタイルシート - 表…<table>☆
- 画像その他の埋め込み
-
- 画像…<img>☆
imgの属性 - src="URL"(必須)
- 画像ファイルのURL
- alt="文字列"
- 画像の説明文(画像が表示できないときに代替として使用される)
- height="数値"
- 画像の高さ(px,%)
- width="数値"
- 画像の幅(px,%)
- 音声、動画…<audio>,<video>
- 音声、動画タグが用意されていない環境向けのメッセージ
- <source>
audio,video,sourceの属性 - src="URL"(必須)
- 音声、動画ファイルのURL
audio,videoの属性 - autoplay
- 自動的に再生する
- controls
- 操作インタフェースを表示する
- インラインフレーム…<iframe></iframe>
iframeの属性 - name
- フレーム名
- src="URL"
- 表示したい文書のURL
- height="数値"
- フレームの高さ
- width="数値"
- フレームの幅
- 画像…<img>☆
- 一文内(インライン)の意味づけ
-
- 強調…<em>強調したい単語など</em>☆
- 重要…<strong>強調したい単語など</strong>☆
- 引用句…<q>引用部分</q>
qの属性 - cite="URL"
- 引用元のURL
- 引用元…<cite>引用元のタイトルなど</cite>
- 改行…<br>☆
- 無色透明のインライン要素…<span>文字列など</span>
- リンク
-
- ハイパーリンク…<a>リンク先の説明文</a>☆
aの属性 - href="URL(#id)"
- リンク先のURL(とidで指示される場所)
- target="フレーム名"
- リンク先を開くフレーム名、「_blank」なら新しいウィンドウ・タブで開く
- ハイパーリンク…<a>リンク先の説明文</a>☆
- フォーム
-
- 入力・送信フォーム…<form>☆
formの属性 - action="URL"
- 送信先URL
- method="[GET/POST]"
- 送信の方法
- 入力項目をまとめてフィールドセットを作る…<fieldset>
- フィールドセットにキャプションを付ける…<legend>フィールドセット名</legend>
- フォーム部品にラベルを付ける…<label>
labelの属性 - for="フォーム名"
- 関連づけるフォーム名(id属性値)
- <input>☆
inputの属性 - name="変数名"
- 変数名
- value="値"
- 変数の値
- type="型"
- 入力フォームの型
- text…1行入力
- size="入力欄の大きさ"
- maxlength="最大入力文字数"
sample <input type="text" name="id" size="10">
- password…パスワード入力欄(入力内容がマスクされる)
- size="入力欄の大きさ"
- maxlength="最大入力文字数"
sample <input type="password" name="password" size="10">
- radio…単数選択させる項目
- checked 初期選択項目
sample <fieldset>
<legend>リーダー</legend>
<input type="radio" name="leader" value="takahashi" id="takahashi" checked><label for="takahashi">高橋</label>
<input type="radio" name="leader" value="niigaki" id="niigaki"><label for="niigaki">新垣</label>
</fieldset> - checkbox…複数選択可能な項目
- checked 初期選択項目
sample <fieldset>
<legend>センター</legend>
<input type="checkbox" name="center" value="abe" id="abe" checked><label for="abe">安倍</label>
<input type="checkbox" name="center" value="gotou" id="gotou"><label for="gotou">後藤</label>
</fieldset> - submit…送信ボタン
sample <input type="submit" name="submit" value="決定">
- text…1行入力
- セレクトボックス…<select>☆
selectの属性 - name="変数名"
- 変数名
- size="数値"
- 表示する選択肢の数
- セレクトボックスの選択肢…<option>☆
optionの属性 - value="値"
- 変数の値
- selected
- 初期に選択されている選択肢
sample <select name="favorite" size="1">
<option value="gotou">後藤</option>
<option value="matsuura">松浦</option>
<option value="fujimoto">藤本</option>
</select> - 複数行入力…<textarea>☆
textareaの属性 - name="変数名"
- 変数名
- cols="数値"
- 1行あたりの文字数
- rows="数値"
- 表示行数
- maxlength="数値"
- 最大文字数
- placeholder="文字列"
- 入力内容の例などのヒント
sample <label for="comment">コメント</label><br>
<textarea id="comment" name="comment" cols="40" rows="5" placeholder="自由に書いてや">
</textarea>
- 入力・送信フォーム…<form>☆