为何使用<ul><li>标签创建菜单、导航栏？用div和链接做导航栏可行吗？

Great question! Let's unpack this from three key angles to give you a clear, practical picture:

Why use <ul> and <li> for menus/navigation? #

The biggest reason is semantic HTML. A navigation bar is, at its core, a list of related links—and <ul> (unordered list) + <li> (list item) are purpose-built to represent exactly that structure. Here's why that matters:

• Accessibility win: Screen readers and other assistive tech recognize lists. They'll announce something like "Navigation list with 5 items" to users, letting them quickly jump between options using list-specific shortcuts. This makes your site usable for everyone.
• SEO benefits: Search engines prioritize semantic markup. Clear, meaningful structure helps crawlers understand your page's hierarchy and the role of your navigation, which can give you a tiny but helpful edge.
• Team clarity: It's a universal front-end convention. Other developers will immediately recognize a <ul> inside a <nav> as a navigation menu, making collaboration and maintenance way smoother.
• Built-in structure: Even though you'll almost always reset the default list styles (like bullet points and padding) with CSS, the list already gives you a logical parent-child hierarchy—no need to cobble that together with generic containers.

Can you make a navigation bar with just <a> and <div>? #

Absolutely! There's no hard rule forcing you to use lists. If you wrap <a> tags in <div>s and style them correctly, you'll get a visually identical navigation bar. But there are tradeoffs:

• Lost semantics: <div> is a generic block container with no inherent meaning. Browsers and assistive tech won't know this is a navigation list—they'll just see a bunch of divs with links. This hurts accessibility and could slightly impact SEO.
• More redundant code: Without the list's natural hierarchy, you'll likely need to add extra classes or styles to control spacing, positioning, and hover states for each navigation item. Lists simplify this by giving you a built-in grouping structure.

What about nested hierarchy concerns? #

If you're worried about deep nesting for multi-level menus (like dropdowns), rest assured that <ul> nesting is actually the most semantic way to represent sub-menus—they're literally child lists of a parent navigation item.

That said, if you find nested selectors getting too verbose (like nav > ul > li > ul > li > a), here are easy fixes:

• Add targeted class names: Give your main menu <ul> a class like main-nav and sub-menus sub-nav. Then your CSS can use .main-nav .sub-nav a instead of writing out every level.
• Simplify selectors: You don't need to chain every parent element. Use child selectors (>) only when you need to target direct children, otherwise rely on descendant selectors for brevity.
• Use CSS preprocessors or variables: Tools like Sass let you nest selectors in a readable way, or you can use CSS variables to reuse styles across nested levels, cutting down on repetition.

Here's a clean example of a nested navigation structure with classes to keep things manageable:

<nav class="site-nav">
  <ul class="main-nav">
    <li><a href="/">Home</a></li>
    <li class="has-subnav">
      <a href="/products">Products</a>
      <ul class="sub-nav">
        <li><a href="/products/laptops">Laptops</a></li>
        <li><a href="/products/phones">Phones</a></li>
      </ul>
    </li>
  </ul>
</nav>

内容的提问来源于stack exchange，提问作者boekenenbroeken