CODEWITHSUNDEEP
htmlhtml-listshtml-heading
Anna K.
Anna K.

Reputation: 1995

Are H1, H2 etc valid inside DLs?

Can I have heading elements inside definition lists?

Example:

<dl>
 <h4> heading </h4>

 <dt> title </dt> <dd> content </dd>
 <dt> title </dt> <dd> content </dd>
 <dt> title </dt> <dd> content </dd>

 <h4> heading </h4>

 <dt> title </dt> <dd> content </dd>
 <dt> title </dt> <dd> content </dd>
 <dt> title </dt> <dd> content </dd>

</dl>

It seems to work as expected in my browser :)

Upvotes: 3

Views: 2285

Answers (3)

user3256207
user3256207

Reputation: 1

you could add 2 dt tags one with a class

dt.heading {
  font-weight: bold
}
<dl>
  <dt class="heading">Heading</dt>
  <dt>milk</dt>
  <dd>white discharge</dd>
</dl>

lets you have multiple after each other since multiple terms can have the similar if not the same definition. like wise you can have multiple since a term can have a few different meanings. And even thou you are changing the way it looks via CSS this wont be a true Heading and will porb get skipped by search engines etc... maybe have a hidden h1 tag with seo content

Upvotes: 0

Tim Coker
Tim Coker

Reputation: 6524

FWIW, you can use the w3c markup validator in direct input mode to check code snippets.

Browsers are VERY tolerant of bad html, and not conforming to the rules, even though it works now, might mean your page/layout breaks with a future browser update.

I added the required other elements to get your code to validate as noted below. Complains about exactly what David Thomas says.

 <!DOCTYPE html>
    <html>
        <head>
            <title>asdf</title>
        </head>
        <body>
            <dl>
                 <h4> heading </h4>

                 <dt> title </dt> <dd> content </dd>
                 <dt> title </dt> <dd> content </dd>
                 <dt> title </dt> <dd> content </dd>

                 <h4> heading </h4>

                 <dt> title </dt> <dd> content </dd>
                 <dt> title </dt> <dd> content </dd>
                 <dt> title </dt> <dd> content </dd>
            </dl>
        </body>
    </html>

Upvotes: 1

David Thomas
David Thomas

Reputation: 253328

No; the only elements that might be valid within a dl are dd and dt.

The reason it may appear to work is error handling by the browser, which is both unpredictable and, so far as I can tell, mostly undocumented and therefore should not be relied upon.

Though interestingly, as Šime Vidas notes in the comments (below), Firefox, Chrome, Safari, Opera and Internet Explorers 7 and 9 don't correct the structure and allows the heading elements to remain within the dl. Which strikes me as being weird.

It is, though, while tolerated, still invalid. Whether or not you choose to respect that validity is, of course, optional.

References:

Upvotes: 7

Related Questions