Should I use `s and` s inside my ``s?

html

responsive-design

semantic-ui

accessibility

byAlex Kataev·Dec 26, 2024

<nav> paired with <ul> and <li> is a trusted method for creating semantic, accessible website navigation. It elegantly arranges links in a list, favoring both user experience and SEO.

Example:

<nav>
  <ul>
    <li><a href="#home">Home</a></li> <!-- In case you forgot where you start! -->
    <li><a href="#about">About</a></li> <!-- It's always good to know who is behind the magic -->
    <!-- More items here -->
  </ul>
</nav>

Adopt this pattern for transparent, orderly navigation menus satisfying all devices and assistive technologies.

Usage Scope and Alternatives

When architecting your site, particularly the navigation part, there's a suite of design choices to consider. <nav> isn't married to <ul> and <li>; it plays well with **<div>**s and <a> tags, beloved by some design frameworks like Bulma for dropdown menus.

Even more, adding ARIA attributes, acts as icing on the cake, transforming your website into an assistive-technology friendly space. For styling, CSS pseudo-selectors like :before and :after make adding visual elements a breeze, whilst sidestepping unnecessary HTML elements.

Overall, keeping your HTML clean and accessible is key; strive to strike out needless markup. However, make sure your markup is purposeful—it should aim at guiding users effortlessly on your site.

Semantics and Accessibility – The Soul and Heart of `<nav>`

Semantic Defined

The use of <ul> and <li> inside your <nav> is all about meaning. They set a clear hierarchy and structure, providing users and crawlers a map to traverse your site effectively.

Enhance Accessibility

Pairing <nav> with <ul> and <li> isn't the only flavor to charm assistive technology users. Adding ARIA landmarks to demarcate navigation areas along with accurate ARIA labels can propel the clarity of your navigation to new heights.

Styling Best Practices

When coloring your <nav> with CSS, use selectors that up the readability game without causing non-semantic-tag pollution. Master the art of overwriting browser†s default styles to maintain semantic accuracy while manifesting compelling visuals.

Harnessing the Power of `<nav>`

For labyrinthine menus with multiple levels, nested <ul> and <li> is your knight in shining armor. It keeps the structure clean, helping both your users and you breathe easy.

Flexibility: A `<nav>` Pro-tip

Based on your design needs, you might lean towards direct <a> tags, leaving out list items. Just ensure that this choice resonates with your overall site structure and doesn't muddle the navigation map.

Float with CSS Positioning

The layout of your navigation segment might be influenced by CSS positioning methodologies. Based on this, the required level of DOM elements might vary.

Practical Examples and Real-world Applications

Design with Semantics

When art meets science in web development, <ul> and <li> tags contribute to a neat artwork—a well-structured and readable document. Deploy them when they have a mission to fulfill.

Readability and Efficiency: The Pillars

With every structural revision, question if it amplifies the readability and usability of your navigation. Every element in your navigation should form the steppingstones to a smooth user experience.