article/aside/audio

<article>

article要素は、ドキュメント、ページ、アプリケーション、サイトの自己完結したものを表します。つまり、シンジケーションのように、単独で再配布でき再利用できるよう意図したものです。これはフォーラムの投稿、雑誌や新聞の記事、ブログのエントリ、ユーザーが投稿したコメント、インタラクティブなウィジットやガジェット、その他、コンテンツの独立した項目が考えられます。

article要素がネストされる場合、内側のarticle要素は、原理上は外側のarticleのコンテンツに関連した記事を表します。例えば、ユーザーが投稿するコメントを受け付けるサイトでのブログのエントリは、そのブログのエントリのarticle要素の中にネストされたarticle要素として、そのコメントを表すことができます。

article要素に関連付けられた著者情報(address要素を参照のこと)は、ネストされたarticle要素には適用されません。

HTML5コーディングならココ!

<h1>太郎のブログ</h1>

<article>
<h3><a href= “title52.html”>コンビニで</a></h3>
<p> コンビニで弁当を買ったら店員に
「あたためますな?」と言われたんだ
動揺しつつも「さようでござる。」と答えた。 </p>
<article>
<h3>書き込み</h3>
<p>さようでござるか</p>
</article>
</article>

<article>
<h3><a href= “title51.html”>生まれ変わるなら</a></h3>
<p>291 :名無しさん@恐縮です
もし、生まれ変われるならジダンになりたい。
ジダンになってバイクショップで働きたい。
</p>
<article>
<h3>書き込み</h3>
<p>294 :名無しさん@恐縮です
>>291
サッカーしろよ</p>
</article>
</article>

<address>Copyright 世界中の女子が俺のファンなら委員会</address>

<aside>

aside要素は、その前後のコンテンツには関係しているけれども、やや本筋から逸れながらも軽く触れておきたいようなコンテンツから構成されるページのセクションを表し、コンテンツから分離されたものとして見なすことができます。このようなセクションは、印刷慣例では、よく補足記事として表されるものです。

この要素は、本文抜粋引用リードや補足記事のような印刷効果、広告、nav要素のグループ化、ページのメイン・コンテンツから分離しても構わないようなコンテンツに使うことができます。

<aside>でタグ付けした要素は、あくまでも本文から外れる余談・補足情報ですから、 本文の流れの一部となる挿入句(カッコでくくって差し込むような内容など)に対して、<aside>タグを使用するのは適切ではありません。

長い記事の中の本文抜粋引用リードをマークアップするために、aside がどのように使われるかを示しています。

<p>レオパレス伝説
・エアコンが勝手に切れる
・チャイムならされたと思って玄関を開けたら、四軒隣の部屋だった
・チャイムが聞こえ今度こそはと思ったけど、やっぱり隣の部屋だった
・チャイムを鳴らしたら住人全員が出てきた
・ティッシュを取る音が聞こえてくるのは当たり前、携帯のポチポチが聞こえることも
・爪切りの音も聞こえる
・納豆をかき混ぜる音も
・壁ドンしたら壁に穴が開いた
・というか、穴が開いたあとも開くまえと聞こえてくる音は変わらなかった
・壁に画鋲をさしたら隣の部屋から悲鳴が聞こえた
・隣二部屋を借り、「これで防音ばっちりだ」と思ったが、
</p>

<aside>
<p>さらにその向こうの部屋の音が聞こえてきた
・右の隣の部屋の住人が屁をこいたら、左の部屋の住人が壁ドンしてきた
・すかしっ屁の音が聞こえる、というか臭いもする
・だけど家賃6万
・業績悪化でさらに壁が薄くなる
・将来的には壁がなくなる可能性も </p>
<aside>

<audio>

audio要素は、サウンドやオーディオのストリームを表します。

audio要素の中にコンテンツを提供することができます。ユーザーエージェントは、ユーザーにそのコンテンツを見せるべきではありません。それは、audio要素をサポートしない古いウェブブラウザに向けたものです。古いオーディオ用プラグインを試すことができるようにしたり、古いブラウザーを使っているユーザに、オーディオ・コンテンツにアクセスする方法を知らせるためのテキストを見せたりします。

とりわけ、このコンテンツは、アクセシビリティの問題を解決するものではありません。耳が不自由な人、そのほか、肉体的障害や認知障害を持った人でもオーディオ・コンテンツにアクセスできるようにするために、ウェブ制作者は、メディア・ストリームを選択できるようにしたり、アクセシビリティ支援(トランスクリプションなど)をメディアストリームの中に組み込んだりすることが期待されます。

audio要素はメディア要素ですが、そのメディア・データは表面上はオーディオ・データです。

src,preload,autoplay,mediagroup,loop,muted,controls属性は、すべてのメディア要素に共通の属性です。

属性

src属性
音声ファイルを指定する
preload属性
音声をあらかじめ読み込む(auto、metadata、none)
autoplay属性
音声を自動再生する
loop属性
ループ再生を指定する
controls属性
インターフェースを表示する
WEB制作でお困りのあなたに朗報

<body>
<audio src=”audio/test.ogg” controls>
<p>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p>
</audio>
</body>