Submit Search
Upload
HTML5でセマンティックなマークアップ
•
Download as PPTX, PDF
•
24 likes
•
7,192 views
Shumpei Shiraishi
Follow
2011/8/25にC.A.Mobileさんの社内勉強会で使用したスライド。
Read less
Read more
Technology
Education
Report
Share
Report
Share
1 of 39
Download now
Recommended
初めてのHtml5 20120612
初めてのHtml5 20120612
yohei iwakura
20190424 ochiai kakunouyou
20190424 ochiai kakunouyou
Shogo Horikawa
HTML5構造化によるセマンティックWebがSEOに与える影響
HTML5構造化によるセマンティックWebがSEOに与える影響
Takami Kazuya
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
Shumpei Shiraishi
HTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろう
yoshikawa_t
オフラインファーストの思想と実践
オフラインファーストの思想と実践
Shumpei Shiraishi
なぜ私はソニックガーデンのプログラマに転身できたのか?
なぜ私はソニックガーデンのプログラマに転身できたのか?
Junichi Ito
「管理」をなくせばうまくいく
「管理」をなくせばうまくいく
Yoshihito Kuranuki
Recommended
初めてのHtml5 20120612
初めてのHtml5 20120612
yohei iwakura
20190424 ochiai kakunouyou
20190424 ochiai kakunouyou
Shogo Horikawa
HTML5構造化によるセマンティックWebがSEOに与える影響
HTML5構造化によるセマンティックWebがSEOに与える影響
Takami Kazuya
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
Shumpei Shiraishi
HTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろう
yoshikawa_t
オフラインファーストの思想と実践
オフラインファーストの思想と実践
Shumpei Shiraishi
なぜ私はソニックガーデンのプログラマに転身できたのか?
なぜ私はソニックガーデンのプログラマに転身できたのか?
Junichi Ito
「管理」をなくせばうまくいく
「管理」をなくせばうまくいく
Yoshihito Kuranuki
webを飾る技術
webを飾る技術
ina job
XMPP仕様簡単解説
XMPP仕様簡単解説
Keiichi Daiba
Html5 入門編 その2
Html5 入門編 その2
ngi group.
Module02
Module02
洋信 後藤
JavaScript&Firebug入門
JavaScript&Firebug入門
柴田 篤志
最速HTML勉強会
最速HTML勉強会
Chisa Youzaka
京都 IT講座 9月
京都 IT講座 9月
annulus
Java Script4
Java Script4
Kiminari Homma
Tech.G HTML5 プレ講座
Tech.G HTML5 プレ講座
Atsushi Miura
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
Saeki Tominaga
京都IT研修講座
京都IT研修講座
annulus
京都 IT講座 9月
京都 IT講座 9月
annulus
IT研修講座
IT研修講座
annulus
it研修講座
it研修講座
annulus
It01
It01
chibicoo
itkensyukouza2008
itkensyukouza2008
annulus
kyoto IT
kyoto IT
annulus
京都 IT研修講座
京都 IT研修講座
annulus
京都 IT講座 9月
京都 IT講座 9月
annulus
第43回HTML5とか勉強会 最新webプロトコル傾向と対策
第43回HTML5とか勉強会 最新webプロトコル傾向と対策
Kensaku Komatsu
俺的GEB概論(前半)
俺的GEB概論(前半)
Shumpei Shiraishi
コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術
Shumpei Shiraishi
More Related Content
Similar to HTML5でセマンティックなマークアップ
webを飾る技術
webを飾る技術
ina job
XMPP仕様簡単解説
XMPP仕様簡単解説
Keiichi Daiba
Html5 入門編 その2
Html5 入門編 その2
ngi group.
Module02
Module02
洋信 後藤
JavaScript&Firebug入門
JavaScript&Firebug入門
柴田 篤志
最速HTML勉強会
最速HTML勉強会
Chisa Youzaka
京都 IT講座 9月
京都 IT講座 9月
annulus
Java Script4
Java Script4
Kiminari Homma
Tech.G HTML5 プレ講座
Tech.G HTML5 プレ講座
Atsushi Miura
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
Saeki Tominaga
京都IT研修講座
京都IT研修講座
annulus
京都 IT講座 9月
京都 IT講座 9月
annulus
IT研修講座
IT研修講座
annulus
it研修講座
it研修講座
annulus
It01
It01
chibicoo
itkensyukouza2008
itkensyukouza2008
annulus
kyoto IT
kyoto IT
annulus
京都 IT研修講座
京都 IT研修講座
annulus
京都 IT講座 9月
京都 IT講座 9月
annulus
第43回HTML5とか勉強会 最新webプロトコル傾向と対策
第43回HTML5とか勉強会 最新webプロトコル傾向と対策
Kensaku Komatsu
Similar to HTML5でセマンティックなマークアップ
(20)
webを飾る技術
webを飾る技術
XMPP仕様簡単解説
XMPP仕様簡単解説
Html5 入門編 その2
Html5 入門編 その2
Module02
Module02
JavaScript&Firebug入門
JavaScript&Firebug入門
最速HTML勉強会
最速HTML勉強会
京都 IT講座 9月
京都 IT講座 9月
Java Script4
Java Script4
Tech.G HTML5 プレ講座
Tech.G HTML5 プレ講座
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
京都IT研修講座
京都IT研修講座
京都 IT講座 9月
京都 IT講座 9月
IT研修講座
IT研修講座
it研修講座
it研修講座
It01
It01
itkensyukouza2008
itkensyukouza2008
kyoto IT
kyoto IT
京都 IT研修講座
京都 IT研修講座
京都 IT講座 9月
京都 IT講座 9月
第43回HTML5とか勉強会 最新webプロトコル傾向と対策
第43回HTML5とか勉強会 最新webプロトコル傾向と対策
More from Shumpei Shiraishi
俺的GEB概論(前半)
俺的GEB概論(前半)
Shumpei Shiraishi
コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術
Shumpei Shiraishi
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
Shumpei Shiraishi
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
Shumpei Shiraishi
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
Angular2実践入門
Angular2実践入門
Shumpei Shiraishi
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探る
Shumpei Shiraishi
変身×フランツ・カフカ
変身×フランツ・カフカ
Shumpei Shiraishi
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
Shumpei Shiraishi
「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
Shumpei Shiraishi
漫☆画太郎論
漫☆画太郎論
Shumpei Shiraishi
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門
Shumpei Shiraishi
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
Shumpei Shiraishi
はじめにことばありき
はじめにことばありき
Shumpei Shiraishi
秒速一億円
秒速一億円
Shumpei Shiraishi
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
Shumpei Shiraishi
この人と結婚していいの?を読んで
この人と結婚していいの?を読んで
Shumpei Shiraishi
20130921レジュメ2
20130921レジュメ2
Shumpei Shiraishi
More from Shumpei Shiraishi
(20)
俺的GEB概論(前半)
俺的GEB概論(前半)
コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Angular2実践入門
Angular2実践入門
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探る
変身×フランツ・カフカ
変身×フランツ・カフカ
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
漫☆画太郎論
漫☆画太郎論
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
はじめにことばありき
はじめにことばありき
秒速一億円
秒速一億円
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
この人と結婚していいの?を読んで
この人と結婚していいの?を読んで
20130921レジュメ2
20130921レジュメ2
Recently uploaded
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
Recently uploaded
(8)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
HTML5でセマンティックなマークアップ
1.
HTML5でセマンティックなマークアップ 2011/8/23 白石俊平
2.
よりセマンティックな 文書プラットフォーム +
よりリッチな アプリケーション プラットフォーム HTML5 =
3.
HTML5においては、「セマンティックなマークアップ」というパラダイムシフトが必要。
4.
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><body> <div> <div> <div> <div> HTML4では、こんなマークアップが普通でした。 </div> <div> <div> </div> </div> </div> <div> <div> <div> <div>「分け入っても分け入ってもdiv」 </div> <div> </div> </div> </div> </div> <div> </div> </div> </div> </body></html>
5.
これからは? 文書に内在する 「意味」(=セマンティック)
を意識しながらマークアップする必要がある。
6.
エンジニアがマークアップに意味を「吹きこむ」 Chrome+HTML5 Conference
開催のご案内 最近、スマートフォンサイトを中心に活用事例が目立つようになり、HTML5への注目は日々高まっています。 その一方、 「HTML5について勉強したいけど、どこから始めればよいか分からない」 という方も少なくないのではないでしょうか? HTML5 Developers JPでは、そんなディベロッパーの皆さんに向けて、 HTML5を学んで頂くための勉強会「HTML5とか勉強会」をこれまで毎月開催してきました。その回数は既に19回に及びます。 今回はそんな「HTML5とか勉強会」の第20回を記念し、HTML5 Developers JPとグーグル株式会社の共催で 2011年8月21日、"Chrome+HTML5 Conference"を開催いたします。 ここは強調したいな ここは見出し ここは固有名詞だ ここで第一節終了! ここは日付だな ここは固有名詞、 かつ強調したいな
7.
エンジニアがマークアップに意味を「吹きこむ」 マークアップを通じた、 他者との「コミュニケーション」
と言って良い。 すると、吹きこまれた「意味」を他のプログラムが解釈することも可能になる。 Semantic Semantic <!DOCTYPE html> <html> … </html>
8.
9.
30種類の新要素
10.
14種類の既存要素が変化
11.
マイクロデータ
12.
13.
14.
章、節、項…
15.
メニュー、本文、サイドバー…
16.
ページ、ダイアログ…
17.
HTML5では、以下の4要素がセクション要素として追加
18.
19.
20.
<article>か?<section>か?
21.
22.
例えば広告やサイドバーガジェットなど
23.
<aside>か?<section>か?
24.
25.
内部に<ul>と<a>を用いてリンク一覧を作るのが基本。
26.
<nav>を使うか?使わないか?
27.
28.
<nav> サイトナビゲーション ヘッダ
<article> 本文 <section> <section> 新着記事 アフィリエイト 広告 <aside> <nav> 著者のTwitter近況 <aside> <section> 月別 アーカイブ
29.
30.
「セクション要素の利用=アウトライン操作」であることを常に意識して!!
31.
<div>と同じ感覚で利用するとか、ほんとNG
32.
スタイル用途でブロックを作成する場合は<div>を使用する
33.
34.
35.
セクションルート(body/blockquote/details/fieldset/figure/td)
36.
37.
見出しのランクはセクションごとにリセットされる。
38.
基本的には、<h1>のみを使うべし!
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
タグのtextContent、もしくはdatetime属性で日時を表すことができる。
50.
日時のフォーマットはISO8601形式
51.
pubdate属性がtrueの場合、親となるbody/article要素の「公開日時」を表す。<time
datetime=“2011/08/24T10:13:24.123+09:00”> 2011年8月24日 10時13分 </time>
52.
53.
54.
55.
サンプルでは、<h1>が削除されている
56.
57.
post-858から<!-- #post-## -->まで
58.
投稿日時に<time>を使おう
59.
作成者に<address>を使おう
60.
61.
Download now