HTML講座

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

リスト

リスト(順序のあるリスト…<ol>☆、順序のないリスト…<ul>☆)
- リスト項目…<li>項目</li>☆
</ol>、</ul>

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>☆
</dl>

sample
<dl> <dt>定義</dt> <dd>内容</dd> </dl>

定義

内容

図示など

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 あ α

sample
`<dl> <dt>定義</dt> <dd>内容</dd> </dl>`	定義内容

図示…<figure>
- コンテンツの説明…<figcaption>コンテンツの説明文</figcaption>
- 画像・リスト・表など
</figure>

表

表…<table>☆
- 表の説明…<caption>表の説明文</caption>
- 列単位でまとめる…<colgroup>
  1. span属性を用いる
    
    colgroupの属性
    
    span="数値"
    
    グループ化する列数
  2. 要素にcolを入れる…<col>
    
    colの属性
    
    span="数値"
    
    まとめる列数
  </colgroup>(1.のときは省略)
  ※colgroup,colはともにth,tdを包含する要素ではない＝th,tdの中のスタイル設定に原則的に影響を及ぼせない
  
  主に列幅や背景色を決めるときに用いる。cf.幅の設定
- （表のヘッダー…<thead>）省略されることが多い
  - 行…<tr>☆
    - 見出しセル…<th>見出し内容</th>☆
    </tr>
  （</thead>）
- （表本体…<tbody>）
  - 行…<tr>☆
    - データセル…<td>データ内容</td>☆
    th,tdの属性
    
    colspan="数値"
    
    セルを結合する列数
    
    rowspan="数値"
    
    セルを結合する行数
    
    </tr>
  （</tbody>）
- （表のフッター…<tfoot>）
  - 行…<tr>☆
    - <td>フッターの内容</td>☆
    </tr>
  （</tfoot>）
</table>

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		グループC1-1	グループC2-2
※色はスタイルシート

画像その他の埋め込み

画像…<img>☆

imgの属性

src="URL"(必須)

画像ファイルのURL

alt="文字列"

画像の説明文（画像が表示できないときに代替として使用される）

height="数値"

画像の高さ(px,%)

width="数値"

画像の幅(px,%)
音声、動画…<audio>,<video>
- 音声、動画タグが用意されていない環境向けのメッセージ
- <source>
  
  audio,video,sourceの属性
  
  src="URL"(必須)
  
  音声、動画ファイルのURL
</audio>,</video>

audio,videoの属性

autoplay

自動的に再生する

controls

操作インタフェースを表示する
インラインフレーム…<iframe></iframe>

iframeの属性

name

フレーム名

src="URL"

表示したい文書のURL

height="数値"

フレームの高さ

width="数値"

フレームの幅

一文内（インライン）の意味づけ

強調…<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」なら新しいウィンドウ・タブで開く

フォーム

入力・送信フォーム…<form>☆

formの属性

action="URL": 送信先URL
method="[GET/POST]": 送信の方法

入力項目をまとめてフィールドセットを作る…<fieldset>
- フィールドセットにキャプションを付ける…<legend>フィールドセット名</legend>
</fieldset>
フォーム部品にラベルを付ける…<label>

labelの属性

for="フォーム名"

関連づけるフォーム名(id属性値)

</label>

<input>☆

inputの属性

name="変数名"

変数名

value="値"

変数の値

type="型"

入力フォームの型

hidden…画面に表示されない
text…1行入力
- size="入力欄の大きさ"
- maxlength="最大入力文字数"
sample
<input type="text" name="id" size="10">
password…パスワード入力欄（入力内容がマスクされる）
- size="入力欄の大きさ"
- maxlength="最大入力文字数"
sample
<input type="password" name="password" size="10">

sample
`<input type="text" name="id" size="10">`

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="決定">

sample
`<input type="submit" name="submit" value="決定">`

セレクトボックス…<select>☆

selectの属性

name="変数名": 変数名
size="数値": 表示する選択肢の数

セレクトボックスの選択肢…<option>☆

optionの属性

value="値"

変数の値

selected

初期に選択されている選択肢

<option>

</select>

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="文字列"

入力内容の例などのヒント

</textarea>

sample
<label for="comment">コメント</label><br> <textarea id="comment" name="comment" cols="40" rows="5" placeholder="自由に書いてや"> </textarea>
コメント
ボタン…<button>☆

textareaの属性

type="submit|reset|button"

ボタンの種類(初期値はsubmit)

name="変数名"

変数名

value="値"

送信される値

ボタンのラベル</button>

sample
<button name="action" value="send">送信する</button>

sample
`<label for="comment">コメント</label><br> <textarea id="comment" name="comment" cols="40" rows="5" placeholder="自由に書いてや"> </textarea>`
コメント

sample
`<button name="action" value="send">送信する</button>`

</form>