マークアップの夜明けぜよ　from futuresync 2011/07/28

マークアップの夜明けぜよ～僕の思うこれからのマークアップ～

Kousuke (seven)Inamoto

Hello!

• 稲本浩介（稲本せぶん）• 32歳（子持ち）• 株式会社ゼネラルアサヒ

www.generalasahi.co.jp• Webディレクター、マークアップエンジニア• IA• @sevenina• http://www.facebook.com/kousuke.inamoto• sevenstyleweb.com/blog

Agenda

• タグの話

• これからのマークアップ

Tagタグとは、荷札、付箋といった意味の英単語。

あらかじめ定められた特殊な記法により文書に埋め込む形で記述される付加情報。地の文とは別のレベルで解釈され、

付加情報を埋め込む特殊な文字列などのことをタグと言う。

タグには“意味”がある

HTML５になってその“意味”が増えた

<hx>　見出しであることを表す

<p> 段落であることを表す<img> 画像であることを表す<ul> 順不同のリストであることを表す<ol> 順序リストであることを表す<li> リストであることを表す<a> アンカーリンクであることを表す

<article> 内容が単体で完結しているセクションを表す<aside> 補足的な説明を表す<nav> Webサイトのナビゲーションリンクを配置するためのセクション

<section> 汎用的なセクション<hgroup> 複数の見出しをひとまとまりにする<header> セクションのヘッダ<footer> セクションのフッタ<address> article/bodyに関する問い合わせ先アドレス

<article>

<aside>

<nav>

<section>

<hgroup>

<header>

<footer>

<address>

<article>

<aside>

<nav>

<section>

<hgroup>

<header>

<footer>

<address>

“ 見た目の”デザインをマークアップするのではない

<article>

<aside>

<nav>

<section>

<hgroup>

<header>

<footer>

<address>

文書構造を、情報デザインをマークアップする

NO ANSWER

Sample

<header> <h1> <nav>

<section> <header> <section><div> <div>

<footer><div>

NO ANSWER

THINK

Agenda

• タグの話

• これからのマークアップ

http://developers.facebook.com/docs/opengraph/

http://developers.facebook.com/docs/opengraph/

OGPは今後重要

http://developers.facebook.com/docs/opengraph/

ですが・・・

http://developers.facebook.com/docs/opengraph/

OGPだけじゃあ、だめ

HTML５になってその“意味”が増えた

セマンティックWeb

2009年　 TEDにて　“ Linked Data” 　を提唱

“これまではウェブに文書を置いていた。　　　　　　　　　　　　　　　　　　　　これからはウェブにデータを置いてもらいたい“

人にとってシェアする対象はコンテンツやデータだが、

システムにとってはシェアする対象はソースコード

考えられたソースコードがコンテンツを導く

　本領発揮！　マークアップの夜明けぜよ

• @sevenina• http://www.facebook.com/kousuke.inamoto