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>
Related
Is the following W3C Compliant:
<div>
<h3>Heading</h3>
This is the text for this section.
</div>
Or does the text require a container element?
<div>
<h3>Heading</h3>
<p>This is the text for this section.</p>
</div>
The first example doesn't sit right with me, but a content editor asked me and I realized I don't really know if it's okay.
Both examples are valid.
Technically in the first one, the text is inside a container, the outer <div>.
Anyway it is perfectly valid to put text directly inside the <body>, which means the following HTML document will pass validation with no errors or warnings:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>Heading</h3>
This is the text for this section.
</body>
</html>
The more relevant question is whether it is semantically correct. To put it simply, paragraph text should be surronded by a <p> tag. More generally each type of content SHOULD be written inside the semantically relevant tag.
I will advise you to use the second approach.
When you use the correct Heading Tag it helps boost your page SEO wise.
Moreover, paragraph tag, P, helps some browser to render your page in “reading mode”.
Finally, a div is a block-displayed element. This CSS code looks a bit weird: div {color: blue}. But, p { color: red; } make more sense for a lot people.
Technically, both are conforming HTML (unless you validate it against the strict HTML4.x/XHTML1.x scheme which has no connection to reality anymore). Hovewer, the second approach would be probably more convenient from the styling/scripting perspective, where it's always better to have a possibility to address any piece of content directly. The first example has an implicit paragraph, and explicit is usually better than implicit.
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;
}
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.
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 -->