11

次のような Web ページがあります。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Title</title>
    </head>
    <body>
        <header>
            <span>Logo</span>
            <nav>Navigation</nav>
        </header>
        <main>
            <h1>Page heading</h1>
            <div>
                Page content
            </div>
        </main>
        <footer>
            Content information
        </footer>
    </body>
</html>

ページ構造は、現在の HTML5 ドラフトの一例に似ています: http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-elementで、私はそれが意味的に正しい。

次に、CSS を使用してこのドキュメントのスタイルを設定したいと思います。ヘッダーを上部に、フッターを下部にしたいと考えていますが、もちろん簡単に実行できます。ヘッダー内では、ロゴを右側に配置し、ナビゲーションを中央に配置したいと考えています。浮きます）。

私の問題は、メインのコンテンツ ヘッダー (h1 要素) をヘッダーの左側に視覚的に配置したいときに始まります。私は position: absolute で行うことができますが、そのようなレイアウトはあまり柔軟ではなく、ヘッダーまたは見出しのサイズが変更されるとすぐに壊れてしまいます。提案された CSS グリッド レイアウトhttp://www.w3.org/TR/css3-grid-layout/は、まさに私がやりたいことを実行できるかもしれませんが、私の知る限り、IE 10 でのみサポートされています (どういうわけか) .

シンプルで有効な解決策の 1 つは、ページを単純に再構築することです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Title</title>
    </head>
    <body>
        <div>
            <h1 id="heading">Page heading</h1>
            <header>
                <span>Logo</span>
                <nav>Navigation</nav>
            </header>
        </div>
        <main aria-labelledby="heading">
            <div>
                Page content
            </div>
        </main>
        <footer>
            Content information
        </footer>
    </body>
</html>

ただし、このソリューションは簡単にレイアウトできますが、完全なセマンティクスは aria-* 属性を介してのみ表現され、HTML5 セマンティクスの精神 (特にメイン要素) に反するようです。

サンプル ページは単純かもしれませんが、より多くの要素の視覚的位置が HTML5 マークアップのフロー順序と同じ順序ではない (そして、フレキシブル ボックス レイアウトの順序プロパティが優先されるようにネストされている) より複雑なページを簡単に想像できます。十分ではありません）。どのように問題を解決しますか? 非セマンティック要素 (div など) を使用して HTML5 マークアップを書き直して、ビジュアル レイアウトにより対応するようにし、非セマンティック要素を可能な限りセマンティック要素 (フッターやメインなど) と新しい構造に交換しますか?

4

3 に答える 3

6

私はあなたと同じ難問に直面しており、フラストレーションに感謝しています。これらの肯定的な答え（両方の目的を達成できるということ）の両方が要点を逃していると思うので、私は否定的な答えを試みます。

まず、私が見ているように、主な問題は、CSS が要素を新しいコンテナーに移動できないことです。2 つの答えは、次の 2 つのカテゴリに分類されます。

  1. 一部は非常に具体的ですフロート、負のマージン、および/または絶対配置を含む (主観的に言えば) ハック。これらは効果的ですが、非常に特殊な場合に限られます。ニーズが大きくなるにつれて、維持が難しくなり、以前に見逃していた新しいニーズやエッジ ケースごとに対処するために、かなり大きな思考の上限を設定する必要があります。@jennifit による回答は、あなたをこの方向に動かそうとします。これは、セマンティック HTML5 の精神に従おうと懸命に努力している人々がたどる通常のルートであり、称賛に値すると私は信じています。しかし、意味の純粋さを誰のために維持しているのかを正確に尋ね始めるのは、泥沼になる可能性があります。検索エンジン、スクリーン リーダー、またはメンテナンスの容易さのためですか? これについては、次の分類の後で説明します。

  2. 意味的に同等であると主張する実用的な合理化もありますが、実際には異なる意味論的意味です。私の意見では、これらは本当にセマンティックハッキングです。@ volker-e の答えはこの例です。彼の言うとおり、これは機能する可能性のある代替マークアップですが、同じセマンティックな意味にはなりません。ページのh2ヘッダー内に移動mainしh1ても意味がありません。実際、見出しはメイン コンテンツとは無関係だと言っているのです。これは、ある意味では、使用したい div を使用するよりも悪いです。これは、 page-header と site-header を同じ意味的に重要な にグループ化することで、誤った意味関係を作成しているためですheader。意味的に無意味なコンテナ、divheader、との両方についてmain、私の意見では、実際にはあまりひねくれていません。

つまり、誰のためにセマンティックな純粋性を維持しているのかについて私が言ったことに戻ると、これは真の哲学的問題です。多くの場合、既存のセマンティック要素や CSS の「トリック」を合理的に誤用することなく、明白で効果的で保守可能なソリューションが存在します。あなたの場合、意味的には子であるが、提示的には子ではないアイテムを持つことの答えは、あなたがすでに質問として出したものです：

HTML5 マークアップを非セマンティック エレメント (div など) で書き直して、ビジュアル レイアウトにより対応するようにし、非セマンティック エレメントを [sic] セマンティック エレメント (フッターやメインなど) で可能な限り新しい構造に交換します。

セマンティックピュアが意図されているかどうかにかかわらず、これは正しいことです

  • アクセシビリティ: この場合、ARIA ロールを使用して非階層的な方法でそれを実現できます。
  • 検索エンジン: 検索エンジンは今でも古いやり方を理解しています。そのため、セマンティクスに対する古いアプローチに従えば、SEO の問題に巻き込まれることはありません。
  • 保守: これが、ほとんどの人が誘惑される理由です -- しかし、問題は、保守可能な HTML と保守不可能な CSS のポイント、またはその逆のポイントは何なのかということです。保守を CSS と HTML の両方の組み合わせと見なす以外に選択肢はありません。表示上の困難な問題に遭遇した場合は、両者が等しく混乱する中間点を見つける必要があります。

HTML セマンティクスがすべて重要であると思われる場合、他の唯一の可能な答えは、階層的な HTML セマンティクスがレイアウトに課す制限を受け入れることです。問題は、CSS でレイアウト階層を再作成する方法がないことです。それが実現するまでは、 HTML が表現言語であると同時にセマンティック言語でもあることを受け入れる必要があります。したがって、セマンティクスは常に「良い」か「悪い」かの問題になります。真に美しい、豊かな、または完璧なセマンティクスは、ほとんどではないにしても、多くのレイアウトでは達成できません。

于 2014-04-11T23:10:12.247 に答える