href="/about"
safer than
href="about"
for internal links, and what is the problem with
href="#"?href="/about"
is root-relative — it always resolves to
yourdomain.com/about
regardless of which page the link appears on.
href="about"
is path-relative — inside a subfolder it silently resolves to the wrong URL.
href="#"
scrolls to the top of the page and does nothing useful — it breaks keyboard navigation, confuses screen readers, cannot be right-clicked to open in a new tab, and is invisible to search engines. Never use it.
<nav>
declares a navigation landmark that screen readers and search engines recognise;
<ul>
and
<li>
give the links a list structure that screen readers count and announce ("navigation, 4 items");
and
<a href>
is the actual link. Each element is doing a specific job — remove any one and some users lose functionality.href
attribute controls where a link goes. Root-relative paths (starting with
/)
always resolve from the site root — reliable from any page. Path-relative paths (no leading slash) resolve relative to the current page's folder — they break the moment a link appears on a page in a different folder. Absolute URLs (including the full
https://)
are needed for links to other websites.<nav>
element, and each beyond the first needs an
aria-label
so screen reader users can distinguish them in the landmarks list.display:none,
which also hides it from screen readers). It becomes visible when it receives keyboard focus. Its
href="#main-content"
targets the
id="main-content"
on the
<main>
element. Without it, every keyboard user must Tab through every navigation link on every page load before reaching the content. One line, enormous improvement.
aria-label
on each
<nav> — The first
<nav>
on a page with only one does not strictly need a label — it is the only navigation. But when a page has two or more, each needs
aria-label
so a screen reader user opening the landmarks list sees "Primary navigation", "Breadcrumb navigation", "Footer navigation" instead of three identical "navigation" entries. The label text does not need to include the word "navigation" — the element role announces that automatically.
<ul>
nested inside a parent
<li>.
The HTML expresses the hierarchy; CSS and JavaScript control when it is visible. Screen readers understand nested lists as a sub-list within a list item and announce the depth level. Never flatten a nested structure into a single list just because it is simpler to style — the hierarchy is meaningful information.
<ol> — A breadcrumb uses an ordered list (
<ol>) because the path is sequential — Home → Services → Design — and order matters. Each step except the last is a link. The last step (the current page) is plain text inside
<li aria-current="page">,
not a link — you do not link to the page you are already on. Screen readers announce it as "current page" to orient the user.
<a>
tags is read by screen readers and indexed by search engines. "Click here" and "Read more" are meaningless out of context. "View our design portfolio" or "Read the privacy policy" are clear standalone. A good rule: if you pulled every link on your page out of context and listed them, each one should still make sense on its own.
<a href>
links, and a logical tab order are the minimum requirements for a navigable page. A site built with
<div onclick>
elements instead of links blocks all non-mouse users.<a href>
links. Pages only reachable via JavaScript navigation or
href="#"
may never be crawled or indexed. Real anchor tags in a
<nav>
directly tell crawlers which pages exist and how they relate.<nav>
is a named landmark. Styled
<div>
containers are invisible to landmark navigation entirely.href="/about")
work identically from every page on the site. Path-relative URLs (
href="about")
work only from pages in the correct folder — a single navigation include shared across all pages will have broken links everywhere except the root.href="#"
placeholders and vague link text like "click here." Be cautious if it suggests adding
role="navigation"
to a
<nav>
element — that role is already built in and adding it explicitly is redundant.
<body>
on your page. Point it to
#main-content
and add that
id
to your
<main>
element. Press Tab immediately on page load and confirm it is the first thing focused.<nav aria-label="Primary">,
a
<ul>,
and
<li><a href="...">.
Use root-relative paths (leading
/)
for every internal link. No
href="#".<ul>
inside that item's
<li>.
No CSS needed — just confirm the HTML structure is correct by viewing it in the browser's accessibility tree.<nav aria-label="Breadcrumb"><ol>.
Include three levels: Home → section → current page. The current page entry should use
aria-current="page"
and should not be a link.aria-label="Footer"
and at least three links. Open Chrome DevTools → Accessibility → Full page accessibility tree and confirm you can see three distinct named navigation landmarks: Primary, Breadcrumb, and Footer.href="#"
as a placeholder. It scrolls the page to the top — a subtle, confusing action for every user. It cannot be bookmarked, right-clicked to open in a new tab, or crawled by search engines. If the destination is not built yet, omit the link entirely or use a real in-progress URL.<div>
and JavaScript onclick handlers. The result is not keyboard-focusable, not announced as navigation by screen readers, not crawlable by search engines, and cannot be opened in a new tab. Use
<a href>
— every time, for every navigation link.href="about"
without a leading slash). These work on the home page but silently break when the same navigation include is used on a page inside a subfolder. Always use root-relative paths (
href="/about")
for internal navigation.aria-label
when there are multiple
<nav>
elements. A screen reader presents all landmarks to the user. Without labels, three navigation elements are announced as "navigation, navigation, navigation" — identical and indistinguishable. The second and every subsequent
<nav>
must have a unique
aria-label.<nav>
and real
<a href>
links, a breadcrumb using
<ol>,
and a footer nav — using root-relative paths, descriptive link text, and
aria-label
to distinguish each navigation landmark.
Welcome back to Jit4All