HTML Formatterhtmlformatteronline.com

Multi-column footer

Link columns, a brand block, a newsletter box and a legal line.

footercolumnslinksnewsletter
<footer class="site-foot">
  <div class="inner">

    <div class="brand">
      <a class="mark" href="/"><span>A</span> Acme</a>
      <p>Cloth you can trace back to the mill. Cut in Leeds since 1998.</p>
      <ul class="social">
        <li><a href="#" aria-label="Acme on Instagram">
          <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
        </a></li>
        <li><a href="#" aria-label="Acme on LinkedIn">
          <svg viewBox="0 0 24 24" aria-hidden="true" class="fill"><path d="M4.98 3.5A2.5 2.5 0 1 1 5 8.5a2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM10 9h3.8v1.7h.05c.53-.95 1.83-1.95 3.77-1.95 4.03 0 4.78 2.5 4.78 5.76V21h-4v-5.6c0-1.34-.02-3.06-1.9-3.06-1.9 0-2.2 1.45-2.2 2.96V21h-4z"/></svg>
        </a></li>
        <li><a href="/feed.xml" aria-label="Acme journal feed">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1.5" fill="currentColor" stroke="none"/></svg>
        </a></li>
      </ul>
    </div>

    <nav aria-label="Shop">
      <p class="col-title">Shop</p>
      <ul>
        <li><a href="/shirts/">Shirts</a></li>
        <li><a href="/knitwear/">Knitwear</a></li>
        <li><a href="/accessories/">Accessories</a></li>
        <li><a href="/sale/">Sale</a></li>
      </ul>
    </nav>

    <nav aria-label="Company">
      <p class="col-title">Company</p>
      <ul>
        <li><a href="/studio/">The studio</a></li>
        <li><a href="/mills/">Our mills</a></li>
        <li><a href="/journal/">Journal</a></li>
        <li><a href="/jobs/">Jobs <span class="tag">2 open</span></a></li>
      </ul>
    </nav>

    <nav aria-label="Help">
      <p class="col-title">Help</p>
      <ul>
        <li><a href="/delivery/">Delivery</a></li>
        <li><a href="/returns/">Returns</a></li>
        <li><a href="/sizing/">Size guide</a></li>
        <li><a href="/contact/">Contact</a></li>
      </ul>
    </nav>

    <div class="signup">
      <p class="col-title">Monthly dispatch</p>
      <p class="blurb">Notes on cloth and making. One email a month.</p>
      <form novalidate>
        <label class="sr" for="foot-email">Email address</label>
        <input type="email" id="foot-email" name="email" placeholder="you@example.com" autocomplete="email">
        <button type="submit">Join</button>
      </form>
    </div>

  </div>

  <div class="legal">
    <p>&copy; 2026 Acme Cloth Ltd. Registered in England, 04918822.</p>
    <nav aria-label="Legal">
      <a href="/privacy/">Privacy</a>
      <a href="/terms/">Terms</a>
      <a href="/cookies/">Cookies</a>
      <a href="/accessibility/">Accessibility</a>
    </nav>
  </div>
</footer>

How it works

Each link group is a nav with its own label. Four <nav> elements on a page with no labels give a screen reader user four identical "navigation" landmarks. aria-label="Shop" and so on makes the landmark list actually useful.

The column headings are paragraphs, not headings. "Shop", "Company" and "Help" label a navigation group; they are not sections of the document. Marking them as <h3> — which is common — injects four headings into your outline right at the end of every page, which is noise when a screen reader user pulls up the heading list.

The grid ratio is not equal. 1.6fr repeat(3, 1fr) 1.4fr gives the brand and the signup more room than the link columns need, which is how the proportions stay right without any fixed widths.

Two breakpoints, and the brand spans both times. At 900 pixels it becomes two columns with the brand and signup spanning the full width; at 480 everything stacks. grid-column: 1 / -1 does the spanning without knowing the column count.

Social links have labels. An icon-only link with no text has no accessible name at all. Each one names the network and the company, because "Instagram" alone tells a screen reader user nothing about whose account it is.

Accessibility notes

The footer is a real <footer> element, exposed as a contentinfo landmark, so screen reader users can jump straight to it.

The newsletter field has a real label, visually hidden with clip-path rather than display: none, which would hide it from assistive technology too. A placeholder is not a label.

Link text is 14 pixels here, which is about the floor. Footers are often set smaller than that and it is functional navigation, not fine print — do not go below it.

Making it yours

Four link columns is about the limit before a footer becomes a sitemap. If you genuinely need more, the minimal footer plus a real sitemap page is usually the better structure.

The 2 open tag on the jobs link is a small thing that measurably increases clicks. Keep it accurate or remove it — a stale count is worse than none.

Related templates

Minimal footer

One line, three variants — centred, split and with a status dot.

HTMLCSS

HTML email boilerplate

A table-based email shell that survives Outlook and Gmail.

HTML

Newsletter signup

An inline email capture with validation and a success state, in three layouts.

HTMLCSSJavaScript

Sticky footer

A footer that sits at the bottom of the viewport on short pages and below the content on long ones.

HTMLCSSJavaScript

Check your version

Once you have edited this, the HTML validator will catch any tag you left unclosed, and the formatter will tidy the indentation. Both run in your browser.

HTML Formatter HTML Beautifier HTML Pretty Printer JSON Formatter