Easy Semantic HTML Structure for Komerco Team

社内向けにHTMLの組み方について説明した資料になります。
かなり省略して記載しているので、導入として読んでいただけたら幸いです 🙏

Transcript

1. 頑張りすぎないセマンティックHTML for iOS Engineer 2019.10.04
2. 前提 HTMLﾁｮｯﾄﾜｶﾙ人が書いたiOSエンジニア向けの資料です かなり省略して紹介します
3. 目次 ・HTML5について ・HTMLをセマンティックに書くメリット ・セマンティックHTMLを始めるコツ 　　・セクションについて 　　・意味のあるタグについて
4. HTML5とは
5. HTML5とは ・HTMLのバージョン(5回目の改定) 　　・厳密には HTML 5.2 が最新 ・2014年から勧告されている ・現在は(おそらく)ほとんどのブラウザで使うことが出来る
6. 前バージョンと何が変わったのか ・様々なAPIが使えるようになったりパフォーマンスが上がったり。 　　・デバイスアクセスとかいろいろ ・HTMLのマークアップに関して話すと2つ 　　・セマンティクス 　　・新しいタグの登場
7. セマンティクスとは ・HTML5ではコンピュータが識別できるだけでなく、人間から見ても 　意味(セマンティクス)を持つような文書構造であることが推奨されている ・つまり、雰囲気でHTMLを書くのは ・スタイルを当てるためにタグを使うのも 　　・太字にしたいから <b> 、イタリック体にしたいから <i> 　　・↑はHTML4ではOKだったけど5ではNG
8. セマンティクスの例 ・要素の意味によってタグを使い分けることが大事 ・意味を持たないなら<span>にしてスタイルを当てるほうがよい ・先程の太字の例だと「なぜ太字にするのか？」が重要 　　・見出しとして使うなら<h1>~<h6> 　　・強調するなら<em> 　　・重要性を表すなら<strong> 　　・「製品名」など他と区別したいなら<b>
9. HTMLをセマンティックに書くメリット
10. セマンティクスのメリット ・主に3つ 　　・検索エンジン最適化(SEO)に有効 　　・アクセシビリティの向上 　　・開発しやすくなる
11. 1. SEOに有効 ・コンピュータがウェブサイトの構造を理解しやすくなる 　　・セマンティックなHTMLの方がそうじゃないHTMLよりも解読されやすい 　　・結果として検索結果の上位に来やすくなる(らしい) 　　・GoogleもセマンティクスにHTMLを組むようガイドラインを設けている 　　　　・https://developers.google.com/style/semantic-tagging
12. 2. アクセシビリティの向上 ・ユーザーがコンテンツにアクセスしやすなり、結果使いやすくなる 　　・ex) スクリーンリーダーが読み上げやすくなる 　　・ex) ボタンをタブやreturnキーで操作できる ・詳しくは https://developers.google.com/web/fundamentals/accessibility?hl=ja ・レスポンシブ対応もアクセシビリティの向上と同義 ・すべてのユーザーがマウスやキーボード、タッチパネルを使うとは限らない
13. 3. 開発しやすい ・<div>ボタン</div>よりも<button>ボタン</button> 　　・後者の方がボタンらしい振る舞いを標準で備えている 　　・無理に機能を加える必要がない ・<div>ヘッダー</div>よりも<header>ヘッダー</header> 　　・後者のほうがヘッダーに使われていることが理解できる 　　・コードへの影響が事前に理解しやすくなる
14. セマンティックにHTMLを書くコツ
15. 大前提 完璧にセマンティックに書くのは不可能 可能な限り書くことが大事
16. セマンティクスにHTMLを書くコツ ・まずはこの2つ 　　・セクションを意識する 　　・タグが持つ意味を理解して使う
17. セクションとは ・ドキュメントの構造を明確に分けること(章・節など) ・セクションがちゃんとしていると、コンピュータが解析しやすい ・セクションは見出しとそれに続く要素で構成される それに続くコンテンツ h1 section h1 p p section < > < >2019-10-04 kenshir0f</ > < >日報書き忘れた...</ > </ > 見出し セクション
18. セクションについて1 ・セクションを分けるとアウトラインが出来上がる 見出しレベルで構造がネストされる h1 body h1 p p h2 h2 p p h2 h2 p p body < > < >HTML5について</ > < >これから教えるよ〜...</ > < >セマンティクスについて</ > < >いい感じにやるやつ</ > < >新しいタグについて</ > < >headerとかfooterとか...</ > </ > 1.HTML5について 　 　 1.セマンティクスについて 　 　 2.新しいタグについて
19. アウトラインの確認は ・https://gsnedders.html5.org/outliner/
20. セクションについて2 ・セクションは明示的にも(見出しで)暗黙的にも定義できる h1 body section h1 p p /section body < > < > < >HTML5について</ > < >これから教えて...</ > < > </ > h1 body h1 p p body < > < >HTML5について</ > < >これから教えて...</ > </ > 明示的 暗黙的
21. 明示的にセクションできるタグ例 section article aside nav < >：特に意味がなくセクションを分けたいときに使う < >：文書やページで単体で完結するセクションを示す 　 　 例：ブログの記事、フォーラムの投稿、コメントなど < >：メインコンテンツと間接的な関係を持つセクション 例：サイドバーなど < >：ナビゲーションリンクを提供するためのセクション
22. 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は避けたい
23. もっと詳しくは https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines アウトラインのネストの条件とか書いてあるので ちゃんとやるならちゃんと読んだほうがよいです
24. 意味のあるタグについて ・セクションとは別に、テキストの意味や表示するコンテンツに応じて 　意味のあるタグを使いましょう ・ボタンには <button> を使おうというおはなし ・高頻度なタグだけ抜粋して紹介
25. 意味を持たないタグ div span < >：ブロック要素をひとかたまりの範囲として使う。単体では意味を持たない。 < >：インライン要素(テキスト)をひとつの範囲として定義する。 　 　 　 　 単体では意味を持たない。 ・先に思考停止になりやすいタグについて説明 ・スタイルを当てるには便利だけど、意味を持たないので極力避けたい
26. グループを分けるタグ p ul ol li hr blockquote < >：ひとつの段落を表す < >：順序のないリスト < >：順序のあるリスト < >：リスト内の子要素(項目)としてつかう < >：テーマなどの区切りとしてつかう。いわゆる罫線。 < >：引用や転載されたテキスト。
27. テキストの意味によるタグ１ b strong i em small big < >：注意を惹きたいけど、特に重要でないテキスト。太字になる。 < >：強い重要性、緊急性のあるテキスト。太字になる。 < >：技術用語や外国語のフレーズなど、他と区別したいテキスト。イタリック体。 < >：強調したいテキスト。イタリック体。 < >：著作権表示や法的表記のような、注釈や小さく表示されるテキスト。 < >：なくなったタグ。フォントサイズが大きくなる
28. テキストの意味によるタグ２ s del ins q cite time mark < >：すでに適切または正確ではなくなった事柄を表現するテキスト。取り消し線。 < >：削除されたテキスト。取り消し線。<ins>とセットで使うことが多い < >：文書に追加されたテキスト。<del>とセットで使うことが多い < >：短い引用のテキスト。段落が必要なら<blockquote>を使う < >：引用元を表すテキスト。例えば創作物ならそのタイトルを含む必要がある。 < >：日付や時刻を表すテキスト < >：周囲の文脈の中で関連性や重要性のために目立たせるテキスト
29. 他にもこんなタグがある(これでも一部...) kbd code samp bdi sup sub ruby < >：ユーザーによる文字入力を促すテキスト。`cmd` + `shift`とか。 < >：コードの短い断片を表すテキスト。`push()`をつかってください、とか。 < >：プログラムからのサンプル出力を表すテキスト。 < >：書式方向の違うテキスト。アラビア語など右から読む言語などで使う。 < >：上付き文字。x2+ y2 とか。 < >：下付き文字。H2O とか。 < >：フリガナ付きのテキスト。<rp><rt>を組み合わせて使う
30. もっと詳しくは https://developer.mozilla.org/ja/docs/Web/HTML/Element https://developer.mozilla.org/ja/docs/Web/Guide/HTML/HTML5/HTML5_element_list
31. まとめ ・HTMLは意味を持った構造にする 　　・そもそもウェブサイトには意味のない要素は表示されていないはず ・可能な限り、セクションで分けてみる 　　・厳密にやらずともアウトラインを確認するくらいはやってみよう ・表示する要素の意味に合わせてタグを使い分ける 　　・<div>と<span>はスタイルを当てるためだけに使いたい