4 ms·

I'm curious if the spec actually says you can only wrap it with a div because I like to do semantic html and name my elements specific to my domain.

philo23 5mo ago
Yep, I was a little surprised about that too, seem like it is valid though https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dt#technical_summary https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
Tomte 5mo ago
Yes: https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element https://html.spec.whatwg.org/multipage/grouping-content.html...
deleted 5mo ago
[deleted]
wonger_ 5mo ago
Seems like div is the only recommended wrapper element: https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element https://html.spec.whatwg.org/multipage/grouping-content.html... https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dl#technical_summary https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/... EDIT everyone replied at once lol. I'm surprised too about div. Also, screen reader support: https://a11ysupport.io/tech/html/dl_element https://a11ysupport.io/tech/html/dl_element
moron4hire 5mo ago
Custom-named elements are divs.
- jazzypants 5mo ago
  Exactly! It cracks me up when people name-check "semantic elements" when it doesn't actually mean anything in that context. Accessibility software doesn't understand the semantics of your custom elements, so there is no benefit in that situation whatsoever. Maybe it's easier for you to read and edit in the future, but that's it. Somehow, people got convinced that <div> elements are evil and should never be used no matter what. Yes, you should use a more semantic element when it makes sense, but try to remember what that phrase actually means.
  - phyzix5761 5mo ago
    I use it for readability and to express intention and meaning to the reader of my program. In the age of AI, perhaps, we've lost the need for that. But it was much appreciated in times before by those who came upon my code.
    - jazzypants 5mo ago
      That's great! There's nothing wrong with that. However, "semantic elements" became popular shortly after the push for the "semantic web" which was entirely based around making the web easier to process for machines. Many of the original sources talk about how it's easier to digest for humans too, but that's just a happy byproduct. https://www.w3.org/DesignIssues/Semantic.html https://www.w3.org/DesignIssues/Semantic.html https://www.lassila.org/publications/2001/SciAm.pdf https://www.lassila.org/publications/2001/SciAm.pdf https://informationr.net/ir/7-4/paper134.html https://informationr.net/ir/7-4/paper134.html https://jonchristopher.us/blog/a-semantic-breakdown-of-restaurant-menus/ https://jonchristopher.us/blog/a-semantic-breakdown-of-resta... https://shapeshed.com/the-importance-of-semantic-markup/ https://shapeshed.com/the-importance-of-semantic-markup/ https://www.w3.org/TR/html-design-principles/ https://www.w3.org/TR/html-design-principles/ https://microformats.org/wiki/posh https://microformats.org/wiki/posh
- phyzix5761 5mo ago
  They're not as you can see here[1] and here[2]. They both inherit from the HTMLElement interface but div is considered an HTMLDivElement which makes it distinct from a custom element. <my-element> != <div> [1] https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements https://developer.mozilla.org/en-US/docs/Web/API/Web_compone... [2] https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElem...
  - deleted 5mo ago
    [deleted]
  - moron4hire 5mo ago
    HTMLDivElement has no properties or methods not inherited from HTMLElement. If you inspect the user-agent styling of div versus any non-standard named element, you'll see that they have the same styling path, specifically unlike with span. In other words, non-standard elements and divs are all block elements with the default HTMLElement attributes and methods. The use of HTMLElement and HTMLUnknownElement for the non-standard elements is to support future additions to the standard elements and enable subclassing down-tree instead of across-tree, which is noted in the spec.
- deleted 5mo ago
  [deleted]
notnullorvoid 5mo ago
As others have noted only the div is allowed. This isn't a unique situation either, the HTML spec despite being lenient in syntax is quite restrictive in behavior. It's unfortunate that XHTML (and XML parsing) didn't become the default as it's the opposite, more restrictive syntax, but lenient behavior. For example in XHTML you can use custom elements as table rows or cells (provided you give them the correct role and CSS display property). This is because XHTML does not modify the tree during parsing, unlike HTML which will hoist out custom element children of the table to the table's parent.

philo23 5mo ago

Yep, I was a little surprised about that too, seem like it is valid though https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dt#technical_summary https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

Tomte 5mo ago

Yes: https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element https://html.spec.whatwg.org/multipage/grouping-content.html...

deleted 5mo ago

[deleted]

wonger_ 5mo ago

Seems like div is the only recommended wrapper element: https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element https://html.spec.whatwg.org/multipage/grouping-content.html... https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dl#technical_summary https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/... EDIT everyone replied at once lol. I'm surprised too about div. Also, screen reader support: https://a11ysupport.io/tech/html/dl_element https://a11ysupport.io/tech/html/dl_element

moron4hire 5mo ago

Custom-named elements are divs.

jazzypants 5mo ago
Exactly! It cracks me up when people name-check "semantic elements" when it doesn't actually mean anything in that context. Accessibility software doesn't understand the semantics of your custom elements, so there is no benefit in that situation whatsoever. Maybe it's easier for you to read and edit in the future, but that's it. Somehow, people got convinced that <div> elements are evil and should never be used no matter what. Yes, you should use a more semantic element when it makes sense, but try to remember what that phrase actually means.
- phyzix5761 5mo ago
  I use it for readability and to express intention and meaning to the reader of my program. In the age of AI, perhaps, we've lost the need for that. But it was much appreciated in times before by those who came upon my code.
  - jazzypants 5mo ago
    That's great! There's nothing wrong with that. However, "semantic elements" became popular shortly after the push for the "semantic web" which was entirely based around making the web easier to process for machines. Many of the original sources talk about how it's easier to digest for humans too, but that's just a happy byproduct. https://www.w3.org/DesignIssues/Semantic.html https://www.w3.org/DesignIssues/Semantic.html https://www.lassila.org/publications/2001/SciAm.pdf https://www.lassila.org/publications/2001/SciAm.pdf https://informationr.net/ir/7-4/paper134.html https://informationr.net/ir/7-4/paper134.html https://jonchristopher.us/blog/a-semantic-breakdown-of-restaurant-menus/ https://jonchristopher.us/blog/a-semantic-breakdown-of-resta... https://shapeshed.com/the-importance-of-semantic-markup/ https://shapeshed.com/the-importance-of-semantic-markup/ https://www.w3.org/TR/html-design-principles/ https://www.w3.org/TR/html-design-principles/ https://microformats.org/wiki/posh https://microformats.org/wiki/posh
phyzix5761 5mo ago
They're not as you can see here[1] and here[2]. They both inherit from the HTMLElement interface but div is considered an HTMLDivElement which makes it distinct from a custom element. <my-element> != <div> [1] https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements https://developer.mozilla.org/en-US/docs/Web/API/Web_compone... [2] https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElem...
- deleted 5mo ago
  [deleted]
- moron4hire 5mo ago
  HTMLDivElement has no properties or methods not inherited from HTMLElement. If you inspect the user-agent styling of div versus any non-standard named element, you'll see that they have the same styling path, specifically unlike with span. In other words, non-standard elements and divs are all block elements with the default HTMLElement attributes and methods. The use of HTMLElement and HTMLUnknownElement for the non-standard elements is to support future additions to the standard elements and enable subclassing down-tree instead of across-tree, which is noted in the spec.
deleted 5mo ago
[deleted]

notnullorvoid 5mo ago

As others have noted only the div is allowed. This isn't a unique situation either, the HTML spec despite being lenient in syntax is quite restrictive in behavior. It's unfortunate that XHTML (and XML parsing) didn't become the default as it's the opposite, more restrictive syntax, but lenient behavior. For example in XHTML you can use custom elements as table rows or cells (provided you give them the correct role and CSS display property). This is because XHTML does not modify the tree during parsing, unlike HTML which will hoist out custom element children of the table to the table's parent.