読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 求職者支援訓練Webデザイン フェリカテクニカルアカデミーWebサイト制作科作品紹介



articleの間違った使い方

HTML5

ページ全体を囲む

  • Appleはページ全体を囲んでいます
  • アウトラインは以下のようになります



もちろん、Safariのブラウザの機能「リーダー」には反応しません。
「article要素」を一つの記事として抜き出せるような扱いにはしていないため、コンテンツとして表示することができません。




作りながら学ぶ HTML/CSSデザインの教科書

作りながら学ぶ HTML/CSSデザインの教科書

の場合も、ページ全体を「article」で囲んでいます。
しかし「article」で囲むと、最上位の見出しがhtmlに記述していない「Untitled Section」になっています。
以下のように表示されます。



書籍(購入しました)には、以下のような図が載っていますが、



このようなアウトラインにするためには、「article」で囲むのではなくbody直下を以下のように記述する必要があります。「article」は不要です。
もちろん、アウトライン構造ではなくデザインには「div要素」を記述します。

<body>
<header>
<h1>Cafe Debut</h1>
<p>baser CMS カフェサイト用テーマ<br>
baser CMS テーマコンテスト2012 飲食店系テーマ賞受賞(受賞結果はこちら)</p>
</header>

・・・・・・・

</body>
セクショニング・ルート
  • 自分自身のアウトラインを持つことができる要素です
  • セクショニング・ルートを持つ要素 blockquote, body, details, fieldset, figure, tdです


セクション要素は常に直近の祖先のセクション、またはセクショニング・ルートのサブセクションになります。
例の article は body のサブセクションになり、h1「site title」は article の見出しとなるので、body の見出しが無いことになります。
そこで暗黙的にbodyの見出しが生成され「Untitled Section」というアウトラインになります。




もちろん上記の書籍は、初心者の最初のステップには申し分の内容だと思います。
しかし、AppleがそうであるようにHTML5の新要素の使い方には注意が必要です。
超初心者は、それを記述することから始めない方がよいかもしれません。


他にも、ページ全体を「article」で囲んでいる例は枚挙にいとまがないほどです。
そもそもアウトラインを明示的に使うのでなければ、HTML5の新要素をあえて記述する必要はないと思います。



以下の書籍は、HTML5の新要素をあえて記述しない方法を選択しているようです。


これからの「標準」を身につける HTML+CSSデザインレシピ (Web Designing Books)

これからの「標準」を身につける HTML+CSSデザインレシピ (Web Designing Books)