Help us understand the problem. What is going on with this article?

HTML5の基礎知識

More than 5 years have passed since last update.

構造

<!DOCTYPE...>
<html>
  <head>
    ヘッダ情報
  </head>
  <body>
    コンテンツ内容
  </body>
</html>

  • 特に変更はなし

HTMLとXHTML

  • HTML5 でコーディングを行う際、HTML で記述するか、XHTML で記述するかを選べる
  • HTML 文法の仕様はHTML5、XHTML 文法の仕様はXHTML5と呼ばれている

HTMLシンタックスの記述方法

HTML5 文書の DOCTYPE 宣言

///HTML 4.01 Transitional DTD のDOCTYPE宣言
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

///HTML5 のDOCTYPE宣言
<!DOCTYPE html>
  • ファイルの一行目に以下を記入する
  • 必ず宣言すること

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

//HTML4以前のUTF-8指定
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

//HTML5のUTF-8指定
<meta charset="UTF-8"> 
  • これまでどおり Content-Type を指定することも可能だが、1つの HTML ファイルには、上の宣言のどちらかのみを含めるようにすること

終了タグを記述してはいけない要素

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source

XHTMLシンタックスの記述方法

ここでは XHTML5 を用いたマークアップのルールを紹介する

XHTML文書のMINEタイプ

  • text/xmlapplication/xml、もしくは末尾が+xmlで終わるMINEタイプになる

XHTMLの名前空間

  • XHTML1.x の場合と同じくhttp://www.w3.org/1999/xhtmlとなる

XHTML文書のDOCTYPE宣言

  • XHTML に DOCTYPE 宣言を含めることは許されているが、HTML5 には公式 DTD が存在しない

XHTMLを用いたマークアップの例

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>タイトル</title>
  </head>

  <body>
    <h1>見出し</h1>
    <p>段落1</p>
    <input type="text" disabled="disabled" />
  </body>

</html>

HTML5の新要素

文書構造に関するもの

要素 意味
section 汎用的なセクション。文書のアウトラインを構成する
article セクションの一種で、Webページから独立したコンテンツを表す
aside セクションの一種で、外側のセクションに対する補足情報を表す
nav セクションの一種で、外側のセクションに対するナビゲーションメニューを表す
footer セクションのフッター
header セクションのヘッター
hgoupe 複数の見出し(h1〜h6)をまとめる

外部コンテンツの埋め込み

要素 意味
figure キャプションを伴うような内容のものを文書中に埋め込む際に使用
video 動画プレーヤ
audio 音声プレーヤー
source video/audio に対して、リソースの URL やタイプを指定する
canvas ビットマップキャンパス
embed プラグインで実行するコンテンツの埋め込み

フォーム

要素 意味
keygen 公開鍵暗号方式のキーペアを作成する
output 画面出力されるフォーム要素
progress 進捗状況を表す(プログレスバー)
meter メーター

テキスト・その他

要素 意味
mark Web ページの糸とは異なる文脈での強調
ruby/rt/rp 感じのよみがな等を表す「ルビ」を指定する
time 日付や時刻を表す
command メニューアから実行されるコマンド
datalist オートコンプリートの候補など、データのリストを保持するのに用いられる

HTML5で廃止された要素

html5リファレンス 廃止タグ一覧
http://www.tagindex.com/html5/basic/abolished.html

HTML5レイアウトサンプル

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" href="sample.css">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    <script src="sample.js"></script>
  </head>

  <body>
    <header>
    </header>

    <nav>
    </nav>

    <article>
    </article>

    <footer>
    </footer>

  </body>

</html>

IE8以下の対応
 IE8以下はHTML5に対応していませんがGoogle Codeで公開されているhtml5shivスクリプトを利用すればIE8以下でもHTML5のページを表示することが可能になります。

head要素内に以下の内容を記述します。
 *JavaScriptをオフにしている環境では適用されませんのでIE8以下では表示が崩れるおそれがあります。

参考

参考書籍:「HTML5 & API 入門」白石俊平著
参考サイト:Webデザインラボ(http://www.webdlab.com/html/html5/)

nakoro
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした