SEO対策に欠かせない！「HTML5」の必須知識３選

Webページの作成に欠かせない言語、HTML。年々新しいバージョンが更新され、2014年にHTML5が勧告されました。現在の最新のバージョンは2017年に勧告されたHTML5.2です。

HTML5勧告からはや５年が経過しましたが、「実はHTML4との違いがよくわかっていない」という方もいらっしゃるのではないでしょうか？しかし、より質の高いWebサイトを制作するにhtml5の知識は欠かせません。そこで今回は、HTML5の３つの特徴をご紹介していきます。

文章構造がわかりやすい！

これまでとの違い

HTML4までに作られたWebページでは適当なタグがない場合、<div>でまとめ、id属性やclass属性でその要素を指定するものがほとんどでした。

しかし、HTML5では新たに<header>、<footer>、<section>、 <article>、 といったそれぞれの要素を表すタグが新たに追加され、HTMLだけで文章構造がわかるようになりました。つまり、タグの設置によってコンピューターにもそのWebページの文章構造が認識できるようになったのです。

SEO対策につながる

コンピューターがそのWebページを理解しやすくなった、ということは検索エンジンにもその作用が働きます。現在の検索システムは「セマンティックSEO(セマンティック検索)」と呼ばれるシステムが採用されています。

セマンティックSEOとは、検索したユーザの求めるものにより即した検索結果を表示する技術や概念を指します。HTML5で追加されたタグがつけられたWebページはこの検索エンジンシステムにおいて「意味のあるWebページ」とみなされ、検索エンジンによる評価が高くなります。つまり、HTML5の文章構造にそって作られたページは検索結果上位に反映されやすくなるのです。

動画の挿入がしやすい！

これまでとの違い

これまでWebページに動画を挿入する際はFlash形式で組み込まれていました。しかし、Flash形式には

• アクセスした端末それぞれでAdobe Flash Playerなどのプラグインが必要
• セキュリティに脆弱性がある
• 2020年にサポートが終了する

といった問題点がありました。しかし、HTML5ではvideo要素により、プラグインなしで動画を扱えるようになりました。画像と同様に、サーバーにアップロードしたり、リンクを挿入したりするだけで動画の配置が可能です。

注意点

video要素は全てのブラウザに対応しており、各ユーザーはめんどうな手順を踏むことなく、ブラウザ上での動画再生が可能になりました。

しかし、ブラウザによっては対応していない拡張子があります。おおよそのブラウザではmp4形式の動画ファイルで再生可能ですが、webm形式やogg形式のみ対応している場合もあります。ファイルは複数形式用意しておくのが無難でしょう。

複雑なプログラムが簡単に作動できる！

これまでとの違い

HTML5では新たに多くのAPIが追加され、複雑な機能がより簡単にWebページ上で実現可能になりました。

APIとは、Application Programming Interfaceの頭文字であり、直訳でいえば、アプリケーション(＝ある機能)をプログラミングする(＝呼び出す)ときのインターフェース(＝接点)です。APIを使うと、Web上で何かしらの機能を実装する際にソースコードを１から書く必要はなく、共有されたAPIを書けば簡単にその機能が使えるようになります。

以前までは、高度な技術を持つエンジニアに独自のソースコードを書いてもらう必要がありましたが、APIを用いればその必要はありません。APIの具体的なものには、ユーザー位置検索を可能にするAPIなどがあります。企業や個人によってさまざまなAPIが公開されているので、一度調べてみるのもいいでしょう。

優秀なAPIのひとつ、Canvas API

HTML5で追加されたAPIのひとつにCanvasというAPIがあります。Canvas APIを使うと、Web上で簡単に図を描くことができ、さらには図を動かしてアニメーションを作ることも可能です。

JavaScriptによって図を描くため、「画像やアニメーションのせいでサイトが重くなる」という心配がなくなります。もちろん動画や画像を貼り付けることも可能です。

まとめ

HTML5の知識は現在のWeb担当者にとって必須の知識です。インタラクティブなサイトを制作するためにも、HTML5をよく理解し、サイト設計に取り入れましょう。

「HTMLを使いこなせていない気がする」

「制作したWebサイトに改善点がある気がする」

そんな漠然としたお悩みをお持ちの方もぜひITRA株式会社にご相談ください！

お客様にWebサイト構築に関する質の高い情報・サービスを提供します。