Section要素

冒頭、アウトラインの部分でも触れましたがSection要素はページの構成を行います。

ページ構成を行う為に使用されるセクショニングコンテンツとフローコンテンツに属します。使用する注意事項としてはSectionに変わるふさわしい他のセクショニングコンテンツの要素があれば (navi,article,aside)そちらを使用すること、見出し要素(h要素)を必須とすること、スタイル設定の為だけに使用はしないということです。

コンテンツモデルのページでも記述させて頂きましたが、階層構造を決めるのは前のセクションの見出し要素に対して次のセクションの見出し要素の数字が大きいかどうかが判断基準となります。

分かり易く説明をつけ加えますと、h1とh2ではh1が上位になるため、h1要素が大きな見出しとなりh2が小見出しとなってきます。

このsection要素に関してはサイトページの構成を行うにあたり重要な要素となってくる為、覚えておくと使いやすく便利な要素です。

navi要素

navi要素はフローコンテンツ、セクショニングコンテンツに属します。使用法としてはサイトをナビゲートする主なメニューの集まりのセクションとして使用する、配置はフローコンテンツ内の適切なメニューの位置に配置されます。

ヘッダー部に使用するページ主要ナビゲーション、サイド配置したページ主要ナビゲーションはその一例です。注意事項としては単純にリンクだけに使用することはありません。その他パンくずリストとして使用することもあります。

article要素

article要素はHTML5の新要素であり、フローコンテンツ、セクショニングコンテンツに所属しブログ記事、コメント、投稿欄などに使用され、section要素よりarticle要素がふさわしいと思われる内容に使用します。

使用方法としては個々の個別の記事に使用することが適切であり、メインコンテンツ自体をarticle要素で囲む使用方法はあまり適切ではないようです。その理由としてメインコンテンツは記事内容とは関連のない内容まで含むことがあるからです。 その為、article要素の内部に更にarticle要素を使用することは可能ですが、その場合その内部のarticle要素の内容は外部article要素に関連する必要があります。

またartticle要素内部にheader/footerの設定は可能ですので、登校日時・コメントに使用するのが良いようです。以下の構文が一例です。

hgroup

hgroupはフローコンテンツ、ヘッディングコンテンツにカテゴライズされる要素でコンテンツ・モデルはh1-h6要素のみの使用となります。使用方法としては要素の文字通りh1-h6がグループ化されたものであり、見出しキャッチフレーズを表示させたいときに使用します。

注意事項はh1-h6の要素しか使用することはできません。

aside要素

aside要素はHTML5の新要素でありフローコンテンツ、セクショニングコンテンツに属します。使用方法はメインコンテンツと関連性が薄いもの、補足記事、広告などに使用され、メインコンテンツとは切り離された内容を記述します。その為、メインコンテンツが含まれた内容をasideで使用するのはあまりお勧めではありません。メインコンテンツはsection、articleで囲み、コメントなど本文と関連性の薄いものをasideで囲む使用法が良いようです。

header要素・footer要素

header要素/footerはフローコンテンツに属しページヘッダー、コンテンツヘッダー等に使用します。使用法としてはヘッダー要素は得にページヘッダーのみに使用すると定められているわけではなく、コンテンツヘッダー等にも使用が可能です。section要素との違いは得に見出し要素h1-h6を必要としません。footer要素も同様に必ずページフッターとして使用するわけではなく、コンテンツフッターとしても使用可能です。

figure要素

figure要素はhtml5の新要素でフローコンテンツに属し、コンテンツから独立した内容に使用します。本文から独立させたコンテンツであり、メインコンテンツや他ページからも参照されるコンテンツである為、写真や図や文章・コードなどに使用されます。 figure要素で示したコンテンツについてはfigcaption要素で説明を行います。figcaption要素については必ずしも必須ではないようですが、使用する場合はfigure要素の中だけの使用可能となっています。

次の例では商品構成をfigure要素を使用したコンテンツとし、メインコンテンツ内の"商品構成"とリンクさせた例文となっています。figcaptionはfigure要素内部コンテンツとして"既存商品との比較"を表しています。

samp要素・kbd要素

samp要素/kbd要素はフローコンテンツに属します。samp要素はプログラムからの出力を表し。それに対しユーザーが入力した内容についてはkbd要素を使用します。

pre要素はコンピュータからの出力を改行やスペースをそのまま表示したい場合に使用される要素です。

下の例文はコマンドブロンプトを使用した暗号化コマンドを表した例文です。全体をpre要素とsamp要素で囲みユーザーが入力した部分をkbd要素によって表示しています。pre要素はコンピュータから出力された文章をそのまま表示したい場合に使用する要素であり、samp要素・kbd要素と共に使用すると効果的に使用できます。

C:\Users\user>cd C:\
C:\>CIPHER C:\Users\user\Documents
C:\Users\user\Documentsのファイルを暗号化しています

1 ディレクトリ内の 1 ファイル [またはディレクトリ] が暗号化されました。

blockquote要素

blockquote要素は他のサイトからの文章を引用したいときに使用します。文章の引用に関しては長い文章は[blockquote]タグで囲みますが、短い文章には[q]のタグで文章を囲みます。 blockquoteを使用した範囲は上下左右にスペースがあきブラウザ表示がされます。

要素固有のコンテンツ属性はciteがあり、使用法としてciteに引用元のサイトURLを代入します。以下、例文です。

ヒッグス粒子

ヒッグス粒子（ヒッグスりゅうし） (英: higgs boson) とは、素粒子に質量を与える理由を説明するヒッグス場理論からうまれた、理論上の粒子である（素粒子論と量子力学では、場の存在と粒子の存在は意味がほぼ同じである）。

ヒッグス場とは、1964年にエディンバラ大学のピーター・ウェア・ヒッグスによって提唱された、素粒子の質量獲得に関する理論に現れる場についての仮説である。ヒッグス場によって質量を獲得するメカニズムをヒッグス機構と呼ぶ。

ジュネーブ郊外に建設されたCERNのLHCの衝突実験で、およそ10兆回に1回しか生成されないと言われている。2011年12月、ヒッグス粒子が「垣間見られた」と発表された[2][3][4][5][6][7][8][9][10][11]。その後、2012年7月4日、同施設において新たな粒子を発見したと発表された。質量は125.3±0.6GeV、標準偏差は4.9である。これが捜し求めていたヒッグス粒子であるかは確定的には表現されておらず、さらに精度を高める実験が続けられる[12][13]。

ヒッグス機構では、宇宙の初期の状態においてはすべての素粒子は自由に動きまわることができ、質量がなかったが、自発的対称性の破れが生じて真空に相転移が起こり、真空にヒッグス場の真空期待値が生じることによってほとんどの素粒子がそれに当たって抵抗を受けることになったとする。これが素粒子の動きにくさ、すなわち質量となる。質量の大きさとは宇宙全体に広がったヒッグス場と物質との相互作用の強さであり、ヒッグス場というプールの中に物質が沈んでいるから質量を獲得できると見なすのである。光子はヒッグス場からの抵抗を受けないため相転移後の宇宙でも自由に動きまわることができ質量がゼロであると考える。

引用元:ウィキペディア

cite要素

引用元など他の情報源を参照する場合に使用します。citeタグで囲まれた場合イタリック字体で表示されます。

引用元:ウィキペディア

ul要素

ul要素は項目をリスト表示させたい場合に使用されます。次に続く[ol]や[dl]と使用法は似ており、[ul]によってリスト化し[li]によってリスト化する項目を指定します。

要素固有のコンテンツ属性として[type]が使用可能であり、circle(白丸）/disk(黒丸)/square(四角)から指定することができます。指定しない場合はdiskで表示がされます。

• section
• navi

• section
• navi

• section
• navi

ol要素

1. section
2. navi

1. section
2. navi

1. section
2. navi

1. section
2. navi

1. section
2. navi

1. section
2. navi

1. section
2. navi

dl要素

dl要素は用語の定義を行いたい時に使用し、ブラウザへの表示は定義する語句とその説明は改行されて表示がされます。要素固有のコンテンツ属性としてcompactがありますが これは定義する語句とその説明を改行したくない場合に使用されます。

dlタグ自体は定義リストとして使用されその内部の[dt]によって定義する語句を設定、[dd]によって語句の定義づけが行われます。 使用法はリスト表示を行う[ul][li]の関係と似ており、[dl][dt][dd]はセットとして覚えておくとよいでしょう。

以下例文です。

section

ページ構成を行う為に使用される要素

navi

ページのメニューセクションとして使用される要素

article

ブログ記事、コンテンツ、コメント、投稿欄に使用される要素