<header>
<nav>
<ul>
<li> Home
</li>
<li> Articles
</li>
<li> Contact
</li>
</ul>
</nav>
</header>
And CSS no "."
header {}
nav {}
As I can see, there is <header></header> and <nav></nav>
Lets say if my website has 2 nav section how to implement two different CSS?
In advance, thanks.
Give each nav a specific class or id
like
<nav id="first_nav"></nav>
CSS
#first_nav{
}
They are html5 elements.
HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts:
It is a new version of the language HTML, with new elements, attributes, and behaviors,
and a larger set of technologies that allows more diverse and powerful Web sites and applications. This set is sometimes called HTML5 & friends and often shortened to just HTML5.
see more info here
As if you have more than one element such like as nav then you could use its parent and the nav itself to get the selector more specific:
header nav{}
footer nav{}
Related
I've learned to make the main navigation with a list like that:
<ul>
<li>nav-item</li>
</ul>
Now additionally, I need two top navigations, one left for social buttons and another right for other things. Someone told me better to build those top navigations by 2 like that:
<div>
top-nav-item
</div>
And I'm confused. Why is that better? Could someone tell me the advantage of the second way?
Thank you~
I would recommend using <nav> elements, which is HTML5 spec (see also here). Semantically it fits better with navigational elements, and it might help understand search engines better what elements of your website they are looking at. You can put <a> elements inside the <nav>. A search engine might be able to better understand that those are links to other pages, because that is what anchor elements are made for (linking to other pieces of content).
For how it looks, it doesn't matter; pretty much all elements can be made to look like a menu with buttons. Furthermore, search engines are pretty smart nowadays, and they will probably understand most of your website anyway, even if you don't use the proper elements all the time.
That being said, those elements are there for a reason, so why not use them?
The mozilla developer network's example that I reference above uses the following, but to me personally it does not necessarily always make sense to put everything in a <ul> element.
<nav class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
Why is that better?
It isn't.
HTML is a semantic markup language. It is designed to describe the semantics of your data.
You have a list of links.
The markup should express that it is a list of links not a series of generic blocks with links in them.
I have created example that you want please check below link.
Click on Run.
.nav{float:left;}
.nav li,.social li{float: left;margin-right: 22px;list-style: none;}
.social{float:right;}
<header>
<ul class="nav">
<li>Home</li>
<li>About us</li>
<li>Contact</li>
</ul>
<ul class="social">
<li>Facebook</li>
<li>Google</li>
</ul>
</header>
I have a global navigation for my site which is in the header of all pages. I have marked it up using the <nav> tag.
I also have a navigation present on many individual pages that only apply to that page. So if its a long article, the page navigation lets you paginate sections. This too has been marked up using the <nav> tag.
All pages also have a footer which is almost identical to one at the bottom of StackOverflow's page. There are headings to group navigation links together, some copyright information, and anything else that's interesting.
I don't think its appropriate to also markup the footer's navigation within a <nav> tag because its not intended to be the main navigation for the page or any page. SO have used a table with <th> tags to wrap the headings (and the links are rows underneath) e.g:
<tr>
<th> TECHNOLOGY </th>
</tr>
<tr>
<td>
<ol>
<li>Stack Overflow</li>
<li>Server Fault</li>
<li>Super User</li>
</ol>
</td>
</tr>
With HTML5, I understand that description lists <dl> can be used for name-value pairs. So would the following be allowed/appropriate:
<dl>
<dt> TECHNOLOGY </dt>
<dd> Stack Overflow </dd>
<dd> Server Fault </dd>
<dd> Super User </dd>
</dl>
I can't think of a better way of doing it personally (without using nav + lists), but I also don't want to markup stuff incorrectly (i.e. causing poor semantic value).
If a HTML5 expert could shed some light that would be great.
UPDATE: I've had to make a judgement call and decided that a definition list is still the most semantically appropriate thing to use. Its just my personal judgement because just using a list is meaningless.
According to the official HTML 5 Spec on the <nav> element (emphasis by me):
Not all groups of links on a page need to be in a nav element — the
element is primarily intended for sections that consist of major
navigation blocks. In particular, it is common for footers to have a
short list of links to various pages of a site, such as the terms of
service, the home page, and a copyright page. The footer element alone
is sufficient for such cases; while a nav element can be used in such
cases, it is usually unnecessary.
I think using a <dl> in your case would not be semantically correct, since that element is reserved for association lists, pairing a name/term and a value.
You said it yourself that the footer menu you have is almost identical to Stack Overflow, so if you inspect the code of their menu it is constructed with an ordered list (<ol>).
Personally, I like to use unordered lists for navigation in most cases, and to get a header in your nav, I would suggest a construct like this:
<ul id="footer-menu">
<li>
<strong>TECHNOLOGY</strong>
<ul>
<li>Stack Overflow</li>
<li>Server Fault</li>
</ul>
</li>
</ul>
In this way, each list-item of the "footer-menu" list can be a menu with a heading. Semantically, it is a list of link lists. I made a super-basic fiddle for you to illustrate how it would work: http://jsfiddle.net/psnb6tb9/
I think you have to decide if you want to use heading elements (and sectioning content elements), or not. Both ways are possible. It mostly depends on whether you want the footer content to become part of the document outline.
If yes, your footer would contain a section (possibly multiple, depending on your footer content), with several section as children, e.g.:
<footer>
<section>
<!-- you may use a heading element here, e.g.,
<h1>Sister sites</h1>
-->
<section>
<h1>Technology</h1>
<ul>
<li>Stack Overflow</li>
<li>Server Fault</li>
</ul>
</section>
<section>
<h1>Life / Arts</h1>
<ul>
<li>Photography</li>
<li>Science Fiction & Fantasy</li>
</ul>
</section>
</section>
</footer>
This might especially make sense if the list of sister sites is complex/long, and relevant for your users.
If not, your footer would not contain any heading or sectioning content elements. The dl element seems to be appropriate in this case, e.g.:
<footer>
<dl>
<dt>Technology</dt>
<dd>Stack Overflow</dd>
<dd>Server Fault</dd>
<dt>Life / Arts</dt>
<dd>Photography</dd>
<dd>Science Fiction & Fantasy</dd>
</dl>
</footer>
This might especially make sense if the list of sister sites is not really relevant or important for most of your users (I’d guess Stack Exchange’s footer falls into this category).
However, this is not really suitable if your footer would contain additional "sections" (in which case you probably should use sectioning content elements, i.e., section).
A middle ground would be to use a section/heading only for the whole list of sister sites, not for its sub-sections, e.g.:
<footer>
<section>
<h1>Sister sites</h1>
<dl>
<dt>Technology</dt>
<dd>Stack Overflow</dd>
<dd>Server Fault</dd>
<dt>Life / Arts</dt>
<dd>Photography</dd>
<dd>Science Fiction & Fantasy</dd>
</dl>
</section>
</footer>
This might especially make sense if the sister site list is relevant, but the categorization of these sister sites is not that important.
What can be done to improve the accessibility of a breadcrumb menu similar to:
<ul class="breadcrumbs" aria-label="breadcrumb navigation" role="navigation">
<li>Home</li>
<li>News</li>
<li class="unavailable">#Model.Title</li>
</ul>
Given in this example Home is the site root, News is the first child, and the unavailable class is the current item the /news/article item.
Is there anything that could be done to improve this such as using rel attributes or aria-level attributes?
I would avoid the use of aria-level and use a <ol> element instead. It is best to avoid using aria attributes wherever a native alternative exists. Using aria adds an extra layer of complexity. Simple HTML is far better and already has semantics that are surfaced to AT. This is the first rule of ARIA.
Borrowing from the WAI-ARIA-Practices document, breadcrumbs would look like something like this:
<nav aria-label="Breadcrumb" class="breadcrumb">
<ol>
<li>
<a href="../../">
WAI-ARIA Authoring Practices 1.1
</a>
</li>
<li>
<a href="../../#aria_ex">
Design Patterns
</a>
</li>
<li>
<a href="../../#breadcrumb">
Breadcrumb Pattern
</a>
</li>
<li>
<a href="./index.html" aria-current="page">
Breadcrumb Example
</a>
</li>
</ol>
</nav>
Some notes:
Wrapping the breadcrumbs in a <nav> element lets screen reader users quickly find and jump to the breadcrumbs.
Using <ol> element surfaces an order to screen reader users.
The <ol> should be a child of the <nav>. Some implementations apply role="nav" to the <ol> itself. This is wrong and will override the default <ol> semantics.
aria-current informs screen reader users that this is the current page. If the last breadcrumb for the current page is not a link, the aria-current attribute is optional.
Going from using a screen reader and reading this blog post, the rel attributes won't make a difference to A.T. As for using aria-level, it works if you put it on the anchor tags. I'd also advise wrapping the list in a nav element, for semantic purposes and to save the need of putting a navigation role on the list when you don't need to.
I wound up with this markup for what I think is a not-too-bad breadcrumb. Hide the bullets using CSS (I didn't stop to do that I'm afraid) and I'd say its good.
<nav aria-label="breadcrumb" role="navigation">
<ul>
<li>Home</li>
<li>News</li>
</ul>
</nav>
Hope this helps!
You can use like below
<nav role="navigation" aria-label="breadcrumbs">
<p id="breadcrumblabel">You are here:</p>
<ol id="breadcrumb" aria-labelledby="breadcrumblabel">
<li>Home</li>
<li>Menu1</li>
<li>Menu2</li>
</ol>
</nav>
When searching the Web for a thorough solution on accessible breadcrumbs, #Craig Brett's solution seemed good at first sight. But after reading several sources, aria-level seems to be misused there (besides a W3C Validation problem, see my comment above).
Therefor I like to propose this approach:
<nav aria-labelledby="bc-title" role="navigation">
<h6 id="bc-title" class="vis-off">You are here:</h6>
<a href="~/" aria-labelledby="bc-level-1">
<span id="bc-level-1" class="vis-off">Homepage Website-Title </span>Home
</a>
<a href="~/news" aria-labelledby="bc-level-2">
<span id="bc-level-2" class="vis-off">Level 2: News </span>News
</a>
#Model.Title
</nav>
In this solution we have an HTML5 sectioning element (nav), which should have a heading, and *tada* there it is. Class vis-off signifies an element that is just available to screen readers. With aria-labelledby I'm telling the screen reader to read that headline.
In contrast to Chris' solution, either the <ul> or aria-level is gone.
I'd so or so go for an <ol> if necessary, because the items are in order. Better leaving it out, otherwise it gets very verbose in many screen readers on every page ("List item 1…").
aria-level seems to be misused in the solution above in my understanding. It must be child of a role attribute like f.e. role="list" and that role just signifies not structurally marked-up non-interactive lists.
Maybe a role treeitem might be more appropriate. IMHO it's overkill.
PS: I'm not using BEM notation here to shorten the ids and classes for readability.
On this page http://html5doctor.com/nav-element/, it mentions how to use the <nav> tag for semantic reasons.
In every example, it uses the <ul> tag, and mentions using it.
Is this required by the HTML 5 specification or is it just recommended by the author?
No, it doesn't.
HTML 5.1 Nightly 4.3.4 The nav element
A nav element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose:
<nav>
<h1>Navigation</h1>
<p>
...
...
</p>
<p>
...
...
</p>
</nav>
HTML shortened for simplicity and brevity.
Can we use multiple tags on the same page in html5?
I've read this article on Zeldman.com but it's not entirely clear to me
i.e.
<header><nav>links here</nav></header>
<footer><nav>links here</nav></footer>
Yes, absolutely. You can have multiple header, nav, and footer tags sans penalty.
As long as you're making sure you are using tags semantically and you aren't putting them in invalid places (they're block-level elements, so you can't put them inside an inline element, for example) then you shouldn't worry too much about what the sticklers are saying. It's all to easy to get caught up arguing about tiny details instead of moving forward on your project.
Yes, having multiple <nav> elements is absolutely ok.
You just have to make sure you're making them distinguishable for people using screen readers. You can do it by labelling each <nav> using aria-label.
<nav aria-label=’primary’>
<ul>
...List on links here...
</ul>
</nav>
<nav aria-label=’secondary’>
<ul>
...List on links here...
</ul>
</nav>
Or, if one of the <nav> as visible text on screen that can be identified as labelling element, you can use aria-labelledby like follows:
<nav aria-label="Site Menu">
<ul>
...List on links here...
</ul>
</nav>
<article>
<h1>Title</h1>
...
<nav aria-labelledby="id-1">
<h2 id="id-1">
Related Content
</h2>
<ul>
...List on links here...
</ul>
</nav>
</article>
You can read more about using Multiple Navigation Landmarks.
The answer is yes. You can have a <nav> tag in the footer, for more info check mdn <nav> documentation.