What is the best approach for creating a website with multiple page navigation. I've done both in the past but i dont know with one is better.
In-page navigation:
<nav>
Home
Products
About Us
</nav>
<div id="home">
...
</div>
<div id="products">
...
</div>
<div id="about">
...
</div>
You can have multiple divs and hide them and show them using css when each link is active.
Site navigation:
<nav>
Home
Products
About Us
</nav>
You have multiple html files and you just redirect to them.
I think the most common way to do it is the second way, but if you dont use a server side code processor/compiler/library you will need to duplicate the layout(is this example just the nav but can be more).
Which one should i use for a simple website, different sections or different pages?
Related
Good evening everyone,
I’ve got a dilemma which I can’t solve on my own. I have a webpage with two pages. The menu contains 5 elements 4 of which are navigated to via anchors, and another one is the second page. The problem appears when I’m trying to go from this second page to some menu element which is anchored and hence not accessible. The anchored navigation works perfectly if I’m on the first page where these anchors are.
How can I solve this issue? Hope someone can help me!
UPDATE: added the code, hope my problem is more clear now.
<div class="col-md-auto">
<button class="top-menu-hamburger"><i class="fas fa-bars"></i></button>
<ul class="top-nav-menu" id="top-nav-menu">
<!-- 1st page -->
<li>About Us</li>
<li>Course</li>
<!-- 2nd page -->
<li>Our Blog</li>
</ul>
</div>
<!-- 1st page -->
<div id="about-us_header">
<h2 class="about-us" class="font-size:2.0rem">We believe that it is necessary not only to READ about your teacher, but to HEAR him as well.</h2>
</div>
<div id="course">
<h2 class="course-text" class="font-size:2.0rem">We believe that it is necessary not only to READ about your teacher, but to HEAR him as well.</h2>
</div>
Navigation to a specific location in a page works because the destinations need to have id attributes set up on them and the links that navigate need to include #ID (where ID is replaced with the actual value of the id attribute you've already set up at the destination). To be able to move between pages in both directions, each page would need to have elements with ids established at the destination points and each page would need links pre-configured to go to those destinations on the other page.
For example:
Page1.html
<p id="page1destination">Some good stuff here</p>
Go to pre-confiured spot on page 2
Page2.html
<p id="page2destination">Some good stuff here</p>
Go to pre-confiured spot on page 1
I have a simple question. Should the button, that I use to open/close my navigation menu be included in the nav tags?
The button itself is not helping in navigating but without him, there is no access to navigation.
<nav>
<ul class="nav">
<li class="nav__el nav__el-active">Home</li>
<li class="nav__el">Generic</li>
<li class="nav__el">Services</li>
<li class="nav__el">Blog</li>
<li class="nav__el">Contact</li>
</ul>
<i class="fas fa-bars"></i> //menu btn
</nav>
that's the example. Now the btn is in the nav, but it also can be like that:
<div class="topbar">
<nav>
<ul class="nav">
<li class="nav__el nav__el-active">Home</li>
<li class="nav__el">Generic</li>
<li class="nav__el">Services</li>
<li class="nav__el">Blog</li>
<li class="nav__el">Contact</li>
</ul>
</nav>
<i class="fas fa-bars"></i> //menu btn
</div>
At first glance, when reading this at WHATWG:
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.
It seems to me that the button should not be included, as that's clearly not a navigation link.
Anyway, if you continue reading:
User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip or provide on request (or both).
With that in mind, it makes sense to include that button and any other non-link control you might have (usually in the header area) because if a screen reader user wants to...:
...skip the whole navigation, they also want to skip the other controls that are not links.
...jump straight to the navigation, they might also want to use some navigation elements that are not links.
If you check some of the examples at WHATWG, it looks like they are applying these criteria. The first example is:
<body>
<h1>The Wiki Center Of Exampland</h1>
<nav>...</nav>
<article>...</article>
...
</body>
Here, it makes sense not to skip the title on the page (to know where you are) but then skip all the navigation elements and jump straight to the content.
However, on the last one:
<nav>
<h1>Folders</h1>
<ul>
<li><a ...>... </a></li>
...
</ul>
</nav>
It would make sense to skip the Folders heading element if you are not interested in the navigation because it's actually part of it, the same way you put the heading of a section inside a section and not before it. The same applies to your menu button.
Some other examples of elements that might be part of the main navigation of the site, and thus go into <nav> are logos that link to the root of the site or search forms.
For example, LinkedIn is doing that:
Also, Bruce Lawson, who is part of the Accessibility Task Force, has the search inside the <nav> element on his personal website:
However, you can also find examples of the opposite. For example, AirBnB only includes some links in the <nav> element:
While in this case, I would have also included the search, that for me clearly represents the main way to navigate on their site.
Anyway, you could and should also use ARIA for accessibility and structured data / Schema.org markup for search engine support.
One of my sites is huge and complex. So I try to make a group of links on bottom of my page to make sense for visitors of my page and also for a site crawlers.
I decide to use -nav- Tag and -h1-h2-h3- heading Tags. I will use CSS to display no difference between headings. (Headings i will use for SEO and i hope it will work)
I have two options to use -nav- Tag. My question is which option is better.
Option 1(one -nav- tag):
<nav>
<h1>Main links</h1>
HTML |
CSS
<h2>Secondary links</h2>
JavaScript |
jQuery
<h3>Third links</h3>
JavaScript |
jQuery
</nav>
Option 2 (many -nav- tags):
<nav>
<h1>Main links</h1>
HTML |
CSS
</nav>
<nav>
<h2>Secondary links</h2>
JavaScript |
jQuery
</nav>
<nav>
<h3>Third links</h3>
JavaScript |
jQuery
</nav>
All links point to different page on same domain
So which option should i use for SEO purpose. Please advice. Thank you.
Note:
This question is more SEO than about code, but i left it still on so my help some other person. If will be more downvotes i'll delete him. I choose to go with second version.
From my understanding you can have as many tags as you would like as long as they arent nested.
However in my opinion the first option is better.
This is the markup I have written for the header of web commerce site. I am not sure if it is semantically correct - especially the utility bar. Should I add the role-navigation to the container div of the links to the account, wishlist pages or should that also be within a nav element or an aside?
Also please let me know what I can do to make THIS design (can't change the order of the design - client wants it like this) more accessible and friendly towards assistive technologies.
<header>
<div role="navigation" aria-labelledby="utility-nav" class="utility-nav">
<h2 class="visuallyhidden" id="utility-nav">Account and store pages</h2>
<div class="align-right">
my account
find a store
credit center
track order
wishlist
</div>
</div> <!-- utility bar -->
<div id="logo-search">
<!-- logo -->
<!-- search -->
<!-- mini cart/shopping bag -->
</div> <!-- logo, search, shopping bag container -->
<nav id="top-nav">
Women
Men
Juniors
Baby
<!-- etc -->
</nav> <!-- top nav -->
</header> <!-- header -->
Instead of <div role="navigation"> just use <nav>. It is ok to have more than one <nav> element on the page, even in a <header>. While <nav> is generally reserved for major blocks of navigation (meaning realistically you would max out at two or three on a page), I think both of these qualify in your example.
Consider putting your links within a list as that announces the number of items to a screen reader user.
Also, I suspect your visuallyhidden class is there to hide the <h2> from all users except screen readers. Pairing that with aria-labelledby results in it being announced twice. Having the <h2>can also create unnecessary stops in heading navigation within a screen reader. Consider dumping the <h2> altogether and using aria-label instead. This way you don't need to visually hide it and you can still provide context to your screen reader users.
At that point, you might want to also do that to the primary navigation (or not, depending on user testing and how verbose it makes the page).
So, to tweak your example a bit:
<header>
<nav aria-label="Account and store pages" class="utility-nav">
<ul class="align-right">
<li>my account</li>
<li>find a store</li>
<li>credit center</li>
<li>track order</li>
<li>wishlist</li>
</ul>
</nav> <!-- utility bar -->
[…]
<nav aria-label="Primary navigation" id="top-nav">
<ul>
<li>Women</li>
<li>Men</li>
<li>Juniors</li>
<li>Baby</li>
<!-- etc -->
</ul>
</nav>
</header>
If you can, consider downloading the free screen reader NVDA (and donating if your employer has the cash) and running it through the page you build.
A quick question re: HTML5 nav, specifically that of sub navigation (from a semantic point of view).
I have <nav> in the header for the main menu. Down the left of a standard page I have second level nav and down the right third level nav (no, I didn’t design the site). Is there anything I can do HTML5/ARIA wise to differentiate between the 3 menus? Or are they all simple <nav> blocks?
I dont even think I need <aside> in either left or right column as there isnt any additional info apart from these actual menus.
Any thoughts/advice would be much appreciated.
This may be an old question, but there is a better answer now:
You can label each navigation section implicitly using headings, and explicitly use WAI-ARIA attributes:
<nav role="navigation" aria-labelledby="firstLabel">
<h2 span id="firstLabel" class="hidden">Main menu</h2>
<ul/>
</nav>
...
<nav role="navigation" aria-labelledby="secondLabel">
<h2 span id="secondLabel" class="hidden">Local pages</h2>
<ul/>
</nav>
For user-agents like screenreaders, they can report that as "Local pages, navigation" (although they vary in how it's reported).
Read more on a W3C wiki page on using labelledby.
I would differentiate between the navigation sections by giving them semantically relevant ids and by placing them in order of importance in the HTML code, along the following lines:
<body>
<nav id="main-navigation">
<!-- The main menu goes here -->
</nav>
<nav id="sub-navigation">
<!-- The left hand menu goes here -->
</nav>
<nav id="leaf-navigation">
<!-- The right hand third level menu goes here -->
</nav>
<section id="content">
<!-- Actual page content -->
</section>
</body>
Other than that, I see no real need for further differentiation between the sections. The above approach is easy to understand, should be reasonably easy to style and is semantically clear, which is certainly good enough for me.