#15DaysOfCSS Day 1: Semantic markup of navbars

The HTML is always the same!

and

Sep 13, 2021

On this first day, we'll talk about HTML - because we only need to discuss it once. One of the nice things about teaching navbars is that they are always marked up the same way, no matter what direction you want them to go or how many dropdowns you'd like to appear.

Start with this base navbar HTML and add any further elements sparingly and thoughtfully. On Day 13, when we get to hamburger buttons (CSS only!), you'll see us add a few additional elements.

Navbars: An unordered list of links

Navigation is a list of links. Although the marketing people deeply care about what order they links are listed in, they could be visited in any order. With that description, start your navbar with a simple unordered list.

  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

The `<ul>` element

<ul> elements are for unordered lists. An "unordered list" is a list of items that might go in any order without changing the meaning of the list. A list of the contents of my desk drawer would be an unordered list.

<ol> is for ordered lists. These are lists that must be kept in order, like a set of directions.

The browser's default styling dictates that <ul> has bullets, while <ol> has numbers. However, using the CSS property list-style-type, you may change the styling associated with these elements, such that <ul> has Roman numerals and <ol> has square bullets, for example. The value of none is generally what we use in navbar styling.

<ul> and <ol> are very particular about their children. Only three types of child elements are permitted.

<li>
script and template***, or "script-supporting elements," as WHATWG states.

👉🏿 👉🏿 In other words, <p>, <div>, and <span> may not be children of <ul>.

***Jen spent ALL DAY trying to get this post into Substack, resulting in “network error unsaved changes.” Turns out it was having script and template inside of angle brackets, which made Substack (and Jen) very angry. 😡 Imagine the angle brackets are there.

The `<li>` element

<li> elements are neatly contained inside the <ul> element. <li> elements may only have one of three parents:

<ul>
<ol>
<menu>

That's it. If you want a bullet next to something and it’s not in a HTML list, use the character entity references: • &bullet; • •

The `<nav>` element

Once your unordered list is in place, wrap it in a <nav> element if the navigation is the major navigation on your website.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Both MDN and WHATWG state that <nav> is for "major navigation blocks" on the site. What might that mean?

Your main navigation bar, usually located somewhere near the top of the page.
Sub-navigation for the page, maybe in a left column.
A table of contents for longer documents.
An index.

What `<nav>` isn't for

Links in the footer to terms and conditions, privacy policy, etc. This isn't "major" navigation.
Every link that goes anywhere on your page.

Multi-level navbars

If your HTML spans more than one level, nest your list appropriately. We'll discuss this further on Day 5 and Day 11.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
    <!-- NO CLOSING </li> HERE! -->
      <ul>
        <li><a href="#">Mission</a></li>
        <li><a href="#">Board</a></li>
      </ul>
    </li> <!-- this is the closing </li> you were searching for -->
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

⛔️ BAD NAVBARS ⛔️

❌ This is not a navbar. Please stop doing this.

<nav>
  <a href="#">Home</a> 
  <a href="#">About</a> 
  <a href="#">Contact</a>
</nav>

❌ ❌ This is even worse.

<div class="nav">
  <a href="#">Home</a> 
  <a href="#">About</a> 
  <a href="#">Contact</a>
</div>

❌ ❌ ❌ Just no. Stop it.

<div class="nav">
  <div class="link><a href="#">Home</a></div> 
  <div class="link><a href="#">About</a></div>  
  <div class="link><a href="#">Contact</a></div> 
</div>

Semantic HTML conveys meaning while div div div div does not.

🎉📚Get the #15DaysOfCSS e-book📚🎉

These #15DaysOfCSS posts will be compiled into an e-book — pre-order now!

Email is great, and blogs are awesome, but it can be challenging to use them as a reference in the future. We'll be assembling this month's work into an e-book.

Pre-order the book

👩🏽‍💻 Challenge: Semantic navbar markup

👩🏽‍💻 Try today’s CodePen Challenge about semantic navbar markup. When you’ve completed it, post your answer in our discussion in Substack.

Take the CodePen Challenge

📚 More information and examples

📚 MDN: <nav>, <ul>, <li>

📚 WHATWG: <nav>, <ul>, <li>

📚 Basic HTML reference from Frontend Masters Bootcamp