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
Related
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?
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.
I'm developing a page using Bootstrap and Django.
I have two pages: Pets and Cats. Both are in the nav bar.
Pets have several sections, including Cats.
When I click on Cats in the navbar, I want it to load the Pets page and scroll down to the Cats section.
My Pets page has the following code:
<div class="section" id="cats">
<div class=" centred auto">
<h1 class="h1">Cats</h1>
<p>Here you can find pictures of cats</p>
</div>
</div>
Cats part of the navbar has the following code:
<li class="active">
<a class="dropdown-item" href="{% url 'pets' %}#cats">CATS</a>
</li>
Now, when I'm on the Pets page and click Cats in the navbar, it scrolls down to Cats.
When I'm any other page on my website, click Cats in the navbar, it takes me to the Pets page, but does not scroll down.
I'm running a test server and I have tried this on Chromium, Chrome, and Firefox.
Any idea why / how to fix this?
In my case, the code that added CSS to the page turned out to be the culprit.
When the page went live, it worked as intended.
We think it's the issue of dynamic less compiler, but we haven't conducted the tests needed to pinpoint why this is happening in the first place.
I'm trying to learn semantic HTML5 markup by converting a simple site I once made for an old magazine. Now I've come to the navigation and search area. You should be able to select a specific article to read or search within the database. There are two tabs and when the first one is active you see the contents of the selected issue like this:
When clicking on the search tab you come to a search field, like so:
And when you've made a search the results are presented in a similar fashion to the contents above:
The present markup looks something like this:
<div id="nav">
<div id="tabs">
<div class="tab">Browse</div>
<div class="tab">Search</div>
</div>
<div id="browse">
<form>
<div>
<label>Year:</label>
<select>
<option>1985</option>
</select>
</div>
<div>
<label>Issue:</label>
<select>
<option>1</option>
</select>
</div>
</form>
<div id="contents">
<h1>Contents</h1>
<ul>
<li><a>Lorem ipsum</a></li>
</ul>
</div>
</div>
<div id="search">
<form>
<label>Search for anything:</label>
<input type="text">
<input type="submit" value="Ok">
</form>
<div id="results">
<!--
<h1>Sorry, we couldn't find anything.</h1>
<ul>
<li><a>Various stuff</a></li>
</ul>
-->
</div>
</div>
</div>
As for semantic elements, I have considered various options, none of which seems like the solution.
My first problem is whether I should wrap the whole thing inside nav tags or just the browse part, or even just the contents part of the browse part. I'm somewhat inclined to consider the whole thing a single main navigational area.
As for the inner parts, I assume they could be divided into section elements, primarily a browse section and a search section. If so, it would have been nice to get the tab text into those sections as headings, but that will complicate things presentational-wise too much (I know I shouldn't worry about CSS and JS at this stage, but I do). And sections without headings seem like a bad idea.
Another option would be to regard the div#contents and the div#results as subsections. One problem with that is that the results area doesn't have any content until a search has been made.
I can think of some other options as well, but I don't see any point in mentioning them all just to show research effort. I would still need just as much help. And I'd appreciate it too.
My first problem is whether I should wrap the whole thing inside nav
tags or just the browse part...
Looking at the definition of the nav element in the HTML5 spec
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.
...tells us that it should be used for the id="browse" element.
I think it should also wrap the form because it contains controls to filter these navigation items.
The id="search" element should, according to the aria role search
A landmark region that contains a collection of items and objects
that, as a whole, combine to create a search facility.
Get a role="search".
The tab list on the top should get the proper aria treatment for tabs with role="tablist" and role="tab". As shown in this snippet:
<div id="tabs" role="tablist">
<div class="tab" role="tab" aria-controls="browse">Browse</div>
<div class="tab" role="tab" aria-controls="search">Search</div>
</div>
Hello I am a web design student, looking to add micro data onto my website in order to keep up with the trends (doing a major over haul), however I am having no luck with it, for instance I have the itemscore for web pages on the body, however what is for "URL" as the "isBasedOnUrl" description makes it seam like you don't use that for the main navigation and cant I cant see another alternative, also what would this code be like in a schema, i really jsut cant wrap my head around it just yet, Thanks for any help this is much appreciated.
<body>
<img src="logo">
<div id="nav">
Home
</div>
<div id="maincont">
<p>Some "about" text</p>
</div>
<div id="footer">
<p>copyright at name</p>
</div>
</body>
You’ll want to use http://schema.org/WebPage, a more specific CreativeWork.
This schema doesn’t define a property for the site/page navigation (apart from breadcrumbs). And why should it in the first place? Simply use HTML5’s nav element. But if you need to set some properties about the navigation, you can use http://schema.org/SiteNavigationElement: "A navigation element of the page."
For isBasedOnUrl, did you read the description? "A resource that was used in the creation of this resource."