section

article

aside

hgroup

header

footer

nav

figure

figcaption

video

ビデオ

動画を再生する事ができる。ブラウザによって対応動画が違うので、source要素で複数の動画を指定する必要がある。

Example Source Code

<video controls autoplay poster="example.png" > <source src="example.mp4"> <source src="example.ogv"> <source src="example.webm"> <p>ご使用中のブラウザでは動画の再生に対応しておりません。</p> </video>

1 2 3 4 5 6

<video controls autoplay poster="example.png" >     <source src="example.mp4">     <source src="example.ogv">     <source src="example.webm">     <p>ご使用中のブラウザでは動画の再生に対応しておりません。</p> </video>

Example

audio

source

embed

mark

progress

meter

time

ruby, rt, rp

ルビ

ルビを指定する事ができる。rubyタグで囲み、rtタグでルビを指定。rpタグでルビ表示できないブラウザに表示させる文字を設定する。

Example Source Code

<ruby>九十九<rp>(</rp><rt>つくも</rt><rp>)</rp></ruby>

1	<ruby>九十九<rp>(</rp><rt>つくも</rt><rp>)</rp></ruby>

Example

九十九(つくも)

wbr

改行機会

brタグが必ず改行されるのに対してwbrは改行の機会を設定するタグで、英語の単語の文字数が多すぎて、改行されずにオーバーフローする場合などに、wbrタグを入れておけば、改行されるようになる。以下のコードでは歌詞にありそうなLoveが続く文章だが、wbrタグが入っていれば改行されるが、wbrタグ入っていない場合は改行されずにオーバーフローしている。

Example Source Code

Love,<wbr>Love,<wbr>Love,<wbr>Love,<wbr>Love,<wbr>Love,<wbr>Love,Love,<wbr>Love,<wbr>Love,<wbr>Love,<wbr>Love,<wbr>Love,<wbr>Love,Love,<wbr>Love,<wbr>Love,<wbr>Love,<wbr>Love,<wbr>Love,<wbr>Love...<br> Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love...

1 2

Love,<wbr>Love,<wbr>Love,<wbr>Love,<wbr>Love,<wbr>Love,<wbr>Love,Love,<wbr>Love,<wbr>Love,<wbr>Love,<wbr>Love,<wbr>Love,<wbr>Love,Love,<wbr>Love,<wbr>Love,<wbr>Love,<wbr>Love,<wbr>Love,<wbr>Love...<br> Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love...

Example

Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love…
Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love,Love…

canvas

キャンバス

ビットマップ画像を描画する事ができる。描画自体はJavaScriptで描画する。

Example Source Code

<canvas id="canvasExample" width="300" height="300"> 使用中のブラウザはcanvasタグに対応しておりません。 </canvas> <script> var canvas = document.getElementById('canvasExample'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(300, 20); ctx.lineTo(300, 300); ctx.lineTo(20, 300); ctx.closePath(); ctx.stroke(); } </script>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<canvas id="canvasExample" width="300" height="300"> 使用中のブラウザはcanvasタグに対応しておりません。 </canvas> <script>     var canvas = document.getElementById('canvasExample');     if (canvas.getContext) {         var ctx = canvas.getContext('2d');         ctx.beginPath();         ctx.moveTo(20, 20);         ctx.lineTo(300, 20);         ctx.lineTo(300, 300);         ctx.lineTo(20, 300);         ctx.closePath();         ctx.stroke();      } </script>

Example

使用中のブラウザはcanvasタグに対応しておりません。

command

details

summary

datalist

keygen

output

basefont

big

center

font

s

strike

tt

u

frame

frameset

noframes

acronym

applet

iisindex

dir

Safariのデバッグコンソール

iPhoneでのデバッグにはSafariのデバッグコンソールを使用する。設定>Safari>デベロッパ デバッグコンソールをオンにする。

PhoneGap

Titanium

jsWaffle

NimbleKit

CGI

JavaScript

div

span