HTML 5 基本的な構造とWebアクセシビリティの考慮

Webサイトのコーディングで必要なHTMLですが、現在は「HTML 5」が基本となっています。
今回は「HTML 5」の基本的な構造を見ていきます。

HTMLとは?

HTMLとはHyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略でWebサイトの構造をマークアップする言語です。

ガラケーでWebサイトなどを閲覧していた頃は、HTML 4.01が主流でした、その後、XHTML 1.0「Extensible HyperText Markup Language(エクステンシブル ハイパーテキスト マークアップ ランゲージ)前述のHTMLをXMLの文法で定義しなおしたマークアップ言語」として登場し、現在の主流はHTML 5 となっています。

HTML・XHTMLとHTML 5の違いは?

HTML 5 は、HTML・XHTMLからかなりの仕様変更があり、「要素」の追加、「属性」の追加やcanvas、videoタグなどより細かな構造をマークアップできる言語となっています。

要素とは?

要素とは「タグ」と言われるもので<div>や<span>などがこれに当たります。

属性とは?

属性とはタグ内に要素にリンク先やクラスなどをしてするために利用するものです。
<a href=”#”>や<div id=”〜”></div>、<span class=”〜”></span>などがこれに当たります。

HTML 5 の基本構造

HTML 5 を利用してマークアップする基本的な構造は以下のようになります。

このままではCSSを利用していないためデフォルトの状態ですが、以下がマークアップされた状態です。
CSSを利用する前にこの状態で文章構造が問題ないか確認することをお勧めします。

※文章構造をマークアップしているのみですのでデザインを反映させる際に、レイアウト上必要な<div>や<span>などを追記してCSSのクラスなどを利用します。

文章構造のマークアップ

CSSを利用する前に文章の構造を確認することをお勧めしましたが、HTMLでコーディングした内容の文章構造が正しくないと、Webアクセシビリティの担保ができなくなります。

Webアクセシビリティとは?

高齢の方や視覚障害者など心身の機能に制約のある人が、Webで提供されている情報を取得し、サービスや機能を利用できることを指します。

HTMLの文章の読み上げ機能などもこれに当たります。ページの上部から下部に向かって文章を読み意味が伝わる必要があります。

created by Rinker
WAI-ARIAとは、HTMLドキュメントに詳細な情報を付加する仕様で、W3Cが2014年に1.0を勧告しています。今後アメリカでの急速な普及が進むにつれ、日本でも「HTML、CSS、JavaScriptなどフロントエンド技術を実装するエンジニアやデザイナーにとって学ぶべきこと」となっていくことが予想されますが、日本語による情報が乏しいのが現状です。そのような状況を鑑み、「デザイニングWebアクセシビリティ」の著者の2人が翻訳を監修してお届けすることになりました。

Webアクセシビリティを考慮したマークアップを心がけましょう。

Webアクセシビリティの重要性のスポットが当たって既に数年経過しています。現状ではマークアップするに当たり必須の事項であると思います。

HTML 5がより細かなマークアップができるはこのような背景もあるのかもしれません。

created by Rinker
Web制作のプロを目指す方に向けて、HTML5+CSS3を使ったWebサイトの作り方を解説した入門書の改訂版。12章構成で、インターネットとWebサイトの仕組みに始まり、サイト制作現場の基本的な作業フロー、HTMLによるマークアップ方法、CSSによる装飾・レイアウトの技法をていねいに解説しています。
created by Rinker
講義+実習のワークショップ形式で、実践的なWebサイトを作りながら学べる「はじめてでも挫折しない」HTML&CSSの入門書。

コメントする

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)