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.
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?
I have been working with a lot of html structuring lately and I started to wonder what are the elements that are allowed as children of an <a> element?
Anything as long as there insn't any interactive content like buttons, forms, other link...
w3.org HTML5 specs :
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
see link to source
And here is an example of what you can do (still form w3.org) :
<aside class="advertising">
<h1>Advertising</h1>
<a href="http://ad.example.com/?adid=1929&pubid=1422">
<section>
<h1>Mellblomatic 9000!</h1>
<p>Turn all your widgets into mellbloms!</p>
<p>Only $9.99 plus shipping and handling.</p>
</section>
</a>
<a href="http://ad.example.com/?adid=375&pubid=1422">
<section>
<h1>The Mellblom Browser</h1>
<p>Web browsing at the speed of light.</p>
<p>No other browser goes faster!</p>
</section>
</a>
</aside>
Changes in HTML5
Although previous versions of HTML restricted the a element to only containing phrasing content (essentially, what was in previous versions referred to as “inline” content), the a element is now transparent; that is, an instance of the a element is now allowed to also contain flow content (essentially, what was in previous versions referred to as “block” content)—if the parent element of that instance of the a element is an element that is allowed to contain flow content.
HTML language reference
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.
I read about semantic HTML online...
Semantic HTML means using HTML tags for their implied meaning, rather than just using (meaningless) div and span tags for absolutely everything.
If you use <h1> instead of <div class="header">, and <h2> instead of , et cetera, Google and other search engines will interpret your headers as being important titles in your page. This way, when people search on the words in your headers and sub-headers, your page will be considered more relevant (and rank higher). Plus, it's much shorter and cleaner.
So, below is semantic,
<h1>My Website Name</h1>
<h2>My Website Tagline </h2>
What about this below?
<div id="header">
<h1><span class="hide">My Website Name</span></h1>
<h2><span class="hide">My Website Tagline</span></h2>
</div>
I tend to combine h tags with div and span tags like above - is this practised considered as the lack of semantic?
The reason why I have the span with the hide class is that I want to display the site logo instead of text. So use CSS to set the background of h1 as image and then hide the text. is this incorrect practise?
Then, if I don't use div, what can I use to make a box around the h1 and h2?
As far as I know, html 5 is not fully ready yet, we must not use <header> yet, must we??
Thanks.
I would do something like the following if I was going to use HTML5:
<header>
<hgroup>
<h1>My Website Name</h1>
<h2>My Website Tagline</h2>
</hgroup>
</header>
Remember to add display: block; to the HTML5 elements and createElement for IE in the CSS though. The header element shows the block is a header and the hgroup element is there to show that the second h* element is a sub heading, so shouldn't be taken into account when calculating the header levels in the document.
If you don't want to use HTML5 yet then you could use divs instead of the new elements, and use the HTML5 element names as the class value. This will make it easier to switch over when you feel comfortable using HMTL5 on a live site.
You don't really need to use the span elements. You can use tricks such as using a large negative text-indent in the CSS to hide the text off the screen.
If you want to display a logo instead of text, use an image. Google say so (even if they don't know the difference between a tag and an attribute). Taglines, BTW, are not subheadings (and the site name (and thus logo) is usually only a heading on the homepage).
<div id="header">
<h1><img src="foo.png" alt="My Website Name"></h1>
<p><img src="foo.png" alt="My Website Tagline"></p>
</div>
Unfortunately, Internet Explorer 8 does not recognize many HTML5 tags, and when I've tested it, I was unable to set CSS values for the <header> tag, for example. So for now I would recommend that you continue to use div tags to group your semantic meaning.
As a sidenote, Google does not like hidden text, and if you have a lot of it, it will consider it deceptive coding. One is probably fine, but you'd be better off using the alt attribute on the image tag.
Nobody suggested that you should not use DIVs at all... semantic HTML does not mean there cannot be div or span tags in your code. It just only means that whenever possible (there is a specific tag available for a specific semantic meaning) you should try to give semantic meaning.
h2 is not to be used for taglines, as somebody else already suggested.
Also, in my interpretation (some will argue), h1 is not for the name of your website. It is the title for the content on a specific page.
I agree with #David Dorward, the tag line should be in a p tag.
Your example (wrapping the header elements with a div) is perfectly acceptable, though I would like to raise a small caution: Be careful that you do not get in the habit of wrapping everything in div tags. For example:
<div class="content">
<div class="list">
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
</div>
Since a ul tag is already a block element, the above markup would be better off like this:
<div class="content">
<ul class="list">
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
And then just style the ul to look like the div.
On the matter of displaying the logo as an image:
If your logo is text-based, or has text in it, you would be better off doing the following:
HTML
<div id="header">
<h1 class="logo">My Logo Text - My Website Tagline</h1>
</div>
CSS
.logo { text-indent:-9999px;background-image:url(thelogo.jpg) no-repeat;}
/* Also add height and width based on your logo height and width */
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.