dorayakiBlog

~興味ある事について書いてます~

コンテンツ全体を示すタグ

Webサイトのメンテをしていて、ふと気になった事がある。
徐々に HTML5 に準拠したサイト造りにしようと考えていたので。

HTML5 で main という要素のタグが使えるようになった。

WebサイトやWebアプリケーションのコンテンツの、ヘッダーやフッターやサイド部分となる従の部分を除く、メインとなる部分を示すタグである。
なおこのタグはドキュメントのアウトラインを区分せず影響を与えない、との事。

となると、

ボディ
ヘッダー
メイン
(サイド)
フッター


という構成に一般的にはなるかと思う。

この構成は問題はない。

しかしボディの直下の子要素にさらに、
例えば CSS の margin: 0 auto; でサイト本体をブラウザの中央に常に寄せる為に、
ボディと同じか一回り小さい、
コンテンツ全体としてのボックス #wrapper や #container を作ろうとする時、この為のタグは何にするべきなのかと疑問に思った。

(全ての状況においてこのようなコンテンツ全体を表すボックスを作る必要はないかもしれない。)

その時に候補となりそうなのは
div main article section
の四つかと考えた。

結論から言えば、div になると考える。ただあまり納得はいかない。

div
html4 に引き続き、通常通り html5 においても div で問題はない。最も無難だと考える。
しかし HTML5 の文書構造を明確にするという点においては曖昧になる。特に div の位置や記述からブラウザやクローラーが外側の大枠と判断してくれるのなら問題ないのだが。
wrapper や container または content などのタグが欲しい気もする。
ヘッダーやフッターや記事部分などがdivから header footer article になったのはその為もあるのだろうからと考える。

main
main はコンテンツの、従以外の主となる部分を定義するのだから、従を含むコンテンツ全体を main で定義するのはいささか筋違いな感がする。
w3c もそれは推奨していない。
引用:
The main content area of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or applications main function is that of a search form). w3c.org より

article
article は自身の全体を示す。
main をメインの部分の定義に使い
article でコンテンツ全体を囲む場合、
article nav aside などの下層に main を含む事がw3cにより禁止されているので 、
article はやはりというか、×。

section
section は、上記の main を下層の子要素として使用する事は禁止されていないので問題はなさそうだ。
しかし全てを包括するコンテナ要素ではない、とされている。その時は article 要素を使うべきと。しかしarticle は main との関係上ここでは使えない。
スタイリングの為には div を使えとも書かれている。
コンテンツ全体のボックスを作る事がスタイリングする事なのだとすれば、div がやはり適当かと思える。
要素のコンテンツを構成組織するなら article を使えとも書いてあるものの。
何が article か section かは作者の意図で決まるとも書かれている、
section article はどちらがどちらの親要素に来ても変わらないと聞いていたが、
少なくとも section は見出しを含む部分、まさにセクションごとのボックスのタグとして使うほうが良さそうだ。



というわけで、
この四つの使用方法は幾通りか複数ある、製作者の解釈次第という点を含んでも含まなくとも。とはいえ、その辺りの各タグの関係の解釈が分かりずらいと感じた。

なので 従来通り全体のボックスにはdiv を使うのが良さそうだが、wrapper かcontainer というタグが文書構造を明確にする為にあって欲しいな、と思いました。

main を使いコンテンツ全体をタグで囲む時、

section は X。セクター、部分として使う
main も X。ヘッダーやフッターは入れない方が理に適っている。
article は X。mainを子要素にできないので。
div は ○。
と解釈する。

使い分けとして
メイン部分は、

mainを使う時は
article でなく div でコンテンツ全体を wrapper でとして(次いで container で)囲う。
div 以外は main を含むコンテンツ全体の外枠には使えない。

article を使う時は、
ただそういう時は main を使えと書かれているので、main のほうが良さそうだが、
div で囲い
article を ヘッダーやフッターとは別の、単数または複数の個々の独立したメインとして使う。

いくつかの使用条件や禁止事項を解釈しても、なかなか断定しづらいのだが、概要としては大体の使いどころはこんなところで良さそうだ。

上の候補を試して、見た目の挙動には影響はなかったものの、人間やブラウザやクローラーなどにこちらの意図した記述を正確に伝える為に必要な事なので、
もっと w3c の説明を読み込んでみる所存です。

html5 はこの策定で完成でなくまだまだ進化していくと聞いたので、wrapper のタグを是非とも作って欲しいと希望したい今日この頃です。

※大枠としてはこんなところだと思うが、英文の読み間違いや誤解釈がありましたら、申し訳ありません。
参照元
World Wide Web consortium
http://www.w3c.org
をご参照ください。

カテゴリ別記事一覧

・絵画技法
ポワンティエという絵画技法
ポワンティエの仕組みについて
アラプリマ技法のコツ
スカンブル技法
グレーズ(グレージング)技法
スフマート技法
グリザイユ画法
インプリマトゥーラ
ファットオーバーリーン
ウェットインウェット
スパッタリング
絵の耐用年数
絵の耐久力
絵や印刷物の保存方法
絵具のつや消し
つや消しの絵具
つや消しの原理
つや消しの絵が好まれる理由
絵を描く姿勢
絵の描き方とは
黒い物体の描き方
補色対比を利用した描き方
透視図法とは
点描について
彩色について
陰影のつき方

・水彩、アクリル絵具、他
アクリル絵具の特徴
アクリル絵具の道具
アクリル絵具を使う時に気をつけたい事
アクリル絵具の弱点
アクリル絵具を落とす方法
アクリル画に必要な道具
アクリルニスの塗り方
水彩画の絵やイラストをうまく描くコツ・方法
アルキド樹脂絵具について

・油彩
油絵を描く道具
乾燥促進剤の種類
樹脂ワニスの種類
乾性油の種類
画用液の調合の方法
揮発性油の種類
油絵を描く時の臭い
シルバーホワイトという絵具
シルバーホワイトとチタニウムホワイトを混ぜる
混色制限の無いウルトラマリンブルー
油絵具で紙に描く方法
油絵用の画用紙
紙に油絵具で描く
油絵専用画用紙アルシュオイルパッドについて
油絵の具でイラストを描く
油絵具を速く乾燥させるには
油絵の臭いを減らして描く
油彩筆の洗い方
グレーズの画用液について
スタンドオイルやベネチアテレピンについて
ブラックオイル(クサカベ)のレビュー
ストロングメディウム
高品位油絵具ヴェルネ 使用感
樹脂油絵具について

・画家
フェルメールブルー
印象派モネの技法
印象派ルノワールの技法
ハマスホイについて
「バルテュス 猫とアトリエ」を読んで
続「バルテュス 猫とアトリエ」を読んで - 技法面で気になった部分について -

・美術
画家は長生きなのか?
絵はお金のかからない趣味なのか?
画家の映画
5分で分かるざっくり西洋美術史
鉛筆の硬度Fとデッサンなどでの用途
下手も絵のうち について
心が哭くという事 芸術創作の動機
絵を描くときの眼の使い方
仕事しながらの創作について
美術館でのマナーについて
よく行く画材屋について
百均の絵具
チタニウムホワイトの特徴
ビスマスイエローの特徴
紙パレットの利点
空はなぜ青い
天然の軟毛筆について
筆の置きどころ
アートは必要ないか
アート(芸術)とは何なのか?を考える
美術の授業は必要なのか
コロナ禍の美術鑑賞
絵の飾り方
絵の行き着く場所
アナログ画材・アナログ絵具の良い点
デジタル画材の良い点

・ウェブ・IT
NTTドコモの新料金プランのahamo(アハモ)にしない理由
スマホアプリのデジタルデトックス
Twitterでサムネイル画像を真ん中に調整する方法
レスポンシブウェブサイトの作り方
スマホはサブブランドに脱出せよ
スマホゲーム(ソシャゲ)は高過ぎる
UQモバイルへの移行費用
simロック解除の方法
mnp(ナンバーポータビリティ)の方法
スマホ・携帯ショップでタブレット契約した時の何か騙され感のある話
スマホの料金が高いのでauからUQモバイルに変えた
買い切りアプリゲームについて
スマホ依存症・中毒にならない為に
photoshop for ipad を試してみた
マイナーなジャンルなブログの描き進め方
自分のサイトの表示速度を測る方法
i pad 電源がつかない時の対処法
パソコン配布27万円について
スマホ用VRゴーグル(簡易版)を買ってみた
ながらスマホについて
iphoneのメモ帳の活用
一般人はプログラミングを学習する必要があるのか?
人はAIに仕事を奪われるのか
Amazon web servide EC2 に FTP で接続できなくなってしまったので
リファラーのアクセスを制限する
Googleへのクローラ巡回のリクエストとその拒否
Google Earth Pro を試す
Google Earth Pro を試す 追補
プログラミングをはじめたきっかけ
プログラミング言語は何から始めるかについて
一般の人が最初に実用として、どのプログラミング言語を学んだほうが良いのか
Webデザインで風流な縦書きを
iPhoneの使いみち 私の場合
Java servlet をAWS Amazon EC2 にアップロードする流れ
スキューアモーフィズムとフラットデザイン
スマートフォン等のサイトデザイン

・生活
フリーランスは国民年金基金に加入した方が良い
クレジットカードで家計簿
温かい飲み物を買わない
しみ込みチョコパフについて
依存症の原因とは
生きる意味とは?について
ペットボトルは買うな
突然の訪問は少し怖い
風邪をひかない方法
サンシェードの日除けの効果
なぜ人は隅に座るか(電車や席など)
一人遊びの才能
あいさつする意味
好きな事を仕事にしたほうがいいと思う理由
クリエイターと消費税
楽に掃除する方法
持たない手ぶら生活
イノベーションはどこにある
伝記を読む意義

Name:ドラ焼き
油絵具でイラストを描いてます。webプログラミングもやってます。 このブログでは絵や興味ある事について書いてます。Twitterにてイラストもアップしてます。アカウント:@dorayakiArt
webギャラリー:dorayakiArt Gallery
👇このページの記事をシェアできます