保存版！HTML5で改めてやっておきたいことやフォーム最適化をまとめてみた

あなたはHTML5で登場した新たな要素を活用して、SEOやアクセシビリティの観点からも適切な文書構造でコーディングしていますか？また追加されたフォーム関連の属性やAPIをフルに活用した多機能なウェブサイト制作をしていますか？保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみたでもご紹介した通り、HTML5とCSS3はIE8に対応していないため、実務等では使う機会が少なかった方もいらっしゃると思います。また従来のHTMLを理解していたために新要素や属性だけを覚え、そもそも基本をおさらいしてなかった…なんて方もいらっしゃるかと思います。

しかし現在ではスマートフォンなどのモバイル端末を含め、HTML5とCSS3に対応したモダンブラウザの普及率が高くなってきました。そしてHTML5では新たに追加された要素により、従来のHTMLより明確な文書構造を示すことが出来るようになりました。また位置情報や加速度センサーの取得など「え？こんなこともHTML5で実装出来るの？」というような新たなAPIが追加されました。

そこで今回は、改めてHTML5の基礎を見直した上で「HTML5で改めてやっておきたいことやフォーム最適化」をまとめてみました！

そもそもHTML5とは？

本題の前に、そもそも「HTML5」とは何のことでしょうか。改めてその定義を確認してみましょう。どのような点が従来のHTMLから変わったのかを知ることで、よりスムーズにHTML5について理解を深めることができ、それを応用してウェブ制作に活かすことができるからです。

HTML5（エイチティーエムエル・ファイブ）は、HTMLの 5 回目に当たる大幅な改定版である。HTML5 は WHATWG によって2004年に定められた Web Applications 1.0 に Web Forms 2.0 を取り入れたものが W3C の専門委員会に採用され、W3C より2008年1月22日にドラフト（草案）が発表され、2014年10月28日に勧告された[1]。2016年にHTML 5.1が勧告される予定。(引用元：Wikipedia)

つまりHTMLは現在までに「HTML1.0」や「HTML4.0」など複数回のバージョンアップを行いました。その最新版となるのがこの「HTML5」です。そして今回のバージョンアップはとても変更点の多いもので、いまいちその概要が分かりづらい部分もあります。一体どのような点が「バージョンアップ」したのでしょうか？

Point1 : 文書構造をより明確に示すことが可能になった

まず1つ目は、「文書構造をより明確に示すことが可能になった」ことにより、検索エンジンにより適切にコンテンツを判断してもらうことができるようになりました。HTML5では「header/section/footer要素」など、文書構造を明確に示す事のできる要素が追加されたためです。例えば、従来のHTMLではヘッダー・コンテンツ・フッターなどあらゆる要素に「div要素」で記述していました。

従来のHTMLでは基本的に「divタグ」で要素を囲うほかなく、検索エンジンやブラウザにとって文書構造が分かりづらい点がありました。またコーダーによってIDやクラスの命名規則も変わるため、「人間」にとっても曖昧な文書構造になっていました。その曖昧な文書構造を明確にするために新たな要素が追加されたのです。

上記のように、HTML5から追加されたヘッダー部分に記述をする「header要素」やフッター部分に記述する「footer要素」を使用することで、誰が見ても「これがヘッダーだ」と明確にすることができます。

※なぜ明確な文書構造が重要なのか？

少し話が逸れますが、HTML5に限らず従来のHTMLでも明確な文書構造は重要なものです。HTMLファイルの管理性が向上するのはもちろんですが、なによりSEOの観点からも非常に重要なことで、文書構造が明確なサイトは検索エンジンがコンテンツを適切に判断してくれるからです。そして、それは検索結果に表示される順位に影響します。

事実、同じコンテンツでも適切な文書構造になっているサイトとそうでないサイトの検索順位は変わってきます。SEOは本来、上位に表示してもらうための手法ではなく、検索エンジンに適切にコンテンツを判断してもらう手法のことなので、小手先のテクニックをするよりしっかりと明確な文書構造にしておくことが重要となるのです。

Point2 : フォーム周りの機能が大幅に向上した

2つ目は、「フォーム周りの機能が大幅に向上した」したことで、フォームのユーザビリティを簡単に向上させることができるようになりました。フォームを構築する際に使用する「input要素」に与えられる「属性」が数多く追加されたためです。例えば、従来ではフォームの入力例(薄いグレーの文字)を表示させるためにはJavascriptを使用していましたが、HTML5では下記のように「placeholder属性」を使用すれば簡単に実装できてしまいます。

上記はほんの一例にすぎませんが、他には「ページを開いた時点で入力欄にフォーカスさせる属性」や「入力候補を自動的に補完する属性」など、フォームのユーザビリティに大きく影響する数多くの属性が追加されました。フォームのユーザビリティは離脱率やコンバージョン率に大きく影響するため、これらの属性を活用してフォームのユーザビリティを向上しましょう！

Point3 : APIが大幅に進化した

3つ目は、「HTML5のJavaScript API」が大幅に進化したことで、位置情報やスマートフォンの加速度センサーなどの値を取得することができるようになりました。しかし「API」とは何のことでしょうか？

APIとは、アプリケーションプログラムインターフェイスの略語で、プログラミングの際に使用できる命令や規約、関数等の集合の事を指す。ソフトウェア開発の際、いちから全てを作ることは困難だが、APIを利用すればもともとあるプログラムをもとにして、自分でプログラミングすることなくその機能を利用したソフトウェアを作成することができる。(引用元：APIとは – 意味の解説)

つまり、APIを使用することで「わざわざ自分でプログラミングをしなくてもその機能を呼び出すことが出来る」ようになります。そしてHTML5のJavaScript APIでは位置情報の取得やドラック&ドロップ、さらにはスマートフォンの加速度センサーの値を取得することも可能になりました。よりインタラクティブなウェブサイト制作や、ウェブアプリの制作に大活躍するのでぜひ少しずつ覚えていきたいものです！

HTML5の文書構造を明確に示す基本的な要素

header/footer/nav/aside要素

ヘッダー部分に記述をする「header要素」・フッター部分に記述する「footer要素」・ナビゲーション部に記述する「nav要素」・余談や補足情報を扱う「aside要素」を使用することで、より文書構造を明確に示すことができ、SEOやファイルの管理性などに大きく影響します。「header要素」はロゴやタグライン周りを囲む際に使用しますが、決して1つだけではなく、ブログ記事のヘッダー部分にも記述をするなど複数記述することが可能です。また「nav要素」は主要なナビゲーション、つまりグローバルナビゲーションにのみ使用するようにしましょう。文書構造を明確に示すことは、SEOの第一歩でもあります。ぜひもう一度見直してみましょう！

▼header/footer/nav/aside要素の基本
HTML5で新しく定義された新要素をまとめよう

section/article要素

章や節として扱う「section要素」・コンテンツとして独立しているものを扱う「article要素」を使用することで、コンテンツ内の文書構造を明確にすることができます。この２つの違いは非常に分かりづらいのですが、「article要素」はコンテンツとして独立しているものを扱うため、ブログ記事１つ１つを囲む際に使用します。そして「section要素」はその記事内の章分けをする際などに使用します。

▼section要素とarticle要素の違い
HTML5の勉強を始めた際に使い方に迷う新要素「section要素」の基本と使い方をまとめてみました

main要素

ウェブサイト内のメインコンテンツや、アプリケーション内の中心的な機能を囲む「main要素」を使用することで、どこからどこまでがメインコンテンツなのか一目で分かるようになりアクセシビリティの観点(SEOの観点からどのような影響があるのかは定かではない)からもぜひ実装した要素の１つです。またmain要素は文書内で1つしか使用することが出来ず、header/footer/nav/aside/article要素の子孫にしてはいけないというルールがあります。検索エンジンやブラウザにメインコンテンツを明確に示すためにもぜひ実装しましょう！

▼main要素の基本やその使い方
main要素-コンテンツのグループ化-HTML要素

ぜひ活用したい機能性の高い要素

video/audio要素

ウェブサイト内に動画・音声コンテンツを埋め込む際に使用する「video/audio要素」を使用することで、お客様の環境に依存することなく動画コンテンツを配信することができます。従来ではFLASHを使用して動画ファイルを埋め込んでいましたが、それを再生するためのプラグインをインストールしてもらう必要があり、アクセシビリティの観点からも望ましいものではありませんでした。

しかしこれらの要素を使用することで、それらのプラグインを使用しなくてもブラウザの標準機能で動画を再生することが出来るようになりました。また単に「FLASHの代替」ではなく、JavaScriptで制御できるメソッドを多くもっており、複雑な音声/動画処理をすることも可能です。アクセシビリティの観点からも、動画・音声ファイルを埋め込む際には「video/audio要素」を使用しましょう。

▼video/audio要素の基本/複雑な処理方法の解説
プラグインは要らない！音声／動画対応したHTML5

canvas要素

JavaScriptによって動的な図を描画する「canvas要素」を使用することで、よりインタラクティブな図を描画することができます。この要素はJavaScriptによって描画するので、複雑なイラストや図を描画することには向いていませんが、描画をより効率的にするためのライブラリやフレームワークなどがネット上に沢山あるので、それを使用することで複雑な描画も可能です。

中には(ちなみに私も)「ん？図を表示するのであれば画像を作って読み込んだ方が早いのでは？」と疑問に思う方もいらっしゃるかもしれませんが、この要素は「動的な」図を描画することがポイントなんです。例えばユーザーによって表示させたい図や数値を変えたい場合、画像ファイルでは不可能ですが、この要素で描画した「動的な」図であればそれが可能です。また描画速度が高いことも特徴の１つです。

今ひとつ「何のために使うのだろう…」や「SVGとの違いは何？」という疑問点もありますが、下記にご紹介する記事を見て頂くとその機能性の高さがお分かりいただけるのではないかと思います。

▼canvas要素の概要や基本的な使い方
canvas要素の基本的な使い方まとめ
▼canvas要素を用いて図形を描画
HTML＋JavaScriptだけでブラウザに図形描画
▼canvas要素のためのライブラリ
HTML5のCanvasを使いやすくするライブラリまとめ
▼canvas要素とSVGの違い
SVG vs. Canvas?
▼可愛いグラフが作れる「Chart.js」
Canvasで超可愛いグラフが作れる!「Chart.js」の紹介

meter/progress要素

上限と下限が明確になっている特定範囲内の分量を示す「meter要素」・従来までは進捗状況を示すのに使用していたFLASHの代替要素となる「progress要素」です。「meter要素」は進捗状況などを表すものではなく、ディスクの使用容量や投票率など上限や下限が明確になっているものにしか使用できません。両要素ともJavaScriptと併用することで、画像ファイルでは不可能な処理をすることが出来ます。例えば「meter要素」は格闘ゲームの体力ゲージなどに使えそうですね。

▼meter要素の基本とJavaScriptと併用した例
数量や割合のゲージを表示しよう
▼meter要素の概要と実例
meter タグを正しく使おう
▼progress要素の基本とJavaScriptと併用した例
プログレスバー（進捗状況）を出そう

フォームのユーザビリティを向上させる属性

次にご紹介するのは、「フォームのユーザビリティを向上させる属性」です。これはぜひ実装しておきたいものばかりで、フォームのユーザビリティ(使い勝手)はコンバージョン率(成約率)に大きく影響するためです。せっかく入力フォームまで来てくれたのに、そのフォームの使い勝手が原因でお客様が離脱してしまったら、こんなに勿体ないことはないですし、なによりお客様に申し訳ないですよね。

従来ではJavaScriptで実装しなければなりませんでしたが、HTML5からはそれがとても簡単に実装出来るようになりました。入力フォームまで来てくれたお客様にストレスなく快適に、そして的確な入力を促すためにも次にご紹介する新たな属性を活用して、コンバージョン率の向上を図りましょう！

placeholder属性

フォームの入力例(薄いグレーの文字)を表示させるための属性で、お客様による誤入力を未然に防ぐことができます。ウェブサイトは入力する項目を丁寧に口で説明しているわけではないので、項目名が書いてあっても「この項目、この入力でいいのかな？」と迷ってしまうためです。お客様を迷わせないため、そして誤入力を未然に防ぐためにも「placeholder属性」を使用して入力例を表示しましょう！

▼プレースホルダーの基本と考え方
プレースホルダとHTML5のplaceholder属性

required属性

入力や選択を必須にしたい項目に使用する属性で、必須項目に確実な入力を促すことができます。この属性が使用されている項目に値がない場合(入力や選択がされていない)に送信ボタンを押すと、エラー表示を出してくれるためです。この属性の優れているところは、送信ボタンを押しても確認ページに遷移せず、その場で入力エラーを表示してくれる点です。

必須項目に気づかずに送信ボタンを押し、確認ページに遷移した上で「必須項目が入力されていません」と表示されたら…。わざわざ前のページに戻って入力し直すのはとても面倒ですよね。これが原因でお客様がフォームから離脱してしまうのを防ぐために、「required属性」を使用して入力エラーを表示しましょう！

▼required属性の基本とバリデーションの応用
HTML5 Form Validation のカスタマイズ

autocomplete属性

入力欄にフォーカスするとその入力候補を自動的に表示される属性で、入力の手間を軽減することができます。氏名やメールアドレスなど入力が手間な項目を自動的に補完してくれるためです。パソコン操作に慣れている方であればあまり手間ではなかったりしますが、みんながみんなそういうわけではありませんよね。ただ、セキュリティの観点から賛否両論があるもの事実です。ウェブサイトの目的や種類によって実装するか否かの適切な判断をしましょう！

▼autocomplete属性の基本と使い方
スマホサイトの文字入力を快適にする「オートコンプリート」
▼パスワード欄では使用できない
input type = password autocomplete = off は使ってはいけない

pattern属性

正規表現を利用して入力値のフォーマットやパターンを指定することのできる属性で、全角・半角など入力指定を促すことができます。この属性は「正規表現」を使用して入力パターンを指定するためです。しかし入力フォームのユーザビリティの観点から、あまり全角・半角を指定しないほうが良いと言われています。

ですから、出来る限り全角・半角の指定をしないのが望ましいのですが、そういうわけにもいかない項目があるのも事実です。そういう場合には従来ではJavaScriptで複雑な実装をしていましたが、これからはぜひこの属性を活用しましょう！「正規表現ってなに？」という方もいらっしゃるかと思いますが、下記でご紹介するリンクにその指定方法が分かりやすく解説されているのでぜひご参照ください。

▼pattern属性の基本と指定方法
ひらがな・カタカナ・日本語をpatternであらわす正規表現

autofocus属性

ページを表示した際に、入力欄に自動的にフォーカスさせるための属性で、クリックする手間を省くことができます。例えば、ある辞書サイトで調べたい単語を入力するフォームがあるとします。辞書サイトを閲覧するということは、単語の意味を調べたいということですよね。つまり、そのサイトに訪れた方のほとんどは入力フォームから単語を入力することになります。

そして、その単語を入力するフォームがページを開いた時点ですでに選択されていれば、とても使いやすいですよね。わざわざマウスを使ってフォーカスする必要がないからです。入力フォームでも、一番初めの入力欄にフォーカスしてあげるとユーザビリティの向上に繋がるのでぜひ実装しましょう！

▼autofocus属性の基本と使い方
input autofocus－HTML5タグリファレンス

step属性

数値や日付のステップ値を指定することが出来る属性で、数値に関するより正確な入力を促すことができます。例えば、偶数だけ入力してほしい場合や、週や日付に関する数値のみの入力を促したい際に有効です。「ステップ値ってなに？」という方もいらっしゃるかと思いますが、下記でご紹介するリンクにその指定方法が分かりやすく解説されているのでぜひご参照ください。

▼ステップ値の基本と使い方
step 属性 | HTML5 タグリファレンス
▼その他の挙動等について
input type=”number”のstep属性が思った通りに動いてくれなかった話

HTML5から変わったこと

ブロック要素とインライン要素は廃止？

従来のHTMLではブロック要素とインライン要素が存在し「インライン要素の中にブロック要素を入れてはいけない」などのルールがありました。しかし、HTML5からはこの概念がなくなり「コンテンツモデル」という概念が生まれました。例えば、「a要素」は「div要素」などのブロック要素を囲むことは出来ませんでしたが、HTML5からは可能となりました。少し難しい面もありますが、コンテンツモデルをもう一度見直して適切な文書構造でコーディングし、SEOやアクセシビリティの向上を図りましょう！

▼コンテンツモデルとは
【HTML5】そのコーディング大丈夫？コンテンツ・モデルについて調べてみた

HTML5の普及とともに再注目されているSVGとは？

HTML5の普及とともに再注目されているSVGとは、「Scalable Vector Graphics」の略でベクター形式の画像フォーマットのことです。ベクター形式は図や線などを「情報」として管理しているため、どれだけ拡大・縮小をしても輪郭がぼやけることがありません。

実はSVGは最新の技術ではなく、何年も前から存在している技術なのですが、近年はスマートフォンやタブレット等の普及によって様々な解像度に対応する必要が出てきたため再注目されています。またHTML5からは「インラインSVG」に対応したため、HTML内に直接SVGに関するコードを記述出来るようになりました。今後さらに加速すると思われるマルチデバイスへの対応から、SVGはぜひ知っておきたい技術の１つでもあります。

▼SVGの基本と読み込み方
アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう
▼SVGをJavaScriptで制御する方法
HTML5のInline SVGをJavaScriptで操作

まとめ

いかがでしたか？とても大きなバージョンアップを果たしたHTML5ですが、その基礎を改めて抑えることでより文書構造が明確で、そしてより多機能なウェブサイト制作をすることができます。「header要素」や「footer要素」など文書構造をより明確に示す要素は、コーディングしていて気持ちの良いものです(笑)

また従来まではJavaScriptによって制御しなければならなかった多くの事が、HTMLだけで簡単に実装できるようになりました。デザインやコンテンツそのものを見直すことも重要ですが、ユーザビリティ・アクセシビリティ、そしてSEOの観点から、あなたのウェブサイトのコーディングデータを見直してみてはいかがでしょうか？

この記事をシェアする

• ツイート
• シェアする
• 共有する
• はてブ
• Pocket