WebApp/HTML5

基本

構文

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
  <link rel="stylesheet" href="css/style.css" type="text/css"> /* スタイルシートを外部から読み込む */
  <style type="text/css"> スタイルシートを直接記述 </style>
</head>
<body>
  ページ内容
</body>
</html>

省略可能な要素

省略可能なもの要素
要素の省略可能html head p li dd body tbody colgroup
閉じスラッシュbr img hr meta wbr input embed area base col keygen link param source track
  • HTML1.0では閉じスラッシュの省略はできない
  • HTML5では閉じスラッシュの省略が可能。閉じスラッシュを入れても良い

グローバル属性

どの要素にも共通して指定可能な属性。

属性指定する内容
accesskeyキーボード、ショートカット
classスタイルシートのクラス
contenteditable編集可能/不可能
contextmenumenu 要素のid値を指定してコンテキストメニューを表示
dirテキストの方向
draggableドラッグの有効/無効
hidden関係、無関係
id固有のid
lang言語
spellcheckスペルチェックの有効性
styleスタイルシート
tabindexタブ、インデックス
titleタイトル
data独自データ

実体参照

半角スペース &nbsp;
<       &lt;
>       &gt;
&       &amp;	
"       &quto;

カテゴリーの種類

カテゴリー説明
メタデータ・コンテンツHTMLのメタデータやスタイルに関する要素
フロー・コンテンツbody要素内に記述する要素
セクショニング・コンテンツ文章のセクションを示す要素(articleasidenavsection
ヘッディング・コンテンツセクションの始まりの要素(h1 〜 h6
フレージング・コンテンツテキストの要素
エンベッディッド・コンテンツ外部ファイル(動画、画像など)を読み込む要素
インタラクティブ・コンテンツユーザが操作することで双方向にアクションが起こる要素
パルパブル・コンテンツフロー・コンテンツまたはフレージング・コンテンツを含むことが可能な要素


メタデータ

html

HTML文書の全体を表す要素。

<html lang="ja"></html>
属性説明
lang文書全体の言語を指定
manifestマニフェストファイルの指定

head

HTMLの文書のタイトル、スタイルシートなどメタ情報を含める要素。
メタデータ要素では script/noscript以外は全て head 要素内に含める必要がある。
head 要素内には必ず title 要素を含める必要がある。

title

HTML文書のタイトル。head 要素の中に必ず入れる必要がある

meta

文字コードの指定などHTML文書に付随する様々なメタ情報。

<meta charset="UTF-8" name="keyword" content="検索キーワード">
属性説明
charset文字エンコーディング
nameメタデータのプロパティ名(keyword は検索してヒットさせるキーワードを指定、description は検索エンジンの検索結果画面に表示される)
http-equivプラグマ指示子(ブラウザに対してその文書の状態や挙動を指示する)を指定
contentname、http-equivに対する値を指定
http-equiv説明
content-languageコンテンツの主言語を指定
content-typeファイルタイプ・文字エンコーディングを指定す(content="text/html; charset=UTF-8")
default-styleデフォルトスタイルの指定。link要素で複数のCSSファイルを指定してる場合に、優先して利用するCSSファイルを指定
refreshリダイレクト・再読込を指定(content="秒数; URL=リダイレクト先のURL")

link

外部リソース(HTML、CSS、RSS)を指定する時に使用。head 要素内に記述すること。

<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="alternate" hreflang="en" href="english.html"/>
<link rel="alternate" media="print" href="print.pdf" />
属性説明
hreflinkファイルのURLを指定(必須)
rellinkファイルとHTMLの関係を指定(必須)(Appendix rel属性参照)
medialinkファイルの対象メディアを指定(Appendix media参照)
hreflanglinkファイルの言語を指定
typelinkファイルのMIMEタイプを指定(省略可能で、デフォルトは text/css)
sizesアイコンをリンクする場合にサイズを指定

base

img 要素の src など、相対パスの基準URLを指定する。

<base href="http://vre.sakura.ne.jp/img/">
属性説明
href基準となるURLを指定
target基準となるファイルのターゲット指定

style

スタイルシートを記述する。scoped属性を指定しない場合は文書全体に影響する。head 要素内に埋め込むこと。

<style type="text/css">スタイルシートの内容を記述する</style>
属性説明
typesytleのMIMEタイプを指定
mediaスタイルを適用するメディアを指定する(Appendix media参照)
scoped<style scoped>〜</style>が記述されてた親要素と子要素に対してのみスタイルを適用

script

JavaScriptを埋め込む場合に使用。head または bodyどちらの記述も可能。
async または defer を指定しない場合は、スクリプトファイルの読込が完了するまでページの描画を停止する。

<script type="text/javascript src="script.js" async></script>
属性説明
typeタイプを指定(デフォルトは text/javascript)
src読み込む外部ファイルのURLを指定
asyncページを描画しつつ、スクリプトが読み込まれた時点で実行
deferページの読み込みが完了した時点でスクリプトを実行(asyncと同時指定した場合は、asyncが優先される)
charset外部スクリプトファイルの文字エンコーディングを指定

noscript

スクリプトが実行されない環境での代替を記述する。

<noscript>JavaScriptを利用していますのでONにして下さい</noscript>


 

セクション

セクションとアウトラインの概念

セクション要素を入れ子にしてアウトラインを作成する。
各セクションは最初にある見出し(h1 〜 h6)が、そのセクションの見出しと見なされる。
h1 〜 h6 に対して暗黙的にセクションが区切られる。(sectionを指定しなくて暗黙的に付与されている)

<section>
  <h1>1 見出し1</h1>
  内容
  <section>
    <h2>1.1 見出し1</h2>
    内容
  </section>
</section>

セクショニングルート

親のアウトラインから独立したアウトライン(階層構造)を持つことが可能な要素。
以下の要素がセクショニングルートに属する要素。

h1 〜 h6

見出しを示す。数値が小さい程、大きい見出しとなる。
見出しを配置すると暗黙的に新しいセクションを開始したことになる。
セクショニング・コンテンツの要素(articleasidenavsection)内にある最初の<h>要素は、そのセクションの見出しを表す。
その後に低い見出しが続く場合は、暗黙的にサブセクションを開始したものと見なされる。
同ランク以上の見出しが続く場合は、暗黙的に新しいセクションを開始したものと見なされる。

body

html 要素内で1度だけ使用でき、ドキュメントの内容を表す。

header

イントロダクションやナビゲーショングループであることを示す際に使用。
見出し(h1 〜 h6)が含まれてることが想定されるが必須ではない。アウトラインは形成しない。

nav

ナビゲーション(他のページ或いはページ内の部分にリンクするページのセクション)であることを示す。
利用規約ページ、著作権ページ、トップページへ戻るなどは nav 要素ではなく、footer 要素を使う。

<nav>
  <h1>メニュー</h1>
  <ul>
    <li><a href="index.html">トップページ</a></li>
    <li><a href="shop.html">店舗紹介</a></li>
  </ul>
</nav>

section

セクションは文脈に沿ってコンテンツをテーマ別にグループ化(書籍の目次のように全体の構造を示す)したもの。
section 要素の子として見だし(h1〜h6要素)を含めることで識別される。
一般的に section 要素は、要素の内容が文書のアウトラインを構成する必要がある場合に使用するのが適切。

article

内容が独立した単独の記事として完結するセクションであることを示す。
article を入れ子にして使用する場合、内側の article の内容は、原則として外側の article の内容に関連している。

<body>
<article>
  <header>
    <h1>スタッフ紹介</h1>
    <p><time datetime="2014/12/28">3 day a go</time></p>
  </header>
  <p>新しいコンテンツが増えました</p>
  <footer>
    <a href="?comments=1">コメントを見る</a>
    <p>投稿:管理人</p>
  </footer>
</article>
</body>

aside

本文のメインコンテンツ以外の要素(補足情報など)であることを示す。
本文と関連してはいるけれど区別して掲載するべき内容のこと。

<p>本文</p>
<aside> <p>補足情報</p> </aside>

footer

そのセクションに関する情報のことで、著作権や、関連文書へのリンクなどの情報が含まれる。

<footer>
  <p>Copyright 2010</p>
</footer>

address

そのセクション要素の住所や連絡先を表す。
連絡先情報以外の情報を含めてはいけない。
直近の親要素が article であった場合は、article で囲まれた記事に対する連絡先。
直近の親要素が bodyであった場合は、文書全体の連絡先。

<address><a href="/about/">株式会社 北コーン</a></address>


グルーピング

main

メインコンテンツであることを示す。
HTML文書の中で1回のみ使用し、要素の中に headernavfooter は含まない。

div

特別な意味を持たない要素で、主にコンテンツをスタイリングする目的で分離する際に使用。

<div style=" background-color:black; color:white;">
  <p>黒背景、白文字</p>
</div>

p

段落を示す。<p>〜</p>の間が1つの段落になる。

ol / ul / li

ol 順序立てられたリスト(インデントに番号を付与)を記述する場合に使用。
ul インデントに・が付与するリストを記述する場合に使用。

<ol reversed="reversed" start="3">
  <li>3. </li>
  <li>2. </li>
  <li value="5">5. </li>
</ol>
<ol>属性説明
startリストの始まりの番号を指定。指定した番号から付与される
reversedreversedを指定することで、リストの並びを降順に指定
<li>属性説明
valueリスト番号を変更する(親要素が<ol>の場合のみ指定可能)

dl / dt / dd

dl で名前(dt)と値(dd)を持つ記述リストを定義する。dd は dt に対して複数定義することが可能。

<dl>
  <dt>商品説明</dt>
  <dd>・安い</dd>
  <dd>・早い</dd>
  <dd>・旨い</dd>
  <dt>発売時期</dt>
  <dd>・2014/12/29</dd>
</dl>

hr

段落レベルのテーマの区切り。コンテンツの内容が切り替わる時に使用。

pre

改行などを含むテキストをもそのまま改行されて表示される。

<pre>
  整形済みテキスト
  改行もされる
</pre>

blockquote

他のソースから文書などを引用したセクションであることを示す。

<blockquote cite="http://vre.sakura.ne.jp/">
   瑠璃アプリからの〜
</blockquote>
属性説明
cite引用元のURLを記述

figure

本文から参照されるような説明文のついた図や表を示す。

<p>詳しい説明は<a href="#ruri">こちらの画像</a>を参照</p>
<figure id="ruri">
  <img src="./ruri.gif">
  <figcaption>瑠璃の全身図</figcaption>
</figure>

fogcaption

figure要素で指定した図に対するキャプション(説明文)をつける場合に使用。

 

テキスト

a

他サイトに移動するためのハイパーリンクを指定。
name属性が廃止され id属性で指定する方法に変更されている。

<a href="/">ホーム</a>
<a href="#link2">IDでリンク先へ</a>
<h2 id="link2">商品No2</h2>
属性説明
hrefリンク先のURL
target開く場合のターゲット
relリンク先との関連性
mediaリンク先のメディアを指定
hreflangリンク先の言語を指定
typeリンク先のMIMEタイプを指定
target説明
_self現在のウィンドウでリンク先を開く
_parent現在のウィンドウの親ウィンドウでリンク先を開く
_top現在のウィンドウの最上位階層のウィンドウでリンク先を開く(フレームを外して開く場合など)
_blank新しいタブやウィンドウでリンク先を開く
名前任意の名前を付けたウィンドウでリンク先を開く

span

フレージング・コンテンツを、ひとつの範囲として定義する際に使用。(フロー・コンテンツとしてまとめたい場合は<div>を使用)
単独では何も意味を持ってない為、style属性・class属性・lang属性・dir属性などグローバル属性と一緒に使用する。

<span style="background-color: #33CC33">背景が黄色</span>
<style> span.red { color: #ff0000; } </style>
<span class="red">この範囲はスタイルシートで指定したスタイルになる</span>

strong

重要度が高いことを示す。入れ子にすることでより重要度が高いことを示す。

em

コンテンツを部分的に強調する場合に使用する。入れ子の階層により強度の度合いが変わる。

small

註釈や細目(著作権表記、ライセンス要件など)を示す。

time

日付や24時間制での正確な日時を記載する場合に使用。
コンピュータが読み取ることが可能な形式で日時を記載する必要がある。

<time>2014-12-29</time>
<time datetime="2014-12-31">大晦日</time>
属性説明
datetime<time>要素の中に日時以外の内容を記述することが可能だが、内容がdatetimeで指定した日時と一致する必要がある

cite

文書内に引用して使用した作品のタイトル(本、新聞、歌、台本、ゲームなど)を示す為に使用。
タイトルのみを意味するので作者名などは使用できない。

q

短い文章を引用する際に使用する。cite属性は引用元のURLを指定。長めの文書を引用したい場合は、blockquoteを使用すること。

<q cite="http://vre.sakura.ne.jp/">引用部分</q>

dfn

定義された用語を示す。
dfn要素の親となる段落かセクション、または記述リストの同じグループ内に、その用語に対する定義を含めること。

<dl>
  <dt><dfn title="HyperText Markup Language">HTML</dfn><dt>
  <dd>Webページを制作するためのマークアップ言語</dd>
</dl>
属性説明
title<dfn>要素内の文字ではなく、ここで指定した文字を定義用語にする

abbr

略語、または頭文字を示す。

<dfn><addr title="HyperText Markup Language">HTML</addr>5</dfn>
属性説明
title正式名称を示す。

code / var / samp

要素説明
codeプログラムのコードを示す
var数式やプログラムで、変数や定数を表す識別子を示す
sampプログラムなどの出力サンプルを示す

kbd

ユーザーが入力する部分(キーボードや音声入力)を指定する場合に使用。

<kbd> <kbd>CTRL</kbd> + <kbd>C</kbd> </kbd>

sub / sup

要素説明指定例
sub下付き文字を示す水の化学式はH<sub>2</sub>O
sup上付き文字を示す3<sup>3</sup>=27

i / b / u / s / mark

要素説明
i音声や心の声など、他の内容と異なっている場合に使用
b他と区別したいテキストを示す場合に使用。重要性を伝える意味はない
uラベル付けを行う。明確に伝わらなかったり、本来とは異なる表記になるテキストに使用
<p>宛名が<u>川角</u>なっているが、私は<em>川澄</em></p>
sテキストが正確でないことを示す。テキストの内容を修正する場合は del を使用する
markハイライトすることで重要な部分に注意が向くことにする為に使用
例えば検索した単語をハイライト表示するなど、文書として強調するのではなく見た目で注意を惹きやすくするような意味になる

ruby / rt / rp / rtc

ルビをふる。rubyを親要素とし、rt子要素で読み仮名を記述する。
rp は rt の前後に指定することで、振り仮名サポートしてないブラウザでもルビをで表示する。
rtc は 複数のルビを振る場合に、<rt>要素を区別する為に指定する。

<ruby>川澄<rt>かわすみ</rt>舞<rt>まい<rt></ruby>
<ruby>亜米利加<rp>(</rp><rt>アメリカ</rt><rp>)</rp></ruby>
<ruby>亜米利加
  <rtc><rt>アメリカ</rt></rtc>
  <rtc><rt>America</rt></rtc>
</ruby>

bdi

テキストの一部を異なる文字の方向に指定する場合に使用。この要素内では周囲の書字方向の影響を受けない。
英文(左から右)の中にアラビア語(右から左)を入れる場合などに使用。

bdo

文字の表示方向を指定。

<bdo dir="rtl">右から左に表示</bdo>
属性説明
dir表示方向を指定(ltr:左から右、rtl:右から左)

wbr

コンテンツの表示領域が小さくなった時に折り返す位置を明示的に指定。
wbr を入れておくことで、必要に応じて、その箇所で折り返されるようになる。

ins

文書や画像を後から挿入、追加する場合に使用。

<ins datetime="2014-12-29T13:08:30">
  <p>追加した情報</p>
</ins>
属性説明
cite訂正理由の参照先
datetime訂正した日時
title補足情報

del

文書を削除、訂正する場合に使用。

<del datatime="2014-12-30T01:10:30>火曜日開催</del>


 

埋め込みコンテンツ

img

画像をHTMLファイルに埋め込む。

<img src="image.png" width="100" height="100" alt="イメージ画像">
属性説明
alt代替テキストを指定
srcイメージファイルのURL(必須)
usemapクライアントサイドイメージマップを利用。詳細は maparea
ismap埋め込み画像のサーバサイドイメージマップを指定
width画像の横幅指定
height画像の縦幅指定

map / area

map で img 要素を指定(usermapで定義された名前)し、area 要素でリンク領域を定義する。

<img src="map.png" usemap="#example">
<map name="example">
  <area shape="rect"   coords="50,50,150,150"          href="map1.html" alt="四角">
  <area shape="circle" coords="250,100,50"             href="map2.html" alt="丸">
  <area shape="poly"   coords="400,50,450,150,350,150" href="map3.html" alt="三角">
  <area shape="default"                                href="map4.html" alt="その他の領域">
</map>
map説明
nameイメージマップの名前( img 要素の usemapで定義された名前 )
area説明
shapeリンク領域の形状
coords座標(x,y)shapeの内容によって指定が異なる
hrefリンク先の指定
alt代替テキスト
hreflangリンク先の記述言語
typeリンク先のMIMEタイプ
rel現在の文書からみたリンク先の関係
media対象とするメディア
targetリンク先の表示方法
shape説明
rect四角形(左上と右下の座標 x,y,x,y)
circle円形 (中心点の座標と半径 x,y,半径)
poly多角形(x,y,x,y...)
default画像全体(指定しない)

iframe

インラインフレームでコンテンツを表示する場合に使用。

<iframe src="http://vre.sakura.ne.jp/" width="1024" height="764" sandbox></iframe>
<iframe srcdoc="<p>フレームの内容を直接ここに記述</p>" seamless></iframe>
属性説明
srcフレーム内に表示する文書のURL
srcdocフレームで表示する内容を直接記述する
sandboxフレームの表示を制御。引数を指定することで制限を弛めることが可能
widthフレームの幅
heightフレームの高さ
nameフレームの名前
seamlessインラインフレームのコンテンツを親コンテンツの一部のように表示する
sandbox説明
allow-same-origin親文書と同じドメインを持つものとする
allow-top-navigation最上位のウィンドウの操作を許可する
allow-formsフォームの送信を許可する
allow-scriptsスクリプトの実行を許可する

embed

FLASHなどの外部のプラグインなどを利用するファイルを表示する時に使用。

<embed src="flash.swf" type="application/x-shockwave-flash" width="400" height="240">
属性説明
srcコンテンツのURLを指定
typeMIMEタイプを指定

video

動画やオーディオファイルを読み込み再生する時に使用。
この要素に対応しているブラウザでは、プラグインを使わずに動画を再生することが可能。

<video src="video.mp4" preload="metadata" width="400" height="240"></video>
属性説明
src動画のURLを指定
poster静止画のURLを指定
preload先読みの目安を指定
mediagroupグループ名を指定
autoplay自動再生を行う
loopループ再生を行う
muted音声を出さない
controlsコントローラを表示する
preload説明
none先読みなし
metadataメタデータは先読み
auto動画全体を先読み

object

様々な形式のコンテンツ(画像、音声、動画、HTML文書、Javaアプレット)をHTMLファイルに埋め込む。

<object data="example.jpg" type="image/jpeg" width="300" height="150"></object>
属性説明
dataオブジェクトの指定(必須)
typeオブジェクトのMIMEタイプを指定(必須)
nameオブジェクトの名前を定義
usemapクライアントサイドイメージマップを利用。詳細は maparea
formフォームとの関連付けられてる場合はidを指定

param

objectの子要素として使用。object によって呼び出されたプラグインのパラメータ初期値を定義する。

<object data="sample.mp3" type="audio/mp3">
  <param name="src" value="sample.mp3">
  <param name="bgcolor" value="#ffffff">
  <a href="bgm1.mp3">音楽再生</a>
</object>
属性説明
nameパラメータ名(任意)を指定
valueパラメータの値を指定

audio

音や音楽ファイルの再生に使用する。この要素に対応してるブラウザはプラグインを使用せず再生可能。

<audio src="bgm0.mp3" autoplay loop></audio>
属性説明
src音声ファイルのURLを指定
preload先読みの目安を指定(none、metadata、auto)
mediagroupグループ名を指定
autoplay自動再生を行う
loopループ再生を行う
muted音声を出さない
controlsコントローラを表示する

source

audiovideo 内に source 子要素で複数の再生候補を指定することでブラウザが対応してる形式を自動で選択する。

<audio preload="metadata" controls>
  <source src="bgm1.mp3" type="audio/mp3">
  <source src="bgm1.ogg" type="audio/ogg">
</audio>
属性説明
src動画・音声ファイルの指定
typeMIMEタイプを指定
media対象とするメディアを指定(Appendix media参照

track

動画や音声ファイルに字幕やキャプションなどのテキストを指定。

<video>
  <source src="video.mp4">
  <track src="video_ja.vtt" kind="subtitles" srclang="ja" label="日本語字幕" default>
</video>
属性説明
srcテキストトラックの指定(VTTフォーマットを指定)(必須)
kindトラックの種類を指定
srclangテキストトラックの記述言語を指定
labelトラックのタイトルを指定
defaultトラックを有効にする
kind説明
subtitles翻訳の字幕(初期値)
captions難聴用の字幕
descriptions音声合成用のテキスト
chapters頭出し用のタイトル
metadataスクリプト用のデータ

canvas

HTML上にグラフィックを描く為の領域を作る。
グラフィックスは別途<script>で作成する。対応してないブラウザは要素の内容を表示する。

<canvas id="canvas">非対応</canvas>
  <script>
  // 黒く塗り潰された正方形を描画
  var canvas = document.getElementById('canvas');
  if (canvas && canvas.getContext) {
      var ctx = canvas.getContext('2d');
      ctx.fillRect(50,50,50,50);
  }
</script>

svg

SVGで描画を指定する。ベクターグラフィックスなので拡大縮小しても画像の劣化がない。

<svg>
  <rect     x="5" y="5" width="100" height="80" ry="10" fill="#ffff00" stroke="#ff0000" />
  <circle   cx="100" cy="80" r="40"                     fill="#ffff00" stroke="#ff0000" />
  <ellipse  cx="100" cy="80" rx="90" ry="40"            fill="#ffff00" stroke="#ff0000" />
  <polyline points="0,0 100,150 250,30 0,0"             fill="none"    stroke="#ff0000" />
  <polygon  points="0,0 80,110 200,130 180,80 0,0"      fill="#ffff00" stroke="#ff0000" />
</svg>
属性説明
fill枠内の色
stroke枠線の色
要素説明
<rect>四角形/角丸四角形(x y width height ry:角の丸み)
<circle>正円(cx cy r:半径)
<ellipse >楕円(cx cy rx:縦の半径 ry:横の半径)
<line>直線(x1 y1 x2 y2)
<polyline>連続直線(points)
<polygon>多角形(points)


 

テーブル

table / th / tr / td

table を親要素に tr で「行」を作り、th(太字になる)または td で「セル(列)」を作る。それ以外の要素は省略可能。

<table border="1">
  <caption>表のタイトル</caption>
  <colgroup span="2" width="60">       <!-- 1 - 2列目の横幅は60         -->
  <colgroup span="1" width="100">      <!-- 3列目の横幅は100            -->
  <colgroup span="1" class="sample">   <!-- 4列目はスタイルシートを適用 -->
  <thead>
    <tr><th id="name">名前</th><th>年齢</th><th>好物</th><th>備考</th></tr>
  </thead>
  <tbody>
    <tr><td headers="name">川澄</td><td>18</td><td>牛丼</td><td>Kanon</td></tr>
    <tr><td headers="name">雪 </td><td>20</td><td>不明</td><td>水月 </td></tr>
  <tbody>
</table>
table属性説明
border表がレイアウト目的で無いことを明示する場合は、空または1を指定する
th/td属性説明
colspanセルの結合(水平方向)
rowspanセルの結合(垂直方向)0で全ての列を結合(グループ化されてる場合はグループ化されてる列まで)
headersどの見出しに対するデータなのか明確にする。<th>で定義したIDを指定(複数指定する場合はスペースで区切る)
scope見出しの対象範囲
scope説明
auto自動、文脈に基づいて判断(初期値)
row行方向のセルを対象にする
col列方向のセルを対象にする
rowgroup行グループ内の全セルを対象にする
colgroup列グループ内の全セルを対象にする

caption

表のタイトルを記述。テーブルの上部に表示される。

colgroup / col

表の列をグループ化する。グループ化した列は同じ属性やスタイルを適用することが可能。
colの動作はcolgroupと同じだがグループ化の意味を持たない。

<colgroup span="2" width="100" >
<colgroup>
  <col span="2" width="100">
  <col span="1" width="60">
</colgroup>
属性説明
spanグループ化する列数(<col>子要素を持たない場合のみ指定可能)

thead / tbody / tfoot

要素説明<table>要素内の指定
thead表のヘッダであることを示す1つのみ
tbody表の本体であることを示す複数指定可能
tfoot表のフッタであることを示す1つのみ


 

フォーム

from

<form method="post" action="from.cgi">
  <p>お名前:<input type="text" name="name"></p>
  <p><input type="submit" value="送信する"></p>
</form>
属性説明
action送信先の指定
methodHTTPメソッドの指定(get post)
enctype送信時のデータ形式
accept-charset送信時の文字エンコーディング
nameフォームの名前を指定
target送信結果の表示方法を指定
autocompleteオートコンプリートの有効有無(on off)
novalidate妥当性をチェックしない
enctype説明
application/x-www-form-urlencodedURLエンコード(初期値)
multipart/form-dataマルチパート
text/plainプレーンテキスト

fieldset / legend

fieldsetは 複数の入力フォームをグループ化する。黒枠で囲まれる。
legend は fieldset 要素内の最初に記述し、グループ化された入力フォームのキャプション(グループの左上に表示)を指定する。

<fieldset form="group1">
<legend>個人情報</legend>
  <p>お名前:<input type="text" name="name" size="30" form="group1"></p>
  <p>ご住所:<input type="text" name="address" size="50" form="group1"></p>
</fieldset>
<form method="post" action="from.cgi" id="group1">
  <p><input type="submit" value="送信する"></p>
</form>
属性説明
formfieldset をどの form 要素に関連付けるかを指定(formのid)する(フォーム部品を form 要素外に配置する場合に使用)
name部品グループの名前を指定(スクリプトから参照する際に使用)
disabledグループ内の部品を無効にする

label

入力フォームに項目名などのラベルをつける。
ラベル部分のクリックでその部品を選択できるようになる。

<label>名前:<input type="text"></label>
<label for="tellabel">電話:</label>
<input type="text" id="tellabel">
属性説明
foridで指定された部品に関連付ける

input

フォーム部品(入力欄・選択肢・ボタン)を作成する。

属性説明
accepttype="file"の場合にサーバ側で受け取れるファイルの種類を指定
alt画像の代替テキストを指定
autocompleteオートコンプリートを有効にする
autofocusオートフォーカスを有効にする
checkedラジオボタンとチェックボックスの初期状態でのチェック有無を指定
dirnameフォームのinput要素の書字方向を示すクエリ名を指定
disabledinput要素を無効にする
formどの form 要素に関連付けるか指定する(フォーム部品を form 要素外に配置する場合に使用)
formaction送信先のURLを指定
formenctype送信するデータ形式を指定
formmethod送信方法を指定(get post)
formnovalidate入力されたデータの確認を無効にする
formtargetターゲット先を指定
nameフォーム部品を識別するための名前を指定(ここで指定した名前と入力値がセットで送信される)
valueボタン名や、テキストならテキストエリアに表示される文字列を指定(nameとvalueがセットで送信される)
typeフォーム部品の種類を指定
height高さを指定
width幅を指定
listリスト要素を id 属性で指定
max入力できる数値の最大値を指定
min入力できる数値の最小値を指定
maxlength入力できる最大文字数を指定
minlength入力できる最小文字数を指定
multiple複数の値の入力、選択を可能に設定
pattern入力値のパターンを指定
placeholder入力内容に初期表示するテキストを指定
readonly読み取り専用に指定
required入力必死に指定
size表示文字数を指定
src画像ファイルのURLを指定
step入力欄のステップ数を指定

typeの指定

分類type説明
テキストtext1行のテキスト入力欄
passwordパスワード入力欄
tel電話番号の入力欄
urlURLの入力欄
emailメールアドレスの入力欄
search検索テキストの入力欄
時間datetimeUTC(協定世界時)による日時の入力欄
datetime-localローカル日時の入力欄
date日付の入力欄
month年月の入力欄
week週の入力欄
time時間の入力欄
数・色number数値の入力欄
range大まかな数値の入力欄
color色の入力欄
選択radioラジオボタン
checkboxチェックボックス
fileファイルの送信欄
hidden隠しデータ
ボタンsubmit送信ボタン
image画像形式の送信ボタン
resetリセットボタン
button汎用的なボタン

button

フォームの送信ボタンなどを作成する。
<input type="button"> と異なり要素内でボタン名を指定できる。

<button type="submit" name="btn-name" value="btn-value">送信</button>
属性説明
nameフォーム部品を識別するための名前を指定
value送信される値を指定
typeボタンの種類(submit reset button)
autoforcusオートフォーカスを指定
formaction送信先の指定(form要素のaction属性上書き)
formmethodHTTPメソッド(form要素のmethod属性上書き)
formenctype送信時データ形式(form要素のenctype属性上書き)
formtarget送信結果表示方法(form要素のtarget属性上書き)
formnovalidate妥当性をチェックしない(form要素のnovalidate属性の代わりに使用)

select

選択ボックスを作成する。

<select name="select1" multiple size=3>
  <option value="選択肢1">選択肢1</option>
  <option value="選択肢2">選択肢2</option>
  <option value="選択肢3" selected>選択肢3</option>
</select>
属性説明
nameフォーム部品を識別するための名前を指定(option要素のvalueとセットで送信される)
size表示する選択肢の数を指定(デフォルトは1。multipleが指定されてる場合は4)
autoforcusオートフォーカスを指定
disabled操作を無効にする
multiple複数選択を可能にする
required必須入力

option / optgroup

select の子要素として、選択項目を記述する。
optgrpup は option をグループ化する。

<select name="select1" multiple size=3>
  <optgroup label="グループ1">
    <option value="選択肢1">選択肢1</option>
    <option value="選択肢2">選択肢2</option>
    <option value="選択肢3">選択肢3</option>
  </optgroup>
</select>
option属性説明
label項目の表示名
value送信する値(省略時は要素の内容が送信される)
selected最初から選択された状態にする
disabled選択できないようにする
optgroup属性説明
labelグループの表示名
disabled操作を無効にする

textarea

複数行のテキスト入力エリアを指定。

<textarea name="textarea" cols="50" rows="10">最初から表示される文字</textarea>
属性説明
nameフォーム部品を識別するための名前を指定
cols1行当たりの最大文字数
rowsテキストエリアの表示行数
maxlength入力可能な最大文字数を指定
readonlyユーザーテキストの編集を無効化し読み取り専用にする
disabled操作を無効にする
wrap入力テキストの改行ルール(soft:改行反映せず送信 hard:改行反映して送信)
autofocus自動フォーカスの指定
placeholder入力ヒントの文字列を指定(薄い色で指定した文字列を表示し入力すると消える)
dirname入力内容の書字方向(ltr または rtl)とセットで送信(指定した文字={ltr or rtl})
required入力必須

keygen

鍵のペア(公開鍵と秘密鍵)の作成を行う。選択できる鍵の長さはブラウザによって異なる。
フォームが送信されると秘密鍵はローカル保存、公開鍵はパッケージされてサーバに送信される。

<keygen name="key">
属性説明
nameフォーム部品を識別するための名前を指定
keytype暗号化方式(現状rsaしか指定できない)
challenge公開鍵と一緒に送信する任意の文字列を指定
disabledフォーム部品を無効化する

output

計算の結果を表す場合に使用。(対応してるブラウザなら数値を入れた時点で自動的に結果を表示する)

<form onsubmit="return false" oninput="answer.value = a.valueAsNumber + b.valueAsNumber>
  <input type="number" name="a"> + <input type="number" name="b">
  = <output name="answer" for="a b"></output>
</form>
属性説明
name出力欄を識別する為の名前を指定
for計算対象のフォームを明示したい場合に使用(指定しなくても計算結果は出力される)

progress

タスクが完了するまでの進捗状況を表示させる。
スクリプトと組み合わせてリアルタイムに進捗状況を表示させることが可能。

<progress value="30" max="100">進捗度:30%</progress>
属性説明
max全体の量(初期値は1)
value全体量に対する進捗度

meter

特定の範囲内における数量や割合を示す。バーの色が最適値の領域は緑色、それ以外は黄色になる。

<meter value="50" min="0" max="100" low="30" height="60" optimum="80"></meter>
<!-- 0〜30:低い値 30 〜 60:中間値 60 〜 100:高い値(最適値が80なので、ここが最適な値になる)-->
属性説明
value計測結果の値(必須)
min最小値
max最大値
low最も低い値の上限値を指定
high最も高い値の下限値を指定
optimum最適となる値を指定(省略時はlowとheightの中間)この値を含む領域が最適値になる

datalist

入力フォームの為の入力候補を定義する。

<p><input type="text" name="day1" list="daylist"></p>
<p><input type="text" name="day2" list="daylist"></p>
<datalist id="daylist">
  <option value="12/30"></option>
  <option value="12/31"></option>
</datalist>
属性説明
idinput で定義されたlist属性の値を指定


 

インタラクティブ

ユーザの操作によって表示、非表示のコントロールが可能な要素。

details / summary

ユーザ操作によって表示/非表示可能なコントローラ(アウトライン表示)を表示する。
summary 子要素がある場合は、summary の内容を表示する。ない場合はブラウザデフォルトの文字列になる。

<details open>
  <summary>詳細</summary>展開される内容をここに記述
</details>
details属性説明
open詳細情報を最初から展開しておく

menu

操作メニューのコマンドリストを作成する(HTML5の仕様通りに表示する対応ブラウザはないっぽい)

<p contextmenu="con">ここで右クリックするとコマンドが表示される</p>
<menu type="context" id="con">
  <li>コマンド1</li>
  <li>コマンド2</li>
</menu>
属性説明
typeメニューの種類を指定(context:右クリックで表示されるメニュー、toolbaar)
labelラベル名を指定。入れ子にされた<menu>要素に指定することでサブメニューとして機能する

dialog

dialog 要素は閲覧者が操作することが可能なダイアログを表示。

<dialog open>
  <p>ダイアログを表示</p>
</dialog>
属性説明
opendialog要素がブラウザ上で表示され操作可能になる


 

HTML5で廃止された要素と属性

廃止された要素

要素説明代替手段
acronym略称addr
appletJavaアプレットの埋め込みobject
bgsoundBGMの再生sound
basefont基準となるフォントサイズCSS
big大きめの文字CSS
blink文字の点滅CSS
centerセンタリングCSS
fontフォントのサイズ・色・種類CSS
tt等幅フォントCSS font-family:monospace;
strike取り消し線del
isindex1行のテキスト入力欄form
dirディレクトリ型のリストul
frameフレーム内の設定iframe
rbルビベースruby / rt
framesetウィンドウの分割廃止
noframesフレームの代替コンテンツ廃止
nobr改行させない廃止
noembedembed要素の代替コンテンツ廃止
marquee文字のスクロール廃止

廃止された属性

グループ要素属性
メタデータhtmlversion
headprofile
metascheme
linkrev charset target
セクションh1-h6align
bodybackground bgcolor text link vlink alink
グルーピングdivalign
palign
olcompact
litype
dlcompact
hrsize width align noshade
prewidth
テキストacharset rev shape coords
brclear
ultype compact
埋め込みコンテンツimglongdesc name align hspace vspace
areanohref
iframelongdesc scrolling frameborder marginwidth marginheight align
objectclassid codetype archive codebase standby declare align border hspace vspace
paramvaluetype type
テーブルtablewidth frame rules cellspacing cellpadding align bgcolor
tdalign valign char charoff abbr scope axis width height bgcolor nowrap
thalign valign char charoff abbr axis width height bgcolor nowrap
tralign valign char charoff bgcolor
captionalign
colgroupwidth align valign char charoff
colwidth align valign char charoff
tfootalign valign char charoff
tbodyalign valign char charoff
theadalign valign char charoff
フォームformaccept
legendalign
inputalign usemap ismap
インタラクティブmenucompact

意味が変更されたもの

主に見た目を整える為に使用されていた要素はHTML5では意味を持つように変更されている。

要素元の意味変更された意味
strong強い強調強い重要性
em強調強調(アクセント)
iイタリック音声や心の中で思ったこと
b太字他と区別するテキスト
small小さい文字註釈や細目
uアンダーライン伝わりにくいテキスト


 

メタデータとセマンティックWEB

HTMLに埋め込まれたテキストに意味を表現する情報を「メタデータ」と呼ぶ。
「メタデータ」を埋め込むことでプログラムが、そのテキストの意味を理解できるようになり、
自動的に情報収集し分析できるプラットフォームへ変化していく構想を「セマンティックWEB」と呼ぶ。

MicroData

HTMLにメタデータを埋め込む技術。任意のHTML要素に以下の様な属性を定義する。

<p itemscope itemtype="http://schema.org/Person">
  私の名前は<span itemprop="name">川澄舞</span>です。
</p>
属性説明
itemscopeアイテムを定義する範囲を示す
itemtypeアイテムのデータ型を示す
itempropアイテムのプロパティを示す
itemidアイテムのグルーバルIDを示す
itemrefアイテムのIDを参照する

RDFa / RDFa Lite

MicroDataと同様にHTML/XHTMLに属性を付与することでメタデータを指定できる仕様。

  • RDF(Resource Description Framework)
    XMLを用いてメタデータを記述する為の包括的な枠組み
  • RDFa(Resource Description Framework in attributes)
    RDFをXHTML属性として埋め込めるようにしたもの
  • RDFa Lite
    RDFaの機能を絞り込み、より簡単に扱えるようにしたもの

RDFa / RDFa Lite で表される情報はアイテムと呼ばれ、アイテムが持つ属性をプロパティと呼ぶ。
アイテムを定義するには任意のHTML要素に対して以下の属性を付与する。

属性説明
vocabメタデータの語彙(ボキャブラリ)を表す特定の識別子
typeofアイテムのデータ型
propertyアイテムのプロパティ
resourceWebページ内でアイテムに任意のidを付与することができる
#id と指定した場合、このWebページのURLが、http://ex.org/people であった場合、http://ex.org/people#id というURLでこのアイテムを参照できる
prefix1つのアイテム内で、vocab属性で指定したもの以外のボキャブラリーを使用したい場合に、そのボキャブラリーにプレフィックスを指定することができる
<p vocab="http://schema.org/" typeof="Person" prefix="ov: http://open.vocab.org/terms/" resource="#shumpei">
  私の名前は<span property="name">川澄舞</span>です。
  電話番号は<span property="telephone">080-1234-5678</span>です。
  好きな動物は<span property="ov:preferredAnimal">熊</span>です。
</p>

schema.org

Google、MicroSoft、Yahooなどの検索エンジンベンダーが合同で策定したボキャブラリ。
それ以外には、data-vocabulary.org がある。schema.org でデータ型が存在しない場合に利用する。
schema.org の大分類として定義されてるプロパティ

プロパティ定義内容
Person人物
Place場所
Product製品
CreativeWork捜索活動
Eventイベント
Intangible無形
Organization組織

カスタムデータ属性

カスタムデータ属性

「data-」という接頭辞を持つ属性に要素に追加することで、独自の設定項目を属性と指定することが可能。

data URI

データの内容をそのままHTMLに埋め込むことが可能。
外部リソースへのアクセスがなくなり、1つのファイルアクセスのみで済むというメリットがある。
データ量が増加(一般的に3倍になる)、ブラウザのキャッシュが利用できないというデメリットがある。 【書式】data:[MIME][;charset=<文字セット>][;base64],<base64でエンコードされた文字列>

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcwAAA〜">

Windowsでは以下でBase64に変換できる。

certutil -f -encode 入力 出力


 

アプリケーションキャッシュ

マニフェストファイルの書式に従って全てのリソースをキャッシュし終えると以降、そのWebアプリケーションはオフラインで利用が可能になる。
キャッシュの更新は、マニフェストファイルが更新されたタイミングで行われる。

1. マニフェストファイルを作成

-- manifest.appcache
CACHE MANIFEST
index.html
index.css

2. MIMEタイプの設定

AddType text/cache-manifest .appcache

3. HTMLソースに manifest属性を追加

<html manifest="manifest.appcache">

4. マニフェストファイルの作成

  • 1行目は CACHE MANIFEST
  • MIMEタイプは、text/cache-manifest
  • 文字コードはUTF-8
  • 拡張子は .appcache を推奨
  • エントリは行で区切られる。\r\n、\r、\n何れの改行でも良い
  • 相対URLを用いる場合は、マニフェストファイルのURLを基準にする
  • 全てのURLはメインページと同じオリジン(配信元)でなくてはならない
  • セクション(CACHE、FALLBACK、NETWORK、SETTINGS)名の後に : をつけてセクションを区切る
  • セクションを明示的に指定しない場合は、CACHEセクションとして扱われる

    '''セクション'説明
    CACHEここに記述されたURLのファイルをキャッシュする
    FALLBACK指定したURLのリソースにアクセスできなかった場合に代用となるリソースを指定
    空白区切りで2つの引数を指定。最初がアクセス対象のファイル(ワイルドカードの指定も可能)で、2つ目が代替となるファイル
    NETWORKキャッシュを無視して必ずネットワークからリソースを取得する
    SETTINGSprefer-online(オンライン時にはアプリケーションキャッシュを無視して通常のネットワークアクセスを行う)のみ指定可能

Appendix

media

メディアを指定することでスタイルを適用するメディアを限定することが可能。

メディア対象
allすべてのメディア(初期値)
screen一般的なディスプレイ
print通常のプリンタ
projectionプロジェクタ
tvテレビ
handheldハンドヘルドデバイス
tty固定文字サイズの端末
embossed点字プリンタ
braille点字の触角デバイス
speech読み上げブラウザ

rel属性

リンク先の関係を指定する。

linka、area説明
alternate代替の文書を示す
stylesheet×外部スタイルシートを示す
author著者情報の文書、または連絡先を示す
bookmark×ブックマークリンクを示す
helpヘルプの文書を示す
icon×アイコンを示す
license著作権情報の文書を示す
next一連の文書の中で次の文書を示す
nofollow×リンク先をフォローしない
noreferrer×リンク先にリファラーを送らない
prefetchリンク先の事前読み込み
prev一連の文書の中で前の文書を示す
search関連文書を検索するためのページを示す
tag×関連するタグを示す

トップ   編集 凍結解除 差分 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2015-01-30 (金) 16:25:05 (992d)