HTML5 Elements

Figure & Figcaption

<figure>
  <img src="photo.jpg" alt="Description">
  <figcaption>A figure with a caption.</figcaption>
</figure>

Media Placeholders

<div class="fap-placeholder"></div>
<div class="fap-placeholder" data-video></div>
<div class="fap-placeholder" data-ratio="1:1"></div>

Broken image fallback

<img src="" alt="Missing image — alt text shown">
<img alt="No src attribute">

Video

<video controls poster="poster.jpg">
  <source src="video.mp4" type="video/mp4">
  <track kind="captions" label="English" srclang="en" default>
  Your browser does not support the video element.
</video>

Abbreviation

The W3C maintains the HTML specification.

<p>The <abbr title="World Wide Web Consortium">W3C</abbr>
maintains the <abbr title="HyperText Markup Language">HTML</abbr>
specification.</p>

Inline text elements

An inline quotation using the <q> element.

According to The Design of Everyday Things, good design is invisible.

A classless framework styles semantic HTML elements directly.

This feature is no longer available — use the new API instead.

<q>An inline quotation</q>
<cite>The Design of Everyday Things</cite>
<dfn>classless framework</dfn>
<s>no longer available</s>

Address

<address>
  <strong>FAP CSS HQ</strong><br>
  123 Framework Lane<br>
  Open Source City, WWW 00000<br>
  <a href="mailto:[email protected]">[email protected]</a>
</address>

Content editable

Click to edit this paragraph. Dashed border on hover, solid outline on focus.

<p contenteditable="true">
  Click to edit this paragraph.
</p>

Inert

<div inert>
  <button>I'm inert</button>
  <input type="text" placeholder="Can't focus me">
  <p>This subtree is disabled.</p>
</div>