Html5ってなに？

Skill Project
2015年度技術向上プロジェクト
第一回社内勉強会 2015年7月22日開催

222本日の内容
1. HTML5でなにが変わるか
2. HTML4.01とHTML5での文法・マークアップの違い

333HTML5でなにが変わるか
 Webブラウザ間の互換性を向上させる。
 文書内に埋め込まれた「意味」を明確にする。
 よりリッチなWebアプリ構築を可能にする。

• Webブラウザ間の互換性の向上
WHTML5は、Webブラウザが実装している機能群を分析し、
仕様の策定が行われた。
よって、HTML5で作られたWebアプリケーションは、
「ブラウザの標準に準拠」ということになる。
このことにより、作ったWebアプリケーションがあるブラウザ
だと動作しない、といったケースが起こりにくくなる。

• 文書内の「意味」の明確化
HTML文書（タグ）が、意味的要素（セマンティックな要素）
となるように整備された。
例えば箇条書きの「<ul>」要素が、メニューリストなのか、
箇条書きなのかを明示的に記述できるようになる。

• よりリッチなWebアプリケーション構築
Flashなど外部技術を取り入れて作成されていたリッチコンテン
ツの機能が、APIとして実装された。
ただし、ブラウザでのサポートにまだバラつきがある。
• Canvas グラフィックを表現できる。
• Drag and Drop ブラウザ上にドラッグ＆ドロップできる。
• The Web Socket ソケット通信ができる。
• Geolocation 位置情報を取得できる。
• etc…

777HTML4.01とHTML5の文法の違い
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>最小テンプレート</title>
</head>
<body>
<header><h1>最小テンプレート</h1></header>
<nav><ul><li><a href="./">Home</a></li></ul></nav>
<article>
<h2>最低限テンプレート</h2>
<p>最低限テンプレートになります。</p>
</article>
<footer><a href="./">最小テンプレート</a></footer>
</body>
</html>
HTML4.01 HTML5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-
8">
<title>最小テンプレート</title>
</head>
<body>
<div id="header"><h1>最小テンプレート</h1></div>
<ul><li><a href="./">Home</a></li></ul>
<div id="contents">
<h2>最低限テンプレート</h2>
<p>最低限テンプレートになります。</p>
</div>
<div id="footer"><a href="./">最小テンプレート</a></div>
</body>
</html>

• DOCTYPE宣言
ファイルの先頭にこの宣言があるかどうかで、Webブラウザは
パーサやレンダリングモードをHTML5に対応したものに切り替
える。
HTML4.01やXHTMLにくらべ、記述が簡略化された。
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5
<!DOCTYPE html>

• metaタグ（文字エンコーディング）
HTML5では、charset要素のみの指定でよくなった。ただし、
どちらの書き方でも有効。
HTML5からは、ファイルの文字エンコーディングにUTF-8を使用
することが推奨されている。
HTML4.01
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
HTML5
<meta charset="UTF-8">

• metaタグ（Content-○○-Type）
従来CSSおよびJavaScriptのタイプ宣言を行っていたが、HTML5
デフォルトの設定となっている為、省略可能になった。
HTML4.01
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript"></script>
HTML5
省略
省略
<script></script>

• HTML5要素の作成
IE8以下ではHTML5のタグをScriptで生成する必要があるが、ライ
ブラリを読み込むことで簡略化できる。
HTML5

• DIVタグの扱い
HTML4.01まで、DIVタグはレイアウトやスタイリングだけでは
なく、文書の構造化などにも使われてきた。
前述の通りHTML5では、文書の構造化や役割を明示する為の
専用タグが整備された為、レイアウトやスタイリング目的以外で
DIVタグを使用するのは好ましくない。
Webページの操作性やメンテナンス性が低下してしまうので、
適切なタグを用い、記述することが重要となる。

• セクションタグ <header>
イントロダクションやナビゲーションをまとめるセクション。
• ロゴ画像
• イントロダクション
• グローバルリンク
• 検索フォーム
HTML4.01
<div id=“header”></div>
HTML5
<header></header>

• セクションタグ <footer>
ある構造または文書全体に関した情報をまとめるセクション。
• 著作表示
• 関連文書へのリンク
• 作成年月日
HTML4.01
<div id=“footer”></div>
HTML5
<footer></footer>

• セクションタグ <nav>
他ページやページ内リンクなどのナビゲーションを表すセクショ
ン。
• グローバルナビゲーション
• 目次
• パンくずリスト
HTML4.01
<div id=“nav”><ul><li></li></ul></div>
HTML5
<nav><ul><li></li></ul></nav>

• セクションタグ <main>
ページ内のメインコンテンツを表す。
• 記事リスト
• 画像ギャラリー
HTML4.01
<div id=“main”></div>
HTML5
<main></main>

• セクションタグ <article>
単独で切り離し可能な自己完結したセクションを表す。
• ニュース記事
• ブログ記事
• 掲示板投稿
HTML4.01
<div id=“content”></div>
HTML5
<article></article>

• セクションタグ <section>
コンテンツのグループ化、章仕立てなどをまとめるセクション。
• ニュース記事
• ブログ記事
• 掲示板投稿
HTML4.01
<div id=“content”><h1>記事の見出し</h1></div>
HTML5
<section><h1>記事の見出し</h1></ section >

• セクションタグ <aside>
コンテンツに関連しながらも本筋からは外れたグループを表すセ
クション。
• 用語説明
• サイドバー
• 広告
HTML4.01
<div id=“ad”><a>広告商品名</a></div>
HTML5
<aside><a>広告商品名</a></aside>

• 演習
HTML4.01準拠で記述された文書を、HTML5準拠でマークアップ
し直してみる。

212121今後の勉強会
• 今後の勉強会
今後も継続的に勉強会をしていきたい。
• HTML5の新機能の利用
• HTML5 + CSS3デザイン
• フラットデザイン
• レイアウトフレームワークの利用
• JQueryなど外部ライブラリの利用

Html5ってなに？

Recommended

Recommended

More Related Content

Similar to Html5ってなに？

Similar to Html5ってなに？ (20)

More from Yoshinori Kamaishi

More from Yoshinori Kamaishi (7)

Html5ってなに？