Skip to main content

Header style (Logo, Application Name)

Must haves

  1. Enclose header content in a <header> element.
  2. Include a “Skip to main content” link to allow keyboard users to quickly bypass the header links. See more information about skip navigation
  3. Ensure logos have descriptive alternative text (ex: “logo” is not correct or descriptive when the logo visually shows “Stanford Healthcare”).
    1. Tip: use CSS styled text whenever possible rather than using an image of text.
  4. Navigation sections are enclosed in a <nav> element (preferred) or have role="navigation" on the container.
  5. Use list markup for lists of navigation links.

Learn more about brand compliance. Use Stanford and Source Sans 3 fonts to implement the Stanford header signature when possible.

Visual example

More in Figma

Stanford Biology Header

Do and Don't

DoDon't

<header>
   <a href="#main-content">Skip to main content</a>
   <a href="https://chemistry.stanford.edu/">
      <div class="…">Stanford</div>
      <div class="…">Chemistry</div>
      <div class="…">School of Humanities and Sciences</div>
   </a>

   <nav aria-label="primary">
      <ul>
        <li><a href="…">About</a></li>
        <li><a href="…">Research</a></li>
        …
      </ul>
  </nav>
</header>

<div class="header">
  <a href="https://chemistry.stanford.edu/">
      <img src="…/logo.png">
  </a>
  <div class="nav-section">
      <div><a href="…">About</a></div>
      <div><a href="…">Research</a></div>
  </div>
</div>

Here there is no semantic structure, no skip link, and the main logo/home link is an image rather than styled text and it has no alt.

Last modified