--- 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. ## Basic HTML HTML is a *markup language* used for content on the web. It is composed of *tags*, that may be *nested* within each other to form a *document tree*. It is *semantic*: every tag and many tags indeed hold no purpose other than indicating ... Every website you visit is composed of HTML, which alongside with styling via CSS... Modern websites are composed of somewhat atrocious amounts of Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for its appearance. HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes, and other items. HTML elements are delineated by tags, written using angle brackets. Tags such as `` and `` directly introduce content into the page. Other tags such as `

` and `

` surround and provide information about document text and may include sub-element tags. Browsers do not display the HTML tags but use them to interpret the content of the page. HTML is composed of *tags*. These tags are enclosed in angle brackets There are quite a few tags, but not overwhelmingly many. Here they all are. if your tag is not reserved, you can kinda just write whatever?? i like doing this There are about XX important tags. Here they all are. ## Style - [``][b] or [``][strong]: bold text - [``][i] or [``][em]: italic text - [``][u]: underlined text - [``][s]: struckthrough text - [``][q]: quoted text - [``][small]: small text - [``][sub]: subtext - [``][sup]: supertext - [``][code]: text styled like code - [`
`][pre]: 
preformatted text


Some emphasis must be made: these tags are **semantic**. They are not for styling! You have a much more expressive form of styling with CSS!
Given the existence of a quote key on most ASCII keyboards, this is not very useful, unless you're a stickler for Unicode quotes.




default styles

```css
b, strong {
  font-weight: bolder;
}
```

```css
i, em {
  font-style: italic;
}
```

```css
u {
  text-decoration: underline;
}
```

```css
s {
  text-decoration: line-through;
}
```

```css
q:before {
  content: open-quote;
}

q:after {
  content: close-quote;
}
```

```css
small {
  font-size: smaller;
}
```

```css
sub {
  vertical-align: sub;
  font-size: smaller;
}
```

```css
sup {
  vertical-align: super;
  font-size: smaller;
}
```

```css
code {
  font-family: monospace;
}
```

```css
pre {
  display: block;
  font-family: -moz-fixed;
  white-space: pre;
  margin-block: 1em;
}
```




## 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;
}
```




Aside from being block elements, they have no styling...

- [`
`][main]
    - There should exist at most one `
` element in a document.
- [`
`][section]
- [`