今更聞けないHTML5コーディングの基礎を初心者向けに解説!

今更聞けないHTML5コーディングの基礎を初心者向けに解説! Web

HTML5ではわかりにくかったドキュメントタイプ宣言(DTD)などのXHTML時代のルールが変更されました。

さらに、headerfooterなどの意味を持つ要素が追加され、HTMLの構造に意味付けを行うことができるようになっています。

スポンサーリンク

HTML5コーディングの基礎

HTML5が2014年10月に勧告されて4年以上が経過し、現状、よほどの理由がなければHTML4やXHTMLを採用する必要はありません。


HTML5でコーディングする上で押さえておきたい項目をいくつかご紹介します。

  • ドキュメントタイプやmetaタグの記述が簡潔になった
  • 空要素のスラッシュ記号『/』が不要になった
  • big、strikeなどの物理要素の廃止
  • header、timeなどのセマンティック要素が追加され、より明確に意味付けされた文書構造を構築できるようになった
  • a要素の中にdiv要素を含めることができるようになったりと、コンテンツモデルが変わった

HTML5では見た目を変更する要素は廃止され、意味付け(セマンティック)とアウトライン(見出し要素が関連づけられている範囲)に重点をおいたセマンティックマークアップができるように変更されています。

より多くの意味付け、より明確なアウトラインによって、Webサイトをドキュメントとして詳しく説明できるようになり、見た目を変えるものは全てCSSで補うようになっています。

ドキュメントタイプとheader要素

XHTMLではStrictとTransitionalおよびFramesetのいずれかのドキュメント宣言を指定する必要がありましたが、HTML5ではそれらは不要になりシンプルに記述できるようになりました。

XHTML1.0のドキュメントタイプ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5のドキュメントタイプ

<!DOCTYPE html>

header要素内に記述するmeta要素についても多くがシンプルになりました。代表的なものはエンコード指定のmetaです。

XHTML1.0のエンコード指定

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

HTML5のエンコード指定

<meta charset="UTF-8">

上記のように、charset属性を用いてエンコードを指定するのみです!

XHTML1.0ではhttp-equiv属性を用いていましたが。HTML5では不要になりました。

 

CSSやJavaScriptファイルを埋め込む際に指定していた記述も下記は不要になっています

<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

HTML5のセマンティックとセクショニング

HTML5では、以前まで定義されていた物理要素big、small、strike、b、i、s(見た目を変えるだけの要素)などの要素が廃止されました。

ただし、これらのうちでHTML5に含めることができなくなったのはbig要素とstrike要素だけで、そのほかの要素についてはセマンティック要素として再定義されています。


HTML5では様々な意味を持つ要素が新規に追加されています!

HTML5ではセクショニングを行うことができる要素が登場しました。
HTML5でのセクショニングとは、見出しの影響する範囲がどこからどこまでなのか説明するものです。
articlesectionnavaside要素がセクショニングを行うことができる要素です。
articleとsectionは内部に見出し要素を含めるようにしましょう!
セマンティクスとセクショニングをWebサイトに取り入れることで、ブラウザとその拡張機能や外部のサービスが、Webサイトの文脈を理解できるようになると期待されています。

HTML5のコンテンツ・モデル

以前までのHTMLの要素はブロック要素とインライン要素と呼ばれる区分で分けられ、インライン要素にはブロック要素を含めることができないというルールがありました。そのためa要素の中にdiv要素がある構造は不正なマークアップとなっていました。

HTML5ではこの区分による制約がなくなり、新たにコンテンツ・モデルという概念が定義されました。

コンテンツ・モデルとは、簡単にいうと『その要素がどのコンテンツ・モデルに属すか』と『その要素がどのコンテンツ・モデルに含めることができるのか』を表したものです。全ての要素は下記の図のようにいずれかのコンテンツ・モデルにカテゴライズされています。

カテゴライズ

この図はHTMLの標準化団体であるW3Cの仕様書に掲載されているものと同じです。

例えば、フロー・コンテンツ(図のFlowの輪)はほとんどのコンテンツ・モデルを内包できますが、メタデータ・(図のMetadata)も一部は含めることができません。複数のコンテンツ・モデルに属している要素も多くあります。
コンテンツ・モデルには沢山の週類がありますが、全ての要素について覚える必要はありません。初めて使う要素ができたらそれについて学び直す程度でよいでしょう!

まとめ

HTMLは今後も要素が増減していくでしょう。

新しい要素の仕様策定が始まったからといってブラウザがすぐにそれに対応するわけではありませんので、Web制作者として最新情報は定期的にチェックしておくことをお勧めします!

 

今から始めるおすすめWebオンラインスクール!

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
Web
スポンサーリンク
シェアする
CreaveGraffitiをフォローする
Creavegraffiti | Webマーケティング情報

コメント

タイトルとURLをコピーしました