If I do this it fails validation
<header>
<hgroup>
<a href="#">
<h1>Title</h1>
<h2>Tagline</h2>
</a>
</hgroup>
</header>
But if I do this, then Firefox chokes on it
<header>
<a href="#">
<hgroup>
<h1>Title</h1>
<h2>Tagline</h2>
</hgroup>
</a>
</header>
What is the correct way to have the whole header as a link?
The latter is correct and seems to work fine in Firefox 4 (Firebug shows correct DOM).
Related
I have a problem with navigation in html5. I watched a lot of tutorials and I don't know what I'm doing wrong. I want to navigate on the same page.
<header>
<nav>
TOP
MIDDLE
BOTTOM
</nav>
</header>
<main>
<article>
<section><h1><a name=”top”></a>TOP</h1>
<figure>
<img src="1.jpg">
</figure>
<p>...</p>
</section>
Oh dear... You're using wrong quotes!
Replace <a name=”top”> with <a id="top"> and it should work.
1st error: using obsolete attribute, name instead of id.
2nd error: using wrong quotes, ” instead of ".
prefer id over name for anchors.
<header>
<nav>
TOP
MIDDLE
BOTTOM
</nav>
</header>
<main>
<article>
<section><h2 id="top">TOP</h2>
<figure>
<img src="https://placem.at/people?h=700">
</figure>
<p>...</p>
</section>
<section><h2 id="middle">MIDDLE</h2>
<figure>
<img src="https://placem.at/people?h=500">
</figure>
<p>...</p>
</section>
<section><h2 id="bottom">BOTTOM</h2>
<figure>
<img src="https://placem.at/people?h=400">
</figure>
<p>...</p>
</section>
</article>
</main>
This will allow navigation on same page to go to the top, middle, and bottom.
<header>
<nav>
TOP
MIDDLE
BOTTOM
</nav>
</header>
<main>
<article>
<section><a name="top">TOP</a>
<figure> <img src="https://placem.at/people?h=700"> </figure>
<p>...</p>
</section>
<section><a name="middle">MIDDLE</a>
<figure><img src="https://placem.at/people?h=500"></figure>
<p>...</p>
</section>
<section> <a name="bottom">BOTTOM</a>
<figure><img src="https://placem.at/people?h=400"></figure>
<p>...</p>
</section>
</article>
</main>
With this snippet of HTML, the topmost google link is included in every element under it when shown in Firefox and Chrome.
<div>
<a href="http://www.google.com/">
<div>
<div>
<div>
<div>
<a>a tag</a>
</div>
<img />
<h3>a title</h3>
<p>a description</p>
<div>a detail</div>
</div>
</div>
</div>
</a>
</div>
What is causing this parsing issue and how can I fix it?
Try dropping the following document into the W3C Validator:
<!DOCTYPE html>
<html>
<head>
<title>Parse error?</title>
</head>
<body>
<div class="g23">
<a href="http://www.google.com/">
<div class="article-bg">
<div class="splash-border-right">
<div class="splash-content-margin">
<div>
a tag
</div>
<img src="http://www.google.com/image.jpg" />
<h3 class="splash">a title</h3>
<p>a description.</p>
<div class="read-time">a min</div>
</div>
</div>
</div>
</a>
</div>
</body>
</html>
Observe that this document is not valid HTML5. The first error:
Line 13, Column 65: An a start tag seen but an element of the same type was already open.
That is, a tags must not include other a tags. According to Alohci in the comments, Chrome and Firefox's behavior matches the HTML5 spec's adoption agency algorithm for this scenario. It's funky, but, with invalid code, funky results are to be expected.
I have 3 divs that show correctly in chrome firefox, but, in IE, they aren't showing in the same way...
I want to display something like this
but, in IE7,IE8,IE9, I am getting:
I added the code to jsfiddle and ran it on IE and seemed to be ok, but in server it is displaying as in the above image...
What could be wrong, is there a line of code that is missing to IE?
Please take a look at my fiddle
http://jsfiddle.net/QcayB/2/
this is html
<div id="wrapper">
<div id="header">
<img src="http://www.astrosurf.com/re/tse_20060329_earthshine.jpg" width="500" height="478" alt=""/>
<h1> </h1>
</div>
<div id="main">
<div id="col_izq">
<p>
</p><div id="usa">
<a id="usajq" href="#"><span class="textots">left</span></a>
<a id="usajql" href="#"><span class="textotsl">left</span></a>
</div>
<p></p>
</div>
<div id="col_medio">
</div>
<div id="col_der">
<p>
</p><div id="mexico">
<a id="usajq" href=""><span class="textotst">right</span></a>
<a id="usajql" href=""><span class="textotslt">right</span></a>
</div>
<p></p>
</div>
</div>
</div>
You may have something like this on your page?
<meta http-equiv="X-UA-Compatible" content="IE=7">
X-UA-Compatible may also be being sent by your server in the response header.
i'm still very confused about the use of "section" in html 5. I'd just like to which of the below solutions is the better one. The contents inside the list are not related to each other. So do I have to give a section to each of them or do I have to put it all in one section. See below:
Solution one:
<ul>
<li>
<section>
<header>
<h2>Services</h2>
</header>
<img src="img/foto/testpic1.jpg" alt="" title="" border="0"/>
<p>This is text</p>
</section>
</li>
<li>
<section>
<header>
<h2>Products</h2>
</header>
<img src="img/foto/testpic2.jpg" alt="" title="" border="0"/>
<p>This is text</p>
</section>
</li>
<li>
<section>
<header>
<h2>Contacts</h2>
</header>
<img src="img/foto/testpic3.jpg" alt="" title="" border="0"/>
<p>This is text</p>
</section>
</li>
</ul>
Solution two:
<section>
<ul>
<li>
<header>
<h2>Services</h2>
</header>
<img src="img/foto/testpic1.jpg" alt="" title="" border="0"/>
<p>This is text</p>
</li>
<li>
<header>
<h2>Products</h2>
</header>
<img src="img/foto/testpic2.jpg" alt="" title="" border="0"/>
<p>This is text</p>
</li>
<li>
<header>
<h2>Contacts</h2>
</header>
<img src="img/foto/testpic3.jpg" alt="" title="" border="0"/>
<p>This is text</p>
</li>
</ul>
</section>
I'm not sure why you need the list (<ul>) in the first place here. I'd remove it since it makes sense to use it for actual lists only ( or list-like elements, i.e. menus ) which is not the case here.
Now about the <section>. According to specs:
The <section> element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
Which eliminates your solution #2.
More:
Authors are encouraged to use the <article> element instead of the <section> element when it would make sense to syndicate the contents of the element.
So In your case I's do this:
<article>
<header>
<h2>Services</h2>
</header>
<img src="img/foto/testpic1.jpg" alt="" title="" border="0"/>
<p>This is text</p>
</article>
<article>
<header>
<h2>Products</h2>
</header>
<img src="img/foto/testpic2.jpg" alt="" title="" border="0"/>
<p>This is text</p>
</article>
<article>
<header>
<h2>Contacts</h2>
</header>
<img src="img/foto/testpic3.jpg" alt="" title="" border="0"/>
<p>This is text</p>
</article>
And if you need a wrapper for styling purposes - you can use the good ol' <div>
The <section> element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the <div> element instead.
The section element
An article on topic
<section> and <div> are similar in that they are both used for sectioning. The difference is that if the intended section is for the purpose of styling, <div> should be used... but if the section is literally for content then use <section>. Have a look at the following quote:
“When an element is needed only for styling purposes or as a
convenience for scripting, authors are encouraged to use the div
element instead…A general rule is that the section element is
appropriate only if the element’s contents would be listed explicitly…
~ WHATWG”
Please note that the general idea of <section> is to list content like <li>. However, the latter is more appropriate for bullet pointing... whereas, the former is more appropriate for things like blog posts, etc.
So, I don't really recommend either of your solutions. You should use something similar to the following:
<div class="blog">
<article class="post">
<h2 class="post-title">Services</h2>
<img src="img/foto/testpic1.jpg" alt="" title="" border="0"/>
<p class="post-excerpt">This is text</p>
</article>
<article class="post">
<h2 class="post-title">Products</h2>
<img src="img/foto/testpic2.jpg" alt="" title="" border="0"/>
<p class="post-excerpt">This is text</p>
</article>
<article class="post">
<h2 class="post-title">Contacts</h2>
<img src="img/foto/testpic3.jpg" alt="" title="" border="0"/>
<p class="post-excerpt">This is text</p>
</article>
</div>
I hope that helps. All the best.
[ref: https://azizecomm.wordpress.com/2016/01/04/html5-section-vs-div/]
Putting block elements inside an anchor is now "possible" or allowed in HTML5, but it does not work for some reason.
Here's the code:
<a href="#"><div>
<figure>
<img src="prodimg/senseo-m.jpg"/>
</figure>
<div class="proddetail">
<header>
<hgroup>
<h2>Koffiepadsysteem</h2>
<h1>Senseo</h1>
</hgroup>
<div class="clear"></div>
</header>
<span class="price">€ 79,99</span>
<span class="elders">elders € 89,99</span>
<span class="bespaart">u bespaart € 15%</span>
<span class="meerinfo">Meer info</span>
</div>
</div></a>
When I inspect the code in firefox or chrome, I get this result:
<div><a href="#">
<figure>
<img src="prodimg/senseo-m.jpg">
</figure>
</a><div class="proddetail"><a href="#">
<header>
<hgroup>
<h2>Koffiepadsysteem</h2>
<h1>Senseo</h1>
</hgroup>
<div class="clear"></div>
</header>
<span class="price">€ 79,99</span>
<span class="elders">elders € 89,99</span>
<span class="bespaart">u bespaart € 15%</span>
</a><span class="meerinfo">Meer info</span>
</div>
</div>
That's almost good, but certain spots still aren't clickable. Any idea when can be done here?
Problem found!
Wrapping a block element in an anchor IS possible, but you can't put another anchor in there, too. Then it breaks.
So the parent anchor can't contain a child anchor.