HTML5を今から学ぶ人のための基本的なマークアップ方法

11_5_30_2_9-150x150

まずはここから!基本的な構造部分のHTML5マークアップ!

HTML5になったからと言って今までのような記述をしてはいけないことはありません。HTML4で使っていたタグのほとんどはHTML5でも利用できます。ただ、HTML5ならではのマークアップがありますので、基本的な構造部分のマークアップ方法をご紹介します。

HTML5基本的な構造マークアップ

DOCTYPE 宣言

マークアップ先頭に種類やHTMLのバージョンなどを泡ラス文書型宣言の1つですが、従来のHTML4に比べるとHTML5ではかなり簡略化されています。

HTML5

<!DOCTYPE html> 

HTML4

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

文字コーディング

HTMLの文字エンコーディングをmeta要素を使って指定しますがHTML5ではこちらも簡略化されcharsetのみの記述となります。

HTML5

<meta charset="UTF-8" />

HTML4

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

javascript、styleの属性

javascriptとstyle属性の記述もtypeなどを省いた簡単な記述と変更になりました。

HTML5

<script>
ここにスクリプト
</script>
<style>
ここにスタイル
</style>

HTML4

<script type="text/javascript">
ここにスクリプト
</script>
<style type="text/css">
ここにスタイル
</style>

言語の指定

何語で書かれたコンテンツなのかを知らせるマークアップは従来meta要素を使い記述していましたが、HTML5からはhtml要素のlang属性を使うことになります。

HTML5

<html lang="ja">

HTML4

<meta http-equiv="Content-Language" content="ja" /> 

HTML5の新要素をCSSに定義する

HTML5に新たに加えられた要素を全てのブラウザが認識するわけではありません。ここではそんなブラウザに対して新要素をブロックとして明示的にCSSで定義する必要があります。

CSSにブロックとして定義する

header,nav,section,article,aside,figure,footer { display:block; }

html5shivライブラリを利用する

InternetExplorer8以下のような少し古いブラウザでは新要素を期待通りのCSSスタイルを与えることができないことがあります。そんな時に役に立つライブラリがhtml5shivライブラリです。ダウンロードなどを必要とすることもなくただ、head要素の中に記述するだけでOKです。ただ、CSSを読み込む前に記述する必要がありますのでご注意を。

head内に記述

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

基本的な構造マークアップまとめサンプル

上記HTML5の説明を踏まえてサンプルとしてまとめて基本構造の記述をします。

HTML5基本構造のマークアップサンプル

HTML5

<!DOCTYPE html>
 <html lang="ja">
  <head>
   <meta charset="UTF-8">
   <title>HTML5の基本構造サンプル</title>
  <!--[if lt IE 9]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <link rel="stylesheet" type="text/css" href="/sample.css">
   <script>スクリプトがある場合はここにスクリプト</script>
   <style>スタイルがある場合はここにスタイル</style>

   </head>
   <body>
    ここにはコンテンツ部分を記述します
   </body>
 </html>
rss登録 rss登録 rss登録

コメント

コメントをお寄せください。

コメントの投稿

コメントフィード コメントフィード

トラックバックURL: http://select.rash.jp/html5/97/trackback/