HOMEその他 > HTML5とは~入門サイトと対応ブラウザ・テンプレート・videoタグについて
その他
HTML5とは~入門サイトと対応ブラウザ・テンプレート・videoタグについて
2016/11/02その他[最終更新日]:2016/11/04
このエントリーをはてなブックマークに追加

HTML5の入門基礎知識を生かし、適切にHTML5タグを使いながら、サイト構築することが大切です。

今回は、HTML5の入門サイト、HTML5の対応ブラウザ、HTML5のテンプレート、HTML5のvideoタグ中心に解説したいと思います。

HTML5とは~入門サイトと対応ブラウザ・テンプレート・videoタグについて

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

PR
目次

HTML5とは
HTML5の入門サイト
HTML5の対応ブラウザ
HTML5のテンプレート
HTML5のvideoタグ
HTML5の追加タグ
HTML5の廃止タグ
HTML5のDOCTYPE宣言
まとめ

HTML5とは

HTML5とは、HTML発足から5回目の改訂版となるHTMLファイルに記述するマークアップ言語のことです。

HTML5は、W3Cより2008年1月22日にドラフト(草案)が発表され、2014年10月28日に勧告されました。 ※参考:HTML5 – Wikipedia

HTML5.1が2016年11月1日付で勧告されてます。

HTML5は、過去のHTML文法(HTML4など)に比べシンプルな文法となり、記述しやすくソースがわかりやすくなりました。 特に目を引くのが、ドキュメントタイプ宣言の記述が<!DOCTYPE html>となったことです。

またHTML5になり、新たに追加・廃止となったタグがあります。

HTML5の入門サイト

HTML5の入門サイトには、以下のようなものがあります。

html5入門
html5の入門サイトです。タグの説明に加え、サンプルやテンプレートも用意しています。

HTML5入門
HTML5の基本から、要素や属性のリファレンスまで。

HTML5入門!超速でHTML5をものにするノウハウ – 副業学校
HTML5を超速でマスターするためのノウハウを詰め込んだ入門サイトです。これからCSS3と一緒にHTML5を学んでいきたい方は参考にしてください。具体的な実践方法からブラウザ対応状況などがわかります。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

HTML5の対応ブラウザ

HTML5ではコンテンツごとに、以下のよう対応ブラウザが異なります。
※参考:HTML5 & CSS3 Web 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デザインテンプレートの無料配布サイトです。

無料テンプレート | HTML5 ホームページ作成 | Wix
素敵な無料ホームページを作ってすぐに公開しよう。デザイナーが作ったテンプレートを選んで、全て自由自在にカスタマイズしよう。

また、レスポンシブWebデザイン対応を目指したHTML5で最小限必要なひな形は、以下になります。

<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<meta name=”description” content=”サンプルディスクリプション”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>サンプルタイトル</title>
<link rel=”stylesheet” href=”” type=”text/css”>
</head>
<body>
サンプルテキスト
</body>
</html>

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

HTML5のvideoタグ

HTML5のvideoタグは属性を組み合わせて、以下のようHTMLファイルに記述し、動画を埋め込むことができます。
※参考:videoタグで動画を埋め込む-HTML5リファレンス

・src属性
HTML5のvideoタグのsrc属性で、再生したい動画ファイルを指定することができます。

<video src=”sample.mp4″></video>

・poster属性
HTML5のvideoタグのposter属性で、ユーザー環境で利用できる動画が無い場合に表示させる画像ファイルを指定することができます。

<video src=”sample.mp4″poster=”samplehint.jpg”></video>

・controls属性
HTML5のvideoタグのcontrols属性で、再生・一時停止・再生位置の移動・ボリュームなどのインターフェースをブラウザが自動表示してくれます。

<video src=”sample.mp4″controls></video>

・autoplay属性
HTML5のvideoタグのautoplay属性で、ウェブページを読み込んだ時点で、動画が自動再生されます。

<video src=”sample.mp4″autoplay></video>

・preload属性
HTML5のvideoタグのpreload属性で、動画再生をスムーズにするために、動画をあらかじめ裏側で読み込んでおく指定です。

<video src=”sample.mp4″preload=”none”></video>

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

HTML5の追加タグ

HTML5で追加予定のタグには、以下のようなものがあります。
※参考:HTML5から追加される要素(タグ)

article
aside
audio
canvas

articleタグ

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タグの中には、 audioタグがサポートされていない環境で表示させるメッセージを記述できます。

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

audioタグでは以下のような属性が指定できます。

・src属性
HTML5のaudioタグのsrc属性では、音声ファイルを指定することができます。

<audio src=”sample.ogg” controls></audio>

・preload属性
HTML5のaudioタグのpreload属性では、音声をあらかじめ読み込むことができます。

<audio src=”sample.ogg” preload=”auto”></audio>

preload属性の属性値として以下が指定できます。
auto ⇒ 音声全体を先読み
metadata ⇒ 音声のメタデータ(再生時間などの情報)だけ先読み
none ⇒ 先読みなし

・autoplay属性
HTML5のaudioタグのautoplay属性では、自動再生を行うことができます。
※autoplay属性が指定の場合は、preload属性の指定が無効

<audio src=”sample.ogg” autoplay></audio>

・loop属性
HTML5のaudioタグのloop属性では、音声のループ再生が指定できます。

<audio src=”sample.ogg” loop></audio>

・controls属性
HTML5のaudioタグのcontrols属性では、音声のコントローラ(再生・停止・ボリューム等)のインターフェースが表示できます。

<audio src=”sample.ogg” controls></audio>
canvasタグ

HTML5のcanvasタグで、図形領域が指定できます。
canvasタグの中には、canvasタグがサポートされていない環境で表示させるメッセージを記述することができます。

<canvas id=”sample” width=”300″ height=”150″></canvas>

図形作成には、canvasのID名と関連づけて、別途スクリプト(通常はJavaScript)を記述する必要があります。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

HTML5の廃止タグ

HTML5で廃止予定のタグには、以下のようなものがあります。
※参考:HTML5で廃止される予定の要素(タグ)

acronymタグ
appletタグ

acronymタグ

HTML5のacronymタグは廃止される予定で、abbrタグに置き換えることが推奨されてます。
略語や頭字語を表す際に指定できます。

推奨
<p><abbr title=”Search Engine Optimization”>SEO</abbr>対策で、ホームページの検索上位化を目指しましょう。</p>
廃止
<p><acronym title=”Search Engine Optimization”>SEO</acronym>対策で、ホームページの検索上位化を目指しましょう。</p>
appletタグ

HTML5のappletタグは廃止される予定で、embedタグやobjectタグに置き換えることが推奨されてます。
Javaアプレットを挿入するに指定できます。

推奨
<embed src=”sample.swf” width=”300″ height=”100″>
推奨
<object data=”sample.jpg” width=”300″ height=”100″></object>
廃止
<applet code=”sample.class” width=”300″ height=”100″></applet>

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

HTML5のDOCTYPE宣言

HTML5のDOCTYPE宣言は、HTML4.01からバージョンアップしたことで以下のようシンプルな記述となりました。
※参考:DOCTYPE-HTML5タグリファレンス

HTML5のDOCTYPE宣言
<!DOCTYPE html>
HTML4.01のDOCTYPE宣言
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” http://www.w3.org/TR/html4/loose.dtd”>
まとめ

HTML5のシンプルさ・機能性を生かし、サイトパフォーマンスを高めましょう。

わかりやすく、使いやすいページにし、SEO対策しながら、順位上昇を目指すことが重要です。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

PR
あなたのサイトの順位は大丈夫ですか?順位、リンク、内部を調べ、必要な対策をアドバイスします(無料)
期間限定!今だけ両方プレゼント!「Googleが嫌うリンク3つ教えます」と【順位が上がらない方へ】SEO内部レポートプレゼント
上位表示を目指すURL *
(例)http://○○.co.jp
上位表示を目指すキーワード *
(例)中古車
会社名/組織名 *
(例)株式会社○○○
ご担当者様名 *
電話番号 *
メールアドレス *

※個人情報の管理は、「プライバシーポリシー」に同意の上お申し込みください

このエントリーをはてなブックマークに追加
最新記事
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
新着実験
人気実験BEST10
カテゴリー
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
このブログが役に立つと思ったら、ぜひ『いいね!』して下さい。