マークアップの夜明けぜよ from futuresync 2011/07/28
DESCRIPTION
2011年7月28日に福岡で行われたイベントFutureSyncでのLT資料です。HTML5をマークアップという側面から見て、これからのマークアップの意味みたいな部分について意見を述べています。TRANSCRIPT
マークアップの夜明けぜよ~僕の思うこれからのマークアップ~
Kousuke (seven)Inamoto
Hello!
• 稲本浩介(稲本せぶん)• 32歳(子持ち)• 株式会社ゼネラルアサヒ
www.generalasahi.co.jp• Webディレクター、マークアップエンジニア• IA• @sevenina• http://www.facebook.com/kousuke.inamoto• sevenstyleweb.com/blog
Agenda
• タグの話
• これからのマークアップ
Tagタグとは、荷札、付箋といった意味の英単語。
あらかじめ定められた特殊な記法により文書に埋め込む形で記述される付加情報。地の文とは別のレベルで解釈され、
付加情報を埋め込む特殊な文字列などのことをタグと言う。
タグには“意味”がある
HTML5になってその“意味”が増えた
<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だけじゃあ、だめ
HTML5になってその“意味”が増えた
セマンティックWeb
2009年 TEDにて “ Linked Data” を提唱
“これまではウェブに文書を置いていた。 これからはウェブにデータを置いてもらいたい“
人にとってシェアする対象はコンテンツやデータだが、
システムにとってはシェアする対象はソースコード
考えられたソースコードがコンテンツを導く
本領発揮! マークアップの夜明けぜよ
• @sevenina• http://www.facebook.com/kousuke.inamoto