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
15
13k
How Cookpad use Figma
kenshir0f
3
820
Cookpad Spring Internship 2019 Service Development Course
kenshir0f
2
1.1k
Cookpad TechConf 2019 Komerco Service Dev
kenshir0f
14
9.4k
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
860
Other Decks in Technology
See All in Technology
普通の Web エンジニアのための様相論理入門 #yapcjapan / YAPC Hakodate 2024
ytaka23
4
650
DenoでもViteしたい!インポートパスのエイリアスを指定してラクラクアプリ開発
bengo4com
1
1.8k
Hazard pointers with reference counter
ennael
PRO
0
110
RAGの性能を評価しよう
kurahara
1
290
Semantic Kernel の Agent 機能試してみた!
okazuki
1
110
不感対策ソリューション
jtes
0
240
MLOpsの「あるある」課題の解決と、そのためのライブラリgokart
mski_iksm
1
150
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
290
Azure Verified Moduleを触って分かった注目ポイント/azure-verified-module-begin
mhrtech
1
200
小さな勉強会の始め方、広げ方、あるいは友達の作り方 / How to Start, Grow, and Build Connections with Small Study Groups
ar_tama
3
1.7k
ITエンジニアとして知っておいてほしい、電子メールという大きな穴
logica0419
3
490
テストコードの品質を客観的な数値で担保しよう〜Mutation Testのすすめ〜
ysknsid25
9
2.6k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
271
40k
Writing Fast Ruby
sferik
625
60k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Building Your Own Lightsaber
phodgson
102
6k
Scaling GitHub
holman
458
140k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.9k
Being A Developer After 40
akosma
84
590k
Making Projects Easy
brettharned
114
5.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
How STYLIGHT went responsive
nonsquared
94
5.1k
It's Worth the Effort
3n
183
27k
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>はスタイルを当てるためだけに使いたい