質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • HTML

    9279questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • HTML5

    4177questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • タグ

    57questions

    特殊な記法により文書に埋め込む形で記述される付加情報をタグと呼びます。文書構造や書式、文字飾りなどを指示したり、画像や他の文書へのリンクを埋め込むことができる。

HTML5:<article>と<section>と<h>タグの記述法の見直し

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 3,383

makoto-n

score 339

現在はwordpressでこのように出力されるように記述しています。
ですが、HTMLのより典型的な記述法に仕様と思っています。
role属性は引き続き記載したままにする予定です。

↓現状はこの形です。
<main role="main">
    <div class="post">
        <section class="sec">
            <h2>タイトル</h2>
            <div class="post-meta">    //meta情報
                <span class="post-date">2015/9/15</span>
                <span class="category"><a href="カテゴリ" rel="category tag">日記</a></span>
                <span class="comment-num">Comment&nbsp;:&nbsp;<a href="コメント">0</a></span>
            </div>
            <article>    //本文
                <p>~~~<a href="リンク">……続きを読む</a></p>
            </article>
        </section>
    </div>
</main>

このままでも問題なく動作するのですが、「W3C」でチェックすると、

    <article>内に<h2>を記載せよ
という警告がでます。なので
<article>
    <div class="post">
        <h2>タイトル</h2>
        <section class="meta">    //meta情報
        </section>
        <section class="">    //上記の<article>にあたる要素
        </section>
    </div>
</article>
<article><section>を置き換えたほうがいいでしょうか?
<section><article>の子要素として扱って大丈夫ですか?

自分はずっと<article><section>の中に記述するものだとばかり思っていました。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

0

<article><section>を置き換えたほうがいいでしょうか? 
単純に元のコードでsectionとarticleを入れ替えただけでは、
今度は  <section>内に<h2>を記載せよ  という警告が出ると思います。

section、article、aside、navの4つのセクション要素のうち、
<section>と<article>には原則として見出し要素<h2> - <h6>を記述することが推奨されているからです。

理由は、そもそも「セクション」というもの自体が「見出しとそれに伴うコンテンツのひとかたまり」
を指すものであるため、自然に見出しがつかない領域に対してsection要素やarticle要素を使うこと自体
不自然であるとみなされるからです。

(ただし見出しを伴わないセクションが全てNGかというとそうでもありません。
意味的には明らかにセクションでも、デザイン的に敢えて見出しを立てないようなケースもあるからです。)


<section>は<article>の子要素として扱って大丈夫ですか?
<article>の中に<section>が入るのも、<section>の中に<article>が入るのも、
文法的にはどちらも問題ありません。
ただし、<article>は「自己完結した独立したセクション」<section>は「一般的なセクション」
のように意味付けの役割が異なりますので、どのような構造にするかについては
文書の内容に合わせて適切に設定することが求められます。

自分はずっと<article>は<section>の中に記述するものだとばかり思っていました。
そういう縛りはありません。実際のコンテンツの意味合いと文書構造に合わせて
その都度適切に記述してください。

今回の文書の場合であれば、h2要素タイトルを包む .sec を<section>または<article>とし、
本文〜となっている部分についてはh3で小見出しを立てないのであれば<div>、
h3で小見出しを立てるのであれば<section>とするのがよろしいかと思われます。
.secを<section>、<article>のどちらにすればよいかは内容次第ですが、
発行年月日もついていることですし、ブログ記事的なものであれば<article>の方がふさわしいのではないかと推測します。

あと、別に必須ではないですが、タイトルとメタ情報をまるっと<header>に入れても良いと思います。
その方がセクション内のヘッダー情報と本文領域が明確になるので。


【補足】
他の方が「main要素の中でsection要素を使用する必要はない」とコメントされてますが、
文書構造がそうなっているならmain要素の中で他のセクション要素を使うことは何ら問題ありませんし、
Web文書であれば普通は使うことになります。
逆にセクション要素の中でmain要素を使うことは文法違反になります。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/16 12:38

    わかりやすく説明していただいてありがとうございます!

    キャンセル

0

W3Cの解説ではそれぞれに
<article> ・・・ 文書、ページ、アプリケーション、またはサイトの中で完全もしくは自己完結した構造
<section> ・・・ 文書またはアプリケーションの一般的セクション
とありましたので、組み合わせて使うならば

<article>
  <header>
    <h2>表題</h2>
  </header>
  <section>
    <h2>セクション1</h2>
  </section>
  <section>
    <h2>セクション2</h2>
  </section>
</article>

が正しい用法のようです

こちらのサイトでの解説がわかりやすかったので参考までに
html5の要素articleとsectionの違いを理解する

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

section要素はアウトライン生成の為にある要素です。
main要素はアウトラインに影響しない為、main要素の中でsection要素を使用する必要はないと思います。

4.4.14 main要素 — HTML5 日本語訳
4.3.3 section要素 — HTML5 日本語訳
4.3.10 見出しとセクション — HTML5 日本語訳

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

関連した質問

同じタグがついた質問を見る

  • HTML

    9279questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • HTML5

    4177questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • タグ

    57questions

    特殊な記法により文書に埋め込む形で記述される付加情報をタグと呼びます。文書構造や書式、文字飾りなどを指示したり、画像や他の文書へのリンクを埋め込むことができる。