Stylament – Elements Showcase

General Document Structure

These are elements unique to the document. Instead of showing inline examples we highlight the respective element in this document.

Document root

Selectors: html / :root
Example: Highlight document root.

Content root

Selector: body
Example: Highlight content root.

The document’s main content

Selector: main
Example: Highlight main content.

Selector: :where(body, body > div) > header
Example: Highlight main header.
See also: For the header element in general see Sectioning Scope Specific Elements.

Selector: :where(body, body > div) > footer
Example: Highlight main footer.
See also: For the footer element in general see Sectioning Scope Specific Elements.

The current target element

Selector: :target
Example: Highlight me.

Sectioning

Sections

Selector: section
Example: I am a section element.

section element stand-alone
Selector: article
Example: I am an article element.

article element stand-alone
Selector: aside
Example: I am an aside element.

aside element stand-alone
Selector: nav
Example: I am a nav element.

nav element stand-alone

Heading Content

Selectors: h1, h2, h3, h4, h5, h6
Examples: I am an h1 element.

h1 element stand-alone

I am an h2 element.

h2 element stand-alone

I am an h3 element.

h3 element stand-alone

I am an h4 element.

h4 element stand-alone

I am an h5 element.

h5 element stand-alone

I am an h6 element.

h6 element stand-alone

I am an h1 element.

I am an h2 element.

I am an h3 element.

I am an h4 element.

I am an h5 element.

I am an h6 element.

h1 – h6 combined

I am an h1 element.

I am an h2 element.

I am an h3 element.

I am an h4 element.

I am an h5 element.

I am an h6 element.

h1 – h6 surrounded by ps
Selector: hgroup
Examples: I am an h1 element in an hgroup element.

I am a p element grouped with that heading.

hgroup with h1 and p

I am an h2 element in an hgroup element.

I am a p element grouped with that heading.

hgroup with h2 and p

I am an h3 element in an hgroup element.

I am a p element grouped with that heading.

hgroup with h3 and p

I am an h4 element in an hgroup element.

I am a p element grouped with that heading.

hgroup with h4 and p

Sectioning Scope Specific Elements

Selector: header
Example: I am a header element.

header element stand-alone
Selector: footer
Example: I am a footer element.

footer element stand-alone
Selector: address
Example: I am an address element.

address element stand-alone

Grouping Content

Generic block

Selector: div
Example: I am a div element.

div element stand-alone

Paragraph

Selector: p
Examples: I am a p element.

p element stand-alone

Several p elements

Thematic break

Selector: hr
Examples: hr element stand-alone

hr element with surounding content

Lists

Selectors

ul

ul > li

Example

I am a list item in an unordered list.
I am a list item, too.
I am a third list.
- I am a nested list item.
- I am a nested list item, too.
- I am a third nested list item.
  - I am a nested list item.
  - I am a nested list item, too.
  - I am a third nested list item.
I am yet another list item.

ul element with li and a

Selectors

ol

ol > li

Example

I am a list item in an ordered list.
I am a list item, too.
I am a third list .
1. I am a nested list item.
2. I am a nested list item, too.
3. I am a third nested list item.
  1. I am a nested list item.
  2. I am a nested list item, too.
  3. I am a third nested list item.
I am yet another list item.

ol element with li and a

Selectors

menu

menu > li

menu > li > a

Example

I am a menu item.

I am a menu item, too.

I am a third menu item.

menu element with li and a

Definition list

Selectors

dl

dl > dt

dl > dd

Example

I am a dt element.: I am a dd element.
I am another dt element.: I am another dd element.

dl element with dts and dds

Extended quotation

Selector: blockquote
Examples: I am a blockquote element.

blockquote element stand-alone

blockquote.var-alternate element stand-alone

Nesting blockquote elements

I am a blockquote element.

— I am a cite element inside a p element.

blockquote with cite in an adjacent p

Always build on solid ground!

— Old wisdom

blockquote inside figure, followed by figcaption

Self-contained figure

Selectors: figure; figure > figcaption
Examples: I am a figure element.
I am a figcaption element.

figure element with figcaption

Always build on solid ground!

— Old wisdom

figure.var-feature with blockquote

Preformatted text

Selector

pre

Examples

I am a pre element.

pre element stand-alone

        PPP   RRR   EEEE
        P  P  R  R  E
        PPP   RRR   EEE
        P     R R   E
        P     R  R  EEEE

pre element with preformatted content

Text-level Semantics

Generic range

Selector: span
Example: I am a span element.
span element stand-alone

Line Breaks

Selector: br
Example: I am
broken by a br element.

Text broken by br element
Selector: wbr
Example: Here’s a very long German word: Donaudampfschifffahrtsgesellschaftskapitänsmützen. It may wrap at certain places indicated by wbr elements.

Text broken by wbr element

Emphasis

Selector: em
Example: I am an em element.
em element stand-alone
Selector: strong
Example: I am a strong element.
strong element stand-alone

Terminology

Selector: abbr
Example: I am an abbr element.
abbr element stand-alone
Selector: dfn
Example: I am a dfn element.
dfn element stand-alone
Selector: var
Example: I am a var element.
var element stand-alone

Inline Quotation

Selector: q
Example: I am a q element.
q element stand-alone

Citation

Selector: cite
Example: I am a cite element.
cite element stand-alone

Altered Baseline

Selector: sub
Example: _{I am a sub element.}
sub element stand-alone
Selector: sup
Example: ^{I am a sup element.}
sup element stand-alone

Input/Output

Selector: kbd
Example: I am a kbd element.
kbd element stand-alone
Selector: samp
Example: I am a samp element.
samp element stand-alone

Inline Code

Selector: code
Example: I am a code element.
code element stand-alone

Data

Selector: data
Example: I am a data element.
data element stand-alone
Selector: time
Example: I am a time element.
time element stand-alone

Enhanced Semantics

Selector: b
Example: I am a b element.
b element stand-alone
Selector: i
Example: I am an i element.
i element stand-alone
Selector: u
Example: I am a u element.
u element stand-alone
Selector: s
Example: ~~I am a s element.~~
s element stand-alone
Selector: small
Example: I am a small element.
small element stand-alone
Selector: mark
Example: I am a mark element.
mark element stand-alone

Directionality

Selector: bdi
Example: אני אלמנט bdi.
bdi element stand-alone
Selector: bdo
Example: I am a bdo element.
bdo element stand-alone

Ruby

Selectors: ruby; ruby > rt; ruby > rp
Example: 漢（かん）字（じ）
ruby element with rt wrapped in rp

Edits

Selector: del
Example: ~~I am a del element.~~
del element stand-alone
Selector: ins
Example: I am an ins element.
ins element stand-alone

Embedding

Multimedia Content

View incomplete examples for picture, source, img, video, audio, track, map, and area.

Selector: picture
Example: I am a picture element.
picture element stand-alone
Selector: source
Example: I am a source element.
source element stand-alone
Selector: img
Example: I am an img element.
img element stand-alone
Selector: video
Example: video element stand-alone
Selector: audio
Example: audio element stand-alone
Selector: track
Example: I am a track element.
track element stand-alone
Selector: map
Example: I am a map element.
map element stand-alone
Selector: area
Example: I am an area element.
area element stand-alone

Embedding Containers

View incomplete examples for embed, iframe, object, and portal.

Selector: embed
Example: I am an embed element.
embed element stand-alone
Selector: iframe
Example: I am an <code>iframe</code> element.
iframe element stand-alone
Selector: object
Example: object element stand-alone
Selector: portal
Example: I am a portal element.
portal element stand-alone

Embedded Fragments of Other Markup Languages

View incomplete examples for svg and math.

Selector: svg
Example: svg element.
svg element stand-alone
Selector: math
Example: $I am a$ math element.
math element stand-alone

Tabular Content

Selectors

table

caption

thead

tbody

tfoot

tr

td

th

col

colgroup

Examples

A	B
aaa	bbb
123	456
Y	Z

a simple table

Standard Table

What MDN says about table mark-up
Element	Description
`<caption>`	The `<caption>` HTML element specifies the caption (or title) of a table.
`<col>`	The `<col>` HTML element defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a `colgroup` element.
`<colgroup>`	The `<colgroup>` HTML element defines a group of columns within a table.
`<table>`	The `<table>` HTML element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
`<tbody>`	The `<tbody>` HTML element encapsulates a set of table rows (`tr` elements), indicating that they comprise the body of the table (`table`).
`<td>`	The `<td>` HTML element defines a cell of a table that contains data. It participates in the table model.
`<tfoot>`	The `<tfoot>` HTML element defines a set of rows summarizing the columns of the table.
`<th>`	The `<th>` HTML element defines a cell as header of a group of table cells. The exact nature of this group is defined by the `scope` and `headers` attributes.
`<thead>`	The `<thead>` HTML element defines a set of rows defining the head of the columns of the table.
`<tr>`	The `<tr>` HTML element defines a row of cells in a table. The row's cells can then be established using a mix of `td` (data cell) and `th` (header cell) elements.

a table about table mark-up

Form-associated Content

View incomplete examples for form, button, label, fieldset, legend, datalist, option, optgroup, input, textarea, select, meter, output, and progress.

General

Selector: form
Example: I am a form element.

form element stand-alone
Selector: button
Example: button element stand-alone

Labeling & Grouping

Selector: label
Example: I am a label element.
label element stand-alone
Selector: fieldset
Example: I am a fieldset element.

fieldset element stand-alone
Selector: legend
Example: I am a legend element.
legend element stand-alone

Value Lists

Selector: datalist
Example: I am a datalist element.
datalist element stand-alone
Selector: option
Example: option element stand-alone
Selector: optgroup
Example: I am an optgroup element.
optgroup element stand-alone

Inputs

Selector: input
Example: I am an input element.
input element stand-alone
Selector: textarea
Example: I am a <code>textarea</code> element.
textarea element stand-alone
Selector: select
Example: select element stand-alone

Outputs

Selector: meter
Example: I am a meter element.
meter element stand-alone
Selector: output
Example: I am an output element.
output element stand-alone
Selector: progress
Example: I am a progress element.
progress element stand-alone

Interactive Elements

Selectors: details; summary
Example: I am a summary element.

I am a details element.

details element with summary element
Selector: dialog
Example: I am a dialog element.

a simple dialog

Scripting

View incomplete examples for script, noscript, and canvas.

Selector: script
Example: Nothing to see.
Selector: noscript
Example
Selector: canvas
Example: canvas element stand-alone

General Document Structure

Document root

Content root

The document’s main content

The document’s main header

The document’s main footer

The current target element

Sectioning

Sections

Heading Content

I am an h1 element.

I am an h2 element.

I am an h3 element.

I am an h4 element.

I am an h5 element.

I am an h6 element.

I am an h1 element.

I am an h2 element.

I am an h3 element.

I am an h4 element.

I am an h5 element.

I am an h6 element.

I am an h1 element.

I am an h2 element.

I am an h3 element.

I am an h4 element.

I am an h5 element.

I am an h6 element.

I am an h1 element in an hgroup element.

I am an h2 element in an hgroup element.

I am an h3 element in an hgroup element.

I am an h4 element in an hgroup element.

Sectioning Scope Specific Elements

Grouping Content

Generic block

Paragraph

Thematic break

Lists

Definition list

Extended quotation

Self-contained figure

Preformatted text

Text-level Semantics

Generic range

Line Breaks

Emphasis

Terminology

Inline Quotation

Citation

Altered Baseline

Input/Output

Inline Code

Data

Enhanced Semantics

Directionality

Ruby

Edits

Links

Embedding

Multimedia Content

Embedding Containers

Embedded Fragments of Other Markup Languages

Tabular Content

Standard Table

Form-associated Content

General

Labeling & Grouping

Value Lists

Inputs

Outputs

Interactive Elements

Scripting

I am an `h1` element.

I am an `h2` element.

I am an `h3` element.

I am an `h4` element.

I am an `h5` element.

I am an `h6` element.

I am an `h1` element.

I am an `h2` element.

I am an `h3` element.

I am an `h4` element.

I am an `h5` element.

I am an `h6` element.

I am an `h1` element.

I am an `h2` element.

I am an `h3` element.

I am an `h4` element.

I am an `h5` element.

I am an `h6` element.

I am an `h1` element in an `hgroup` element.

I am an `h2` element in an `hgroup` element.

I am an `h3` element in an `hgroup` element.

I am an `h4` element in an `hgroup` element.