その他の新しい要素

Time要素

<section>
<h1>今日のできごと</h1>
<time datetime="2013-03-22" pubdate="pubdate">2013年3月22日</time>
<p>今日の帰り道に見かけたカフェがいい雰囲気だったので、今度本を持って行ってみよう。</p>
</section>

cite要素、q要素、blockquote要素、mark要素

<section>
<h1>読書メモ</h1>
<p>宮沢賢治作品を読みました。</p>
<cite>オツベルと象</cite>
<p>牛飼いが話す物語で、
<q>オツベルときたら大したもんだ。</q>というフレーズが印象的だった。</p>
<blockquote>
<p>「まあ、よかったねやせたねえ。」みんなはしずかにそばにより、鎖と銅をはずしてやった。<br>
「ああ、ありがとう。ほんとにぼくは助かったよ。」<mark>白象はさびしくわらって</mark>そう云った。</p>
</blockquote>
<p>強調部分は象の気持ちをよく表していると感じた箇所です。</p>
</section>

strong要素

<section>
<h1>注意、Attentionを表示</h1>
<p><strong>注意事項</strong><br>
誤って飲み込むおそれがありますので、<strong>お子様の手の届かない所で保管</strong>してください。</p>
</section>

b要素

<section>
<h1>ドリンク紹介</h1>
<p>
最近人気が高い<b>バナナミルクシェイク</b>は、たっぷりのミルクと完熟バナナを使用しています。更にまろやかさを出すために、はちみつをプラスしているのがポイント。</p>
</section>

i要素

<section>
<h1>日記内で人が話している部分を区別する</h1>
<p>今日はとても寒い日だった。俯きがちに歩いていたら、近くに居た人の声が聞こえてきた。<br>
<i>「わあ！キレイ・・・！」</i><br>
思わず声のする方に目をやると、とてもキレイなイルミネーションが。<br>
寒さも忘れて魅入っていた。明日友達を誘って見に行こう！
</p>
</section>

dfn要素、abbr要素

<section>
<h1>定義ごと略語を表示する</h1>
<p><dfn title="Time,Place,Occasion">TPO</dfn>は、時と場所と場合にあった服装やふるまいをすることであると定義されています。</p>
<p><abbr title="United States of America">USA</abbr>はアメリカ合衆国の略称です。</p>
</section>

ruby要素

<section>
<h1>ルビに対応していないブラウザでも見えるようにする</h1>
<p>
<ruby>
日本橋<rp>(</rp><rt>にほんばし</rt><rp>)</rp>
馬喰町<rp>(</rp><rt>ばくろちょう</rt><rp>)</rp>
</ruby>
</p>
</section>

small要素

<section>
<h1>コピーライトをつけてみる</h1>
<p>コピーライトとは著作権という意味です。</p>
<p><small>Copyright &copy; 2013 著作権所有者 All Rights Reserved.</small></p>
</section>

figure要素、figcaption要素

<section>
<h1>工房のまわりにいる動物たち</h1>
<figure>
<img src="img/ph03.jpg" alt="工房の近くに姿を見せた鹿" width="250" height="165" itemprop="image">
<figcaption>工房の近くに姿を見せた鹿</figcaption>
</figure>
</section>

audio要素

  • 対応ブラウザは限られています
  • 数種類の代替えコンテンツが必要となるため、audio要素を利用できるのはスマートフォン限定と考えます
<section>
<h1>サウンドの再生</h1>
<audio src="sound/sample.mp3" autoplay controls>
<p>再生されない場合は、audio要素対応ブラウザで表示してください。</p>
</audio>
</section>

属性 値
任意属性
src="" 音声の指定 URL 埋め込む音声のURL
preload="" 先読みの目安 none 先読みを必要としない
metadata メタデータだけは先読みしてほしい
auto 音声全体を先読みしてほしい
mediagroup="" グループ名 文字列 属するグループの名前
autoplay 自動再生を行う （autoplay） 値は省略可能
loop ループ再生を行う （loop） 値は省略可能
muted 音声を出さない （muted） 値は省略可能
controls コントローラを表示する （controls） 値は省略可能

無料効果音

video要素

<section>
<h1>動画の再生</h1>
<video src="video/sample.mp4" autoplay controls>
<p>再生されない場合は、video要素対応のブラウザで表示してください。</p>
</video>
</section>