Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Easy Semantic HTML Structure for Komerco Team
Search
kenshir0f
October 04, 2019
Technology
5
5.9k
Easy Semantic HTML Structure for Komerco Team
社内向けにHTMLの組み方について説明した資料になります。
かなり省略して記載しているので、導入として読んでいただけたら幸いです 🙏
kenshir0f
October 04, 2019
Tweet
Share
More Decks by kenshir0f
See All by kenshir0f
Figma with Cookpad
kenshir0f
16
14k
How Cookpad use Figma
kenshir0f
3
830
Cookpad Spring Internship 2019 Service Development Course
kenshir0f
2
1.1k
Cookpad TechConf 2019 Komerco Service Dev
kenshir0f
14
9.5k
Introduce Atomic Design with small rework
kenshir0f
3
250
Basic css note for Komerco Team
kenshir0f
6
7.8k
Design for Behavior and Impact
kenshir0f
9
4.9k
tech-kitchen-#16-komerco-design
kenshir0f
4
5.6k
s-dev-talks#2-komerco-team-building
kenshir0f
4
870
Other Decks in Technology
See All in Technology
いまならこう作りたい AWSコンテナ[本格]入門ハンズオン 〜2024年版 ハンズオンの構想〜
horsewin
9
2k
ガチ勢によるPipeCD運用大全〜滑らかなCI/CDを添えて〜 / ai-pipecd-encyclopedia
cyberagentdevelopers
PRO
3
190
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
CI/CDやテスト自動化の開発プロジェクトへの適用
megascus
3
730
オニオンアーキテクチャで実現した 本質課題を解決する インフラ移行の実例
hryushm
14
3k
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
100
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
120
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
170
Java x Spring Boot Warm up
kazu_kichi_67
2
480
新R25、乃木坂46 Mobileなどのファンビジネスを支えるマルチテナンシーなプラットフォームの全体像 / cam-multi-cloud
cyberagentdevelopers
PRO
1
130
サイロ化した金融システムを、packwerk を利用して無事故でリファクタリングした話
coincheck_recruit
3
3.6k
CAMERA-Suite: 広告文生成のための評価スイート / ai-camera-suite
cyberagentdevelopers
PRO
3
260
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
Designing for humans not robots
tammielis
249
25k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Designing for Performance
lara
604
68k
Building Adaptive Systems
keathley
38
2.2k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Adopting Sorbet at Scale
ufuk
73
9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
The Invisible Side of Design
smashingmag
297
50k
Transcript
頑張りすぎないセマンティックHTML for iOS Engineer 2019.10.04
前提 HTMLチョットワカル人が書いたiOSエンジニア向けの資料です かなり省略して紹介します
目次 ・HTML5について ・HTMLをセマンティックに書くメリット ・セマンティックHTMLを始めるコツ ・セクションについて ・意味のあるタグについて
HTML5とは
HTML5とは ・HTMLのバージョン(5回目の改定) ・厳密には HTML 5.2 が最新 ・2014年から勧告されている ・現在は(おそらく)ほとんどのブラウザで使うことが出来る
前バージョンと何が変わったのか ・様々なAPIが使えるようになったりパフォーマンスが上がったり。 ・デバイスアクセスとかいろいろ ・HTMLのマークアップに関して話すと2つ ・セマンティクス ・新しいタグの登場
セマンティクスとは ・HTML5ではコンピュータが識別できるだけでなく、人間から見ても 意味(セマンティクス)を持つような文書構造であることが推奨されている ・つまり、雰囲気でHTMLを書くのは ・スタイルを当てるためにタグを使うのも ・太字にしたいから <b> 、イタリック体にしたいから <i> ・↑はHTML4ではOKだったけど5ではNG
セマンティクスの例 ・要素の意味によってタグを使い分けることが大事 ・意味を持たないなら<span>にしてスタイルを当てるほうがよい ・先程の太字の例だと「なぜ太字にするのか?」が重要 ・見出しとして使うなら<h1>~<h6> ・強調するなら<em> ・重要性を表すなら<strong> ・「製品名」など他と区別したいなら<b>
HTMLをセマンティックに書くメリット
セマンティクスのメリット ・主に3つ ・検索エンジン最適化(SEO)に有効 ・アクセシビリティの向上 ・開発しやすくなる
1. SEOに有効 ・コンピュータがウェブサイトの構造を理解しやすくなる ・セマンティックなHTMLの方がそうじゃないHTMLよりも解読されやすい ・結果として検索結果の上位に来やすくなる(らしい) ・GoogleもセマンティクスにHTMLを組むようガイドラインを設けている ・https://developers.google.com/style/semantic-tagging
2. アクセシビリティの向上 ・ユーザーがコンテンツにアクセスしやすなり、結果使いやすくなる ・ex) スクリーンリーダーが読み上げやすくなる ・ex) ボタンをタブやreturnキーで操作できる ・詳しくは https://developers.google.com/web/fundamentals/accessibility?hl=ja ・レスポンシブ対応もアクセシビリティの向上と同義
・すべてのユーザーがマウスやキーボード、タッチパネルを使うとは限らない
3. 開発しやすい ・<div>ボタン</div>よりも<button>ボタン</button> ・後者の方がボタンらしい振る舞いを標準で備えている ・無理に機能を加える必要がない ・<div>ヘッダー</div>よりも<header>ヘッダー</header> ・後者のほうがヘッダーに使われていることが理解できる ・コードへの影響が事前に理解しやすくなる
セマンティックにHTMLを書くコツ
大前提 完璧にセマンティックに書くのは不可能 可能な限り書くことが大事
セマンティクスにHTMLを書くコツ ・まずはこの2つ ・セクションを意識する ・タグが持つ意味を理解して使う
セクションとは ・ドキュメントの構造を明確に分けること(章・節など) ・セクションがちゃんとしていると、コンピュータが解析しやすい ・セクションは見出しとそれに続く要素で構成される それに続くコンテンツ h1 section h1 p p
section < > < >2019-10-04 kenshir0f</ > < >日報書き忘れた...</ > </ > 見出し セクション
セクションについて1 ・セクションを分けるとアウトラインが出来上がる 見出しレベルで構造がネストされる h1 body h1 p p h2 h2
p p h2 h2 p p body < > < >HTML5について</ > < >これから教えるよ〜...</ > < >セマンティクスについて</ > < >いい感じにやるやつ</ > < >新しいタグについて</ > < >headerとかfooterとか...</ > </ > 1.HTML5について 1.セマンティクスについて 2.新しいタグについて
アウトラインの確認は ・https://gsnedders.html5.org/outliner/
セクションについて2 ・セクションは明示的にも(見出しで)暗黙的にも定義できる h1 body section h1 p p /section body
< > < > < >HTML5について</ > < >これから教えて...</ > < > </ > h1 body h1 p p body < > < >HTML5について</ > < >これから教えて...</ > </ > 明示的 暗黙的
明示的にセクションできるタグ例 section article aside nav < >:特に意味がなくセクションを分けたいときに使う < >:文書やページで単体で完結するセクションを示す
例:ブログの記事、フォーラムの投稿、コメントなど < >:メインコンテンツと間接的な関係を持つセクション 例:サイドバーなど < >:ナビゲーションリンクを提供するためのセクション
divはセクションとして区切れない body div div div p p h2 h2 p
p div h3 h3 p p div div body < > < >2019-10-04 kenshir0f</ > < > < >日報書き忘れた...</ > < >お仕事</ > < >いい感じにやっている</ > < > < >Netflix</ > < >転スラ7話まで見た</ > </ > </ > </ > h1 body h1 article p p h2 h2 p p section h2 h2 p p /section article body < > < >2019-10-04 kenshir0f</ > < > < >日報書き忘れた...</ > < >お仕事</ > < >いい感じにやっている</ > < > < >Netflix</ > < >転スラ7話まで見た</ > < > </ > </ > 可能ならなるべくdivは避けたい
もっと詳しくは https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines アウトラインのネストの条件とか書いてあるので ちゃんとやるならちゃんと読んだほうがよいです
意味のあるタグについて ・セクションとは別に、テキストの意味や表示するコンテンツに応じて 意味のあるタグを使いましょう ・ボタンには <button> を使おうというおはなし ・高頻度なタグだけ抜粋して紹介
意味を持たないタグ div span < >:ブロック要素をひとかたまりの範囲として使う。単体では意味を持たない。 < >:インライン要素(テキスト)をひとつの範囲として定義する。
単体では意味を持たない。 ・先に思考停止になりやすいタグについて説明 ・スタイルを当てるには便利だけど、意味を持たないので極力避けたい
グループを分けるタグ p ul ol li hr blockquote < >:ひとつの段落を表す <
>:順序のないリスト < >:順序のあるリスト < >:リスト内の子要素(項目)としてつかう < >:テーマなどの区切りとしてつかう。いわゆる罫線。 < >:引用や転載されたテキスト。
テキストの意味によるタグ1 b strong i em small big < >:注意を惹きたいけど、特に重要でないテキスト。太字になる。 <
>:強い重要性、緊急性のあるテキスト。太字になる。 < >:技術用語や外国語のフレーズなど、他と区別したいテキスト。イタリック体。 < >:強調したいテキスト。イタリック体。 < >:著作権表示や法的表記のような、注釈や小さく表示されるテキスト。 < >:なくなったタグ。フォントサイズが大きくなる
テキストの意味によるタグ2 s del ins q cite time mark < >:すでに適切または正確ではなくなった事柄を表現するテキスト。取り消し線。
< >:削除されたテキスト。取り消し線。<ins>とセットで使うことが多い < >:文書に追加されたテキスト。<del>とセットで使うことが多い < >:短い引用のテキスト。段落が必要なら<blockquote>を使う < >:引用元を表すテキスト。例えば創作物ならそのタイトルを含む必要がある。 < >:日付や時刻を表すテキスト < >:周囲の文脈の中で関連性や重要性のために目立たせるテキスト
他にもこんなタグがある(これでも一部...) kbd code samp bdi sup sub ruby < >:ユーザーによる文字入力を促すテキスト。`cmd`
+ `shift`とか。 < >:コードの短い断片を表すテキスト。`push()`をつかってください、とか。 < >:プログラムからのサンプル出力を表すテキスト。 < >:書式方向の違うテキスト。アラビア語など右から読む言語などで使う。 < >:上付き文字。x2+ y2 とか。 < >:下付き文字。H2O とか。 < >:フリガナ付きのテキスト。<rp><rt>を組み合わせて使う
もっと詳しくは https://developer.mozilla.org/ja/docs/Web/HTML/Element https://developer.mozilla.org/ja/docs/Web/Guide/HTML/HTML5/HTML5_element_list
まとめ ・HTMLは意味を持った構造にする ・そもそもウェブサイトには意味のない要素は表示されていないはず ・可能な限り、セクションで分けてみる ・厳密にやらずともアウトラインを確認するくらいはやってみよう ・表示する要素の意味に合わせてタグを使い分ける ・<div>と<span>はスタイルを当てるためだけに使いたい