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
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
870
Other Decks in Technology
See All in Technology
強いチームと開発生産性
onk
PRO
35
11k
Flutterによる 効率的なAndroid・iOS・Webアプリケーション開発の事例
recruitengineers
PRO
0
120
The Rise of LLMOps
asei
7
1.7k
Terraform Stacks入門 #HashiTalks
msato
0
360
心が動くエンジニアリング ── 私が夢中になる理由
16bitidol
0
100
The Role of Developer Relations in AI Product Success.
giftojabu1
0
130
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.7k
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
390
マルチモーダル / AI Agent / LLMOps 3つの技術トレンドで理解するLLMの今後の展望
hirosatogamo
37
12k
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Music & Morning Musume
bryan
46
6.2k
Thoughts on Productivity
jonyablonski
67
4.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Making Projects Easy
brettharned
115
5.9k
Bash Introduction
62gerente
608
210k
Happy Clients
brianwarren
98
6.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
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>はスタイルを当てるためだけに使いたい