【Age of Networks(AoN-DB)え~ちゃんぶろぐねっとわ~く】【技術情報】HTML5のArticle,Section,Asideとアウトラインについて 2/2【志摩嶋エイジ】

東方二次ゲームメインからオリジナル・企業系や漫画へ。TRPGやサバゲのアナログライクも

Age of Networks(AoN-DB)え~ちゃんぶろぐねっとわ~く

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【技術情報】HTML5のArticle,Section,Asideとアウトラインについて 2/2【志摩嶋エイジ】

この記事は昨日分のアウトラインの概念を理解された上でご覧になられている事を前提にしています。
大変礼を欠く言い方をさせていただきますが、原理を理解しないままに使われると、貴方はまたしても「html5 article section 違い 比較 使い方」などという単語で再検索をする事になると思います。
こうも申し上げますのは、かく言う私ももう10回以上に検索して、同じウェブサイトを何度も巡っていますが、未だに分からないからです。
完全な情報を求める場合、リファレンスをまとめてあるウェブサイト等にご自身の解釈をなさった上で使われた方がよろしいかと思います。


さて、本件ですね。
私も何度か調べてみたものの、未だにarticlesection違いなど差が分かっていません。
なので、以下の通り少しばかり実験をしてみる事にしました。

1.目的
HTML5の目的であるアウトライン化に重きをおく。
構築などは結果に準ずるため、度外視する。

2.評価の仕方
SEO対策としてふさわしいものを取り上げる。
つまり、構文云々は取り扱わない。

3.比較
考えられる可能性を全て検証した上で行う。
差が見込まれる場合は検討し、再度比較する。
(本記事では過程を一括している)

4.検証


<section>
A
</section>
<header>
B
</header>
<h1>
C
</h1>
<section>
<h1>
D-1
</h1>
</section>
<section>
<h1>
D-2
</h1>
</section>
<header>
<h1>
E-1
</h1>
</header>
<h1>
E-2
</h1>
<section>
<header>
<h1>
F
</h1>
</header>
</section>
<header>
<section>
<h1>
G
</h1>
</section>
</header>
<section>
H-A
<section>
H-B
</section>
</section>



ふざけてるように見えますが、至って真面目です。
因みに、この場合だと、

  1. C

    1. タイトルなし(A)

    2. D-1

    3. D-2



  2. E-1

  3. E-2

    1. F

    2. G

    3. タイトルなし(H-A)

      1. タイトルなし(H-B)





と、なります。

意図している並び方ではない上に、きちんとアウトラインに表示されていないことが分かりますでしょうか。


<section>
A(アウトライン要素ですが、名前=hxをつけましょう)
</section>
<header>
B(そもそもアウトラインの要素ですら無い)
</header>
<h1>
A(一番最初に見つけたタイトル=これがアウトラインに表示。ここに今までのアウトライン要素を割り込みで従属)
</h1>
<section>
<h1>
D-1(アウトラインの要素+タイトル。条件を満たしている)
</h1>
<h1>
D-2(D-1との違い:section-h1を並べたらどう表示されるか検証する)
</h1>
</section>
<header>
<h1>
E-1(アウトライン要素はないが、タイトルはあるので内示的に別セクションとして処理をしている)
</h1>
</header>
<h1>
E-2(E-1との違い:headerがアウトライン要素を持たないことを証明)
</h1>
<section>
<header>
<h1>
F(セクション→ヘッダ→タイトルの場合。処理はGと同じだが、セクションにナンバリングするのでヘッダ・ナビ・アーティクルなど垣根を越える事が可能)
</h1>
</header>
</section>
<header>
<section>
<h1>
G(ヘッダ→セクション→タイトルの場合。処理はFと同じだが、ヘッダのセクションにナンバリングするのでヘッダ内の情報に目次を付けられる。)
</h1>
</section>
</header>
<section>
H-A(セクション多重掛けの検証。E-2~F間でさらっとなされた処理からタイトルを除いたもの)
<section>
H-B(セクション多重掛けの検証。E-2~F間でさらっとなされた処理からタイトルを除いたもの)
</section>
</section>


正しいかどうかはともかくとして、実際に使ってみるとこれだけの差が出てきています。
今までのやり方だと逐次処理をされていましたが、これを見るといきなりalignレイアウトをしている気分になりますね。
原則、上から下へと流すのでこのようにバラバラな出力順になるという事は不正があるという事なので、オススメは出来ません。
また、今回の検証も現段階によるものなので、後々に仕様が変わる可能性も十分に考えられます。
が、概ね満足できる結果は得られたのではないでしょうか。
関連記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。