Skip to content

A basic guide to semantic markup, including proper usage examples.

The paragraph above is styled as lead to make the paragraph stand out. It’s important to use your keywords strategically in the page title, the section headings and the lead paragraph (or first 100 words) and not overdo it. Make sure the content is still readable and not overly repetitive. It’s a good idea to also use some of the keywords throughout the content.

Page Header

The header above is formated as Heading 1. It is advised to only use one Heading 1 element per page, so please reserve Heading 1 for individual page titles only.

Second-Level Header

The header above is formated as Heading 2, use Heading 2 for section headings. More than one may be used per page.

Third-Level Header

The header above is formated as Heading 3, which may be used for any form of page-level header which falls below the Heading 2 in a document hierarchy. More than one may be used per page.

Fourth-Level Header

The header above is formated as Heading 4, which may be used for any form of page-level header which falls below the Heading 3 in a document hierarchy. More than one may be used per page.

Fifth-Level Header

The header above is formated as Heading 5, which may be used for any form of page-level header which falls below the Heading 4 in a document hierarchy. More than one may be used per page.

Sixth-Level Header

The header above is formated as Heading 6, which may be used for any form of page-level header which falls below the Heading 5 in a document hierarchy. More than one may be used per page.

Paragraphs

Use the Enter key to make another paragraph or the Shift + Enter key combination to make a line break in the current paragraph. Content can be also be styled as Code, Danger, Info, Muted, Primary, Small, Success, Warningand as help text or quote:

Help text

Blockquote

Hello, world!

This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.

Learn more »

 

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it‘s not super important.
Warning! Best check yo self, you‘re not looking too good.
Oh snap! Change a few things up and try submitting again.
60% Complete
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Tilbake til toppen