Text

Inline text elements for emphasis, annotations, and semantic meaning.

Paragraphs

This is a standard paragraph. It has comfortable line height and appropriate margins for readability. Paragraphs are the backbone of written content on the web.

Multiple paragraphs are spaced appropriately to create visual separation between ideas.

<p>This is a standard paragraph. It has comfortable line height and appropriate margins for readability. Paragraphs are the backbone of written content on the web.</p>

<p>Multiple paragraphs are spaced appropriately to create visual separation between ideas.</p>

Inline Elements

You can use bold text for strong importance.

Use italic text for emphasis or titles.

The mark element highlights relevant text.

Use small text for fine print.

Text can be struck through when no longer accurate.

Use underlined text sparingly for annotations.

<p>You can use <strong>bold text</strong> for strong importance.</p>
<p>Use <em>italic text</em> for emphasis or titles.</p>
<p>The <mark>mark element</mark> highlights relevant text.</p>
<p>Use <small>small text</small> for fine print.</p>
<p>Text can be <s>struck through</s> when no longer accurate.</p>
<p>Use <u>underlined text</u> sparingly for annotations.</p>

Links

Links are styled for visibility: this is a link.

Links also work in context with other text naturally.

<p>Links are styled for visibility: <a href="#">this is a link</a>.</p>
<p>Links also work in <a href="#">context with other text</a> naturally.</p>

Abbreviations

You can use CSS to style your pages.

The HTML provides structure.

<p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your pages.</p>
<p>The <abbr title="HyperText Markup Language">HTML</abbr> provides structure.</p>

Blockquotes

The best way to predict the future is to invent it.

— Alan Kay
<blockquote>
  <p>The best way to predict the future is to invent it.</p>
  <footer>— Alan Kay</footer>
</blockquote>

Horizontal Rule

Content above the divider.

Content below the divider.

<p>Content above the divider.</p>
<hr>
<p>Content below the divider.</p>