HTML Snippets I Like

2022-01-19

Modern CSS is powerful enough that the complex element layouts of yore are no longer necessary. But there are still a few small patterns I wanted to collect somewhere so I don't have to go hunting for them each time.

Some of these snippets come from the excellent HTML5 Doctor.

The snippets

Boilerplate:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <meta name="description" content="Description">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="favicon.png">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <nav>Navigation</nav>
    <header>Header</header>
    <article>Main content</article>
    <footer>Footer</footer>
  </body>
</html>
  • lang="en" makes the document language explicit.
  • the first <meta> makes the character encoding explicit.
  • the second <meta> makes the site work on mobile displays.
  • the <link> elements define external resources to load.

<article> structure:

1
2
3
4
5
6
7
8
<article>
  <h1>Title</h1>
  <p>Article body</p>
  <section>
    <h1>Optional section</h1>
  </section>
  <footer>Copyright, social media links, etc.</footer>
</article>

Heading with subtitle:

1
2
3
4
<header>
  <h1>Heading</h1>
  <p>Subtitle</p>
</header>

<blockquote> with citation:

1
2
3
4
<blockquote>
  <p>Quote text</p>
  <footer>&mdash; a person in <cite>Source Text</cite></footer>
</blockquote>

Small CSS gotchas

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
html {
  /* Set font-size in root element so "rem" sizing works. */
  font-size: 20px;

  /* If absent, can cause weird rendering on iPhone.
   * See: arunkprasad.com/log/how-to-make-a-website-work-on-mobile/ */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Make these behave predictably as block elements.
 * (via joshwcomeau.com) */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* Remove default margin on body for more predictable styling. */
body {
  margin: 0;
}