Anwendungsbeispiel:
Pattern Primer mit Syntax-Highlighter Prism.js

This text is quoted. A block of quoted text like this is particularly useful when presented as a pull-quote within an article of text.

<blockquote>
	<p>This text is quoted. A block of quoted text like this is particularly useful when presented as a pull-quote within an article of text.</p>
</blockquote>

blockquote.html

<div class="feedback error">
	<p>This is an error feedback message.</p>
</div>

feedback-error.html

<div class="feedback">
	<p>This is a feedback message for the user.</p>
</div>

feedback.html

<button>Button element</button>
<input type="submit" value="Submit button">

form-buttons.html

<label>
	<input type="checkbox"> Label text</label>

form-checkbox.html

<label>Label text</label>
<input type="email">

form-email.html

<label>Label text</label>
<input type="number">

form-number.html

<select>
	<option>option text</option>
</select>

form-select.html

<label>Label text</label>
<input type="text">

form-text.html

<label>Label text</label>
<textarea rows="5" cols="20"></textarea>

form-textarea.html

<label>Label text</label>
<input type="url">

form-url.html

Level one heading

<h1>Level one heading</h1>

heading-1.html

Level two heading

<h2>Level two heading</h2>

heading-2.html

Level three heading

<h3>Level three heading</h3>

heading-3.html

Level four heading

<h4>Level four heading</h4>

heading-4.html

Level five heading
<h5>Level five heading</h5>

heading-5.html

Level six heading
<h6>Level six heading</h6>

heading-6.html

  1. First list item
  2. Second item in a list of ordered items
  3. Third item in the list
<ol>
	<li>First list item</li>
	<li>Second item in a list of ordered items</li>
	<li>Third item in the list</li>
</ol>

list-ordered.html

<ul>
	<li>A list item</li>
	<li>Another item in a list</li>
	<li>Yet another item in this list of items</li>
</ul>

list-unordered.html

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
<ol class="pagination">
	<li><a>1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">6</a></li>
	<li><a href="#">7</a></li>
	<li><a href="#">8</a></li>
	<li><a href="#">9</a></li>
	<li><a href="#">10</a></li>
</ol>

pagination-first.html

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
<ol class="pagination">
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">6</a></li>
	<li><a href="#">7</a></li>
	<li><a href="#">8</a></li>
	<li><a href="#">9</a></li>
	<li><a>10</a></li>
</ol>

pagination-last.html

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
<ol class="pagination">
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a>5</a></li>
	<li><a href="#">6</a></li>
	<li><a href="#">7</a></li>
	<li><a href="#">8</a></li>
	<li><a href="#">9</a></li>
	<li><a href="#">10</a></li>
</ol>

pagination.html

This is a paragraph of text. Some of the text may be emphasised and some it might even be strongly emphasised. Occasionally quoted text may be found within a paragraph …and of course a link may appear at any point in the text. The average paragraph contains five or six sentences although some may contain as little or one or two while others carry on for anything up to ten sentences and beyond.

<p>This is a paragraph of text. Some of the text may be <em>emphasised</em> and some it might even be <strong>strongly emphasised</strong>. Occasionally <q>quoted text</q> may be found within a paragraph &hellip;and of course <a href="#">a link</a> may appear at any point in the text. The average paragraph contains five or six sentences although some may contain as little or one or two while others carry on for anything up to ten sentences and beyond.</p>

text.html