うみんちゅのプログラミング部

HTML5とは?いままでのHTMLとの違いは?

カテゴリー/ HTML,パソコン関係 |投稿者/ dainabu

HTMLの新しいバージョンであるHTML5が勧告されていますが、そのHTML5とは何かをこのページでは説明します。

 

HTML5とは

HTML5は、HTMLのバージョン5で、要素の見直しや機能の追加などが行われました。

昔はサポートしていないブラウザもありましたが、現在はほとんどのブラウザがサポートしています。

 

変更,追加されたもの

 

DOCTYPE宣言

HTML5のDOCTYPE宣言はHTML4以前に比べて簡略化されています。

下の表がHTML4とHTML5のDOCTYPE宣言です。

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

HTML4のDOCTYPE宣言は100文字ほどありますが、HTML5のDOCTYPE宣言は15文字ほどになってます。

 

セクション

HTML5になって、セクションを決める要素が追加されました。

HTML4では、divタグを使用していましたが、HTML5ではセクションを決めるタグで代用することができます。

下の表は、セクションを決めるタグの一覧です。

<header> ヘッダー
<footer> フッター
<article> 記事
<aside> サイド
<nav> ナビ
<section> 一つのセクション

<header>タグは、サイトのタイトル,ヘッダー画像,ヘッダーナビなどに使用します。

<footer>タグは、フッターのコピーライト,連絡先,ナビなどに使用します。

<article>タグは、記事に使用します。

<aside>タグは、サイドバーなどに使用します。サイドバーの中には検索や他のページヘのリンクなどが入ります。

<nav>タグは、ナビに使用します。

<section>タグは、一つのセクションです。

 

inputタグのtype属性

<input>タグのtype属性の値もHTML5で新しく追加されています。

下の表が追加されたtype属性の値の一覧です。

color
date 日付
email メールアドレス
month
number
range スライド式の数値選択
search 検索
time 時間
url URL
week

 

メディアを埋め込むタグ

HTML5では、メディアやファイルを埋め込むタグが追加されました。

<audio> 音声の埋め込み
<video> 動画の埋め込み
<embed> ファイルの埋め込み
<iframe> インラインフレームの埋め込み
<source> 埋め込みファイルのソース

 

<canvas>

<canvas>タグは、JavaScriptと組み合わせて図形などを描画するためのHTML5で追加されたタグです。

このタグとJavaScriptを使えば、ゲームを作ることもできます。

 

APIの追加

APIが追加されたことでアプリケーションを作りやすくなりました。

 

追加されたタグ

HTML5で追加されたタグです。

<datalist> データリスト
<figure> 図表
<figcaption> <figure>のキャプション
<main> メイン
<mark> 注目させる
<meter> ゲージ
<progress> 進捗状況
<ruby> ふりがな
<rp> ふりがなを囲む記号
<rt> ふりがなの文字列
<details> 詳細情報
<summary> <details>の概要
<time> 時間
<wbr> 改行可能
<keygen> 暗号鍵
<output> 計算結果

<datalist>タグは、フォームに使うデータリストです。

<figure>タグは、図表です。

<figcaption>タグは、<figure>タグのキャプションです。

<main>タグは、メインコンテンツを示します。

<mark>タグは、注目させたい部分です。ブラウザではたいてい黄色になります。

<meter>タグは、ゲージです。値の最大値や最小値を設定することもできます。

<progress>タグは、進捗状況です。

<ruby>タグは、ふりがなです。

<rp>タグは、ふりがなを囲む記号です。

<rt>タグは、ふりがなのテキストです。

<details>タグは、詳細情報です。

<summary>タグは、<details>タグの概要です。

<time>タグは、正確な時間です。

<wbr>タグは、ブラウザが改行してもいい場所です。

<keygen>タグは、暗号鍵を生成します。

<output>タグは、計算結果などです。

 

廃止されたタグ

HTML4以前のタグの一部が廃止されました。

<u> 下線
<acronym> 頭文字語
<applet> Javaアプレット
<big> 文字を大きくする
<center> 文字を中央に表示
<dir> リスト
<font> フォント関連の操作
<frame> フレーム
<frameset> フレームの分割
<strike> 打ち消し線
<tt> 等幅フォント

<u>タグは、下線を引きます。CSSのtext-decoration:underlineで代用できます。

<acronym>は、頭文字語です。

<applet>は、Javaアプレットを埋め込みます。<object>タグで代用できます。

<big>タグは、文字を大きくします。CSSのfont-sizeで代用できます。

<center>タグは、文字を中央にします。CSSのtext-align:centerで代用できます。

<dir>タグは、リストです。<ul>タグで代用できます。

<font>タグは、フォントの操作をします。CSSで代用できます。

<frame>タグは、フレームです。

<frameset>タグは、フレームの分割をします。

<strike>タグは、打ち消し線を引きます。CSSのtext-decoration:line-throughで代用できます。

<tt>タグは、等幅フォントにします。

 次の記事へ >>
Top