search

hysryt / wiki

https://hysryt.github.io/wiki/
0 stars 0 forks source link

HTML5 #77

Open hysryt opened 6 years ago

hysryt commented 6 years ago

セクショニングコンテンツ

<article> / <section> / <nav> / <aside>

見出し + それに対応する文章

https://momdo.github.io/html5/dom.html#sectioning-content-0

セクショニングコンテンツは、見出しおよびフッターの範囲を定義するコンテンツである。

<article>

それだけで完結しているセクション。

https://momdo.github.io/html5/sections.html#the-article-element

article要素は、文書、ページ、アプリケーション、またはサイトの中で完全もしくは自己完結した構造を表す。これは原則として、たとえばシンジケーションなど、独立して配布可能なまたは再利用可能なものである。これは、フォーラムの投稿、雑誌や新聞の記事、ブログのエントリ、ユーザーの投稿コメント、インタラクティブなウィジェットやガジェット、またはコンテンツの任意の独立した項目であるかもしれない。

ネストした場合について

article要素がネストされる場合、原則的に内側のarticle要素が外側の記事の内容に関連する記事を表す。たとえば、ユーザーの投稿コメントを受け付けるサイトのブログエントリは、ブログエントリのarticle要素内にネストされたarticle要素としてコメントを表すことができる。

mainとの使用について

ページの主要コンテンツ（すなわちフッター、ヘッダー、ナビゲーションブロック、およびサイドバーを除く）が、すべて単一の自己完結型の構成物である場合、コンテンツはmain要素でマークアップされるべきであり、かつコンテンツはまたarticleでマークアップされてもよいが、（単一の文書であるように、ページが単一の構成物であることは自明なので）この場合は技術的に冗長である。

<main>
  <article>
    ...
  </article>
</main>

というのは冗長。

<section>

一般的なセクション。 <article>、<nav>、<aside> に該当しないセクションに使用する。

https://momdo.github.io/html5/sections.html#the-section-element

section要素は、文書またはアプリケーションの一般的セクションを表す。この文脈においてセクションは、主題を表すコンテンツのグループである。各sectionの主題は、section要素の子として見出し（h1-h6要素）を含むことによって一般に識別されるべきである。

各セクションは見出しによって識別される。

divとの使い分け

section要素は包括的なコンテナ要素ではない。要素がスタイル付け目的またはスクリプティングの便宜のために必要になった場合のみ、著者は、代わりにdiv要素を使用するよう推奨される。要素の内容が文書のアウトラインで明示的に記載されるだろう場合のみ、section要素が適切であるというのが一般的なルールである。

アウトラインが必要な場合のみ → 見出しがあるかどうか？ 見出し（h1-h6）が暗黙的なセクションを作るということは、「見出しがある = セクション」という認識でいいはず。

<nav>

ナビゲーションリンクをもつセクション。 主要なナビゲーションリンクのみに使用する。

https://momdo.github.io/html5/sections.html#the-nav-element

nav要素は、他のページへまたはページ内の一部へリンクするページのセクション、すなわちナビゲーションリンクをもつセクションを表す。

nav要素のコンテンツが項目のリストを表す場合、理解とナビゲーションを支援するために、リストのマークアップを使用する。

ページ上のリンクのグループがnav要素である必要はない―この要素は、主要なナビゲーションブロックから成るセクションを主に対象としている。特に、サービスの条件、ホームページ、著作権ページのような、サイトのさまざまなページへの簡潔なリンクのリストをフッターが持つことは、一般的である。footer要素は単独で、このような場合に対して十分である。一方nav要素は、そのような場合に使用できるが、通常不要である。

footer のナビゲーションリンクには不要。

他ページへのナビゲーションリンクとページ内のナビゲーションリンクで2つの nav 要素を持つこともありえる。

nav要素はリストを含める必要はなく、同様に他の種類のコンテンツを含むことができる。

nav内はリストでなければならないわけではない。

<aside>

広告、補足記事など。

https://momdo.github.io/html5/sections.html#the-aside-element

aside要素は、aside要素の周りにコンテンツとわずかに関連し、かつそのコンテンツから分離すると見なすことができるコンテンツで構成されるページのセクションを表す。このようなセクションは、しばしば活版印刷でサイドバーとして表示される。

ここでいうサイドバーはWebサイトでよくあるサイドバーとは別物。 だったが、article要素外のaside要素であればWebサイトでよくあるサイドバーとして使うことも許容された模様。 http://html5doctor.com/aside-revisited/

With the new definition of aside, it’s crucial to remain aware of its context. When used within an article element, the contents should be specifically related to that article (e.g., a glossary). When used outside of an article element, the contents should be related to the site (e.g., a blogroll, groups of additional navigation, and even advertising if that content is related to the page).

ariticle要素内であれば ariticle要素の内容に関係のあるコンテンツ、article要素外であればサイトに関係のあるコンテンツを入れる（他ブログへのリンク、ナビゲーショングループ、ページに関係する広告）。

使わなくてよくない？

articleかsectionか

https://momdo.github.io/html5/sections.html#article-or-section%3f

sectionは、何か別のものの一部を形成する。articleは自分自身である。しかし、どっちがどっちか分かるだろうか？たいてい真の答えは"著者の意図に依存する"である。

たとえば、"これはみずみずしく、青リンゴはアップルパイの素晴らしいフィリングになる"とだけ述べた"グラニースミス"の章のある本を想像してみよう。（多分）他のリンゴの種類の章が多数あるため、これはsectionだろう。

一方で、つぶやきやredditのコメント、Tumblrのポストや単に広告に分類される新聞を想像してみよう。"グラニースミス。これはみずみずしく、青リンゴはアップルパイの素晴らしいフィリングになる。"全部があったので、articleだろう。

記事におけるコメントはコメントされているarticleの一部ではなく、したがってarticle自身である。

hysryt commented 6 years ago

グルーピングコンテンツ

<main>

https://momdo.github.io/html5/grouping-content.html#the-main-element

main要素は、文書やアプリケーションのbodyの主要コンテンツを表す。主要コンテンツ領域は、直接に関連するコンテンツで構成される、または文書の中心的な話題、またはアプリケーションの中心的機能を発展させる。

文書の主要コンテンツ領域は、その文書に固有であり、サイトナビゲーションリンク、著作権情報、サイトのロゴやバナーや（文書やアプリケーションの主な機能が検索フォームである場合を除く）検索フォームのような、一連の文書を横断して繰り返されるコンテンツを除外したコンテンツを含む。

全てのページで共通する部分は main に含めない。

セクショニングコンテンツとの関係

著者は、article、aside、footer、headerまたはnav要素の子孫として、main要素を含めてはならない。

<div>

https://momdo.github.io/html5/grouping-content.html#the-div-element

div要素は、一切特別な意味を持たない。

他の要素が適切でない場合、著者は最後の手段の要素としてdiv要素を検討することを強く推奨する。div要素の代わりにより適切な要素を使用することは、読者に対してより良いアクセシビリティーと著者に対するより容易なメンテナンス性につながる。

div より適切なものがあるならそちらを使う。

<p>

https://momdo.github.io/html5/grouping-content.html#the-p-element

p要素は段落を表す。

段落の定義

典型的な段落は、活版印刷において見られるような、特定の主題を議論する1つ以上の文をもつテキストのブロックを形成する、フレージングコンテンツの連続であるが、より一般の主題に関する分類に対しても用いられる。たとえば、住所もまた段落であり、フォームの一部、署名、詩のスタンザも同様である。

文章だけでなく、住所や署名などなどの文章でないものも段落という。

リストとの併用

文の途中にリストを挟みたい場合、以下のようになる

<p>For instance, this fantastic sentence has bullets relating to</p>
<ul>
 <li>wizards,
 <li>faster-than-light travel, and
 <li>telepathy,
</ul>
<p>and is further discussed below.</p>

文章としての段落ではなく、構造としての段落であることに注意する。

より具体的な要素がより適切である場合、p要素を使用すべきでない。

<figure>、<li>、<address> などまず他の要素を検討する。

<figure>

本文から参照する写真、イラスト、コードなど。

https://momdo.github.io/html5/grouping-content.html#the-figure-element

figure要素は、任意でキャプションをもつ（完全な文のような）自己完結型であり、一般に文書の主フローから単独のユニットとして参照されるフローコンテンツを表す。

この文脈において自己完結型は、必ずしも独立したものを意味する必要はない。たとえば、段落内の各文は自己完結型である。文の一部である画像は、figureに不適切だろうが、画像で作られた完全な文は適切だろう。

独立してればいい？

<figcaption>

<figure>内の最初か最後に記述し、親である <figure> のキャプションを表す。

hysryt commented 6 years ago

テキストレベルセマンティック

<em>

https://momdo.github.io/html5/text-level-semantics.html#the-em-element https://www.w3.org/TR/html5/textlevel-semantics.html#the-em-element

em要素は、その内容の強調を表す。

強調の設置は、文の意味を変更する。このように要素は、コンテンツの不可欠な部位を形成する。強調が使用される正確な方法は、言語によって異なる。

文の意味に関わる強調？

どこを強調するかはホームページ作成者しかわからない為、明らかに強調する部分以外は <span> を使用したほうがいい。

<strong>

https://momdo.github.io/html5/text-level-semantics.html#the-strong-element

strong要素は、そのコンテンツに対する強力な重要性、深刻性、または緊急性を表す。

重要性

strong要素は、より詳細な、より陽気な、または単に常用文かもしれない部分から本当に重要である部分を区別するために、見出し、キャプション、または段落で使用できる。

深刻性

strong要素は警告または注意の通知をマークアップするために使用できる。

緊急性

strong要素は、ユーザーが文書の他の部分よりも早く確認する必要があるコンテンツを示すために使用できる。

シリアスな強調？

どこを強調するかはホームページ作成者しかわからない為、明らかに強調する部分以外は <span> を使用したほうがいい。

<strong>絶対真似しないでください</strong>
毒キノコを食べると<strong>最悪死ぬ</strong>

<small>

small要素は、小さな活字体などの副次的なコメントを表す。

対象となるテキスト

小さな活字体は通常、免責事項、警告、法的制約、または著作権を取り上げる。小さな活字体はまた、時として帰属に対して、またはライセンス要件を満たすために使用される。

small要素は、複数の段落、リスト、またはテキストのセクションのような幅のあるテキストの長さに使用すべきでない。この要素は、短いテキストのみを対象とする。たとえば、利用規約を記載するページのテキストは、small要素に適した候補ではない。このような場合、テキストは副次的なコメントではなく、ページの主要コンテンツである。

長文に <small> を使用しない。

<dl>
 <dt>シングルルーム
 <dd>199 € <small>朝食込み、税抜き</small>
 <dt>ダブルルーム
 <dd>239 € <small>朝食込み、税抜き</small>
</dl>

<dfn>

dfn要素は、用語の定義実体を表す。dfn要素の最も近い祖先である段落、説明リストのグループ、またはセクションはまた、dfn要素によって与えられる用語の定義を含まなければならない。

用語の定義に使用する。<p>要素内で使用する場合は、その<p>要素に定義も含まれていなければならない。

<abbr>

abbr要素は、任意でその完全表記を伴う、略語や頭字語を表す。title属性は、略語の完全表記を提供するために使用されてもよい。属性が指定される場合は、略語の完全表記を含まなければならず、他には何も持たない。

title属性はあってもなくてもいいが、ある場合は完全表記を含まなければならない。

<abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>

複数形について

略語が複数形の場合、完全表記の文法的な数（複数形対単数形）は、要素のコンテンツの文法的な数と一致しなければならない。

日本語にはあまり関係ないかも。

<abbr title="Working Group">WG</abbr>s
<abbr title="Working Groups">WGs</abbr>

<time>

機械判読可能な日時を表す。

datetime属性は存在してもよい。存在する場合、その値は、機械可読形式での要素コンテンツの表現でなければならない。

日時の記述にはフォーマットがあるので、フォーマットに従わないテキストをマークアップする場合は datetime 属性を使用する。

<time>2011-11</time>
<time datetime="2011-11">2017年11月</time>

フォーマット

基本的なフォーマットは以下の通り。

YYYY
YYYY-MM
YYYY-MM-DD
hh:mm
hh:mm:ss
YYYY-MM-DD hh:mm:ss

<i>

i要素は、代わりの声やムードでテキストの範囲を表すか、またはそうでなければ、たとえば分類学上の名称、専門用語、他言語の慣用句、意見、または西洋のテキストで船名など、異なる品質のテキストを示す方法で通常の文からのオフセットを表す。

他と文字を区別する。

主テキストと異なる言語の用語はlang属性（または、XMLでXML名前空間のlang属性）で注釈を付けるべきである。

<i class="taxonomy">フェリスシルベストリスカサス</i>はかわいい。
空気中には<i lang="fr">je ne sais quoi</i>がある。

用語の定義には <dfn> を使用する。強調には <em>、<strong> を使用する。

<b>

b要素は、たとえば、文書の概要でのキーワード、レビューでの製品名、対話的なテキスト駆動型ソフトウェアでの使用可能語、または記事リードなど、特別な重要性を伝えることなく、代わりの声やムードの意味合いなしに、実用的な目的に対して描かれている注目すべきテキストの範囲を表す。

あなたの<b>剣</b>は明るく輝く。
<b>ネズミ</b>がちょこちょこ走り回る。
hysryt commented 6 years ago

HTML Living Standard

W3C とは別に WHATWG という団体が策定する規格。 WHATWG は Apple, Chrome, Opera が設立した団体。 Microsoft 以外のブラウザはこちらに準拠していることが多い。

http://www.tohoho-web.com/html/memo/htmlls.htm

hysryt commented 5 years ago

イメージマップ

画像の中の一部分がリンクになっているものをイメージマップという。 HTML5には標準でイメージマップを作成する仕組みがあるのでJavaScriptを使う必要はない。 <img>、<map>、<area> を使うことでイメージマップを作成できる。

https://allabout.co.jp/gm/gc/23823/

hysryt commented 4 years ago

figure要素

figure要素は以下の特徴を持つフローコンテンツである。

注釈 自己完結型とは、必ずしも「独立している」という意味ではない。 例えば、段落内の各文は「自己完結」である。 文の一部としての画像にfigureを使用するのは不適切であるが、文全体が画像であればfigureの使用は適切である。

この要素を使うことによって、イラスト、図、写真、コードの掲載に対してキャプションをつけることが可能となる。

注釈 ドキュメントから図番号のようなキャンプションによってfigure要素を参照できるため、 figure要素を別ページに置いたとしても問題ない。 「上図のような」と言った言葉で参照する場合はこの限りでない。 そのような相対参照ではなく、ラベルによる参照を推奨する。

figure要素内の最初のfigcaption要素がキャプションとして使用される。 figcaption要素がない場合はキャプションはないものとされる。

figure要素のコンテンツは周囲のフローの一部である。 画像共有サイトのように、ページの目的が「写真を表示すること」である場合、figureとfigucaption要素を使用して画像にキャプションを指定する。 figure要素のコンテンツが本題を離れている場合や、別の目的を持っている場合にはaside要素を使用するべきである。（その中にfigure要素を使うことは問題ない）

figure要素はセクショニングルートであり、figure内のコンテンツのアウトラインはドキュメントのメインアウトラインからは除外される。

figcaption要素

figcaption要素は、親figure要素が持つコンテンツの説明文や凡例を表す。 コンテンツの生成元に関する情報を含めることも可能。

SEO

https://www.seroundtable.com/google-figure-tag-26023.html figure要素内も見てはいるが、順位に影響はしない 画像検索に効果があるかどうかは不明

使い道