マークアップ講座 01b HTML

1. HTMLとは
2. 『HTML5』とはなにか
3. HTML5規格
4. HTML5要素の役割
5. HTML5実装
6. Microdataの役割と実装
7. HTML運用の効率化

1. HTMLとは
1. 世界初・最古のHTML
2. 歴史
3. W3C
4. JavaScript
5. JSON
6. HTMLの基本構造

1. HTMLとは
世界初・最古のHTML
『The World Wide Web project』
http://info.cern.ch/hypertext/WWW/
TheProject.html

1. HTMLとは
世界初・最古のHTML
1991年8月6日
Sir Timothy John Berners-Lee
（ティム・バーナーズ＝リー）
!
CERN ：欧州原子核研究機構
数千人に効率よく情報を行き渡らせるための
システム開発の一貫

1. HTMLとは
歴史
• 1991年8月6日：初公開
• 1993年4月30日：
　WWW技術の無償化
• 1994年：
　World Wide Web
　Consortium（W3C）設立

1. HTMLとは
W3C
Webで使用される各種技術
の標準化を推進
!『W3C』
http://www.w3.org/

1. HTMLとは
W3C
• HTML
• CSS
• DOM ： JavaScriptのInterface
※ 日本ホスト：慶応SFC 萩野達也環境情報学部教授

1. HTMLとは
JavaScript
Ecma International（ECMAScript - ECMA-262）：
JavaScriptのObjectやMethod
!
Mozilla Foundation ：
DOMとEcmaを結合、とりまとめ役的
!
※ ステークホルダーが複数

1. HTMLとは
JSON
IETF（Internet Engineering Task Force）
RFC 4627
!
W3Cの親組織

1. HTMLとは
HTMLの基本構造
!
<span id="id-name">text</span>
!
<start-tag attribute="value">content</end-tag>
!
<開始タグ属性="属性値">コンテンツ</終了タグ>
!

1. HTMLとは
HTMLの基本構造
Empty-Element Tags
（空要素、空要素タグ）
!
<img type="path">
!
（<img src="path" />）

2. 『HTML5』とはなにか
HTMLマークアップの仕様のみにとど
まらずWeb全体の枠組みを刷新する新
しい規格群を表す用語
HTMLのメジャーアップデート第５版
2014年正式勧告目標（現在未勧告）

3. HTML5規格
HTML5規格
• セマンティック・・・ ①
• CSS3 ・・・ ②
• メディア、グラフィック、ストレージ、
API、通信、パフォーマンス

HTML5要素の役割
セマンティックWebに則ったHTML5要素
!
『HTML5』
http://www.w3.org/TR/html5/

要素分類
1. コンテンツモデルによる要素分類
2. 要素タイプによる分類
• ブロックレベル、インラインという観点は抹消

4-1. コンテンツモデルによる要素分類
コンテンツモデル（Content models）
による要素分類
1. メタデータ・コンテンツ（Metadata content）
2. フロー・コンテンツ（Flow content）
3. セクショニング・コンテンツ（Sectioning content）
4. ヘッディング・コンテンツ（Heading content）
5. フレージング・コンテンツ（Phrasing content）
6. エンベッディッド・コンテンツ（Embedded content）
7. インタラクティブ・コンテンツ（Interactive content）

1. メタデータ・コンテンツ
（Metadata content）
http://www.w3.org/TR/html5/dom.html#metadata-content
http://www.html5.jp/tag/models/index.html#metadata-content-0
設定系要素
!
base link meta noscript script style template title

2. フロー・コンテンツ
（Flow content）
http://www.w3.org/TR/html5/dom.html#flow-content
http://www.html5.jp/tag/models/index.html#flow-content-1
本文格納系
a abbr address area (if it is a descendant of a map element) article aside
audio b bdi bdo blockquote br button canvas cite code data datalist del
dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6
header hr i iframe img input ins kbd keygen label main map mark math
meter nav noscript object ol output p pre progress q ruby s samp script
section select small span strong sub sup svg table template textarea time
u ul var video wbr text

3. セクショニング・コンテンツ
（Sectioning content）
http://www.w3.org/TR/html5/dom.html#sectioning-content
http://www.html5.jp/tag/models/index.html#sectioning-content-0
構成系
!
article aside nav section

4. ヘッディング・コンテンツ
（Heading content）
http://www.w3.org/TR/html5/dom.html#heading-content
http://www.html5.jp/tag/models/index.html#heading-content-0
見出し系
!
h1 h2 h3 h4 h5 h6 hgroup

5. フレージング・コンテンツ
（Phrasing content）
http://www.w3.org/TR/html5/dom.html#phrasing-content
http://www.html5.jp/tag/models/index.html#phrasing-content-1
文章系
!
a abbr area (if it is a descendant of a map element) audio b bdi bdo br
button canvas cite code data datalist del dfn em embed i iframe img input
ins kbd keygen label map mark math meter noscript object output
progress q ruby s samp script select small span strong sub sup svg
template textarea time u var video wbr text

6. エンベッデッド・コンテンツ
（Embedded content）
http://www.w3.org/TR/html5/dom.html#embedded-content
http://www.html5.jp/tag/models/index.html#embedded-content-2
外部リソース系
!
audio canvas embed iframe img math object svg
video

7. インタラクティブ・コンテンツ
（Interactive content）
http://www.w3.org/TR/html5/dom.html#interactive-content
http://www.html5.jp/tag/models/index.html#interactive-content-0
インタラクション系
!
a audio (if the controls attribute is present) button embed iframe img (if
the usemap attribute is present) input (if the type attribute is not in the
hidden state) keygen label object (if the usemap attribute is present)
select textarea video (if the controls attribute is present)

4-2. 要素タイプによる分類
要素タイプによる要素分類
http://www.html5.jp/tag/elements/index.html
1. ルート要素（The root element）
2. メタデータ要素（Document metadata）
3. セクション要素（Sections）
4. グルーピング要素（Grouping content）
5. セマンティックテキスト要素（Text-level semantics）
6. エディット要素（Edits）
7. 組み込み要素（Embedded content）
8. テーブル要素（Tabular data）
9. フォーム要素（Forms）
10. スクリプト要素（Scripting）
11. インタラクティブ要素（Details content）

1. ルート要素（The root element）
html
2. メタデータ要素（Document
metadata）
head title base link meta style

3. セクション要素（Sections）
body article section nav aside h1～h6 header
footer address
4. グルーピング要素（Grouping
content）
p hr pre blockquote ol ul li dl dt dd figure
figcaption div main

5. セマンティックテキスト要素（Text-level
semantics）
a em strong small s cite q dfn abbr data time
code var samp kbd sub sup i b u mark ruby
rb rt rtc rp bdi bdo span br wbr

6. エディット要素（Edits）
ins del
7. 組み込み要素（Embedded
content）
img iframe embed object param video audio
source track map area

8. テーブル要素（Tabular data）
table caption colgroup col tbody thead tfoot
tr td th
9. フォーム要素（Forms）
form label input button select datalist
optgroup option textarea keygen output
progress meter fieldset legend

10. スクリプト要素（Scripting）
script noscript template canvas
11. インタラクティブ要素（Details
content）
details summary dialog

HTML属性
グローバル属性（Grobal attributes）
accesskey class contenteditable contextmenu
dir draggable dropzone hidden id lang
spellcheck style tabindex title

5. HTML5実装
xhtml1.0のコード
!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[title値]</title>
<meta name="copyright" content="[コピーライト]" />
<meta name="description" content="[ページ概要]" />
<meta name="keywords" content="[キーワード],[キーワード],[キーワード]・・・" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="canonical" href="[正規化フルパス URL]" />

<link rel="stylesheet" href="[スタイルシートパス]" />

</head>
<body>

5. HTML5実装
xhtml1.0のコード
!
<p>contents here.</p>
!

<script src="[JavaScriptパス]"></script>
<script>
/*[ローカル JavaScript]*/
</script>

</body>
</html>
http://codepen.io/sekiyaeiji/pen/Kryxm?editors=100
変化

html5のコード
5. HTML5実装
!
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="author" content="[コピーライト]">
<meta name="description" content="[ページ概要]">
<meta name="keywords" content="[キーワード],[キーワード],[キーワード]・・・">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="canonical" href="[正規化フルパス URL]">

<link rel="stylesheet" href="[スタイルシートパス]">

</head>
<body>

html5のコード
!
<p>contents here.</p>
!

<script src="[JavaScriptパス]"></script>
<script>
/*[ローカル JavaScript]*/
</script>

</body>
</html>
5. HTML5実装
http://codepen.io/sekiyaeiji/pen/CarpA?editors=100

5. HTML5実装
html5のコード解説
!
<!DOCTYPE html> ：
HTML5にて「DOCTYPE」の役割は薄い、DTDなどのスキーマは設定されない
!
<html lang=“ja"> ：
一般的には「lang属性」のみ指定（※ manifest属性：アプリオフライン動作向け）
!
<meta charset=“utf-8"> ：「charset属性」が新設
!
<meta name="author" content=“[コピーライト]"> ：
「meta name="copyright"」は廃止

コード比較
5. HTML5実装
!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="[コピーライト]" />
<meta name="description" content="[ページ概要]" />
<meta name="keywords" content="[キーワード],[キーワード],[キーワード]・・・" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="canonical" href="[正規化フルパス URL]" />

<link rel="stylesheet" href="[スタイルシートパス]" />

</head>
<body>

コード比較
5. HTML5実装
!
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="author" content="[コピーライト]">
<meta name="description" content="[ページ概要]">
<meta name="keywords" content="[キーワード],[キーワード],[キーワード]・・・">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="canonical" href="[正規化フルパス URL]">

<link rel="stylesheet" href="[スタイルシートパス]">

</head>
<body>
!

5. HTML5実装
利用頻度の高い要素
要素役割
div − （汎用ブロック）　division
span − （汎用インライン）　span
p 段落　paragraph
a ハイパーリンク　anchor
img 画像　image
br 改行　breake
hr 水平線　horizontal rule
ul 順序なしリスト unordered list
li リスト　list
dl 定義リスト　difinition list
dt 定義リストタイトル　difinition list title
dd 定義リストデータ　difinition list data
h1〜6 見出し　heading
※ 上記以外にtable、form系要素など機能的な要素群

5. HTML5実装
利用頻度の高いhtml5新設要素
要素役割
header ヘッダー　header
footer フッター　footer
nav ナビゲーション　navigation
article 記事　article
section 章　section
aside その他　aside
main メイン　main

要素利用サンプル
5. HTML5実装
http://codepen.io/sekiyaeiji/pen/gGcHs?editors=100

『HTML Microdata』
http://www.w3.org/TR/microdata/
!
『microdata について - ウェブマス
ターツールヘルプ』
https://support.google.com/
webmasters/answer/176035?hl=ja

Microdataでなにができる？
『Google検索： iPad Air Wi-Fiモデ
ル 16GB』
http://goo.gl/LHjUrr

Microdataでなにができる？

Microdata属性
itemscope itemprop itemtype itemref itemid

Microdataのサンプルコード
『価格.com - APPLE iPad Air Wi-Fi
モデル 16GB MD788J/A [シルバー]
価格比較』
http://kakaku.com/item/
K0000587933/

Microdataのサンプルコード
!
<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">iPad Air Wi-Fiモデル 16GB</span></a>
<span itemprop="name">iPad Air Wi-Fiモデル 16GB MD788J/A [シルバー]</span>
<img itemprop="image" alt="iPad Air Wi-Fiモデル 16GB MD788J/A [シルバー] 製品画像">
!
<div itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer">
<span itemprop="lowPrice">¥46,190</span>
<span itemprop="highPrice">¥65,664</span>
<span itemprop="offerCount">24</span>
<meta itemprop="priceCurrency" content="JPY" />
</div>
<li itemprop="aggregateRating" itemscope itemtype="http://schema.org/
AggregateRating">
<span itemprop="ratingValue">4.52</span>
<span itemprop="reviewCount">47</span>
</li>
<span itemprop="name">iPad Air Wi-Fiモデル 16GB</span>
</div>

itemscope
包含する要素がitemであることを定義

itemtype
itemtypeで囲まれた情報が「何を」表す情報のグループかを定義
!
microformats.org
Facebookが一部利用歴あり
　
data-vocabulary.org
Googleの検索エンジンが一部利用
　
schema.org
Google、Microsoft、Yahoo!の検索大手3社が策定中

itemtype
schema.orgの例
!
『Full Hierarchy - schema.org』
http://schema.org/docs/full.html
!
大量なtype定義あり

itemprop
情報１つ１つの意味属性を定義
!
『Article - schema.org』
http://schema.org/docs/schemas.html
!
膨大（!!）なproperty定義あり

itemのネスト
上記の例の通り、itemはネストすることができる
!
ネストすると、情報の親子関係を明確にし、情報
階層をより詳細に表現することができる

itemのネスト
!
<div itemscope itemtype="http://schema.org/Product">
<div itemprop="offers" itemscope itemtype="http://
schema.org/AggregateOffer"></div>
<li itemprop="aggregateRating" itemscope
itemtype="http://schema.org/AggregateRating"></li>
</div>

5. HTML5実装
ここで振り返り
なぜ ”セマンティック”？

5. HTML5実装
なぜ ”セマンティック”？
• どこに何が書いてある？
• 意味を伝達できる文書にする
• データ伝達、交換、収集・分析を効
率化したり標準化できる

7. HTML運用の効率化
1. モジュール指向マークアップ
2. ループオブジェクト
3. id属性とclass属性
4. id属性やclass属性の役割分離
5. a要素の指定範囲
6. 本文ブロックの定常テスト

7-1. モジュール指向マークアップ

7-1. モジュール指向マークアップ
Sample
http://codepen.io/sekiyaeiji/pen/mlBon?
editors=100
!
✕ Anti-pattern
http://codepen.io/sekiyaeiji/pen/jbvil?
editors=100

7-2. ループオブジェクト
『レディースファッション通販トップ -
Yahoo!ショッピング - Ｔポイントが
貯まる！使える！ネット通販』
!
http://goo.gl/tq71p5
!
「カテゴリグリッド」

!
<ul id="pc02_cr_2494" class="exCfx">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

『トップスファッション通販 -
ZOZOTOWN』
!
http://zozo.jp/category/tops/
!
「商品グリッド」

!
<ul id="searchResultList" class="goodsResult clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

上記の例の場合、汎用性が高いのは
ZOZOTOWNのコード
!
マルチカラムグリッドレイアウトは、
inline-blockやfloatを利用して、
同型のマークアップのループになるよ
うに設計する

7-3. id属性とclass属性
id属性の特長
• １文書に１箇所のみ記述できる
• JSセレクタにおいて高パフォーマンス

class属性の特長
• １文書に複数記述できる
• JSセレクタにおいて低パフォーマンス

CSS要件におけるid属性と
class属性の使い分け
HTML要素のセマンティック性が向上した影響もあ
り、
CSSセレクタとしての、id属性の役割はあまりなく
なった現状では、
スタイル定義はなるべくclassのみで設定すべきで
ある

JavaSdript要件における
id属性とclass属性の使い分け
JSセレクタとしてのid属性は、パフォーマンスにお
いて存在価値が高い
"文書に一意"という特性により、DOM走査におい
て発見次第処理を中断する仕様になっているためで
ある

7-4. id属性やclass属性の役割分離
!
<style>
#sample {}
</style>
!
<div id="sample">sampleを一意に定義</div>
!
<a href="#sample">sample</a>
!
<script>
$('#sample');
</script>

この例では、
「sample」idにかかる役割が
CSS、JS、idアンカーにまたがり、
id「sample」を変更した場合の影響範囲が大きい
!
このようなコードは、
運用コストの上昇とバグのリスクを招く

!
<style>
#sample {}
</style>
!
<div id="sample js-sample link-sample">役割毎に
sample、js-sample、link-sampleのようにidを分離する</div>
!
<a href="#link-sample">sample</a>
!
<script>
$('#js-sample');
</script>

上記はJSセレクタとアンカー用のidに
それぞれ命名規則「js-」「link-」を付与した例
!
「sample」、
「js-sample」、
「link-sample」の
機能的な役割が分離されており、
修正時に他機能への影響がなく
シンプルな運用が可能

class属性においても、以下の通り分離する
!
<style>
.sample {}
</style>
!
<div class="sample js-sample">役割毎にsample、js-sample
のようにclassを分離する</div>
!
<script>
$('.js-sample');
</script>

7-5. a要素の指定範囲
Sample
http://codepen.io/sekiyaeiji/pen/DlHsA?editors=100
どちらにも対応できるようにしておく

7-6. 本文ブロックの定常テスト
以下を挿入して
レイアウトが崩れないことを確認
!
テキストテキスト１０テキストテキスト２０テキストテキスト３
０テキストテキスト４０テキストテキスト５０テキストテキスト
６０テキストテキスト７０テキストテキスト８０テキストテキス
ト９０テキストテキスト００
!
texttext10texttext20texttext30texttext40texttext50textte
xt60texttext70texttext80texttext90texttext00

※ インデントのお話
現在のコード内の集計結果
!
『Popular Coding Convention on
Github』
http://sideeffect.kr/popularconvention#javascript

※ インデントのお話
さまざまな役割のメンバーが
さまざまなエディタを通して
編集を行う
!
→ より汎用的な可読性が求められている

マークアップ講座 01b HTML

More Related Content

What's hot

Viewers also liked

Similar to マークアップ講座 01b HTML

More from eiji sekiya

マークアップ講座 01b HTML