TL;DR
Which elements can be nested inside the <dialog> element?
When I look at examples like this, this and this they all place elements like <h3>, <p> and <button> as child nodes to the <dialog> element.
However, the Visual Studio (2013) intellisense list only the following elements:
content
dd
dt
shadow
template
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<dialog role="dialog">
<content></content>
<dd></dd>
<dt></dt>
<shadow></shadow>
<template></template>
</dialog>
</body>
</html>
Now, if I add a <div> element to the <dialog> element
<dialog role="dialog">
<div></div>
</dialog>
Visual Studio will complaint that:
Element 'div' cannot be nested inside element 'dialog'.
The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.
I also looked at the W3 docs but to no avail.
So I ask again: Which elements can be nested inside the <dialog> element?
The dialog element is not part of any approved specification (recommendation). What comes closest to a standard for it is the HTML 5.1 draft, which you cite and which says that any flow content is allowed. This means pretty much anything you can put inside a document body, surely including div. The WHATWG “HTML Living Standard” description of dialog has the same content model.
Visual Studio apparently has its own idea of dialog.
In any case, browser support (or lack thereof) currently makes dialog rather useless except in experimentation and in limited contexts (like application designed to run on a specific browser).
Update for 2022: <dialog> indeed made it in our browsers with production-ready support: https://caniuse.com/?search=dialog and as per the specification, any flow content can be used.
Related
I did not realize is it bad or not, according to the W3C rules about HTML semantic writing - how we should write the button element with descended elements?
In way, like this one:
<button>
<div>
<span>'hi'</span>
</div>
</button>
or only this:
<button>'hi'</button>
I tested your code in W3C Validator & the error shown is
Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)
Basically the specification does not allow that.
It might work for you but it's not the best practice.
As you can see here button must be no interactive content descendant.
You also can verify your html in here
Nested tags within a <button> is not valid and returns the following when tested:
Element div not allowed as child of element button in this context.
Non-nested tags is the correct way to go.
See for your self if you like. I used the follow HTML to test:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Button test HTML</title>
</head>
<body>
<button>
<div>
<span>'not valid'</span>
</div>
</button>
<button>Valid</button>
</body>
</html>
The button element may contain elements that are phrasing content without also being interactive content. In other words: elements that get used on the intra-paragraph level (sometimes called inline elements), and that don’t allow user interaction.
For example, this means it may contain span elements, but not div elements. So this is valid:
<button>
<span>'hi'</span>
</button>
I am creating some HTML fragements, the fragements will be wrapped in a DIV tag - ie its parent.
I do not have access to the DIV parent tag.
The fragment could be anything.
I want to be able to distinguish between different fragments. My idea was to insert a html element as metadata as the first element in the fragement.
The parent div can then identify what type it is by searching its first child for the meta information.
ie
<div class="parent">
<metatag fragement="fragementid"/>
<p>...</p>
<p>...</p>
</div>
My question is, is there a HTML tag for this purpose?
Go through: http://www.w3.org/tr/html401/struct/global.html for better understanding on HTML structure.
Still you can add meta information to your tags by using an additional hidden tag.
Example:
http://jsfiddle.net/w49g19bw/
<p data-meta="HN SPECS" class="hidden"></p>
.hidden {
display:none;
}
Imagine this block of HTML:
<a href="/somewhere/">
<div class="nested">
<div class="sub-nested">
<div class="sub-sub-nested">
button
</div>
</div>
</div>
</a>
This gets rendered in my browsers like this:
<div class="nested">
<div class="sub-nested">
<div class="sub-sub-nested">
button
</div>
</div>
</div>
This happens only if there is another a tag inside the outer a tag.
I totally don't understand why this is happening. How this could even be. And it's driving me insane.
The problem looks so basic, that i wonder what it was about the HTML standard that i have misunderstood? After all, shouldn't as of HTML5 any tags be allowed within a tags?
What am i missing here?
You can't next anchor tags. As the W3 says:
12.2.2 Nested links are illegal
Links and anchors defined by the A element must not be nested; an A
element must not contain any other A elements.
If you try to validate your code, you will get
Document type does not allow element "div" here; (...)
One possible cause for this message is that you have attempted to put
a block-level element (such as "<p>" or "<table>") inside an inline
element (such as "<a>", "<span>", or "<font>").
So you can't put a <div> inside an <a>.
To expand a bit on why you can't nest A tags, the browser would not know where to direct the user, since the multiple A tags would have multiple HREF attributes. This is why it is illegal to nest A tags.
I noticed in my element inspector (both chrome and firebug) that the html was parsed different from how i had intended it to be parsed.
Some elements ended up outside of their parent element, often this comes from broken html (unclosed tags etc.).
I threw the code in the W3C validator and narrowed the html down to just a few lines.
My HTML looks like:
<html lang="en">
<head>
<title>title because we must</title>
<meta charset="utf-8"/>
</head>
<body>
<p>
<div>test</div>
</p>
</body>
</html>
The error i get is
Line 10, Column 6: No p element in scope but a p end tag seen.
Since the HTML5 validator is still experimental i figured i should try the XHTML 1.1 validator as well. It then mentions that I might be trying to put a block element within a inline element. This shouldn't be the case since both "p" and "div" are block elements by default.
Can anyone explain this behavior?
A p element cannot contain a div element
The end tag of the p element is optional
Therefore:
<p>
<div>test</div>
</p>
Means:
<p></p>
<div>test</div>
</p>
So you have an end tag for an element that is no longer open.
Since the HTML5 validator is still experimental i figured i should try the XHTML 1.1 validator aswell. It then mentions that I might be trying to put a block element within a inline element.
Yes, in the extended explanation of the error it mentions that you might be trying to put a block element within a inline element.
The error message itself reads:
document type does not allow element "div" here
which is quite clear.
You cannot place a div element inside a paragraph <p> tag.
This is invalid:
<p>
<div>test</div>
</p>
The correct way would be to wrap the div around the p.
we can not put <div> inside <p> ,as it is inline element and doing so is not recommended as per w3c standards,still if you do so browser will show that div out side p tag like this
<p></p>
<div>div contents<div>
<p></p>
for reference see following
http://www.w3.org/TR/html4/sgml/dtd.html
http://www.w3.org/TR/html4/sgml/dtd.html
<!ELEMENT P - O (%inline;)* -- paragraph -->
This HAML (with chained helpers):
- haml_tag :a, helper_method_1(local1, local2).merge( helper_method_2 local3, local4 ) do
%div{ style: helper_method_3(local5, local6) }
%span= local7
%h3{style: "color: black"}= local8
Is generating this (inverted) HTML:
<div style="prop1: val:1; prop2: val2;"></div>
<span>Span Text</span>
<h3 style="prop3: val3;">H3 Text</h3>
<a class="class-value" id="id-value" href="href-value"></a>
But if we remove the chained method, like:
(...)
- haml_tag :a, helper_method_1(local1, local2) do
(...)
Than HTML renders as expected:
<a class="class-value" id="id-value" href="href-value">
<div style="prop1: val:1; prop2: val2;"></div>
<span>Span Text</span>
<h3 style="prop3: val3;">H3 Text</h3>
</a>
What's wrong with HAML?
Problem solved by changing this line:
- haml_tag :a, helper_method_1(local1, local2).merge( helper_method_2 local3, local4 ) do
Into this line (added parenthesis on helper_method_2):
- haml_tag :a, helper_method_1(local1, local2).merge( helper_method_2(local3, local4) ) do
This is an incomplete answer.
Please feel free to extend/edit it.
I'd guess that HAML is producing the HTML you're expecting but the browser is rewriting it to conform to an HTML standard.
Let us look at what HTML4 has to say about <a>:
<!ELEMENT A - - (%inline;)* -(A) -- anchor -->
and inline means:
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
If you look at fontstyle, phrase, special, and formctrl, you won't find <div> or <h3> in any of those lists so neither <a><div></div></a> nor <a><h3></h3></a> are valid HTML4.
HTML5 has this to say about what an <a> can contain:
Permitted contents
Transparent (either phrasing content or flow content)
Transparent content means:
If the content model of a particular element foo is described as
transparent, it means:
when element foo is a child of a parent element bar whose content model is allowed to contain flow elements, then the contents
of element foo may also contain flow elements
when element foo is a child of a parent element baz whose content model restricts its child elements to only being phrasing
elements, then any child elements of element foo are also restricted
to only being phrasing elements
A <div> is a flow element but not a phrasing element, <h3> is also a flow element rather than a phrasing element. So, if you're in HTML5 mode, your <a> would need a parent element that can contain flow elements. I don't think this applies though; I'd expect the browser to restructure things even more if HTML5 was being used and the <a>'s parent didn't allow flow elements, it would have to move the <div> and <h3> up one more level to get past the restriction to phrasing elements.
I'd guess that your browser thinks it is rendering HTML4 or it isn't quite up to date on what HTML5 says.
You have some options:
Look at the HTML that HAML produces, don't ask the browser, look at the raw output before the browser can do anything to it. This will tell you who is changing things.
Make sure your HTML is being rendered as HTML5.
Restructure your HTML to match the relevant standard, you might have to compensate for outdated but overzealous browsers here. This may require you to use something other than <div> and <h3> inside your <a>.