holiday.css

Content sectioning

<address>

Example

<article>

Example

<aside>

<h1>–<h6>

Example

Example

Example

Example

Example
Example

<section>

Example

Text content

<blockquote>

Just text
Text
With footer

Quote with <p> tags

Quote with <p> tags

And with footer

Quote with <p> tags

And with <cite> inside the footer
The making of good software takes time. If you try to make it take less time, it will take more time.
— Douglas Crockford

Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.

— Aldous Huxley, Brave New World

<dl>, <dt>, <dd>

Example
Example
Example
Example
Example
Example
Example
Example
Example
Example

<div>

Example

<figure>, <figcaption>

Example
Example
Example
Example
Example
Example
Placeholder
Placeholder
Example
<blockquote> example <blockquote> example <blockquote> example <blockquote> example <blockquote> example <blockquote> example <blockquote> example <blockquote> example
<blockquote> example
<pre> example
<pre> example
<pre> example
<pre> example
      
<pre> example

<hr>


<ol>

  1. Example
  2. Example
    1. Example
    2. Example
      1. Example
      2. Example
      3. Example
    3. Example
  3. Example

<p>

Example

Example

Example

<pre>

H   H EEEEE L     L      OOO       W   W  OOO  RRRR  L     DDDD  !!
H   H E     L     L     O   O      W W W O   O R   R L     D   D !!
HHHHH EEEEE L     L     O   O      W W W O   O RRRR  L     D   D !!
H   H E     L     L     O   O  ,,   W W  O   O R   R L     D   D
H   H EEEEE LLLLL LLLLL  OOO  ,,    W W   OOO  R   R LLLLL DDDD  !!
    

<ul>

  • Example
  • Example
    • Example
    • Example
      • Example
      • Example
      • Example
    • Example
  • Example

Inline text semantics

<a>

Example example@example.com +61 2 5550 6077

<abbr>

Example

<b>

Example

<bdi>

Example

<bdo>

Example

<br>

Example
Example

<cite>

Example

<code>

Example
Long long long long long long long long code within a <pre> tag
Short code within a <pre> tag

MWUH qypgj example MWgj example MWUH qypgj example MWgj example MWUH qypgj example MWgj example MWUH qypgj example MWgj example MWUH qypgj example MWgj example MWUH qypgj example MWgj example MWUH qypgj example MWgj example MWUH qypgj example MWgj example

MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj MWUH qypgj

<data>

Example

<dfn>

Example

<em>

Example

<i>

Example

<kbd>

Enter
Ctrl + C
Ctrl + V

`1234567890-=Bkspc

Tabqwertyuiop[]\

Capsasdfghjkl;'Enter

Shiftzxcvbnm,./Shift

And now for some bug tests:

***************************************************************************************************************************************************************************************************************************************************************************************************************************

<mark>

Example

<q>

Example

<s>

Example

<samp>

Example

<small>

Example

<span>

Example

<strong>

Example

<sub>

Example

<sup>

Example

<time>

<u>

Example

<var>

Example

<wbr>

Example

Image and multimedia

<audio>

<img>

Placeholder Placeholder

<map>, <area>

HTML CSS JavaScript MDN infographic

<video>

Embedded content

<embed>

<iframe>

<object>

<picture>

Placeholder Placeholder Placeholder

Demarcating edits

<del>

Example

<ins>

Example

Table content

<table>

Small table
Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum
Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Buttons

<button>

<input>

Forms

<datalist>

<fieldset>, <legend>

Example
Disabled

<form>

Checkboxes

<input>

<label>

<meter>

0% 10% 50% 100%

<output>

Example Example Example

<progress>

0% 50% 100%

<select>

<textarea>

Interactive elements

<details>

Example Example
Example Example
Example Example

Singular:

Example Example

<dialog>

Example