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
6k
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
260
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
880
Other Decks in Technology
See All in Technology
How to be an AWS Community Builder | 君もAWS Community Builderになろう!〜2024 冬 CB募集直前対策編?!〜
coosuke
PRO
2
2.8k
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
31k
Fanstaの1年を大解剖! 一人SREはどこまでできるのか!?
syossan27
2
160
Postman と API セキュリティ / Postman and API Security
yokawasa
0
200
生成AIをより賢く エンジニアのための RAG入門 - Oracle AI Jam Session #20
kutsushitaneko
4
210
バクラクのドキュメント解析技術と実データにおける課題 / layerx-ccc-winter-2024
shimacos
2
1k
社外コミュニティで学び社内に活かす共に学ぶプロジェクトの実践/backlogworld2024
nishiuma
0
250
LINEヤフーのフロントエンド組織・体制の紹介【24年12月】
lycorp_recruit_jp
0
530
KubeCon NA 2024 Recap / Running WebAssembly (Wasm) Workloads Side-by-Side with Container Workloads
z63d
1
240
どちらを使う?GitHub or Azure DevOps Ver. 24H2
kkamegawa
0
620
サイバー攻撃を想定したセキュリティガイドライン 策定とASM及びCNAPPの活用方法
syoshie
3
1.2k
AWS re:Invent 2024 ふりかえり
kongmingstrap
0
130
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Cost Of JavaScript in 2023
addyosmani
45
7k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Designing for Performance
lara
604
68k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.3k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
Optimising Largest Contentful Paint
csswizardry
33
3k
4 Signs Your Business is Dying
shpigford
181
21k
Rails Girls Zürich Keynote
gr2m
94
13k
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>はスタイルを当てるためだけに使いたい