web-dev-qa-db-ja.com

dtとddをHTML要素でラップする有効な方法はありますか？

HTMLがこれと意味的に同等のことをできることを望みます。

<dl class="main-list">
    <definitionitem>
        <dt>Some Thing</dt>
            <dd>You know it!</dd>
        <dt>Another Thing</dt>
            <dd>Word.</dd>
    </definitionitem>
    <definitionitem>
        <dt>Stuff</dt>
            <dd>Alright!</dd>
    </definitionitem>
</dl>

しかし、私が最も近づいたのは、のセマンティクスに100％満足していないものです。

<div class="redundant-wrapper">
    <dl class="main-list">
        <dt>Some Thing</dt>
            <dd>You know it!</dd>
        <dt>Another Thing</dt>
            <dd>Word.</dd>
    </dl>
    <dl class="another-main-list">
        <dt>Stuff!</dt>
            <dd>Alright!</dd>
    </dl>
</div>

誰かがあなたがこれをどのように行うことができるかについて他のアイデアを持っているかどうか疑問に思いましたか？

また、アイテムがグループ化される理由は、マークアップされているコンテンツで視覚的にグループ化されているためです。単一の定義リストを持つ辞書ページを想像してみてください。各定義は、左に浮かぶ挿入ボックスにあります。私はいつもこの状況に遭遇します。

htmlvalidationsemanticsw3cspecifications
47
Jo Sprague

いいえ、Ian Hickson（HTML仕様エディター）は 確信 これはCSSの問題であり、HTMLの問題ではないことを示しています。

これは必要ないはずです。これはCSSの制限です。

正しい解決策は、CSSが、ラップする要素をラップするレンダリングツリーに匿名コンテナを導入する疑似要素またはその他のメカニズムを提供することです。

同時に、fantasai（CSS仕様エディター）は 反対 ：であると確信しています。

これはCSSの問題ではないと思います。 HTMLの問題だと思います。疑似要素は、仕様にとって重要なことであり、実装することも重要であり、使用するのは比較的紛らわしいことです。

それにもかかわらず、イアンは明らかにそれを無視し、現実から切り離され続けています。

LEGEND （HTML仕様によるとFIELDSETの最初の直接の子である必要があります）、 FIGCAPTION （FIGUREの最初/最後の直接の子である必要があります）、およびLI（UL/OLの直接の子）。

特にDT/DDに関しては、私は個人的にULリストを使用します。各DL内にLIが含まれています。

<ul>
    <li><dl>
        <dt>Lorem</dt>
        <dd>Lorem definition</dd>
    </dl></li>

    <li><dl>
        <dt>Ipsum</dt>
        <dd>Ipsum definition</dd>
    </dl></li>
</ul>

したがって、DLとDTの関係を作成するためのDDと、それらすべてを1つのリストに属するようにするためのULリストがあります。

更新（2016-11-14）：HTML標準（ WHATWGバージョン 今のところ）（2016-10-以降） 31） allowsDIV要素（オプションで、いわゆるスクリプトサポート要素SCRIPT、TEMPLATEと混合）をDL要素の直接の子にします。 W3Cの HTMLバリデーター はこの変更をまだ説明していませんは説明していませんが、実験的な HTML5.orgバリデーター は説明しています。

更新（2017-01-18）：仕様は notDIV /に複数のネストされたDTラッパーを許可することが判明しましたDDであるため、実際の機能の有用性は実際には非常に限られており、ここで説明するUL→LI→DLアプローチは依然として適切です。

62
Marat Tanalin

dd-dtラッピングに関するレポ があります。 html仕様によるとそれは何ですか それぞれをラップしてもOK dd＆dtとDL内のdivタグ。

<dl>
   <div>
     <dt>Bolster</dt>
     <dd>to support, strengthen, or fortify</dd>
   </div>
   <div>
     <dt>Capitalize</dt>
     <dd>to use to your advantage</dd>
   </div>
</dl>
6
Rachelbt

2018年です！ CSSグリッド は十分にサポートされており、主な目標がdt/ddの配置を制御することである場合、これは問題に対するさらに別の可能な解決策/回避策を提供します。 ..

HTML

<dl>
    <dt>Favorite food</dt>
    <dd>Pizza</dd>

    <dt>Favorite drink</dt>
    <dd>Beer</dd>
</dl>

CSS

dl {
    display: grid;
    grid-template-columns: min-content 1fr;
}

（grid-template-columnsの値を微調整して、特定の設計要件に一致させることができます。）

これは仕様の制限を「解決」するものではありませんが、セマンティックマークアップに関する懸念について具体的に言及されているので、役立つと思いました。上で述べたように、グリッドで実行できることには制限がありますが、目標がdt/ddのレイアウトを制御することである場合、これが最も意味的な方法であると思います。それはまだ有効なHTMLです。

3
emersonthis