Q&A
私たちのビジョン
求めるものがここにある
TOPICS
2019年10月4日 渋谷店
商品が入荷しました！
画像
OUR SERVICE
サービスの紹介
販売事業部
卸売事業部
輸入事業部
.
.
.
のような記事をコーディングするとき、
「OUR SERVICE」
「サービスの紹介」
と、どちらもh2タグを使いたいのですが、
<h1>ロゴ画像</h1> <h2>私たちのビジョン</h2> <h3>求めるものがここにある</h3> <h2>TOPICS<h2> <span>2019年10月4日</span><span> 渋谷店</span> <p>商品が入荷しました！</p> <img> <h2>OUR SERVICE</h2> <h2>サービスの紹介</h2> <h3>販売事業部</h3> <h3>卸売事業部</h3> <h3>輸入事業部</h3>
とすく次の行にh2タグを使用するのは好ましくないでしょうか？
他のサイトを参考にすると、
spanタグやpタグを使っていることがほとんどです。
このサイトがどんなサイトか(googleなどに)理解してもらうには見出しのタグをうまく活用するということは大切なのだと、最近たくさん調べてそう思ってします。
キャッチフレーズなど、場合にもよりますが、pタグを使うよりもより見出しにしたいと思ったりします。
どのような記述にすれば、
セマンティックなコーディングができるでしょうか？
ぜひベテランの方のご意見をお聞かせ頂きたいです。
宜しくお願いします。
以下、ご回答の感想です。
hgroupはとても興味深かったですが、MDNの以下の記事を読んで、ベストアンサーを決めさせていただきました。
貴重なご意見をありがとうございました。
MDNより
<hgroup> 要素は HTML5 (W3C) 仕様から削除されましたが、 WHATWG 版の HTML には依然として含まれています。ほとんどのブラウザーで部分的に実装されており、実装が削除される可能性は低くなっています。
ただし、<hgroup> 要素の主要な目的は HTML 仕様書で定義されたアウトラインのアルゴリズムによって見出しをどのように表示するかに作用することですが、どのブラウザーでもアウトラインのアルゴリズムは実装されていないため、 <hgroup> のセマンティクスは実際のところ、理論上のものになっています。
HTML5 (W3C) 仕様書では、<hgroup>を使用せずに副見出し、サブタイトル、代替タイトル、スローガンをマークアップする方法についてアドバイスを提供しています。
回答4件
0
ベストアンサー
解釈に個人差が出やすい部分なのでこの回答は自分の場合で考えた場合のものになりますが、英字タイトルと日本語タイトルが同一のものを指し示すのであれば<h2>OUR SERVICE<br>サービスの紹介</h2>のように同じタグに収めます。
どちらかをタイトルの補足として使うのであればヘッダーであることを示して他のタグを利用します。
html
1<header> 2 <h2>サービスの紹介</h2> 3 <span>OUR SERVICE</span> 4</header>
アウトラインのレベルが変わる場合は別として、タイトルの後にコンテンツが続かないものは違和感がありますのでタイトルタグの連続使用は避けます。
小説などで例えると「第一章 プロローグ」とあってそのすぐ次に「第一章 Prologue」とあったら違和感を覚えるようなイメージです。
投稿2019/10/04 07:35
編集2019/10/04 07:36
総合スコア768
0
HTML Living Standardのhgroupの項目 に、次の例がありました。
html
1<hgroup> 2 <h1>The Avengers</h1> 3 <h1>Avengers Assemble</h1> 4</hgroup>
これは1つの映画に対するUSとUKでのタイトルを示したものです。
ご提示のシナリオも、1つのアイテムに対する日本語と英語での名称を示したものなので、同様に、次のようにしてみるというのは一つの選択肢かと思います。
html
1<hgroup> 2 <h2>OUR SERVICE</h2> 3 <h2>サービスの紹介</h2> 4</hgroup>
投稿2019/10/04 06:09
編集2019/10/04 07:43
総合スコア2982
W3CのRecommendationからは削除されているのですね、現実的にはほとんどのブラウザはWHATWGに準拠しているものと認識しているのでW3Cのほうはここしばらく見ることがなく、知りませんでした。あくまでHTML Living Standardに基づいたものである旨明記しました。
いっぽうでこんなブログもありますね、これも知りませんでした……
https://www.w3.org/blog/2019/05/w3c-and-whatwg-to-work-together-to-advance-the-open-web-platform/
回答ありがとうございます。
W3Cは知っていて良く見ていましたが、
WHATWGは知りませんでした。
こんな記述ができたら便利ですね。
廃止になったと言うことはきっと初心者には分からない事情があるのですね。
勉強になりました！
ありがとうございます。
0
勧告こそ HTML 5.2 ですが、標準はもう HTML Living Standard に移っているので thyda.eiqau さんの回答を支持します。
参考：MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/hgroup
ところで、HTML5 勧告時に hgroup についてどう書かれていたのか見ると
To mark up subheadings, consider putting the subheading into a p element after the h1-h6 element containing the main heading, or putting the subheading directly within the h1-h6 element containing the main heading, but separated from the main heading by punctuation and/or within, for example, a span class="subheading" element with differentiated styling.
Headings and subheadings, alternative titles, or taglines can be grouped using the header or div elements.
https://www.w3.org/TR/html50/obsolete.html#hgroup
今回の場合 subheadings というより alternative titles 相当と考えられるので、 nt4c さんの回答のような記述が示されていると思います。
投稿2019/10/04 09:17
総合スコア13749
そうなのですね、英語が全て理解できずまだまだ未熟ですがとても勉強になりました。
じっくり記事を解読したいと思います。
ご回答ありがとうございました！
0
使い方を見ると日本語のサブとして英語が使われていると思います。
その場合はタグを使われてもいいですし他のタグを使ってもいいと思います。
私だったら後者を選びますが
投稿2019/10/04 06:40
総合スコア10429
後者を選ぶということは、別のタグを使うということでしょうか？
理由を教えて頂れるととても有り難いです。
自分の場合は以下のようにします
<h3>あいうえお</h3>
<p>aiueo</p>
他の回答者にもあるように同じタグ（p,div,img等を除く）が複数回連続しているとコードを見ていて違和感を感じます。あと、コードを組むときの自分のくせもあるかもしれません。
なるほど、勉強になりました。ご回答ありがとうございます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/10/04 12:10
2019/10/04 13:53
2019/10/07 01:30
2019/10/07 05:36