5

私は HTML5 を初めて使用し、ホームページのメイン コンテンツの横の列にある Call to Action div でどの HTML5 タグを使用すべきか疑問に思っています。

オプション1：

<aside>
    //call to action
</aside>

オプション 2:

<article>
    <section>
       //call to action
    </section>
</article>

私が尋ねる理由は、どちらのオプションも完全に適合するとは思わないからです。おそらく私は何かが欠けています。ありがとう！

Call to Action の私の HTML:

        <section class="box">
            <hgroup>
                <h1 class="side">Call Now</h1>
                <h2 class="side">To Schedule a Free Pick-Up!</h2>
                    <ul class="center">
                        <li>Cleaning</li>
                        <li>Repair</li>
                        <li>Appraisals</li>
                    </ul>
                <h3 class="side no-bottom">(781) 729-2213</h3>
                <h4 class="side no-top no-bottom">Ask for Bob!</h4>
            </hgroup>
            <img class="responsive" src="img/satisfaction-guarantee.png" alt="100% Satisfaction Guarantee">
            <p class="side">We guarantee you will be thrilled with our services or your money back!</p>
        </section>

これは、3 列のレイアウトの右側の列にあるボックスです。中央の大きな列の内容は、同社のサービスの概要を示しています。これらのサービスを利用したい場合は、ピックアップをスケジュールする必要があるため、行動を促すフレーズです.

この HTML5 の使用に異議を唱える人はいますか、それとももっと良い方法がありますか?

4

4 に答える 4

7

私の見解では、新しい HTML5 構造要素のベスト プラクティスはまだ作成中であり、新しい HTML5 経済の寛容な性質は、アプリケーションにとって最も意味のある規則を確立できることを意味します。

私のアプリケーションでは、ビューのレイアウト(つまり、ページ間の全体的な一貫性を作成するテンプレート) とコンテンツ自体を反映するマークアップについて、別々に考慮しています。(通常、レイアウト内のさまざまな領域に挿入される前に追加のマークアップを受け取る関数またはクエリの結果)。マークアップは通常、ページからページへと繰り返されるため、レイアウト要素のセマンティクス (ヘッダー、フッター、脇など) は検索中のコンテンツの区別に実際には役立たないため、この区別は重要です。私は特に、ユーザーが実際に検索しているコンテンツを説明するために、HTML5 のセマンティックの区別を使用することを好みます。たとえば、記事を使用してプライマリ コンテンツをラップし、nav を使用して関連するリンクのリストをラップします。通常、ウィジェット ラッパーはページ レイアウトに関連付けられているため、そのガイドラインのテンプレートの規則に従います。

セマンティック名とジェネリック名を決定する必要があるときはいつでも、私の一般的なヒューリスティックは次のとおりです。

  • ページ テンプレートに既に前例がある場合は、その前例に従います。
  • 問題の要素がページ レイアウトの新しい部分 (レイアウト内の領域にレンダリングされるコンテンツ クエリに対して) であり、テンプレートにガイド パターンがまだない場合、そのページ レイアウトの動作を関連付けるには div が適しています。
  • コンテンツが動的に作成される場合 (つまり、リクエスト時にレイアウトにインスタンス化されるものすべて -- 投稿、ナビゲーション、ほとんどのウィジェット) は、そのアイテムが何であるかを最もよく説明するセマンティック ラッパーでラップします (vs どうあるべきか)。現れる）
  • コンテンツをオーサリングまたは生成するときは常に、そのコンテンツ内で必要に応じてセマンティック HTML5 マークアップを使用します (階層的な見出しを囲む hgroup、記事内のチャンクを整理する section など)。これは、検索のための将来性のあるエンリッチメントです。

このすべてによると、ページ テンプレートで別のウィジェット ラッパーが既に確立されていない限り、ウィジェットのラッパーとして div は問題ありません。また、ウィジェット内で大きく太字の外観を作成するために見出し要素を使用することは、セマンティクスではなく外観のためにマークアップを使用しています。あなたの特定の使用法は外観に動機付けられているので、CSS クラスで div または span を使用して、特定されていないテキストのサイズ、間隔、およびその他の装飾を必要に応じて指定できるようにする方が、ブラウザのデフォルトをオーバーライドするよりも優れています。見出し要素。ページの見出し、ウィジェットの見出し、およびページのプライマリ コンテンツ領域内の見出しの見出し要素を保存します。メイン コンテンツの一部ではない見出しの誤用により、SEO ランキングの問題が発生する可能性があります。

これらのアイデアが、HTML5 マークアップの使用を検討する際に役立つことを願っています。

于 2013-02-19T18:34:53.550 に答える
3

マークアップのセマンティクスに関する限り、ドンのアドバイスは理にかなっています。（CTAは視覚的にメインコンテンツの横にあり、そのコンテンツのセカンダリであるとおっしゃっていましたが、私は賛成asideですが、正解は1つではありません。）

ただし、質問に「seo」のタグを付けているので、適切なマークアップを使用することによるSEOのメリットに関心があると思います。現時点では、Googleは優れたセマンティックマークアップを重視していません---、、、などの違いについては気にしasideませsectionんdiv。これは、これらのタグの意味がまだ定義されているためかもしれませんが（Web開発者の実践によって）、明らかに関連性のある検索結果であるタグを無視しているようです（たとえば、navほとんどの場合、ページの説明とは無関係です。検索結果）。

代わりに、豊富なセマンティクスをマークアップするためにマイクロデータを使用することを強く支持しています。短期的には、Schema.org WebPageマイクロデータを使用してページをマークアップすると、より大きなメリットが得られる可能性があります。CTAをrelatedLinkまたはとしてマークし、ページのsignificantLink外側に保持することができmainContentます。あなたが検索のためにあなたのページを最適化することを探しているなら、これはそれをするための素晴らしい方法です---私の経験では、GooglemainContentは検索結果の説明であなたのブロックの外にテキストを表示することはめったにありません。

于 2013-02-21T17:03:06.380 に答える
1

適切なマークアップは、提供していない実際のコンテンツによって異なります。

<div>つまり、タグにはセマンティックな値がないため、コンテンツが何であれ、すべてを div でラップすることは問題ありません (おそらく不要ですが) 。あなたの「行動を促すフレーズ」が文字通り記事全体でない限り、あなたの2つの例はおそらく正しくありません（私はそうではないと思います）。

行動を促すフレーズは 内で発生する可能性がありますが、行動を促すフレーズ自体が脇<aside>にある可能性は低いです。繰り返しますが、それはコンテンツ(それが何であるか) とコンテキスト(他のコンテンツとの関係)に依存します。

通常、「行動喚起」はどこかのリンクであるため、私にとって明らかな答えはアンカーを使用することです<a>.

于 2013-02-19T01:13:28.983 に答える
0

他のページへのリンクです。divを使用します。

于 2013-02-19T01:12:53.463 に答える