# HTML Text Elements

## Headings

```html
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
```

These appear with different font sizes by default (h1 is the biggest, h6 is the smallest) but you can apply custom CSS styles to change them.

[Go to the CSS Text Styles cheatsheet](https://fosseryweb-min.codeberg.page/cheatsheets/css/text-styles.html)

> **Pro tip:** you should use only one h1 heading per page because search engines find out what's the page about from the content of h1 element.

## Paragraph

**p** element:

```html
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</p>
```

## Styled text element

These are often used inside p elements to add styles to the text.

### Bold

**b** or **strong** element:

```html
<p>Lorem ipsum <b>dolor sit amet</b>, consectetur adipiscing elit, sed do.</p>
<p>Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipiscing elit, sed do.</p>
```

The text “dolor sit amet” will be rendered as bold.

(Strong element is also useful for SEO purpose because it shows the search engines that a piece of text is important.)

### Emphasized

**em** or **span** element:

```html
<p>Lorem ipsum <em>dolor sit amet</em>, consectetur adipiscing elit, sed do.</p>
<p>Lorem ipsum <span>dolor sit amet</span>, consectetur adipiscing elit, sed do.</p>
```

The text “dolor sit amet” will be rendered as emphasized.

### Superscript

**sup** element:

```html
<p>My garden is 200 m<sup>2</sup>.</p>
```

### Subscript

**sub** element:

```html
<p>The chemical formula of water is H<sub>2</sub>O.</p>
```

Other styles can be applied with CSS.

[Go to the CSS Text Styles cheatsheet](https://fosseryweb-min.codeberg.page/cheatsheets/css/text-styles.html)

## List

### Ordered

**li** (list) elements embedded into **ol** (ordered list) element:

```html
<ol>
  <li>First list item</li>
  <li>Second list item</li>
  <li>Third list item</li>
</ol>
```

### Unordered

**li** (list) elements embedded into **ul** (unordered list) element:

```html
<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>
```

### Multi-level ordered and/or unordered list

**li** elements embedded into **ol** or **ul** element can contain additional **ol** or **ul** elements (with **li** elements inside of them):

```html
<ul>
  <li>Level one list item</li>
  <li>Level one list item
    <ol>
      <li>First level two list item</li>
      <li>Second level two list item</li>
      <li>Third level two list item</li>
    </ol>
  </li>
  <li>Level one list item</li>
</ul>
```

## Link

**a** (anchor) element:

```html
<a href="filename.html">Link text</a>
<a href="https://mstdn.social/@fosserytech">Link text</a>
```

The **href** (hyperreference) attribute defines the URL of the page which the browser should go to when the link is clicked.

```html
<a href="filename.html" target="_blank">Link text</a>
<a href="https://mstdn.social/@fosserytech" target="blank">Link text</a>
```

The **target** attribute defines how to open the linked page. The **_blank** value means the page should always open in new tab (or sometimes in new window, depending on browser settings). The **blank** value is almost the same but it reuses the previously opened tab (or window). If no target attribute is provided the page will be opened in the same tab where the link is clicked.

## Table

```html
<table>
  <caption>Title of the table</caption>
  <thead>
    <tr>
      <th>Heading of column 1</th>
      <th>Heading of column 2</th>
      <th>Heading of column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>column 1 row 2</td>
      <td>column 2 row 2</td>
      <td>column 3 row 2</td>
    </tr>
    <tr>
      <td>column 1 row 3</td>
      <td>column 2 row 3</td>
      <td>column 3 row 3</td>
    </tr>
    <tr>
      <td>column 1 row 4</td>
      <td>column 2 row 4</td>
      <td>column 3 row 4</td>
    </tr>
  </tbody>
</table>
```

**table**: the table itself

**caption**: title of the table

**thead**: header (first, highlighted row) of the table

**tr**: table row

**th**: a cell with highlighted text which describes what's the column for

**tbody**: the body (main part) of the table which contains the actual data

**td** (table data): a cell of body which contains a piece of data