Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Easy Semantic HTML Structure for Komerco Team

kenshir0f
October 04, 2019

Easy Semantic HTML Structure for Komerco Team

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

kenshir0f

October 04, 2019
Tweet

More Decks by kenshir0f

Other Decks in Technology

Transcript

  1. セクションについて1 ・セクションを分けるとアウトラインが出来上がる 見出しレベルで構造がネストされる h1 body h1 p p h2 h2

    p p h2 h2 p p body < > < >HTML5について</ > < >これから教えるよ〜...</ > < >セマンティクスについて</ > < >いい感じにやるやつ</ > < >新しいタグについて</ > < >headerとかfooterとか...</ > </ > 1.HTML5について     1.セマンティクスについて     2.新しいタグについて
  2. セクションについて2 ・セクションは明示的にも(見出しで)暗黙的にも定義できる h1 body section h1 p p /section body

    < > < > < >HTML5について</ > < >これから教えて...</ > < > </ > h1 body h1 p p body < > < >HTML5について</ > < >これから教えて...</ > </ > 明示的 暗黙的
  3. 明示的にセクションできるタグ例 section article aside nav < >:特に意味がなくセクションを分けたいときに使う < >:文書やページで単体で完結するセクションを示す  

      例:ブログの記事、フォーラムの投稿、コメントなど < >:メインコンテンツと間接的な関係を持つセクション 例:サイドバーなど < >:ナビゲーションリンクを提供するためのセクション
  4. 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は避けたい
  5. 意味を持たないタグ div span < >:ブロック要素をひとかたまりの範囲として使う。単体では意味を持たない。 < >:インライン要素(テキスト)をひとつの範囲として定義する。      

      単体では意味を持たない。 ・先に思考停止になりやすいタグについて説明 ・スタイルを当てるには便利だけど、意味を持たないので極力避けたい
  6. グループを分けるタグ p ul ol li hr blockquote < >:ひとつの段落を表す <

    >:順序のないリスト < >:順序のあるリスト < >:リスト内の子要素(項目)としてつかう < >:テーマなどの区切りとしてつかう。いわゆる罫線。 < >:引用や転載されたテキスト。
  7. テキストの意味によるタグ1 b strong i em small big < >:注意を惹きたいけど、特に重要でないテキスト。太字になる。 <

    >:強い重要性、緊急性のあるテキスト。太字になる。 < >:技術用語や外国語のフレーズなど、他と区別したいテキスト。イタリック体。 < >:強調したいテキスト。イタリック体。 < >:著作権表示や法的表記のような、注釈や小さく表示されるテキスト。 < >:なくなったタグ。フォントサイズが大きくなる
  8. テキストの意味によるタグ2 s del ins q cite time mark < >:すでに適切または正確ではなくなった事柄を表現するテキスト。取り消し線。

    < >:削除されたテキスト。取り消し線。<ins>とセットで使うことが多い < >:文書に追加されたテキスト。<del>とセットで使うことが多い < >:短い引用のテキスト。段落が必要なら<blockquote>を使う < >:引用元を表すテキスト。例えば創作物ならそのタイトルを含む必要がある。 < >:日付や時刻を表すテキスト < >:周囲の文脈の中で関連性や重要性のために目立たせるテキスト
  9. 他にもこんなタグがある(これでも一部...) kbd code samp bdi sup sub ruby < >:ユーザーによる文字入力を促すテキスト。`cmd`

    + `shift`とか。 < >:コードの短い断片を表すテキスト。`push()`をつかってください、とか。 < >:プログラムからのサンプル出力を表すテキスト。 < >:書式方向の違うテキスト。アラビア語など右から読む言語などで使う。 < >:上付き文字。x2+ y2 とか。 < >:下付き文字。H2O とか。 < >:フリガナ付きのテキスト。<rp><rt>を組み合わせて使う