ホームページ作成/HTML5とは

HTML5の書き方の基礎

これまでHTML4.01やXHTML1.xを使ってウェブページを記述してきたなら、HTML5を使ってウェブページを記述するのは特に難しくありません。XHTML1.1との違いを確認しつつ、HTML5ソースを記述する「最初の基礎」をご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

HTML5でウェブページを記述してみましょう

HTML5には、従来のHTMLやXHTMLと比べて様々な追加・改良点があります。しかし、これまでHTML(XHTML)ソースを直接記述したことがあるなら、HTML5を記述するのは難しくありません。
今回は、HTML5ソースを記述する基礎として、以下の2点をご紹介致します。

(1)HTML5ソースの全体構成 (どこに何をどのように書くのかについて)
(2)ヘッダ部分の記述方法 (従来のHTMLやXHTMLとは異なる点について)

まず、HTML5ソースの全体構成をご紹介致します。


HTML5ソースの全体構成

HTML5は、従来のHTML・XHTMLとほぼ同じ方法で記述できます。細かな追加点・変更点はたくさんありますが、基本的には、
  • より簡潔に書けるようになった
  • 要素や属性が増えて、実現可能な表現が増えた
と考えて良いでしょう。
だいたい以下のような感じでソースを書くことになります。
HTML5の構成は、従来のHTML・XHTMLと同じ。

▲HTML5ソースの基本的な構成は、従来のHTML・XHTMLと同じ。


先頭に「DOCTYPE宣言」が1行あり、続くhtml要素の中に、「ページ情報などを記述するヘッダ部分(head要素)」と、「ページの中身を記述する本文部分(body要素)」が入っています。

これまで、HTML4.01やXHTML1.1などでウェブページを記述してきた方々にとっては、ほとんど従来と変わっていないように見えることでしょう。
HTML5とは、「全く新しい言語」ではなく、過去との互換性を維持した「バージョンアップ版の言語」ですから、基本的な部分は同じなのです。したがって、HTML5で記述するといっても、何ら難しいことはありません。

HTMLの構造は同じでも、
  • 追加された要素や属性
  • 仕様が変更された要素や属性
  • 廃止された要素や属性
などがあります。それらよって、ウェブページに便利な機能を追加したり、より正確に望みの表現が実現できるようになっています(※HTML5のメリットについては、記事「HTML5とは? 「HTML4」や「XHTML1」との違いは?」をご参照下さい)。

とはいえ、HTML5で新しく追加された仕様を絶対に活用しなければHTML5が書けないわけではありません。最初から全部を使ってみる必要はありませんので、まずは従来の書き方をベースにしつつ、興味のある新仕様から取り入れていけば良いでしょう。

次のページでは、より簡潔に書けるようになったヘッダ部分についてご紹介致します。
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます