Control elements

This is where we check our CSS.

Control elements do not need to be inside a form unless they are part of a group collecting data to be submitted.

Form examples

Select

Open a link from a select element Create an HTML page from a template Publish using GitHub Pages Be more productive in VSCode Go to selected page Reset form

Input

Post data to a page

Data Submit data Reset form

Standalone controls

Whether in a form or standalone, control elements should always be paired with a label element.

Layout

Line length

Having the right amount of characters on each line is key to the readability of your text.

Indeed, it shouldn't merely be your design that dictates the width of your text — the ability of users to easily read through the text should also be a critical factor.

Ruder concluded that the optimal line length for body text is 50–60 characters per line, including spaces (“Typographie”, E. Ruder).

Other sources suggest that up to 75 characters is acceptable.

It turns out that the subconscious mind is energized when jumping to the next line (as long as it doesn't happen too frequently; see above bullet point). At the beginning of every new line the reader is focused, but this focus gradually wears off over the duration of the line (“Typographie”, E. Ruder).

Readability: The Optimal Line Length

Flexbox

Grids

Tables

Our toolkit

Tool	Purpose
Chrome extension	Schema generation
Chrome extension	HTML validation
npm package	Emissions tracking