HTML5で出来る！技術3選
こんにちは！制作のSです。
今回のテーマは「HTML5」。
現在制作されているwebサイトの多くはこのHTML5が使用されていると言われています。
「HTML5ってそもそも何か？」「聴いたことはあるけれど、サイトに対して何が良いのか？」と感じられている方に向けて、3つの特徴をまとめてみました！
1. HTML5とは
HTML（Hyper Text Markup Language）の5回目の大幅な改定版となります。
2014年にHTML5.0がW3Cから勧告され、約30種類の新要素が追加されました。HTML5には3つの特徴があります。
2. HTML5で出来る！技術3選
上記でまとめたHTML5の3つの特徴を詳しくご紹介していきます。
① 内部SEO対策
HTML5に追加された要素によって、検索エンジンがページ構造を理解しやすいようにHTMLがマークアップ可能となりました。これは、安定的に検索結果上位にインデックスされるために重要だと言われています。
② プラグイン不要で動的な動きを再現
HTML5で追加された要素によって、プラグイン不要で動的な動きを再現できるようになりました。
今回は、HTML5から追加されたcanvas要素を応用し、紙吹雪が舞うアニメーションのHTML5サンプルを作成いたしましたので、ぜひご覧ください。
※下記ボタンからご覧いただけます。
※PC閲覧時はマウスの左右の動きに合わせて舞う方向が変化します。ぜひ画面上にカーソルを合わせてご覧ください。
例）紙吹雪が舞うアニメーション
③ フォーム入力機能の充実
入力フォームは離脱率が高いと言われています。そのため、離脱率を改善するためにはコーディングの段階でも考慮する必要があります。このように、入力フォーム最適化することをEFO対策 （Entry Form Optimization）と呼ばれています。入力項目を見直したり、入力ステップを明確にしたりなど、ユーザーがストレスを感じないように入力フォームを最適化することです。その工夫の一つとして、最適なキーボードの設定が挙げられます。
例）最適なキーボードを設定する（メールアドレス、電話番号）
- ●メールアドレス
<input type=”email”>
- ●電話番号
<input type=”tel”>
以上、今回はHTML5で出来る技術3つをご紹介いたしました。
HTML5の機能を活用して、より良いサイト制作を今後も頑張っていきます。
