HTML5マークアップ珍プレー集 - HTML5 Conference 2012

Futomi Hatano
Futomi HatanoCEO at futomi Co., Ltd.
••
@futomi futomi.hatano http://www.html5.jp/
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
珍プレー 1 雀百まで踊り忘れず
CASE 1
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
<center> <div>...</div> <div>...</div> <div>...</div> </center>
http://www.google.co.jp/
http://www.w3.org/TR/html5/obsolete.html#non-conforming-features
center
珍プレー 2 仏作って魂入れず
CASE 2
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
http://www.apple.com/jp/ipad/features/
http://www.w3.org/TR/html5/single-page.html#void-elements
CASE 3
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
http://www.microsoft.com/surface/en/us/about.aspx
http://www.w3.org/TR/html5/the-img-element.html#alt
珍プレー 3 所変われば品変わる
https://chrome.google.com/webstore/detail/afoibpobokebhgfnknfndkgemglggomo
CASE 4
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
http://www.apple.com/osx/
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
http://www.apple.com/osx/
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
http://www.w3.org/TR/html5/headings-and-sections.html#sectioning-root
CASE 5
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
みなさんの投稿はスポンサー広告だそうです...
珍プレー 5 論語読みの論語知らず
CASE 6
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
http://www.welcometorecall.com/mobile/
CASE 7
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
https://signup.netflix.com/global
CASE 8
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
@futomi futomi.hatano http://www.html5.jp/
1 of 41

HTML5マークアップ珍プレー集 - HTML5 Conference 2012

••
Download to read offline
Technology

近年、個人や企業を問わず、HTML5でマークアップされたサイトが数多く登場しています。しかし、HTML5が浸透してから年月が浅いこともあり、有名な大企業のサイトですら、不適切なマークアップが見受けられます。本セッションでは、そのような不適切なマークアップを紹介し、どう直すべきかをみなさんと一緒に考察していきます。

Futomi Hatano
Futomi HatanoCEO at futomi Co., Ltd.

Recommended

Facebook and heroku by
Facebook and herokuFacebook and heroku
Facebook and herokuNaoyuki Mitsuboshi
502 views•18 slides
Designing Interfaces Book Reading #3: Chapter 5 by
Designing Interfaces Book Reading #3: Chapter 5Designing Interfaces Book Reading #3: Chapter 5
Designing Interfaces Book Reading #3: Chapter 5Naoko Takano
1.9K views•20 slides
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン by
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザインスマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザインinvogue
1.8K views•56 slides
HTML5Conference2012 LT ピンチとチャンス by
HTML5Conference2012 LT ピンチとチャンスHTML5Conference2012 LT ピンチとチャンス
HTML5Conference2012 LT ピンチとチャンスHajime Ogushi
3.4K views•48 slides
Porky by
PorkyPorky
Porkypuriketu99 --
2.8K views•7 slides
HTML5とIE10とWindows 8 by
HTML5とIE10とWindows 8HTML5とIE10とWindows 8
HTML5とIE10とWindows 8Microsoft
4.3K views•39 slides

More Related Content

Similar to HTML5マークアップ珍プレー集 - HTML5 Conference 2012

WCAF Seminar vol.7 a-blog cms by
WCAF Seminar vol.7 a-blog cmsWCAF Seminar vol.7 a-blog cms
WCAF Seminar vol.7 a-blog cmsKazumich YAMAMOTO
557 views•69 slides
Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナー by
Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナーProgressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナー
Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナーFutomi Hatano
1.4K views•57 slides
書籍 「実践 反復型 ソフトウェア開発」 への フィードバックを 集めました。 by
書籍 「実践 反復型 ソフトウェア開発」 への フィードバックを 集めました。書籍 「実践 反復型 ソフトウェア開発」 への フィードバックを 集めました。
書籍 「実践 反復型 ソフトウェア開発」 への フィードバックを 集めました。Yoshifumi Tsuda
8.8K views•28 slides
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv... by
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...SwapSkills
1.8K views•51 slides
20150829 Java女子部勉強会配付資料 by
20150829 Java女子部勉強会配付資料20150829 Java女子部勉強会配付資料
20150829 Java女子部勉強会配付資料Misaki Kajiura
1.5K views•10 slides
高橋rf.html 0.3 by
高橋rf.html 0.3高橋rf.html 0.3
高橋rf.html 0.3hATrayflood
730 views•63 slides

Similar to HTML5マークアップ珍プレー集 - HTML5 Conference 2012(8)

WCAF Seminar vol.7 a-blog cms by Kazumich YAMAMOTO
WCAF Seminar vol.7 a-blog cmsWCAF Seminar vol.7 a-blog cms
WCAF Seminar vol.7 a-blog cms
Kazumich YAMAMOTO•557 views
Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナー by Futomi Hatano
Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナーProgressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナー
Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナー
Futomi Hatano•1.4K views
書籍 「実践 反復型 ソフトウェア開発」 への フィードバックを 集めました。 by Yoshifumi Tsuda
書籍 「実践 反復型 ソフトウェア開発」 への フィードバックを 集めました。書籍 「実践 反復型 ソフトウェア開発」 への フィードバックを 集めました。
書籍 「実践 反復型 ソフトウェア開発」 への フィードバックを 集めました。
Yoshifumi Tsuda•8.8K views
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv... by SwapSkills
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
SwapSkills•1.8K views
20150829 Java女子部勉強会配付資料 by Misaki Kajiura
20150829 Java女子部勉強会配付資料20150829 Java女子部勉強会配付資料
20150829 Java女子部勉強会配付資料
Misaki Kajiura•1.5K views
高橋rf.html 0.3 by hATrayflood
高橋rf.html 0.3高橋rf.html 0.3
高橋rf.html 0.3
hATrayflood•730 views
20120307 CakePHP Study in Tokyo by ichikaway
20120307 CakePHP Study in Tokyo20120307 CakePHP Study in Tokyo
20120307 CakePHP Study in Tokyo
ichikaway•1.3K views
Es6 cognition by Net Kanayan
Es6 cognitionEs6 cognition
Es6 cognition
Net Kanayan•638 views

More from Futomi Hatano

続・Webエンジニアのためのスマートホームハック ～ Node.js で IoT プロトコルハック ～ by
続・Webエンジニアのためのスマートホームハック ～ Node.js で IoT プロトコルハック ～続・Webエンジニアのためのスマートホームハック ～ Node.js で IoT プロトコルハック ～
続・Webエンジニアのためのスマートホームハック ～ Node.js で IoT プロトコルハック ～Futomi Hatano
4K views•49 slides
Web エンジニアのための Web エンジニアのための ロボットアームの API を考えてみる by
Web エンジニアのための Web エンジニアのための ロボットアームの API を考えてみるWeb エンジニアのための Web エンジニアのための ロボットアームの API を考えてみる
Web エンジニアのための Web エンジニアのための ロボットアームの API を考えてみるFutomi Hatano
2.3K views•19 slides
Webエンジニアのためのスマートホームハック ～ Node.js で家電とArduinoを操作 ～ by
Webエンジニアのためのスマートホームハック ～ Node.js で家電とArduinoを操作 ～Webエンジニアのためのスマートホームハック ～ Node.js で家電とArduinoを操作 ～
Webエンジニアのためのスマートホームハック ～ Node.js で家電とArduinoを操作 ～Futomi Hatano
5.1K views•55 slides
Embedded Webで加速するWeb of Things by
Embedded Webで加速するWeb of ThingsEmbedded Webで加速するWeb of Things
Embedded Webで加速するWeb of ThingsFutomi Hatano
2.7K views•54 slides
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』 by
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』Futomi Hatano
3K views•57 slides
HTML5 Conference 2015 悩める組込機器向けウェブコンテンツのパフォーマンス by
HTML5 Conference 2015 悩める組込機器向けウェブコンテンツのパフォーマンスHTML5 Conference 2015 悩める組込機器向けウェブコンテンツのパフォーマンス
HTML5 Conference 2015 悩める組込機器向けウェブコンテンツのパフォーマンスFutomi Hatano
14.3K views•56 slides

More from Futomi Hatano(12)

続・Webエンジニアのためのスマートホームハック ～ Node.js で IoT プロトコルハック ～ by Futomi Hatano
続・Webエンジニアのためのスマートホームハック ～ Node.js で IoT プロトコルハック ～続・Webエンジニアのためのスマートホームハック ～ Node.js で IoT プロトコルハック ～
続・Webエンジニアのためのスマートホームハック ～ Node.js で IoT プロトコルハック ～
Futomi Hatano•4K views
Web エンジニアのための Web エンジニアのための ロボットアームの API を考えてみる by Futomi Hatano
Web エンジニアのための Web エンジニアのための ロボットアームの API を考えてみるWeb エンジニアのための Web エンジニアのための ロボットアームの API を考えてみる
Web エンジニアのための Web エンジニアのための ロボットアームの API を考えてみる
Futomi Hatano•2.3K views
Webエンジニアのためのスマートホームハック ～ Node.js で家電とArduinoを操作 ～ by Futomi Hatano
Webエンジニアのためのスマートホームハック ～ Node.js で家電とArduinoを操作 ～Webエンジニアのためのスマートホームハック ～ Node.js で家電とArduinoを操作 ～
Webエンジニアのためのスマートホームハック ～ Node.js で家電とArduinoを操作 ～
Futomi Hatano•5.1K views
Embedded Webで加速するWeb of Things by Futomi Hatano
Embedded Webで加速するWeb of ThingsEmbedded Webで加速するWeb of Things
Embedded Webで加速するWeb of Things
Futomi Hatano•2.7K views
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』 by Futomi Hatano
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
Futomi Hatano•3K views
HTML5 Conference 2015 悩める組込機器向けウェブコンテンツのパフォーマンス by Futomi Hatano
HTML5 Conference 2015 悩める組込機器向けウェブコンテンツのパフォーマンスHTML5 Conference 2015 悩める組込機器向けウェブコンテンツのパフォーマンス
HTML5 Conference 2015 悩める組込機器向けウェブコンテンツのパフォーマンス
Futomi Hatano•14.3K views
ウェブ標準デバイス系 API 総集編 2014 by Futomi Hatano
ウェブ標準デバイス系 API 総集編 2014ウェブ標準デバイス系 API 総集編 2014
ウェブ標準デバイス系 API 総集編 2014
Futomi Hatano•23.7K views
html5j自動車部 第三回勉強会 W3C標準化と車載プラットフォームの最新動向 by Futomi Hatano
html5j自動車部 第三回勉強会 W3C標準化と車載プラットフォームの最新動向html5j自動車部 第三回勉強会 W3C標準化と車載プラットフォームの最新動向
html5j自動車部 第三回勉強会 W3C標準化と車載プラットフォームの最新動向
Futomi Hatano•3.7K views
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013 by Futomi Hatano
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
Futomi Hatano•31.5K views
アプリ開発支援サービス「アプリカン」 - HTML5 Experts Night 2013年8月23日 by Futomi Hatano
アプリ開発支援サービス「アプリカン」 - HTML5 Experts Night 2013年8月23日アプリ開発支援サービス「アプリカン」 - HTML5 Experts Night 2013年8月23日
アプリ開発支援サービス「アプリカン」 - HTML5 Experts Night 2013年8月23日
Futomi Hatano•2.1K views
第40回 HTML5とか勉強会 HTML5マークアップ ビギナーの良くある質問にズバリ答えます by Futomi Hatano
第40回 HTML5とか勉強会 HTML5マークアップ ビギナーの良くある質問にズバリ答えます第40回 HTML5とか勉強会 HTML5マークアップ ビギナーの良くある質問にズバリ答えます
第40回 HTML5とか勉強会 HTML5マークアップ ビギナーの良くある質問にズバリ答えます
Futomi Hatano•9.7K views
HTML5マークアップの心得と作法 by Futomi Hatano
HTML5マークアップの心得と作法HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano•14.1K views

Recently uploaded

「概念モデリング自動化に向けた第一歩」 ～ ChatGPT・Open AI 活用による開発対象のモデル化 by
「概念モデリング自動化に向けた第一歩」 ～ ChatGPT・Open AI 活用による開発対象のモデル化「概念モデリング自動化に向けた第一歩」 ～ ChatGPT・Open AI 活用による開発対象のモデル化
「概念モデリング自動化に向けた第一歩」 ～ ChatGPT・Open AI 活用による開発対象のモデル化Knowledge & Experience
8 views•34 slides
01Booster Studio ご紹介資料 by
01Booster Studio ご紹介資料01Booster Studio ご紹介資料
01Booster Studio ご紹介資料ssusere7a2172
220 views•19 slides
SSH応用編_20231129.pdf by
SSH応用編_20231129.pdfSSH応用編_20231129.pdf
SSH応用編_20231129.pdficebreaker4
30 views•13 slides
さくらのひやおろし2023 by
さくらのひやおろし2023さくらのひやおろし2023
さくらのひやおろし2023法林浩之
83 views•58 slides
pgvectorを使ってChatGPTとPostgreSQLを連携してみよう！（PostgreSQL Conference Japan 2023 発表資料） by
pgvectorを使ってChatGPTとPostgreSQLを連携してみよう！（PostgreSQL Conference Japan 2023 発表資料）pgvectorを使ってChatGPTとPostgreSQLを連携してみよう！（PostgreSQL Conference Japan 2023 発表資料）
pgvectorを使ってChatGPTとPostgreSQLを連携してみよう！（PostgreSQL Conference Japan 2023 発表資料）NTT DATA Technology & Innovation
185 views•63 slides
JJUG CCC.pptx by
JJUG CCC.pptxJJUG CCC.pptx
JJUG CCC.pptxKanta Sasaki
6 views•14 slides

Recently uploaded(12)

「概念モデリング自動化に向けた第一歩」 ～ ChatGPT・Open AI 活用による開発対象のモデル化 by Knowledge & Experience
「概念モデリング自動化に向けた第一歩」 ～ ChatGPT・Open AI 活用による開発対象のモデル化「概念モデリング自動化に向けた第一歩」 ～ ChatGPT・Open AI 活用による開発対象のモデル化
「概念モデリング自動化に向けた第一歩」 ～ ChatGPT・Open AI 活用による開発対象のモデル化
Knowledge & Experience•8 views
01Booster Studio ご紹介資料 by ssusere7a2172
01Booster Studio ご紹介資料01Booster Studio ご紹介資料
01Booster Studio ご紹介資料
ssusere7a2172•220 views
SSH応用編_20231129.pdf by icebreaker4
SSH応用編_20231129.pdfSSH応用編_20231129.pdf
SSH応用編_20231129.pdf
icebreaker4•30 views
さくらのひやおろし2023 by 法林浩之
さくらのひやおろし2023さくらのひやおろし2023
さくらのひやおろし2023
法林浩之•83 views
pgvectorを使ってChatGPTとPostgreSQLを連携してみよう！（PostgreSQL Conference Japan 2023 発表資料） by NTT DATA Technology & Innovation
pgvectorを使ってChatGPTとPostgreSQLを連携してみよう！（PostgreSQL Conference Japan 2023 発表資料）pgvectorを使ってChatGPTとPostgreSQLを連携してみよう！（PostgreSQL Conference Japan 2023 発表資料）
pgvectorを使ってChatGPTとPostgreSQLを連携してみよう！（PostgreSQL Conference Japan 2023 発表資料）
NTT DATA Technology & Innovation•185 views
JJUG CCC.pptx by Kanta Sasaki
JJUG CCC.pptxJJUG CCC.pptx
JJUG CCC.pptx
Kanta Sasaki•6 views
The Things Stack説明資料 by The Things Industries by CRI Japan, Inc.
The Things Stack説明資料 by The Things IndustriesThe Things Stack説明資料 by The Things Industries
The Things Stack説明資料 by The Things Industries
CRI Japan, Inc.•19 views
Web3 Career_クレデン資料 .pdf by nanamatsuo
Web3 Career_クレデン資料 .pdfWeb3 Career_クレデン資料 .pdf
Web3 Career_クレデン資料 .pdf
nanamatsuo•8 views
SNMPセキュリティ超入門 by mkoda
SNMPセキュリティ超入門SNMPセキュリティ超入門
SNMPセキュリティ超入門
mkoda•31 views
Windows 11 information that can be used at the development site by Atomu Hidaka
Windows 11 information that can be used at the development siteWindows 11 information that can be used at the development site
Windows 11 information that can be used at the development site
Atomu Hidaka•21 views
今、改めて考えるPostgreSQLプラットフォーム - マルチクラウドとポータビリティ -（PostgreSQL Conference Japan 20... by NTT DATA Technology & Innovation
今、改めて考えるPostgreSQLプラットフォーム - マルチクラウドとポータビリティ -（PostgreSQL Conference Japan 20...今、改めて考えるPostgreSQLプラットフォーム - マルチクラウドとポータビリティ -（PostgreSQL Conference Japan 20...
今、改めて考えるPostgreSQLプラットフォーム - マルチクラウドとポータビリティ -（PostgreSQL Conference Japan 20...
NTT DATA Technology & Innovation•13 views
速習！ PostgreSQL専用HAソフトウェア: Patroni（PostgreSQL Conference Japan 2023 発表資料） by NTT DATA Technology & Innovation
速習！ PostgreSQL専用HAソフトウェア: Patroni（PostgreSQL Conference Japan 2023 発表資料）速習！ PostgreSQL専用HAソフトウェア: Patroni（PostgreSQL Conference Japan 2023 発表資料）
速習！ PostgreSQL専用HAソフトウェア: Patroni（PostgreSQL Conference Japan 2023 発表資料）
NTT DATA Technology & Innovation•10 views

HTML5マークアップ珍プレー集 - HTML5 Conference 2012