Relevant tags

Semantic hierarchy

• <h1>: Recommended for the main title of the page. Should only appear once per page.
• <h2>: Use for other important titles on the page, such as project name in a list, or a section title.
• <h3> to <h6>: Use for further subheadings. Do not skip a subheading level, the hierarchy should be consistent.
• <p>: Use for running text.

<h1>Page title</h1>

<p>Lorem ipsum…</p>

<h2>1 Heading</h2>
<p>Lorem ipsum…</p>

<h2>2 Heading</h2>
<h3>2.1 Subheading</h3>
<p>Lorem ipsum…</p>
…

Inline emphasis

To style text using HTML only, or simply to add semantic meaning to your styling, you can use the following tags:

• Bold
  • <strong> – Denotes strong importance of the text.
  • <b> – Bold text, no clear semantic meaning.
• Italic
  • <em> – Emphasize the text.
  • <i> – Italic text, no clear semantic meaning.
• Underline
  • <u> – Underline the text.
  • <ins> – Inserted text, usually used to annotate text that has been added to a document.
• Strikethrough
  • <del> – Deleted text, usually used to annotate text that has been deleted from a document.
  • <s> – Strikethrough text, no clear semantic meaning.
• <a> – Anchor link: anchor
• <small> – Small text, no clear semantic meaning: small
• <sup> – Superscript text: ^superscript
• <sub> – Subscript text: _subscript
• <mark> – Highlighted text: highlighted

To simply isolate a part of a sentence, you can use the <span> tag. It is semantically neutral, and is very useful for inline styling.

Spaces and micro-typography

HTML entities (also called character references) can be used to insert any glyphs in an HTML document. They are a useful way to add micro-typography to your website. Here are some examples:

•   – Non-breaking space
•   – En space
•   – Em space
•   – Thin space
•   – Hair space
• ​ – Zero width space
• ­ – Soft hyphen (combine with hyphens: manual; CSS property)