View Full Version : Resolved HTML5 Help

08-03-2012, 12:40 PM
Would including the site navigation inside the "header" tags be valid in html5?

<header id="top_header">
<h1>Football Club</h1>

<section id="main_content">
<nav id="top_menu">
<li><a href="#">Home</a></li>
<li><a href="league-table.html" onclick="this.target='blank'">League Table</a></li>
<li><a href="fixtures.html" onclick="this.target='blank'">Fix & Res</a></li>
<li><a href="#">HotShots</a></li>
<li><a href="#">Profiles</a></li>
<li><a href="players.html" onclick="this.target='blank'">Squad-List</a></li>


08-03-2012, 01:12 PM
What does the HTML validator (http://validator.w3.org/) say?

08-03-2012, 06:17 PM
Line 1, Column 39: Element head is missing a required instance of child element title.

<!DOCTYPE html><header id="top_header">

Content model for element head:
If the document is an iframe srcdoc document or if title information is available from a higher-level protocol: Zero or more elements of metadata content.
Otherwise: One or more elements of metadata content, of which exactly one is a title element.

Line 16, Column 15: End tag header seen, but there were open elements.


Line 4, Column 33: Unclosed element section.

<section id="main_content">

08-03-2012, 06:26 PM
<header> is not <head>. While explicitly writing out the <head> and <body> elements is optional (they are implied if not present in the code), you still need a <title> in the document. The <header> element can only be a child of either <article>, <aside>, or <section> and not vice versa (i. e. you can’t have <section> inside <header>).

08-04-2012, 08:07 AM
Would including the site navigation inside the "header" tags be valid in html5?Yes. Per http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element, header elements may contain "flow content" minus header and footer elements. Flow content includes the nav element.

Worth noting that onclick="this.target='blank'" would be better written as target="_blank". There's no need to use JavaScript to do something that can be done directly with HTML.

08-05-2012, 10:23 AM
Thanks for all the help and advice folks!