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.
Related
https://interactjs.io/docs/action-options/#ignorefrom shows how to use ignoreFrom to disable dragging from certain elements. My movable element look something like:
<article>
<div>
<h1>My Article</h1>
<p>Hello World</p>
</div>
</article>
It could contain any HTML tags within the <div>, not just <h1> and <p>
I want to ignore dragging from any child element except the <div>. I've tried using ignoreFrom: ':not(div)', but that does not work (I'm guessing that the :not pseudo-selector is not supported). The only option I can get to work is to provide a list of all possible HTML tags as the value for the ignoreFrom. So, for this specific example, setting ignoreFrom: 'h1,p' works, but this approach will become unmanageable in the general case. Is there an easier way?
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
I have the following code in HTML:
<span>
<a href="#">
<span class="caption">
<p id="first">Text1</p>
<p id="desc">click to read</p>
</span>
<img class="img_link" src="img/thing1.jpg" width="218" height="181"
alt="thing1"/>
</a>
</span>
<span>
<a href="#">
<span class="caption">
<p id="first">Text2</p>
<p id="desc">click to read</p>
</span>
<img class="img_link" src="img/thing2.jpg" width="218" height="181"
alt="thing2"/>
</a>
</span>
This code is used for making an overlayed text transition for images in CSS, but if I want to validate this HTML code, it says I have a duplicate ID (here "first" and "desc") but I honestly wouldn't know how I can simplify this. I need to resize "first" with font-size, and "desc" too.
For example: the paragraph with id "first" has to be 14px, and the paragraph with "desc" has to be 12px.
Only those <"p"> (without the quote) elements can not be a child element in the "span" element.
I wouldn't know how to solve this, do you guys have a solution?
Thanks for the answers, I've already changed the ID's to a class.
Still, I wouldn't know how to resize class "first" and "desc" in two different font sizes, because it's apparently "not done" to put a block element in an inline element
EDIT 3: Solved! Using div's is the best solution, I'm using this for school (kind of a project) for making a gallery. With float: left; I can place those images next to eachother.
Thanks for the tips!
You've made several mistakes:
id attribute is of type #ID which by the HTML/SGML standard is defined to be unique, if you want to show duplicates you should use class attribute (this is part of why there's getElementsByClassName returning a list but getElementById returning only a single item in the JavaScript DOM API)
span is inline element, while p is a block element, HTML does not allow block element inside inline element. You should replace your span with div. You can use display: inline or display: inline-block if you want it to appear like inline level elements. Example of inline elements include: a, span, etc; example of block elements include: div, p, ul, li, etc.
That is due to the element type.
<p> tag is block level element
<span> tag is a inline element
Therefore encapsulating a block level element inside an inline level element is incorrect.
Because you can use classes.
Change:
1.
id="first" -- into --> class="first"
id="desc" -- into --> class="desc"
2.
You cannot put another tags into a span tag except <i>, <b>, <strong>, and <br /> ...
With <br/ > you can have 2 lines in your span tag
Just change it to:
<p class="first">
and
<p class="desc">
EDIT:
You best remove the spans completely. You don't need them. If you feel you need them to wrap block-level elements, you can do that with divs
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.
I know that it's incorrect to style a <section> tag but how about the <header> and <footer> tags. If using these tags provides a more semantic markup then they should be used, however, if they can't be styled then a <div> would still need to be inserted inside the tag to wrap the content and style it.
I know that <header> can be styled but I'm not sure if it's correct to do so.
So the question is: Should html5 tags be styled or should a <div> be placed inside to take care of the styling?
Nothing in the spec says you can't or shouldn't style HTML5 elements such as <section> or <article>. It only says that you shouldn't place a semantic HTML5 element somewhere 'for the sake of' styling something. Use a <div> instead.
So if you have a semantic reason to add the <section> or <article> somewhere, then by all means add it AND also feel free to style it as well. But if you have to wrap a section of your mark-up for styling purposes (eg. to add a border, or float left etc.), but that section does not have any semantic meaning in your mark-up, then use a <div>.
For instance:
<div class="mainBox">
<nav class="breadcrumbs">
<ol>
<li>...list of links (snip)....</li>
</ol>
</nav>
<section>
<h1>Latest Tweets From Twitter</h1>
<article>
//... a Tweet (snip)... //
</article>
<article>
//... a Tweet (snip)... //
</article>
//... lots more Twitter posts (snip)... //
</section>
</div>
The <section> element is the main part of your page (ie. your list of tweets) and also has a heading at the start which is required. But it's wrapped in a div.mainBox element because maybe you want to wrap a border around the both the breadcrumbs and section parts, ie. it's purely for styling. But there's nothing to stop you styling the <section> and <article> elements also.
It's is not incorrect to style these tags, but they are not solely for styling purposes as they serve a semantic function. By all means style the elements that you need to use, but don't add them to achieve styles thereby ruining the semantics.
Having said that you must also beware of styling them as they are not recognised by all browsers. For example IE6 and 7 will not apply the styles as they won't recognise the element names. You can get around this in IE7 using ARIA tags which will allow you some styling control.