トップSEOSEO対策SEO内部対策HTML5とは~入門サイトと対応ブラウザ・テンプレート・videoタグについてHTML5とは~入門サイトと対応ブラウザ・テンプレート・videoタグについて2018/03/15HTML5の入門基礎知識を生かし、適切にHTML5タグを使いながら、サイト構築することが大切です。今回は、HTML5の入門サイト、HTML5の対応ブラウザ、HTML5のテンプレート、HTML5のvideoタグ中心に解説したいと思います。目次HTML5とはHTML5の入門サイトHTML5の対応ブラウザHTML5のテンプレートHTML5のvideoタグHTML5の追加タグarticleasideaudiocanvasHTML5の廃止タグacronymタグappletタグHTML5のDOCTYPE宣言まとめHTML5とはHTML5とは、HTML発足から5回目の改訂版となるHTMLファイルに記述するマークアップ言語のことです。HTML5は、W3Cより2008年1月22日にドラフト(草案)が発表され、2014年10月28日に勧告されました。WikipediaHTML5.1が2016年11月1日付で勧告されてます。HTML5は、過去のHTML文法(HTML4など)に比べシンプルな文法となり、記述しやすくソースがわかりやすくなりました。html>となったことです。HTML5になり、新たに追加・廃止となったタグがあります。HTML5の入門サイトHTML5の入門サイトには、以下のようなものがあります。・html5入門html5の入門サイトです。タグの説明に加え、サンプルやテンプレートも用意しています。・HTML5入門HTML5の基本から、要素や属性のリファレンスまで。副業学校HTML5を超速でマスターするためのノウハウを詰め込んだ入門サイトです。これからCSS3と一緒にHTML5を学んでいきたい方は参考にしてください。具体的な実践方法からブラウザ対応状況などがわかります。HTML5の対応ブラウザHTML5ではコンテンツごとに、以下のよう対応ブラウザが異なります。Design・HTML5のWebアプリケーションWindows「OPERA6」「IE7」のブラウザがほとんどの要素でHTML5に対応してないWindows、Macともにその他ブラウザで、HTML5に対応してない要素がちらほらある。・HTML5グラフィックス&埋め込みコンテンツWindows「OPERA6」「IE7」「IE8」のブラウザがすべての要素でHTML5に対応してない・HTML5オーディオコーデックWindows「OPERA6」「IE7」「IE8」のブラウザがすべての要素でHTML5に対応してないWindows、Macともにその他ブラウザで、HTML5に対応してない要素がちらほらある。・HTML5ビデオコーデックWindows「OPERA6」「IE7」「IE8」のブラウザがすべての要素でHTML5に対応してないWindows、Macともにその他ブラウザで、HTML5に対応してない要素がちらほらある。・HTML5入力フォームWindows「OPERA6」「IE7」「IE8」「IE9」のブラウザがすべての要素でHTML5に対応してないWindows、Macともにその他ブラウザで、HTML5に対応してない要素がちらほらある。・HTML5フォーム属性Windows「OPERA6」「IE7」「IE8」「IE9」のブラウザがすべての要素でHTML5に対応してないWindows、Macともにその他ブラウザで、HTML5に対応してない要素がちらほらある。HTML5のテンプレートHTML5のテンプレートには、以下のようなものがあります。・無料でレスポンシブのHTML5ホームページテンプレート商用利用可能なレスポンシブWebデザイン対応(スマートフォン対応)のHTML5デザインテンプレートの無料配布サイトです。Wix素敵な無料ホームページを作ってすぐに公開しよう。デザイナーが作ったテンプレートを選んで、全て自由自在にカスタマイズしよう。レスポンシブWebデザイン対応を目指したHTML5で最小限必要なひな形は、以下になります。type=”text/css”></head><body>サンプルテキスト</body></html>HTML5のvideoタグHTML5のvideoタグは属性を組み合わせて、以下のようHTMLファイルに記述し、動画を埋め込むことができます。※参考:videoタグで動画を埋め込む-HTML5リファレンス・src属性HTML5のvideoタグのsrc属性で、再生したい動画ファイルを指定することができます。src=”sample.mp4′′></video>・poster属性HTML5のvideoタグのposter属性で、ユーザー環境で利用できる動画が無い場合に表示させる画像ファイルを指定することができます。移動・ボリュームなどのインターフェースをブラウザが自動表示してくれます。src=”sample.mp4′′controls></video>・autoplay属性HTML5のvideoタグのautoplay属性で、ウェブページを読み込んだ時点で、動画が自動再生されます。src=”sample.mp4′′autoplay></video>・preload属性HTML5のvideoタグのpreload属性で、動画再生をスムーズにするために、動画をあらかじめ裏側で読み込んでおく指定です。src=”sample.mp4′′preload=”none”></video>HTML5の追加タグHTML5で追加予定のタグには、以下のようなものがあります。※参考:HTML5から追加される要素(タグ)・article・aside・audio・canvasarticleタグHTML5のarticleタグで、内容が単体で完結するセクションであることが示せます。(記事であることを示す)<h1>記事タイトル</h1><article><h2>サブタイトル1</h2><p>サンプルテキストサンプルテキストサンプルテキスト</p></article><article><h2>サブタイトル2</h2><p>サンプルテキストサンプルテキストサンプルテキスト</p></article>asideタグHTML5のasideタグで、余談・補足情報のセクションであることが示せます。<p>サンプルテキストサンプルテキストサンプルテキスト</p><aside><p>サンプルテキストの補足</p></aside>audioタグHTML5のaudioタグで、音声再生することができます。audioタグがサポートされていない環境で表示させるメッセージを記述できます。controls><p>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p></audio></body>audioタグでは以下のような属性が指定できます。・src属性HTML5のaudioタグのsrc属性では、音声ファイルを指定することができます。controls></audio>・preload属性HTML5のaudioタグのpreload属性では、音声をあらかじめ読み込むことができます。preload=”auto”></audio>preload属性の属性値として以下が指定できます。先読みなし・autoplay属性HTML5のaudioタグのautoplay属性では、自動再生を行うことができます。autoplay></audio>・loop属性HTML5のaudioタグのloop属性では、音声のループ再生が指定できます。loop></audio>・controls属性HTML5のaudioタグのcontrols属性では、音声のコントローラ(再生・停止・ボリューム等)のインターフェースが表示できます。controls></audio>canvasタグHTML5のcanvasタグで、図形領域が指定できます。canvasタグの中には、canvasタグがサポートされていない環境で表示させるメッセージを記述することができます。height=”150′′></canvas>図形作成には、canvasのID名と関連づけて、別途スクリプト(通常はJavaScript)を記述する必要があります。HTML5の廃止タグHTML5で廃止予定のタグには、以下のようなものがあります。※参考:HTML5で廃止される予定の要素(タグ)・acronymタグ・appletタグacronymタグHTML5のacronymタグは廃止される予定で、abbrタグに置き換えることが推奨されてます。略語や頭字語を表す際に指定できます。Optimization”>SEO</abbr>対策で、ホームページの検索上位化を目指しましょう。Optimization”>SEO</acronym>対策で、ホームページの検索上位化を目指しましょう。</p>appletタグHTML5のappletタグは廃止される予定で、embedタグやobjectタグに置き換えることが推奨されてます。Javaアプレットを挿入するに指定できます。height=”100′′></applet>HTML5のDOCTYPE宣言HTML5のDOCTYPE宣言は、HTML4.01からバージョンアップしたことで以下のようシンプルな記述となりました。http://www.w3.org/TR/html4/loose.dtd”>まとめHTML5のシンプルさ・機能性を生かし、サイトパフォーマンスを高めましょう。わかりやすく、使いやすいページにし、SEO対策しながら、順位上昇を目指すことが重要です。