Q&A
タグ自体に
「特定の『用途』が決まっていない」
という方が
個人的に、すっきりするなー、と感じます。
「意味」の捉え方が
まだ私には馴染んでないようです。
(*_*;
###[√] DIVタグやSPANタグを使っても良いのか？
「div,spanタグ内のコンテンツに意味は無い」
→ じゃあ、中身のあるdivはsectionに置き換えよう！
→ あれ？ spanはどうしよう？
という状況です
###[√] 詳細
div要素内のコンテンツは本質的に無意味なもの
とあったので、画像を参考に今までdivで書いていた部分をsectionに置き換えようと思いました。
（もちろん空divは替えてません）
同じように、spanタグも替えるべきかなと思ったのですが、spanタグの場合、
ほとんど必ず、中に意味のあるコンテンツ（文字）を含んでいますよね。
そうすると今までspanで特定の文字列のみにスタイルを指定していたところは、
他にどんなタグに替えれば良いのでしょうか？
あるいは、spanやdivで囲っていること自体に文書としての意味がないというだけで
本当は、内部のコンテンツにはきちんと意味があるのでしょうか？
回答4件
0
ベストアンサー
あるいは、spanやdivで囲っていること自体に文書としての意味がないというだけで
本当は、内部のコンテンツにはきちんと意味があるのでしょうか？
自分はそう解釈していました。たとえばMDNでは、
<div>要素 (HTML Document Division Element) は、何か特定のセマンティクスを表すものではない、フローコンテンツの為の汎用コンテナです。（中略）セマンティクス上で(<article>、<nav>) など他に適切な要素がある場合はそちらを使用して下さい。
たとえば、<span class="saturday">と言うものがあったとして、「土曜日である」ことは他のタグで表現するのにふさわしいものがない（土曜日を強調する場面であれば<em>でもいいけど）ので<span>を使う、というイメージです。
投稿2016/12/02 02:36
総合スコア145184
0
あるいは、spanやdivで囲っていること自体に文書としての意味がないというだけで
本当は、内部のコンテンツにはきちんと意味があるのでしょうか？
この解釈で合っています。例えばtable要素は「表」という意味を持ち、ul要素は順不同のリストという意味を持っています。
それとは異なり、divやspanはそれ自体には意味を持たない要素となります。
divやspanに関してのイメージとしてはcssでのスタイリングなど文章の内容ではなくスタイリングを当てる上で便宜上囲っておいたほうが良いものを囲う時に使用する、と個人的には思います。
HTML5以前は構造を表す要素が存在しなかったため、<div class="section">〜</div>などという書き方をしていましたが、今は上記のような考え方で特に問題ないと思います。
投稿2016/12/02 02:59
総合スコア353
音声で読み上げるリーダーなどのことを想像すると少しわかりやすいかもしれません。
「見た目ではそのように見える」ということと、「要素にそういう意味がある」というのでは読み上げられ方などが変わります。
顔文字なども、「見た目」だと顔に見えても文字としては「かっこ、アスタリスク、アンダーバー…」の集まりなのでわからないというのと同じようなことなのかな、と。
意識しないとわからない部分でもありなかなか難しいですけどね……。
>読み上げられ方などが変わります。
だとすると「すごい良いサイト」を作るためには、
『 どのブラウザで閲覧されているか 』だけじゃなく、
『 どの読み上げソフトを使っているか 』
も意識しないといけなくなりますね。
うーん、WEBって意外と難しい...
(>へ<)
0
「解答」とは違い、時間的にも今更で、役立たずだとは思いますが…ｗ 長いですｗ
本来、HTML を中心とした技術は、高い自由度が有った。
あくまで主観ですが、「何故、固定的な概念を求めるのか？」とは感じます。１９９３年以来、HTML に触ってきて、その「自由度」は制作者の為でした。初期には「閉じタグ」忘れでさえ、広い容認度が有りました。
それは書く時点だけではなく、ヴァリデーションにおいても同じでした。今でも、例えば DOCTYPE や 省略可能なタグが有る事は知られているでしょう。
時代が変われば訴求・要求が変わるのは常ですが、近年は W3C 策定が外部ベンダーを入れ、進捗が得られる代わりに、その主導までをも奪われた感が有ります。
一番分かり易いのは、いくら「スマホ中心」の面があるからとはいえ、「 AMP HTML 」他、Google 主導に踊らされ過ぎだと感じています。それでも、これも市民権・市場シェアを得れば、標準化されるかもしれません。
とは言え、これは余りにも「商業面」を見据えた仕様でも有り、「非商業的ユーザ」に必須かと言えばそうではないでしょう。そして、その「非商業的ユーザ」も、未だ少なくは無いのです。
その中で、仮に「標準化」されるのは、明らかな齟齬を感じずにはいられません。
「レイアウトの権利」は、手法を含めて制作者自身に有る。
とは言え、「エンド・ユーザ」を見据えた上で、ですが…。
過去、HTML 2.0 後のブラウザ戦争中から、様々なタグの使用について論争が有りました。しかしその多くは、基本的に各ベンダーの自己主張であり、残ってこれた主因としてはやはり「市民権・市場シェア」だったとは言え、多くのターゲットを絞った訴求は、その利用方法を「狭めて来た」と解釈する事も出来ます。
それは、「言われていた」だけの証明されていない時期を過ぎ、実際に様々な「ウェブは金になる」状況が見えてきて以降、加速して来ました。
その中で、例えば「 Google 広告をどうマークアップすべきか？」等、発展して来た背景が有ります。
とは言え、本来、そのタグに関する仕様は「絶対的」なものではなく、「基準を示す」ものであり、故に著名サイトの多くでも、CSS や JS と合わせた「 Hack 」な利用方法さえありました。
その「行き過ぎ」が強い示唆を持つ「仕様」を求めた背景も有りますが、そもそも「ウェブ標準」や「セマンティック・ウェブ」的な考え方は、「厳格さ」よりも、広く多くの人に「出来るだけ」画一的な方法・手法を示す事や、とにかくそこから「意味が分かる」のが目的だった筈です。それは「ガチガチな法律」とは違った筈なのです。
※「セマンティック・ウェブが進まない」のは、その「意味」やそれ以上にフォーカスする余りに、「難解」な方向に向かった為だと考えています。
「 div 」タグは何のために有るのか？
申し訳ありませんが「仕様」は離れ、主観を書きます。
「 div 」は単純に「コンテナ」です。ただの「入れ物」「容器」だと解釈しています。既存の例では、「 wrapper 」や「 xx-box 」的なイメージでしょうか。凄く省略形ですが、例えば…。
html
1<div class="wrapper"> 2 <article> 3 <section> ~ </section> 4 <section> ~ </section> 5 <section> ~ </section> 6 </article> 7 <aside> ~ </aside> 8</div>
「自由度が有る筈」と書いてはいますが、（個々の主観は別にして）「 section 」を「 div 」にする事は可能だと思いますが、例えば上記「 div 」を「 section 」にする事はお奨め出来ません。
基本的に、section に関しては「 Heading ( h1 ~ h6 ) 」が伴う、文書中の部分・断片と捉えています。つまりは、「単独で登場する事は無い」と考えています。（構成にもよりますが）「章・節」の「節」を表すといっても良いでしょう。
ただ、「 section 」を「 div 」に置き換えるのは容認されるとしても、そこには「 section 」以上に用途（そもそも「意味」はない）を拡張して利用したい「 div 」が有る筈で、ただ「同じ使い方」ならば、「仕様に準拠」したタグの選択が望ましいのは言うまでもありません。
「 span 」タグは何のために有るのか？
「 span 」も単純に「コンテナ」です。ただの「入れ物」「容器」だと解釈しています。ただ、「 div 」とイメージは違い、「 div 」が「列車全体」なら、「 span 」はその「一車両」や、「載っているコンテナ一つ」になると思います。部分的な「用途変更」を可能にする「部品」です。
HTML 5 における過去より曖昧さの減った仕様により「用途変更」と書きましたが、実質は「スタイルだけ」をも変更するのはご存じのとおりです。
これが「もっと厳格ならば…」と思う事も有りますが、mark, strong, em, b, i, s 等々との使い分けを面倒にしています。置き換え可能ならばこれらのタグの使用が推奨されるでしょう。
逆に、これらを利用せずに「 span 」が登場しそうなのは、通常文章の中での「スタイルを変えない状態で用途を変える・加える」場合です。
その最たるものは文書中の Icon になると思います。実際の画像や Font Awesome 等の利用時のタグです。下記はあくまでそのイメージです。
html
1My <span class="twitter-icon"> account: @foo-bar</span>
予定 Result: "My [Twitter Icon （実際の画像）] account: @foo-bar"
これは、文章自体には変更を加えずに、アイコンを加える為に、つまりは用途を付加する為に span を利用しています。
ちなみに…。
仕様上でも、自分たちが利用する上でも、もっと言えば「 Style Guide 」的に考えるのなら、mark, strong, em, b, i, s 等々の利用に際しては、「スタイル志向」を打ち消すのに「理由を class に付加する」のは、後々担当者が変わっても理解する助けになります。「スタイル志向」しか見えないと、「何故、このスタイル？」と「難解」さを増します。
html
1<p>彼は、<b class="important-word">最後の言葉</b>を言った！</p>
用例は単純ですが、これなら、Style Guide 的にも .important-word で意味を内包して表示出来ます。
加えて、複合的なスタイル付加なら、span でクラスを付加すれば解決出来るでしょう。
html
1<p>Our CEO said, "<span class="policy">All we need is love!</span>".</p>
このイメージは、「自社 CEO のスピーチ中、企業『ポリシー』」に span を利用した訳です。「赤く」ても、「太く」ても、「斜体」でも、これで「意味」が分かりますし、何より、他のタグを使うよりも「スタイル」を志向せずに済みます。かつ、必要ならばこれら３スタイルを一つのクラスで表現出来ます。
最後に…。
これらは、あくまで長い間使ってきた HTML に、都度少なからず情報を足してきた私が考えた「だけ」の物で、「他の方には価値が無い」のかも知れません。
それでも、（これらに限らず）私が私の考える「仕様」を、私が作るサイトで適用する限りは、後に何らかの必要性で手を入れてくださる方には、「（例え）間違ってはいるけれど、何処も同じ『仕様』で書いてあるので、メンテナンスはしやすい」とはお考え頂けると思います。
現実的に、皆さんが指摘されている通りに、「それでも」仕様のインプリメントは違い、「示唆しているサイト」でさえ指摘されます。
が、それは私の見方からすれば「当然」なのです。実は、それだけ「 HTML 仕様には幅が有る」のが現実だと認識しています。ただそこには、「余りに現実離れした仕様解釈」は頂けないでしょう。
つまりは、生活の中での「マナー」や「常識」の様に、「一定の基準は想定出来るけれど、差分は有り、それは容認しなければ対立になる」のは同じかと思います。まぁ、限度は有る訳ですが…。
「これは違うだろう！」と声を荒げる必要はなく、「これって、どうしてこうされているんですか？」から、納得のいく説明や、こちらから示唆出来得るポイントが見つかるのかも知れません。
勿論そこには、「知らなかった」は当然に、制作者の意図や想いも有る筈だと思います。
ただ、主観としては、そもそも「これは違うだろう！」と言う事自体が、感情面は別にしても、余りに「ルールを背景にした利己性」が高すぎる様に感じるのです。
何にでもルールは必要ですし、時には助けてくれます。それでも、ルールが自由な発想を縛る事が有るのも、少なからず有り得る事です。
特に、CSS3 になり、「え？ そんな事が出来るの？」と思った事が「 Hack 」でさえなく、驚かされる事も有ります。
これが雁字搦めで「これしか出来ない」厳格な仕様では、その「応用」と思える「標準仕様外」にさえ見える適用は不可能だった筈です。
仮に、「仕様外」を見掛けても、良くサイト全体や他のページも見渡された後で、統合的な「そのサイト」の仕様として合っているのか？、を基準にお考え頂くと、逆にご自分の「ヒント」にさえなるのかも知れません。
と、考え、遅ればせながら、投稿させて頂いた次第です。
お邪魔しました。
投稿2016/12/18 18:44
総合スコア51
0
他の回答者と結論は同じですが、
置き換われないdivタグはそのままにしておきましょう。
divとsectionは違うので置き換えちゃダメ
HTMLは文書です。
潔癖な事を言えば1枚のHTML文書の中に主張の本質であるarticleが1つだけ存在し、
主張が長くなってしまった際に章を区切るためにsectionが用いられるべきです。
（articleやsectionは定義として曖昧で諸説ありますが、上記はその主張の1つくらいとして捉えてください）
…と、このように文書としてマークアップしてHTML5になるものは、
適切なarticleとsectionで主張が整理されているべきです。
そこにデザイン上の都合は一切ありません。
なのでデザインという全く別次元の目的の為に配置されたdivタグに、
とりあえず名前を付ける為にsectionが存在しているわけではありません。
実際問題divやspanは「デザイン目的」として利用される事が多く、
無意味な4重divだ！なんのこっちは5重だ！div.float-rightさん！わしのHTMLは108層まであるぞ…みたいな恐ろしいサイトは沢山あります。
ある程度デザインの都合に振り回されるHTML構造になるのは仕方ないとしても、1重で何とか踏みとどまって欲しい所です…
正しいdivタグの使い方
HTML5が勧告される以前、HTML4やXHTMLが主流でしたが、
正当なdivタグの使い方として認められ、かつ汎用的で仕様に含めるべきものの多くがHTML5として定義されました。
具体的には下記のようなタグです。
- header
- footer
- nav
- article
- section
2000年後半でブログやWikiが次々と登場し、<div class="section">や<div class="header">という書き方が登場しました。
流行りのサイトはヘッダー、フッター、サイドバーと統一の様式で構成され、
構造をきちんと定義する為に相応しい要素がないので仕方なくdivタグを宛がう対応が一般的でした。
その結果、HTML5に正式採用される事になったという経緯があります。
HTML5で例え表現出来ない事でも、名前を付けて括れるのであれば、今日でもdivやspanを使うべきでしょう。
その実体はデザイナーから上がってきたとんでもデザインを無理やり文書に起こす事であってもです…
コーダーは文書としての側面と、デザイン的な側面にうまく折り合いを付ける為に頭をひねる頭脳労働者なのです…
投稿2016/12/02 05:48
総合スコア21158
>本質であるarticleが1つだけ存在し、
主張が長くなってしまった際に章を区切るためにsectionが用いられるべきです。
colissさんの記事では、sectionの中にarticleがあったのですが、それはもうすでに古い情報ということでしょうか？
>わしのHTMLは108層まであるぞ
GoogleさんのGmailも
たしかdivだらけになってましたね。
タグの名前を自由に設定できたらいいのに、ってW3Cに言ってたような。
>divとsectionは違うので置き換えちゃダメ
例えば、
小さなHTMLゲームや、
ひとこと記事、
動画、音楽など、
関連性の薄いものを沢山並べる場合、
これはdivでしょうか？
> colissさんの記事では、sectionの中にarticleがあったのですが、それはもうすでに古い情報ということでしょうか？
諸説あるので衝突しています（上記回答文も諸説の一つとして紹介しました）
この辺はW3Cの勧告文の日本語訳でも見ながら自分が信じるべき回答を模索するくらいしかないと思います。
私は記事(html≒article)の中に章(section)が複数ある概念が理解しやすかったので、これを信仰しています。
> 例えば…
これはWebサイト管理側の内容や状況に応じて変わります。
大事なのは「このページでの私の主張はxxxなんだよ！」
このxxxに入るものは当然articleやsection等の重大要素でしょう。
多数の人が同じ事を言っても、主張の根幹や伝えたい声の大きさは違って然るべきです。
そこから離れるに従ってしょぼい要素がマークアップされるという考え方が自然だと思います。
下記に私が少々考えた使い分けを記載しましたが、
classやidに名付けつつのdivタグも十分ありと考えています。
> 小さなHTMLゲーム
・沢山のゲームの紹介するページの一つ→li
・俺はこのゲームを作ったんだぜ→article
> ひとこと記事
・記事とは関係ないひとことコラム→aside
・駄文、チラシの裏だけど折角書いたから公開したい→article
> 動画、音楽など
これもui>liで並べるとか、audio・videoを使うとか揺れます。
> 関連性の薄いものを沢山並べる
同じページに載せる時点で何かしらの共通点はあるはずです。
超屁理屈ですが、「私が今週見つけた記事の中から気になったものをピックアップしたい」とか〜
その場合はliで表現出来ますね。
今までliをあまり使わなかったのですが
意外と色々な場面で使えるのですね！
とても参考になりました！
ところで、ふと思ったのですが
新聞ってhtml化しやすそうですよね。
section,article,aside,header,footer...もしかして静的なサイトで普段使うようなタグを殆ど使ってるんじゃないでしょうか。
もしかして新聞をイメージしながらだと
Web制作が（タグ選び）で捗るようになるんじゃないかと思ったのですが どうでしょう。
> 新聞ってhtml化しやすそうですよね
そうですね、新聞はまさにですね。
新聞以外にも紙媒体で表現する本や辞典、論文などもサンプルとして使えると思います。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/02 02:47 編集
2016/12/02 02:51
2016/12/02 02:56