HTML and CSS Links & Navigation
HTML & CSS: Links & Navigation
Links connect your site together.
Combine semantic navigation markup with CSS to create clear, accessible menus.
Basic links
Create hyperlinks with the <a> tag and the href attribute.
This anchor uses the href attribute to define the destination.
For external links, include target="_blank" and rel="noopener noreferrer".
If you want to read more about HTML Links or get an in-depth understanding, go to HTML Links in the HTML tutorial.
Note: target="_blank" opens the link in a new tab. Use rel="noopener noreferrer" to prevent the new page from controlling your site and to avoid sending the referrer.
Link attributes
href- destination URL.target- where to open (_self,_blank).title- optional tooltip.download- download the linked file.
In other words: An absolute URL starts with https:// and points anywhere on the web. A relative URL points to another file in the same project (like about.html).
Download attribute
<a href="files/guide.pdf" download>Download the guide</a>
If you want to read more or get an in-depth understanding, see Bookmarks and Link Colors in the HTML tutorial.
Navigation menus
Wrap site navigation in a <nav> element.
Use lists for grouping links.
Note: The aria-label attribute gives screen readers a short description of the menu, such as "Primary navigation".
Navigation markup
<nav class="site-nav" aria-label="Primary">
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
This markup wraps the list of links in a semantic <nav> with an aria-label to describe its purpose to assistive technologies.
Learn more: Links, Semantic Elements.
Styling navigation with CSS
Horizontal menu
.site-nav ul {
display:flex;
gap:16px;
list-style:none;
padding:0;
margin:0;
}
.site-nav a {
display:block;
padding:12px 20px;
border-radius:999px;
text-decoration:none;
color:#0f172a;
font-weight:600;
}
.site-nav a:hover, .site-nav a.active {
background:#04AA6D;
color:#fff;
}
<nav class="site-nav" aria-label="Primary">...</nav>
The CSS uses flexbox to space items and applies hover/active styles for feedback and clarity.
Explore more designs: CSS Navbar, Horizontal Navbar, Vertical Navbar.
Button-style links
Apply display: inline-block, padding, and background colors to make links look like buttons.
Skip links for accessibility
Give keyboard users a quick path to main content.
Skip link
<a class="skip-link" href="#main">Skip to content</a>
.skip-link {
position:absolute;
left:-9999px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
.skip-link:focus {
position:static;
width:auto;
height:auto;
padding:12px 20px;
background:#000;
color:#fff;
}
The skip link is visually hidden until focused; then it becomes visible so keyboard users can jump directly to #main.
If you want to read more about CSS Accessibility or get an in-depth understanding, go to CSS Accessibility in the CSS tutorial.
Active states and transitions
- Add
.activeclass to represent the current page. - Use
:hover,:focus,:focus-visiblefor better keyboard accessibility. - Apply
transitionfor smooth color changes.
Responsive menus
On mobile, convert horizontal menus into vertical stacks or hamburger navigation.
Note: A hamburger menu is the three-line button that expands to show links on small screens.
- Use media queries to switch
flex-directionto column. - Hide/show navigation with a menu button and JavaScript for more complex patterns.
- See Responsive Navbar examples.
Accessible navigation demo
This demo presents a simple site navigation and content area using semantic tags and accessible focus styles.
Syntax highlights: flex-based menu layout, hover/focus feedback, and an active link state.
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<nav aria-label="Primary navigation">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Docs</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<h1>Accessible Navigation</h1>
<p>This menu uses semantic tags, keyboard focus states, and flexbox for layout.</p>
</main>
</body>
</html>
body {
font-family:"Source Sans Pro",sans-serif;
margin:0;
background:#f1f5f9;
}
nav {
background:#0f172a;
padding:12px 24px;
}
nav ul {
display:flex;
gap:12px;
list-style:none;
margin:0;
padding:0;
}
nav a {
color:#cbd5f5;
text-decoration:none;
padding:10px 18px;
border-radius:8px;
}
nav a:hover, nav a:focus {
background:#1d4ed8;
color:#fff;
}
main {
max-width:720px;
margin:48px auto;
padding:0 24px;
}
The nav bar uses spacing and color contrast for readability, while the content region centers text and provides breathing room.
