FosseryWeb

Headings

There are 6 levels of headings in HTML (h1-h6):

<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

Paragraph

p element:

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

Styled text elements

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

Bold

b or strong element:

<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 piece of text is important.)

Emphasized

em or span element:

<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:

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

Subscript

sub element:

<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

List

Ordered

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

<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:

<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):

<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:

<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.

<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

<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