In the interest of writing semantic and solid markup, can I position a logo image inside a nav element? Right before the ul element.
<nav>
<img id="logo" />
<ul>
<li>a</li>
<li>b</li>
</ul>
</nav>
Or should I wrap it all in another element like so:
<section id="navigation">
<img id="logo" />
<nav>
<ul>
<li>a</li>
<li>b</li>
</ul>
</nav>
</section>
I would prefer the first one to minimise the markup.
Yes, there's no problem with placing an image within a <nav> tag. Per the MDN and W3C, flow content is permitted content for this tag and among many other elements is the <img> tag.
I'd only insert an image in nav if …
… this image is linked to a page/anchor (for example a link to the front page), or
… this image contains the text "Navigation" or similar (so it should be inserted in a h1)
The spec says:
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
So this section shouldn't contain things not about navigation.
Your second example is not what you want, because you would create a wrong outline (because of the outer section).
If it's the main navigation of the page and the image is the site logo, I'd use this markup:
<header>
<h1><img src="logo.png" alt="ACME Inc."></h1>
<nav>
<ul>
<li>a</li>
<li>b</li>
</ul>
</nav>
</header>
If you'd like to link the logo to the home page and the home page is not linked in the ul, I'd insert it in the nav:
<nav>
<ul>
<li><img src="logo.png" alt="ACME Inc."></li>
<li>a</li>
<li>b</li>
</ul>
</nav>
But this is a rare case, because you would still need a page heading and in most cases this would be the logo, and in most cases this should be linked to the home page of the site.
Related
It seems that jsfiddle does not let me use multiple html pages so i cannot post both pages. The issue is when i click a link my nav, i notice the logo move a little to the right instead of staying in the same place. the second html page has the exact same html code and css so i don't know why the logo would move once i click a link.
<header>
<div class="header">
<h1 class="logo">New York</h1>
<nav class="main-navigation">
<ul>
<li class="active">Home</li>
<li>Photos</li>
<li>Videos</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
What is better:
<h1>Navigation</h1>
<nav>
<ul>
<li>...</li>
</ul>
</nav>
Or:
<nav>
<h1>Navigation</h1>
<ul>
<li>...</li>
</ul>
</nav>
Is there any significant difference?
nav is a sectioning element and as such, if you have a heading that describes the navigation it should be inside:
<nav>
<h1>Navigation</h1>
<ul>
<li>...</li>
</ul>
</nav>
Otherwise, the heading will be incorrectly associated with a different section altogether, rather than the nav element.
The W3C HTML5 spec provides a near-identical example:
Code Example:
In the following example, the page has several places where links are present, but only one of those places is considered a navigation section.
<body itemscope itemtype="http://schema.org/Blog">
<header>
<h1>Wake up sheeple!</h1>
<p>News -
Blog -
Forums</p>
<p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
<nav>
<h1>Navigation</h1>
<ul>
<li>Index of all articles</li>
<li>Things sheeple need to wake up for today</li>
<li>Sheeple we have managed to wake</li>
</ul>
</nav>
</header>
...
</body>
If you're wondering about accessibility take a look here.
It is best to use a header inside the nav as it is describing the section.
Having the heading inside the <nav> container allows you to more easily style it, and manipulate the nav element as a whole. If you moved the <nav> for instance, you'd likely want the heading to go with it. It just saves work and makes thing simpler to have it inside.
You will be able to style it using:
nav h1 {
style: something funky;
}
Instead of styling all h1 elements or giving it an ID.
The first one is better because the heading should describe what to come, and is not a part of the nav. Just like h1 should not be inside p. It will probably work just fine either way though.
I am newbie and I've got a trouble. I have element with four elements and I can't put one on the right side.
My code is here:
<body>
<header>
<div id="topmenu" class="navigation">
<ul class="navul">
<li>FAQ</li>
<li>ABOUT</li>
<li>Next</li>
<li class="rightbutton"><div>Log In/Sign Up</div></li>
</ul>
</div>
</header>
And css is on jfiddle ( I was not able to attach it correctly)
http://jsfiddle.net/EGxWy/2/
Try putting float:right on one li element and display:inline-block on all li elements.
I have an HTML Structure which really has 2 headers: At the tippity top of the page it has some navigation items and buttons, below that is another section which holds the logo and what I would call the main navigation.
Both are sectioned off in wrappers because of full width CSS3 gradients so my structure looks something like this:
<div id="topWrap">
<div id="topNavWrap">
<nav id="utilityLinks">
<ul>
<li>Home</li>
<li>Page</li>
<li>Page</li>
<li>Page</li>
<li>Page</li>
</ul>
</nav>
<div id="quickLinks">
<ul>
<li>Login</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div id="headerWrap">
<div id="header">
<div id="logo"><img src="logo.png" /></div>
<nav id="mainNav">
<ul>
<li>Main Service Page</li>
<li>Main Service Page</li>
<li>Main Service Page</li>
<li>Main Service Page</li>
<li>Main Service Page</li>
</ul>
</nav>
</div>
</div>
My question is:
In this situation is it acceptable to wrap both of these nav elements in a header element, do I just wrap my main nav and logo in a header element, or do I wrap both in one big header element?
When using Aria, should I use role="main" on my main navigation or my main header element?
Yes, it makes sense to use header for both of these.
As header has no influence on the document outline, it’s up to you use one or several header elements; it doesn’t affect the meaning. If there is no reason not to use one element (i.e., there is no content inbetween that should not be part of header), go with one element.
The ARIA role main is for the main content of a page. Navigation is typically not the main content, unless it’s the only content and purpose of a page. However, in that case you wouldn’t use the header element, as its job is to "exclude" content that is not considered to be part of the main content.
If they are using nav elements you shouldn't simply wrap them in headers. Although you can use multiple header elements in a page, they should represent the top of a 'section', a content area.
A more suitable HTML setup would be:
<header id="topWrap" role="banner">
<div id="topNavWrap">
<nav id="utilityLinks" role="navigation" aria-describedby="utilityLinksH2">
<h2 class="at" id="utilityLinksH2">Site menu</h2>
<ul>
<li>Home</li>
...
</ul>
</nav>
<div id="quickLinks">
<ul>
<li>Login</li>
...
</ul>
</div>
</div>
<div id="headerWrap">
<div id="header">
<div id="logo"><img src="logo.png" /></div>
<nav id="mainNav" aria-describedby="mainNavH2">
<h2 class="at" id="mainNavH2">Service menu</h2>
<ul>
<li>Main Service Page</li>
...
</ul>
</nav>
</div>
</div>
</header>
Notable points are:
wrapping the whole lot in a header, with a role of banner. which should only be used once on a page to denote site furniture at the top of the page. (When used from the body the header applies to the, see the last example in the HTML5 spec.)
Labelling each nav with a hidden sub-heading (use .at to move it offscreen), with aria-describedby.
Main should wrap the main content of the page (that is unique to the page), generally starting just above a H1. There should be only one.
I have some markup and I would like to know if it is proper to surround <li> tags with <div> tags.
<div class="round3">
<ul>
<div class="top"><li class="winner first"></li></div>
<div class="bottom"><li class="winner last"></li></div>
</ul>
</div><!--end round3-->
Thank you for helping.
No, it is not, the only tags that can go directly inside ul elements are li elements.
You can however, place a div inside a li element if you wish.
<ul>
<li><div>Example</div></li>
</ul>
For more information about HTML lists, see the relevant W3 specification section.
It is not possible.
I propose such correction:
<div class="round3">
<ul>
<li class="winner first top"></li>
<li class="winner last bottom"></li>
</ul>
</div><!--end round3-->