Submit Search
Upload
HTML5でセマンティックなマークアップ
•
24 likes
•
7,191 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
Download to read offline
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
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研修講座
IT研修講座
annulus
It01
It01
chibicoo
京都 IT研修講座
京都 IT研修講座
annulus
京都 IT講座 9月
京都 IT講座 9月
annulus
京都 IT講座 9月
京都 IT講座 9月
annulus
it研修講座
it研修講座
annulus
kyoto IT
kyoto IT
annulus
itkensyukouza2008
itkensyukouza2008
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研修講座
IT研修講座
It01
It01
京都 IT研修講座
京都 IT研修講座
京都 IT講座 9月
京都 IT講座 9月
京都 IT講座 9月
京都 IT講座 9月
it研修講座
it研修講座
kyoto IT
kyoto IT
itkensyukouza2008
itkensyukouza2008
第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
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
IGDA Japan SIG-Audio
チームで開発するための環境を整える
チームで開発するための環境を整える
onozaty
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
Naomi Yamasaki
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
iPride Co., Ltd.
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
IGDA Japan SIG-Audio
AWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作り
iPride Co., Ltd.
これからはじめるAnsible - Ansible Night Tokyo 2024
これからはじめるAnsible - Ansible Night Tokyo 2024
Hideki Saito
The 86th National Convention of IPSJ (Student Encouragement Award))
The 86th National Convention of IPSJ (Student Encouragement Award))
yoshidakids7
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
Takayuki Nakayama
バイオリンの運弓動作計測による初心者と経験者の差異分析
バイオリンの運弓動作計測による初心者と経験者の差異分析
sugiuralab
00001_test_automation_portfolio_20240313
00001_test_automation_portfolio_20240313
ssuserf8ea02
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
honeshabri
Recently uploaded
(12)
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
チームで開発するための環境を整える
チームで開発するための環境を整える
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
AWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作り
これからはじめるAnsible - Ansible Night Tokyo 2024
これからはじめるAnsible - Ansible Night Tokyo 2024
The 86th National Convention of IPSJ (Student Encouragement Award))
The 86th National Convention of IPSJ (Student Encouragement Award))
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
バイオリンの運弓動作計測による初心者と経験者の差異分析
バイオリンの運弓動作計測による初心者と経験者の差異分析
00001_test_automation_portfolio_20240313
00001_test_automation_portfolio_20240313
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
HTML5でセマンティックなマークアップ
1.
2.
3.
4.
5.
6.
7.
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.
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.
52.
53.
54.
55.
サンプルでは、<h1>が削除されている
56.
57.
post-858から<!-- #post-## -->まで
58.
投稿日時に<time>を使おう
59.
作成者に<address>を使おう
60.
61.
Download Now