In the <button> specification part we see that permitted content is only Phrasing content. It's valid HTML code part (checked here):
<button>
<span></span>
</button>
This is not valid HTML code part (checked here):
<button>
<div></div>
</button>
Error: Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)
But we can change display property of the <span>:
<button>
<span style="display: block"></span>
</button>
And it looks like we use a <div> instead a <span>, but the HTML is valid. Is it OK (by the specification) to use a permitted content element and change its display property?
Even though you style a span with display: block you still can't put block-level elements inside it:
<div><p>correct</p></div>
<span style="display: block;"><p>wrong</p></span>
The (X)HTML still has to obey the (X)HTML DTD (whichever one you use), no matter how the CSS alters things.
So they are different, and thus there is nothing problematic here.
But in HTML5 some block elements may be placed inside inline! we say about putting block elements inside link and in other cases it doesn't have sense. “Block-level” links in HTML5
Related
I have a grid with grid items and I wrapped them in < a > tags so that the entire element leads to the link. I really want valid html.
<!--Grid Item-->
<figure class="grid-item">
<span>
<a href="#">
<img src="images/image.jpg">
<figcaption>
<h1>Title</h1>
<p>Description</p>
</figcaption>
<div class="item-background"></div>
</a>
</span>
</figure>
<!--End Grid Item-->
In certain hover effects the item background and ficaption are over the image with a lot of the image being exposed and left without the link.
I have created a lot of hover effects with this structure. I know this is valid in html5 but I want to come up error free in html4 validator. Plus, I hear it's bad practice. I don't want to add any javascript if possible.
Should I keep it the way I have it now or is there a valid way that doesn't interfere with the design.
I know this is valid in html5
Then you can make it valid by marking your document as HTML 5.
… or you could if that was correct. You also need to move the anchor so it is either entirely within the figcaption or entirely around the figure.
but I want to come up error free in html4 validator.
That won't happen.
HTML 4 does not support block elements in anchors.
HTML 4 does not support figure elements.
HTML 4 does not support figcaption elements.
If you want to use features introduced into HTML this century, then you need to use a specification for HTML that was written this century.
I don't want to add any javascript if possible.
Injecting the content with JavaScript instead of putting it in the HTML would make the HTML valid. But that would be a terrible hack that misses the point of using a validator in the first place.
In W3C Standards Compliant HTML 4.01 and xHTML 1.0, <a> is an inline element.
It cannot include a nested block-level element.
The only way to have this validate as W3C Standards Compliant HTML 4.01 is to include repeated anchors around the image, around the <h1> and the <p>, inside the <div> etc.
Is p div.myclass a valid CSS selector?
I'd like to select div.myclass but only when it is a descendent of p.
<body>
<div class="myclass">Do not select</div>
<p>
<any>...
<div class="myclass">Select this element to set background & border
<any>Other stuff may be here</any>
</div>
</any>
</p>
</div> <!-- added this after question was answered -->
</body>
It's a valid selector, yes; but a div is not a valid child of a p element. So the CSS is valid, but the HTML to which you're applying that selector is invalid.
Incidentally, apart from the nested div within the p, you've also got an unclosed div wrapping the p, which is followed by the </body> tag. So your HTML is doubly-invalid, as tags must be closed in the reverse order in which they're opened.
Addenda, as raised in the comments (I wasn't going to bother adding this originally, instead planning to focus on the syntax of the CSS), the browser (certainly Chromium 24/Ubuntu 12.10) 'rescues' your HTML when it constructs the DOM, so you go from this:
<p>
<any>...
<div class="myclass">Select this element to set background & border
<any>Other stuff may be here</any>
</div>
</any>
</p>
To a DOM that looks like this (again, in Chromium 24/Ubuntu 12.10):
<p>
<any>...</any>
</p>
<div class="myclass">Select this element to set background & border
<any>Other stuff may be here</any>
</div>
<p></p>
JS Fiddle demo.
Therefore if the problem you have, and the reason you're asking the question, is that the CSS isn't selecting/styling an element, the reason is simply because you're using invalid HTML, and the browser's changing your HTML while constructing the (valid) DOM, which means the selector no longer matches what you were originally targeting.
This is why HTML validity rules should be followed, it makes it easier to work with (both today, and in future when you, or someone else has to, revisit).
Oh, and finally, also the & character should not be used in HTML directly, it should be encoded in some way, such as &, because the & character is the first character in HTML character-entity codes. So...you've created triply invalid HTML.
In HTML, should block level elements always wrap <a> tags? What if it's necessary for the tag to wrap the block level element to ensure the correct styles are applied? For example can this
<h3>Your Header</h3>
be this
<h3>Your Header</h3>
NB: I'm going for the latter approach to ensure the correct styles are applied (I'm working with legacy code that is just not worth re-working for this one element), but while doing this I was interested to know what the community's views are.
And yes I have read this question In HTML which way round should a and h1 be nested? but I'm not sure if a different or more flexible rule applies for <h3> tags.
Taking in the comments below and looking again at the code, I have two possible solutions:
Wrap the <h3> elements with <a> elements (ok in HTML5)
Add .class a to the CSS so that it inherits parent div styles as follows:
HTML
<div class="class">
<h3>Your Header</h3>
</div>
CSS
.class, .class a {
width:296px;
height:46px;
overflow:hidden;
color:#FE5815;
}
In this context, it is absolutely allowed for the a element to contain the h3 element, at least according to HTML5.
An a element is known as a "transparent" element: it may contain whatever its parent element may contain. The only criterion is that it may not contain any other "interactive" content, e.g. other a elements, button elements, iframe elements. In this case, presuming that the first version is allowed, the second version is also allowed under HTML5.
This is the page in the HTML5 spec that specifies this. It takes a little interpretation to understand, unfortunately...
Note that there is one case in HTML5 where
<h3>Your Header</h3>
would be valid, but
<h3>Your Header</h3>
would not, and that's when the parent of the <h3> element is an <hgroup> element.
The <hgroup> element can only have <h?> children, so while the transparent content model of the <a> element allows an <h3> to be its child, the <a> element remains invalid as a child of <hgroup>.
In this case
<hgroup>
<h3>
Your Header
</h3>
</hgroup>
and
<a href="/">
<hgroup>
<h3>Your Header</h3>
</hgroup>
</a>
are the only valid arrangements.
Both are ok
<h3>Your Header</h3>
<h3>Your Header</h3>
But I will use 1st one if I don't care whatever there is in the anchor and I just want it to look like <h3>
And I will use 2nd one if I am concerned about a particular part of anchor needs <h3>. For
example below I need the 2nd one.
check normal text <h3>check large text</h3>
In HTML 4.01 and XHTML, an h3 tag may contain a a tag, but not the other way around.
In HTML5, both ways are valid. If an a tag contains an h3 tag though, the a tag must NOT be nested in an element that cannot contain an h3 element.
What tag should be used for short text like.
Back to top
Read more
is <p> appropirate or something else should be use. because these are not paragraph.
Which is more semantic
<p>Back to top</p>
or
Back to top
or
<div>Back to top</div>
In general you should use the anchor <a> tag.
Nesting an <a> inside a <p> is perfectly valid, but in general the <p> should be reserved for paragraphs of text. Since yours is just a link, the <a> tag alone will probably be the most recommended.
If you want your link to appear as a block element, simply style it with display: block;. The fact that the <a> tag is normally displayed inline is only because it is its default style.
Anchor tag
Back to top
Read more
You can embed an anchor tag inside a block element. So something like this
<p>Back to top</p>
Inline elements must be enclosed inside block level elements, so this is the basic approach:
<p>Back to top</p>
Usually though the <a> element is already inside a <div> tag so the <p> isn't absolutely necessary but it is more semantically correct – it's still a paragraph of text even if there's only a few words in it.
There's no obvious semantic tag for such.
Perhaps you don't really need a tag there at all! Please check for this case.
If your "short texts" are links, then you obviously need <a href=. If you need a CSS style for the text, you can put it into the a tag too.
* If you need a tag for structuring only or to hang CSS styles from, then use <span>.
I'm trying to make a "clickable" region.
<a
style="display: block"
href="http://stackoverflow.com">
StackOverflow
</a>
A is an inline element but the CSS made it a block.
If the above is valid, then the following should be valid too:
<a
style="display: block"
href="http://stackoverflow.com">
<div>Some DIV that links to StackOverflow</div>
</a>
But validator.w3.org shouldn't be flagging it as invalid (which it is right now).
If it is invalid, what would be the most proper way to make a block element "clickable" and redirects to an arbitrary page. I'm aware I can use JS onclick to achieve this behaviour, but how will Google see this?
The validator is correct - you can't put <div> inside <a>, no matter what you do afterwards with CSS.
The proper thing to do is what you did in your first code block - <a style="display: block;">
If you want something inside that you can do <a style="display: block;"><span style="display: block;">
Don't confuse valid HTML with valid CSS. It is valid to use the display css property to make inline elements block. It is not valid to put block HTML elements within inline ones.
It doesn't follow that the one being valid implies the other has to be. There are nesting rules for HTML, and div-within-anchor doesn't fit them, which is why validator.w3.org is giving you a hard time.
If you truly must have a div, rather than text, images or <span style="display: block">s, that's clickable, then yes, you will have to use an onclick event. Google will not understand or acknowledge the existence of the link. (You may be able to cope with this by having an anchor on something that anchors can apply to, in addition to the onclick div.)
Something I've done in the past with this sort of problem is invoke the click on the parent element (My example uses jQuery):
<div class="link">
Visit Google
</div>
$(".link").click(function(){
document.location = $(this).find("a:first").attr("href");
});
With styles you could make the entire area appear to be the link by setting the cursor, a roll-over state, etc.
First you need to know whether you want to use strict or transitional XHTML (frameset is not useful here). Then you look into the DTD (link) and you'll see that A cannot have a DIV inside.
Why don't you use an area tag for this? It is supposed to define the clickable area in an imagemap.
Google bots now follow simple javascript links, so using JS on the onClick event of your div is an option. Other search engine bots don't do that, but sooner or later they will.
More info in this article.