web-dev-qa-db-ja.com

HTML5記事のマークアップ

だから私は記事のために次のHTMLを持っています（この場合はポートフォリオ作品の一部）

<article class="work">
        <div class="col-row clearfix">
            <div class="col-large">
                <header>
                    <h1>OS X Yosemite</h1>
                    <p class="work-meta">The World's Most Advanced Operating System</p>
                </header>
            </div>
        </div>
        <div class="col-row container clearfix">
            <div class="col-small">
                <aside>
                    <dl>
                        <dt>Client</dt>
                        <dd>Apple, Inc</dd>
                        <dt>Role</dt>
                        <dd>Lead designer and front-end developer / co-back-end developer</dd>
                        <dt>Dates</dt>
                        <dd>2011 to present</dd>
                        <dt>Type</dt>
                        <dd>Web Application</dd>
                    </dl>
                </aside>
            </div>
            <div class="col-large">
                <section>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <figure>
                        <img src="http://lorempixel.com/1024/1024">
                    </figure>
                </section>
            </div>
        </div>
    </article>

ご覧のとおり、HTMLタグarticle、header、section、およびasideを使用しますが、これらは記事のデザインをレイアウトするためのさまざまなdivタグに含まれていますページ。

質問は基本的に、どのように記事を分割すると、ブラウザ、検索エンジンなどによるHTML5タグの表示に影響するかです。代わりにdiv行をHTML5タグ内に配置し、代わりにクラスを移動する必要がありますdivを使用しています...レイアウトにdivを使用し、HTML5タグを使用して領域の意味的な意味を純粋にマークアップしたかったため、上記のアプローチを選択しました。

seohtml5markup
1
Cameron

div要素は何も意味しません。
コンテンツの意味に関心のある消費者は、それらを単に無視します（つまり、RDFa、Microdata、またはMicroformatsで使用される属性値など、考えられる属性値を抽出した後）。これらの消費者にとっては、divが別の要素の親であるか子であるかは関係ありません（好きなことをしてください）。

ただし、div要素を省略して、意味のある要素にclass値を配置できる場合は、それを行う必要があります。不要な要素が追加されているのはなぜですか？

2
unor

私の意見では、articleタグを適切に使用するためには、headerの最初/先頭にAarticle、Amainがあります。少なくとも1つのsection（再度欠落））、Figure（適切に含まれる）を含むaside（欠落）、およびSummaryを含むDetailsタグ（終わり近く）。そして、あなたの「記事」が完了した後、最後に、著者の情報にFooterを含める必要があります。 divは意味的には何も意味しませんが、私が説明した残りのタグはすべて意味的な値と説明を持っています。おそらく（必ずしもそうではないが）divの数を少なくすることをお勧めします。最初に記事の主要部分に焦点を当てます。これは、テキストと引数に加え、研究、ドキュメント、リンク、およびメディア（画像と映画）をサポートします。 ..すぐに入手できます！私の兄弟、努力してください。

0
Sean Tank Garvey