Q&A
まず、クォーテーションの記述は正しくしましょう。
抜けている箇所がありますゆえ。
ふむ・・・。
本の発行年はいつでしょうか？
本当に構文まんまなんですよね？
HTML5 / CSS3 モダンコーティングという本の中の質問なのですが、下記コード
HTML
1<main class="main"> 2 <h2 class="hidden">HOT TOPIC</h2> 3 <div class="hot-topic"> 4 <!-- HOT-TOPICのコンテンツ内容 --> 5 </div> 6 <h2>NEWS</h2> 7 <div class="news"> 8 <!-- NEWSのコンテンツ内容 --> 9 </div> 10 <h2 class="hidden>ARTICLES</h2> 11 <div class="articles"> 12 <!-- ARTICLESのコンテンツ内容 --> 13 </div> 14</main>
CSS
1.hidden { 2 display: none; 3}
が推奨されているマークアップだという記載があったのですが、どうも腑に落ちません。
おそらくh2によって暗黙的にセクションを区切る意図があると思うのですが、セクションを区切るという意図ならばわざわざh2タグを使わずとも下記コードのようにsection、もしくはdivで区切るだけでも良いと思うのですがどうなのでしょうか？
HTML
1<main class="main> 2 <section class="hot-topic"> 3 <!-- HOT-TOPICのコンテンツ内容 --> 4 </section> 5 <section class="news"> 6 <h2>NEWS</h2> 7 <!-- NEWSのコンテンツ内容 --> 8 </section> 9 <section class="articles"> 10 <!-- ARTICLESのコンテンツ内容 --> 11 </section> 12</main>
わざわざクラスをつけて、それを消すという方がHTMLの概念的にも正しいのでしょうか？
根本的な話ですが、ご回答よろしくお願い致します。
マークアップ中のどの部分がどういう理由で「非推奨」と書かれていたのですか。
> おそらくh2によって暗黙的にセクションを区切る意図があると思うのですが
推測ではなく、「事実」をあるがままに書いてください。
本の発行年は、2015年でした。
headerを前述してしますが、長くなって見辛いかなと思い省いております。。。
2015年はちょっと古いですね。
HTML5的にはそこまで差がでないかもしれませんが、
Webの参考書としては、あまりよろしくないくらい情報が古くなります。
回答2件
0
おそらくh2によって暗黙的にセクションを区切る意図があると思うのですが、セクションを区切るという意図ならばわざわざh2タグを使わずとも下記コードのようにsection、もしくはdivで区切るだけでも良いと思うのですがどうなのでしょうか？
これについてはコンテンツセクショニングというものがあり、以下の様にMDNでは説明されています。
コンテンツセクショニング要素は、ドキュメントのコンテンツを論理的な断片に体系づけます。ページのコンテンツでヘッダーやフッターのナビゲーション、あるいはコンテンツのセクションを識別する見出しなどの、大まかなアウトラインを作成するためにセクショニング要素を使用します。
ARTICLESのコンテンツだということを明示する。もしくは区切りたい場合は<article>を使用してみてはいかがでしょうか？
この様にドキュメントのコンテンツがどの様なものを指し示しているのかはHTMLのタグを利用して行うことも多いかと思います。
追記
SEOの観点からについても気になったので調べてみました。
トップヒットですが下記の記事も参考になるかと思います。
「隠しコンテンツ」を「SEO目的」に使わない。
「display:none」の利用がSEOスパムになるわけではなく、検索ユーザーに見えない「隠しコンテンツ」や「クローキング」によって、サイトの価値を不当に高めようとする行為が「SEOスパム」とされ、ペナルティの要因となります。
「display:noneの利用」以外にも、「文字色と背景色を同系色にして隠す」「テキストの上に画像を乗せて隠す」「フォントサイズを小さくして隠す」「text-indent: -9999px;で隠す」「alt属性にキーワードを隠す」などが、今までSEOスパム行為として利用されてきているため、必要ないのに使う行為はおすすめいたしません。
投稿2020/09/15 11:47
編集2020/09/15 12:06
総合スコア2076
コンテンツセクショニングという言葉は初めて聞きました！
すごく勉強になりました！
ありがとうございます????
添付サイトまでご丁寧に教えていただきありがとうございます！！
0
ベストアンサー
その本の中身を読んだわけではないので、なんとも言えない部分はありますが・・・。
なにを根拠に推奨しているのかも見えません。
第一に、SEOの観点から考えた時、不必要な不可視要素は極力入れるべきではありません。
上位表示のみを狙っている、とされペナルティの対象になる可能性もあります。
今回の構文では、
HTMLの文章構造を考えた時、不可視化しているh2要素は入れる必要はないものと思われます。
（特に一番下は、NEWSというh2要素があるため、いらない。）
また、一番上のh2にいたっては、ページタイトルに該当すると考えられるので、
h1でマークアップすべきです。
そして不可視化せず、見た目はスタイルで調整すべきです。
（CSSで十分スタイリッシュにすることは可能です）
著者がどういう意図で、何を目的にしてマークアップをしたかは存じ上げませんが、
あまりよろしくないと言わざるを得ません。
おそらくh2によって暗黙的にセクションを区切る意図があると思うのですが、セクションを区切るという意図ならばわざわざh2タグを使わずとも下記コードのようにsection、もしくはdivで区切るだけでも良いと思うのですがどうなのでしょうか？
そういう問題ではありません。
今回の争点は、h2の不可視化が否かどうか、そもそもそのh2がいるかどうか、の方が重要になります。
マークアップ的には、h2の出現位置においてはなんの問題もありません。
それをsectionで区切ろうが、divで区切ろうが、
今回の構文に関してはアウトラインの変化も特にありません。
ただし、一点、section要素には、h1〜6要素を入れるべきです。
必ずではありませんが、通常はsectionにはh1〜6要素が入っていることが前提になります。
（section自体がアウトラインを整形する関係上と思われる）
<section>: 汎用セクション要素 - HTML: HyperText Markup Language | MDN
なので、sectionで区切る場合は、
むしろ、その中にh2は入るべきということになります。
投稿2020/09/15 11:19
編集2020/09/15 15:45総合スコア9555
いろいろ抜けており申し訳ないです。
section要素には、見出しを持つことが推奨されているとのことでした。
ただ、いろんな方からのご回答からSEOの観点から見るとよろしくないということがわかったのでこのマークアップの仕方は控えようと思います。
> section要素には、見出しを持つことが推奨されているとのことでした。
ん？その本に記載されていたことですか？
そうです。
”section要素が見出しを持つことは推奨であり、必須ではありません。見出しを省略しても間違いではありません。マークアップと実際の表示を一致することを優先したい場合は、次のようなコーティングをすることで、3つのsectionがあることを表現できます。”
と書いてあります。
次のようなコーティングというのが、質問内容に載せている2つ目のHTMLのコードです。
いろいろ手間取ってしまいすみません????
そこに関して回答で言及しました。
ただし、そのことも質問に含めてください。
かなり勘違いを生みやすい質問内容になっています。
下方のコードは、質問者さんが考えたコードと思ってました。
失礼しました。
わかりやすい解説ありがとうございました！
あなたの回答
tips
プレビュー
