ビジネスとIT活用に役立つブログBlog


<初心者向け>知っておきたいHTML5の基本【文書構造編】

この記事をシェアする:
レスポンシブWebデザインをはじめとするWebサイトのマルチデバイス対応の増加などに伴い、HTML5でのWebサイト構築が現在主流となっています。
今までHTML4やXHTML1.0で構築してきた人の中には「HTML5って難しそう」「今までのHTMLとはどう違うの?」と思っている方も多いのではないでしょうか?
変更された点は多々ありますが、基本をおさえていれば誰でもHTML5でWebサイトを構築することが可能です。
今回はHTML5の特徴や文書構造など、基本的なところを説明していきたいと思います。

HTML5とは?

まずはHTML5とはどういうものなのか、簡単に説明いたします。

HTML5とは、2014年にHTMLのバージョン5として勧告されたものです。前のバージョンにあたる「HTML4.01」の勧告から15年ぶりに改定されました。
HTML5の大きな特徴は、HTML4やXHTML1.0に比べてかなりコードが簡略化され、全体的にスッキリとした構造になっています。そして、今まで難しかった動画・音声の使用やグラフィックの描画が、HTML5の新要素によって容易に実装できるようになり、Webの表現の幅が広がりました。

HTML5が発表された当時はHTML5に対応していないブラウザ(Internet Explorer 8)を使用していたユーザーがまだ多かったため、HTML5でWebサイトを構築するケースは多くありませんでしたが、最新版のIE11を除く旧バージョンのIEがサポート終了になったことや、GoogleChromeを使用するユーザーも増えてきたことによって、Webサイトを構築する際にHTML5を用いるケースが増えてきました。

HTML5の基本的な文書構造

それでは、HTML4、XHTML1.0とHTML5の基本的な文書構造を比較してみましょう。
まずは、HTML4とXHTML1.0の文書構造を例に挙げてみます。

▼HTML4

▼XHTML1.0

次にHTML5の文書構造を例に挙げてみます。

▼HTML5

いかがでしょうか?HTML4やXHTML1.0と比べてだいぶスッキリとした印象になりました。
それでは、主な違いの説明をします。

DOCTYPE宣言

▼XHTML1.0

▼HTML5

HTML文書の冒頭部分に記述するのが「DOCTYPE宣言」です。この記述によってその文書がどのHTML、XHTMLで作成されたものかを宣言します。HTML5ではコードがシンプルに短くなりました。

HTML要素

▼XHTML1.0

▼HTML5

<html>タグは、その文書がHTMLであることを示します。html要素には言語を指定することができ、日本語の場合は「lang=”jp”」、英語の場合は「lang=”en”」を指定します。XHTMLではxmlns属性が必要でしたが、HTML5では不要になりました。

文字エンコーディング指定

▼HTML4、XHTML1.0

▼HTML5

文書の文字コードを指定します。HTML5ではutf-8推奨になります。

スタイルシートとスクリプト言語の指定

▼HTML4、XHTML1.0

▼HTML5

HTML5ではデフォルトになりますので記述が不要になります。

HTML5で追加、廃止された要素

HTML5では、新しく追加された要素がありますが、逆に廃止された要素もあります。
構築の際には注意が必要です。

追加された要素

<article> <aside> <audio> <bdi> <canvas> <command>
<datalist> <details> <embed> <figcaption> <figure> <footer>
<header> <hgroup> <keygen> <mark> <meter> <nav>
<output> <progress> <rp> <rt> <ruby> <section>
<source> <summary> <time> <track> <video> <wbr>

廃止された要素

<acronym> <applet> <basefont> <bgsound> <big> <blink>
<center> <dir> <font> <frame> <frameset> <isindex>
<marquee> <nobr> <noembed> <noframes> <rb> <strike>
<tt>

※各要素の説明につきましては、割愛いたします。

さいごに

HTML5では、文書構造の変更点や新しく追加された要素が多くありますが、一度に全部覚える必要はありません。
少しずつマークアップの練習をしながらHTML5に慣れ、学んでいくことが大切です。

シリーズ「知っておきたいHTML5の基本」
The following two tabs change content below.
アーティス

アーティス

創造性を最大限に発揮するとともに、インターネットに代表されるITを活用し、みんなの生活が便利で、豊かで、楽しいものになるようなサービスやコンテンツを考え、創り出し提供しています。
この記事のカテゴリ:

SNSで最新の情報を
受け取ることができます!