📝 HTML Recipes

Created by
Stephanie Eckles

⭐️ Star on GitHub
Contributions welcome!

List

<ul>
  <li>Lorem ipsum dolor sit.</li>
  <li>Expedita perferendis saepe quas.</li>
  <li>Dolorem at fugit quam.</li>
</ul>
<ul>
  <li><a href="#">Lorem ipsum dolor sit.</a></li>
  <li><a href="#">Numquam exercitationem ea alias?</a></li>
  <li><a href="#">Veniam, ea. Facilis, reiciendis.</a></li>
  <li><a href="#">Enim inventore labore iste?</a></li>
  <li><a href="#">Similique enim nisi quo.</a></li>
</ul>

If you have more than one <nav> present in your layout, it's best to label them so that users of assistive technology can use landmark navigation to traverse your page's hierarchy and know the difference between navigations.

This can be done with aria-label on the <nav>, or aria-labelledby which would point to the id of a labeling element.

Read more on using aria-label and descriptions from Ben Myers.

Setting list-style: none in CSS can remove the list semantics announced to users of assistive technology. Including role="list" restores list semantics in that scenario.

<nav>
  <ul role="list">
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Sign Up</a></li>
  </ul>
</nav>

This free set of social icons comes from IcoMoon and uses the technique of an SVG sprite. You can view the sprite SVG code separately.

Often in this scenario, the icon is considered decorative and so the aria-hidden attribute is included on the SVG. Additionally, for older IE support, focusable="false" ensures the SVG does not create an extra tab stop for keyboard users.

The inclusion of role="list" is explained for Navigation Links.

<ul role="list">
  <li><a href="https://twitter.com"><svg aria-hidden="true" focusable="false" width="24" height="24" fill="currentColor" class="icon icon-twitter"><use href="#icon-twitter"></use></svg> Twitter</a></li>
  <li><a href="https://facebook.com"><svg aria-hidden="true" focusable="false" width="24" height="24" fill="currentColor" class="icon icon-facebook"><use href="#icon-facebook"></use></svg> Facebook</a></li>
  <li><a href="https://linkedin.com"><svg aria-hidden="true" focusable="false" width="24" height="24" fill="currentColor" class="icon icon-linkedin"><use href="#icon-linkedin"></use></svg> LinkedIn</a></li>
  <li><a href="https://youtube.com"><svg aria-hidden="true" focusable="false" width="24" height="24" fill="currentColor" class="icon icon-youtube"><use href="#icon-youtube"></use></svg> YouTube</a></li>
  <li><a href="https://twitch.tv"><svg aria-hidden="true" focusable="false" width="24" height="24" fill="currentColor" class="icon icon-twitch"><use href="#icon-twitch"></use></svg> Twitch</a></li>
</ul>

Hero - Title

<header>
  <h1>Lorem ipsum dolor sit.</h1>
</header>

Lorem ipsum dolor sit.

Hero - Marketing

<header>
  <h1>Lorem ipsum dolor sit.</h1>
  <a href="#">Sign Up</a>
</header>

Lorem ipsum dolor sit.

Sign Up

Hero - Article

<header>
  <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit</h1>
  <p><em>Published on: <time datetime="2021-07-24">July 24</time></em></p>
  <p><small><strong>Written by</strong>: Stephanie Eckles</small></p>
</header>

Lorem ipsum dolor sit amet consectetur adipisicing elit

Published on:

Written by: Stephanie Eckles

Blockquote

<blockquote>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  <footer>- <cite>Laura Ipdo</cite></footer>
</blockquote>

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

- Laura Ipdo

Article

Note: An hr is intended as "a thematic break between paragraph-level elements" and should not be used for visual presentation only. If your intent is to provide a visual flourish, one alternative would be to add a class to the element before or after the visual break to add a styled border.

<article>
  <h2>Lorem ipsum dolor sit.</h2>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. <strong>Reiciendis nulla iste temporibus voluptatem</strong> sed laudantium eos fugiat fuga qui inventore placeat ullam voluptate pariatur exercitationem obcaecati, veniam debitis quisquam velit.</p>
  <p>Ipsam nam iusto officia natus maxime inventore voluptatibus? Iste possimus veniam ipsum <a href="#">repellendus, ad tenetur ullam saepe impedit error</a>. Corrupti quas animi autem rem fugit ratione eligendi vero labore facilis.</p>
  <hr>
  <p>Aliquam delectus id sunt possimus, culpa repudiandae recusandae eius ex distinctio dolor ipsum voluptatem nam accusamus enim quasi dolorum. Corporis, repellendus. Ullam doloremque quam amet odio est culpa optio totam.</p>
  <ul>
    <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
    <li>Ut, ea rerum. Ipsa ullam iusto nihil aliquam.</li>
    <li>Reprehenderit veritatis officia dolores iste consequatur. Enim, voluptatibus?</li>
  </ul>
  <h3>Lorem ipsum dolor sit.</h3>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic nesciunt tempora iure animi tenetur perspiciatis nam provident quas minima tempore dolorum necessitatibus blanditiis quia officiis modi similique, nihil at! Recusandae?</p>
  <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
  <ul>
    <li>Lorem ipsum dolor sit.</li>
    <li>Eius excepturi voluptate quisquam.</li>
    <li>Placeat ut deleniti eveniet!</li>
    <li>Dolor neque ipsa dolores!</li>
    <li>Aspernatur consequuntur a ipsam!</li>
  </ul>
  <blockquote>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id ipsum quasi quidem voluptas aliquam?</p>
  </blockquote>
  <h2>Lorem ipsum dolor sit.</h2>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
  <a href="#">Lorem, ipsum dolor.</a>
</article>

Lorem ipsum dolor sit.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis nulla iste temporibus voluptatem sed laudantium eos fugiat fuga qui inventore placeat ullam voluptate pariatur exercitationem obcaecati, veniam debitis quisquam velit.

Ipsam nam iusto officia natus maxime inventore voluptatibus? Iste possimus veniam ipsum repellendus, ad tenetur ullam saepe impedit error. Corrupti quas animi autem rem fugit ratione eligendi vero labore facilis.

Aliquam delectus id sunt possimus, culpa repudiandae recusandae eius ex distinctio dolor ipsum voluptatem nam accusamus enim quasi dolorum. Corporis, repellendus. Ullam doloremque quam amet odio est culpa optio totam.

  • Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  • Ut, ea rerum. Ipsa ullam iusto nihil aliquam.
  • Reprehenderit veritatis officia dolores iste consequatur. Enim, voluptatibus?

Lorem ipsum dolor sit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic nesciunt tempora iure animi tenetur perspiciatis nam provident quas minima tempore dolorum necessitatibus blanditiis quia officiis modi similique, nihil at! Recusandae?

Lorem ipsum dolor sit amet consectetur adipisicing elit.

  • Lorem ipsum dolor sit.
  • Eius excepturi voluptate quisquam.
  • Placeat ut deleniti eveniet!
  • Dolor neque ipsa dolores!
  • Aspernatur consequuntur a ipsam!

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id ipsum quasi quidem voluptas aliquam?

Lorem ipsum dolor sit.

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Lorem, ipsum dolor.

💙 Contributed by: Michael W. Delaney

To summarize MDN's article on the <aside> element, <aside> describes content that is somewhat or partially related to the document's main content. This makes it an option for sidebars!

The <aside> element is considered a landmark and comes with an implicit ARIA role of "complementary". It is intended to be a top-level landmark, meaning it should not nest within main unless you change its role, for example to note. You should also change its role if it's not related to the main page content. The MDN docs show permitted ARIA roles for aside.

If using more than one on a page, each such include a label for assistive technology navigation. You can set it via an aria-label or use aria-labelledby to point to the id of a nested heading element.

<div class="container">
  <main>
    <article>
      <h2>Lorem ipsum dolor sit.</h2>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. <strong>Reiciendis nulla iste temporibus voluptatem</strong> sed laudantium eos fugiat fuga qui inventore placeat ullam voluptate pariatur exercitationem obcaecati, veniam debitis quisquam velit.</p>
      <p>Aliquam delectus id sunt possimus, culpa repudiandae recusandae eius ex distinctio dolor ipsum voluptatem nam accusamus enim quasi dolorum. Corporis, repellendus. Ullam doloremque quam amet odio est culpa optio totam.</p>
    </article>
  </main>
  <aside>
    <figure>
      <img src="https://source.unsplash.com/400x300/?beagle" alt="" width="200" height="100">
      <figcaption>Lorem ipsum dolor sit.</figcaption>
    </figure>
  </aside>
</div>

Lorem ipsum dolor sit.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis nulla iste temporibus voluptatem sed laudantium eos fugiat fuga qui inventore placeat ullam voluptate pariatur exercitationem obcaecati, veniam debitis quisquam velit.

Aliquam delectus id sunt possimus, culpa repudiandae recusandae eius ex distinctio dolor ipsum voluptatem nam accusamus enim quasi dolorum. Corporis, repellendus. Ullam doloremque quam amet odio est culpa optio totam.

Figure

💙 Contributed by: Michael W. Delaney

Usually an image, illustration, diagram, code snippet, etc. Read about the <figure> tag and its uses here at MDN. If your use case doesn't require a caption, the <figcaption> can be omitted.

Writing separate content for the <figcaption> element and the image's alt attribute can be a confusing. Generally speaking the alt attribute should describe the contents of the picture, while the <figcaption> element's purpose can vary depending on the nature of the <figure> it's captioning. Be sure to include the alt description or else the figcaption is essentially captioning nothing as far as users of some assistive technolgy can tell.

Read about how to write <figcaption> and alt text in an assistive and accessible way in Elaina Natario's article "Alt vs Figcaption".

<figure>
  <img src="https://source.unsplash.com/400x300/?dinosaur" alt="alternative text required here, the example image is a dinosaur-related photo from a dynamic API" width="400" height="300">
  <figcaption>Lorem ipsum dolor sit.</figcaption>
</figure>
alternative text required here, the example image is a dinosaur-related photo from a dynamic API
Lorem ipsum dolor sit.

Address

💙 Contributed by: Michael W. Delaney

The <address> element's use case has evolved over time and is now acceptable for marking up arbitrary contact information. The browser inherited styles are the same as for <i> or <em>.

MDN states that an address element "may include any type of contact information that is needed" and includes more examples of using address. However, it should be noted there is no implicit role for this element as provided to assistive technology users.

<address>
  <a href="mailto:fake@htmlrecipes.dev">📧 fake@htmlrecipes.dev</a>
  <a href="tel:+5551231234">📞 (555) 123-1234</a>
  🏠 123 Sesame Street<br>
  New York, NY 10123
</address>
📧 fake@htmlrecipes.dev 📞 (555) 123-1234 🏠 123 Sesame Street
New York, NY 10123

Card Grid

For your use case, a series of <article> may be more appropriate.

If you are using a list as shown, and you want to retain list semantics for users of assistive technology by having the current list item and it's order announced, adding role="list" is required. Otherwise, the use of list-style: none can remove list semantics for some assistive technology.

Check out an example of styling cards over on SmolCSS.

<ul role="list">
  <li>
    <img src="https://source.unsplash.com/400x300/?corgi" alt="" width="400" height="300">
    <h3>Lorem ipsum dolor sit.</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </li>
  <li>
    <img src="https://source.unsplash.com/400x300/?dolphin" alt="" width="400" height="300">
    <h3>Quam ut enim quo.</h3>
    <p>Suscipit earum magnam porro molestias fugiat! Dicta, dolor.</p>
  </li>
  <li>
    <img src="https://source.unsplash.com/400x300/?kitten" alt="" width="400" height="300">
    <h3>Quis dolor ipsam ea!</h3>
    <p>Repudiandae nihil laudantium quae necessitatibus sint facilis. Unde?</p>
  </li>
</ul>

Collapsible FAQs

💙 Contributed by: Saptak S

The details and summary elements are very well supported as a native HTML way to provide collapsible content sections, such as for FAQs.

⚠️ Caution: Beware of using them for purposes beyond simple content disclosure sections due to accessibility concerns. Learn more about appropriate using details/summary from Adrian Roselli.

<details>
  <summary>Proin eget velit vel lectus elementum pharetra?</summary>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tristique
  venenatis dui eget iaculis. Donec varius metus at augue sollicitudin,
  vitae cursus dui faucibus. Quisque vulputate pulvinar ante at congue.
</details>

<details>
  <summary>Vivamus consectetur orci sed eros ultricies tincidunt?</summary>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis,
  purus vitae dapibus tincidunt, purus purus maximus libero, et auctor est
  lacus id nunc. Cras convallis gravida nulla eu vulputate.
</details>

<details>
  <summary>Lorem ipsum dolor sit amet?</summary>
  Aenean in nunc lectus. Morbi nec sem auctor, tincidunt nisl nec, rutrum nisl.
  Nulla viverra id enim ut fringilla. Morbi vulputate bibendum.
</details>
Proin eget velit vel lectus elementum pharetra? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tristique venenatis dui eget iaculis. Donec varius metus at augue sollicitudin, vitae cursus dui faucibus. Quisque vulputate pulvinar ante at congue.
Vivamus consectetur orci sed eros ultricies tincidunt? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis, purus vitae dapibus tincidunt, purus purus maximus libero, et auctor est lacus id nunc. Cras convallis gravida nulla eu vulputate.
Lorem ipsum dolor sit amet? Aenean in nunc lectus. Morbi nec sem auctor, tincidunt nisl nec, rutrum nisl. Nulla viverra id enim ut fringilla. Morbi vulputate bibendum.

Contact Form

💙 Contributed by: Ryan Trimble

Generally, you will need some sort of backend process to handle form submissions. You can handle this on your own on the server side by setting the action and method attributes, or you may choose a web host that offers form processing as a service.

Make sure to include labels for each input, as well as setting the proper type of input. You can also mark inputs as required by including the required attribute. Modern browsers have built-in (though fairly basic) form validation.

Additionally, to meet WCAG Success Criterion 1.3.5, add the appropriate autocomplete values when relevant (shown for the email and name fields).

<form>
  <label for="full-name">
    Full Name:
  </label>
  <input id="full-name" name="full-name" type="text" autocomplete="name" required />
  <label for="email-address">
    Email Address:
  </label>
  <input id="email-address" name="email-address" type="email" autocomplete="email" required />
  <label for="message">
    Message:
  </label>
  <textarea id="message" name="message" rows="5" cols="30" required></textarea>
  <button type="submit">Submit</button>
</form>
<footer>
  <p>&copy; 2021 Acme Co.</p>
</footer>