
## HTML5 document boilerplate

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>
```

## Disable autocomplete for `<input>`

```html
<input name="form" type="text" autocomplete="off" />
```

## HTML entities

- [Official list](https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references)
- [HTML Glyphs - CSS-Tricks](https://css-tricks.com/snippets/html/glyphs/)
- [Chess symbols in Unicode](https://en.wikipedia.org/wiki/Chess_symbols_in_Unicode)
- • (`&bull;`), · (`&middot;`)
- ♣ (`&clubs;`), ♥ (`&hearts;`), ♠ (`&spades;`), ♦ (`&diams;`)
- ∞ (`&infin;`)
- ← (`&larr;`), → (`&rarr;`), ↑ (`&uarr;`), ↓ (`&darr;`)
- — (`&#8212;`)


HTML

[Top]

HTML5 document boilerplate

Disable autocomplete for `<input>`

HTML entities

## System font stack

```css
body {
  /* GitHub */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

  /* An alternative */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}
```

## Show animated underline on hover

```css
/* <span class="underline">Underline!</span> */

.underline {
  position: relative;
}

.underline::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -4px;
  background-color: black;
  opacity: 0;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.underline:hover::before {
  opacity: 1;
  left: 0;
  transform: scaleX(1);
}
```

## Add ellipsis to overflowing text

```css
.text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
```

## Center a webpage

```html
<body>
  <div id="page-wrap">
    
  </div>
</body>
```

```css
#page-wrap {
  width: 800px;
  margin: 0 auto;
}
```

## Make an image responsive

```css
img {
  max-width: 100%;
  height: auto;
}
```

## Indicate PDF links

This adds the text `(PDF)` after PDF links in the document:

```css
a[href$='.pdf']:after {
  content: '(PDF)';
}

/* Use data-size attribute if provided */
/* Adds `(PDF, <data-size>)` */
a[href$='.pdf'][data-size]:after {
  content: '(PDF, ' attr(data-size) ')';
}
```

## Common breakpoints

```plaintext
sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px
```

## Misc

- `position: sticky` doesn't work if `overflow` of parent is set.

HTML

HTML5 document boilerplate

Disable autocomplete for <input>

HTML entities

Disable autocomplete for `<input>`