Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
525 views
in Technique[技术] by (71.8m points)

validation - Is there a valid way to wrap a dt and a dd with an HTML element?

I wish HTML could do something semantically equivalent to this;

<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>

However, since the closest I've come is something I'm not 100% satisfied with the semantics of;

<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>

I was wondering if anyone has any other ideas of how you might do this?

Also, the reason the items would be grouped is because they are visually grouped in the content that is being marked up. Imagine a dictionary page, with a single definition list, where each definition is in an inset box that is floated left. I run into this situation all the time.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

No, Ian Hickson (HTML spec editor) is convinced that this is a CSS problem, not an HTML one:

This shouldn't be necessary. It's a limitation of CSS.

The right solution is for CSS to provide some pseudo-element or other mechanism that introduces an anonymous container into the rendering tree that wraps the elements you want to wrap.

At the same time, fantasai (CSS spec editor) is convinced in contrary:

I don't think this is a CSS problem. I think it's an HTML problem. Pseudo-elements are a non-trivial thing to spec, and a non-trivial thing to implement, and a comparatively confusing thing to use.

Nevertheless, Ian apparently ignores that and continues to be detached from reality.

There are same problems with LEGEND (that must be first direct child of FIELDSET according to HTML spec), FIGCAPTION (that must be first/last direct child of FIGURE), and LI (direct child of UL/OL).

As for DT/DD in particular, I personally use UL list with DL inside each of 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>

So we have DL to make relation between DT and DD, and UL list to make them all belong to one list.

Update (2016-11-14): The HTML standard (WHATWG version for now) now (since 2016-10-31) allows the DIV element (optionally intermixed with so-called script-supporting elements SCRIPT, TEMPLATE) to be direct children of DL elements. W3C’s HTML validator does not account for this change yet, but the experimental HTML5.org validator does.

Update (2017-01-18): Turns out the spec does not allow more than one nested DIV wrapper for DT/DD, so usefulness of the feature in practice is actually very limited and the ULLIDL approach described here is still relevant.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...