---
layout: web
title: A Quick Guide to Modern HTML
---
# A Quick Guide to Modern HTML
> This guide is a work in progress!
Modern HTML is a remarkably simple and coherent standard.
## Semantic
- [``][html]: The root of an HTML document.
- There should exist one and only one `` element in a document.
- [``][body]: The content of an HTML document.
- There may only exist one `` element in a document.
- [`
,
,
,
,
,
`][heading elements]: Various heading elements.
- [`
`][p]: A paragraph. Text should typically be wrapped in a `
`.
- [`
`][hr]: A thematic break. Typically styled as a horizontal rule.
- [` `][br]: A line break.
- [``][wbr]: A word break *opportunity*.
- Browsers will prefer breaking there when necessary. This is useful for ex. German and other languages with long words.
default styles
```css
html {
display: block;
}
```
```css
body {
display: block;
margin: 8px;
}
```
```css
h1, h2, h3, h4, h5, h6 {
display: block;
font-weight: bold;
}
h1 {
font-size: 2em;
margin-block: .67em;
}
h2 {
font-size: 1.5em;
margin-block: .83em;
}
h3 {
font-size: 1.17em;
margin-block: 1em;
}
h4 {
font-size: 1.00em;
margin-block: 1.33em;
}
h5 {
font-size: 0.83em;
margin-block: 1.67em;
}
h6 {
font-size: 0.67em;
margin-block: 2.33em;
}
```
```css
p {
display: block;
margin-block: 1em;
}
```
```css
hr {
display: block;
color: gray;
border: 1px inset;
margin-block: 0.5em;
margin-inline: auto;
overflow: hidden;
}
```
```css
br {
display-outside: newline;
}
```
```css
wbr {
display-outside: break-opportunity;
}
```
- [``][main]: The main content of the body of a document.
- There should exist at most one visible `` element in a document.
- [``][header]: A section of a document intended for treatment as a header.
- [`