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.
Buttons
Thumbnails
Alerts
Progress bars
List groups
- 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.
Panels
Panel title
Panel title
Panel title
Panel title
Panel title
Panel title
Wells
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.