net - UK (2020-05)

Whenever something on a page needs to be

interactive, JavaScript is often the first port

of call. Showing and hiding content can be

as straightforward as toggling a class. But

this behaviour is already available, with no

added page weight, right inside HTML.

The <details> element will hide its content by

default. When the user clicks the heading, it expands

to reveal the content inside. It can also be given a

custom heading using the <summary> element. This

can all be controlled using JavaScript as well, but

gives some default behaviour for free.

It is supported by all major browsers apart from

Internet Explorer, which will by default fall back to

an open state to make sure the content is not lost.

This can be great for an FAQ section where bulky

text blocks are not instantly required.

<details>

<summary>How does this element work?</summary>

<p>Any content inside is hidden by default.</p>

</details>

This tag can distinguish

supplementary information

usually found in small print

such as disclaimers or copyright

notices. This would be used for

inline content, rather than a full block-

level <aside>.

While it will display as smaller text by

default, it should be used sparingly and

not purely for stylistic purposes.

Room rate: £80 <small>excluding VAT</

small>

An <output> denotes where the

result of a calculation will be

displayed. For example, range

sliders have no visual

indication of the actual selected

value and an <output> can be used to

hold that value.

Any content inside an <output>

element is read aloud by screen readers

as it changes, which is similar to an

ARIA live region.

<input type=”range” id=”slider” min=”0”

max=”100” value=”40” />

<output for=”slider”>40</output>

When writing content that

should be interpreted as

computer code, the <code>

element will separate it from

the rest of the text. By default, it

is styled using a monospace font.

Code snippets that cover multiple

lines should also be wrapped in a

<pre> element, which preserves the

whitespace within it.

The content can be shown by providing the

<code>open</code> attribute.

AUTHOR

MATT CROUCH

Crouch is a front-end

software engineer for

mobile video specialist

Vidsy. He works with

companies and creators

to ensure their content is

accessible to everyone.

w: http://www.mattcrouch.net

t: @mattcrouchuk

CodePen
(https://codepen.io/)
uses