pelicin › web › HTML

HTML Tags: Others – Block

These are the rest of the HTML block tags.

TagTypeDescription
<blockquote>BlockRepresents a quotation block
<pre>BlockRepresents a preformatted text (displayed as-is)
Definition list
<dl>BlockRepresents a definition list
<dt>BlockRepresents a definition term
<dd>BlockRepresents a definition description
Figure
<figure>BlockRepresents a self-contained content
<figcaption>BlockRepresents caption for <figure>
Details
<details>BlockRepresents a collapsible/accordion widget
<summary>OtherRepresents summary/caption of a <details>

<blockquote>

Represents a quotation block.

Possible attributes

  • cite=[...] — URL to the source of quotation
<blockquote>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
  labore et dolore magna aliqua.
</blockquote>
| LIVE PREVIEW
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<pre>

Represents a preformatted text.

The text will be displayed as typed in the HTML file.

<pre>
Roses are red,
  Violets are blue,
Sugar is sweet,
  And so are you. 
</pre>
| LIVE PREVIEW
Roses are red,
  Violets are blue,
Sugar is sweet,
  And so are you.

<dl>, <dt>, and <dd>

<dl> represents a definition list.

<dt> represents a definition term in a <dl>.

<dd> represents a definition description in a <dl>.

<!-- source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl -->
<dl>
  <dt>Beast of Bodmin</dt>
  <dd>A large feline inhabiting Bodmin Moor.</dd>
  <dt>Morgawr</dt>
  <dd>A sea serpent.</dd>
  <dt>Owlman</dt>
  <dd>A giant owl-like creature.</dd>
</dl>
| LIVE PREVIEW
Beast of Bodmin
A large feline inhabiting Bodmin Moor.
Morgawr
A sea serpent.
Owlman
A giant owl-like creature.

<figure> and <figcaption>

<figure> represents a self-contained content.

<figcaption> represents caption for <figure>.

<figure>
  <img src="/res/unsplash/lucas-benjamin-wQLAGv4_OYs-unsplash.jpg" alt="An abstract photo" width="300">
  <figcaption>A photo by Lucas Benjamin - Unsplash</figcaption>
</figure>
| LIVE PREVIEW
An abstract photo
A photo by Lucas Benjamin - Unsplash

<details> and <summary>

<details> represents a collapsible/accordion widget.

<summary> represents caption of a <details> element.

<details>
  <summary>Lorem ipsum (click me)</summary>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</details>
| LIVE PREVIEW
Lorem ipsum (click me) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Assets

References