Reasonable.html is a single HTML document that contains a reasonably complete set of example HTML elements.
It includes most commonly used HTML elements and attempts to use them in common and expected ways.
Why does this exist?
Reasonable.html was purpose-built to test the classless CSS rules defined in reasonable.css.
Can I use this?
Reasonable.html is free software. The full source code is available and released here under the MIT License.
How might I use this?
Reasonable.html has two obvious uses:
Testing browser default rendering of HTML elements
Testing classless CSS rules for styling those HTML elements
Additionally, it might be useful when:
Poking around the source to learn HTML
Testing more complex CSS frameworks or design systems (likely, with the addition of classes)
Testing an HTML renderer or parser
Testing screen readers or other accessibility tools
Who made this?
Reasonable.html was created by Matthew Howell, a human,
trying his best.
The HTML <a> element (or anchor element), with its href attribute, creates a hyperlink to
web pages, files, email addresses, locations in the same page, or anything else a URL can address.
More at MDN →
The HTML Abbreviation element <abbr> represents an abbreviation or acronym; the optional
title attribute can provide an expansion or description for the abbreviation.
More at MDN →
Example
A paragraph of text which contains an abbreviation element for the acronym laser.
The HTML <article> element represents a self-contained composition in a document, page,
application, or site, which is intended to be independently distributable or reusable (e.g., in
syndication).
Example
A Reasonable Article
A Reasonable Article is a tiny example <article> element that contains a
reasonable set of other example elements. It was purpose-built for appearing within the
example <article> element (hello!) in reasonable.html, which was
purpose-built to test a set of classless CSS rules (reasonable.css).
The HTML <audio> element is used to embed sound content in documents. It may contain one
or more audio sources, represented using the src attribute or the
element: the browser will choose the most suitable one. It can also be the destination for streamed
media, using a MediaStream.
More at MDN →
ExampleKimiko Ishizaka playing J.S. Bach's BWV 988 (Piano) - 20 Variatio 19 a 1 Clav
The HTML Bring Attention To element <b> is used to draw the reader's attention to the
element's contents, which are not otherwise granted special importance.
More at MDN →
Example
A paragraph of text which contains a bring attention to element.
The HTML Bidirectional Isolate element <bdi> tells the browser's bidirectional algorithm
to treat the text it contains in isolation from its surrounding text.
More at MDN →
Example
A paragraph of text which contains a bidirectional isolate element
The HTML Bidirectional Text Override element <bdo> overrides the current directionality
of text, so that the text within is rendered in a different direction.
More at MDN →
Example
A paragraph of text which contains a left-to-right bidirectional text override
element.
A paragraph of text which contains a right-to-left bidirectional text override
element.
The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the
enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how
to change it). A URL for the source of the quotation may be given using the cite attribute, while a text
representation of the source can be given using the <cite> element.
More at MDN →
Example
Books aren’t just commodities; the profit motive is often in conflict with the aims of art. We
live in capitalism, its power seems inescapable – but then, so did the divine right of kings.
Any human power can be resisted and changed by human beings. Resistance and change often begin
in art. Very often in our art, the art of words.
The HTML <button> element represents a clickable button, used to submit forms or anywhere
in a document for accessible, standard button functionality.
More at MDN →
The HTML Citation element <cite> is used to describe a reference to a cited creative
work, and must include the title of that work.
More at MDN →
Example
What I had to say to you, moreover, would not take long, to wit: Practice any art, music,
singing, dancing, acting, drawing, painting, sculpting, poetry, fiction, essays, reportage, no
matter how well or badly, not to get money and fame, but to experience becoming, to find out
what’s inside you, to make your soul grow.
Seriously! I mean starting right now, do art and do it for the rest of your lives. Draw a funny
or nice picture of Ms. Lockwood, and give it to her. Dance home after school, and sing in the
shower and on and on. Make a face in your mashed potatoes. Pretend you’re Count Dracula.
The HTML <code> element displays its contents styled in a fashion intended to indicate
that the text is a short fragment of computer code. By default, the content text is displayed using the user
agent's default monospace font.
More at MDN →
Example
A paragraph of text which contains a code element.
The HTML <datalist> element contains a set of <option> elements that
represent the permissible or recommended options available to choose from within other controls.
More at MDN →
The HTML Details Element <details> creates a disclosure widget in which information is
visible only when the widget is toggled into an "open" state.
More at MDN →
ExampleA summary element contained within a details element.The contents of the details element.
The HTML Definition element (<dfn>) is used to indicate the term being defined within the
context of a definition phrase or sentence. The <p> element, the
<dt>/<dd> pairing, or the <section> element which
is the nearest ancestor of the <dfn> is considered to be the definition of the term.
More at MDN →
Example
A human is a person; a human being, distinct from animals, aliens, and
especially charming, life-like, humanoid robots.
The HTML Content Division element (<div>) is the generic container for flow content. It
has no effect on the content or layout until styled using CSS.
More at MDN →
The HTML <dl> element represents a description list. The element encloses a list of
groups of terms (specified using the <dt> element) and descriptions (provided by
<dd> elements). Common uses for this element are to implement a glossary or to display
metadata (a list of key-value pairs).
More at MDN →
The HTML <em> element marks text that has stress emphasis. The <em>
element can be nested, with each level of nesting indicating a greater degree of emphasis.
More at MDN →
Example
A stressful paragraph of text which contains a stress emphasis element, which contains a
nested stress emphasis element.
The HTML <figure> (Figure With Optional Caption) element represents
self-contained content, potentially with an optional caption, which is specified using the
(<figcaption>) element.
More at MDN →
ExampleA figcaption element as the last child of its containing figure element.
The HTML <footer> element represents a footer for its nearest sectioning
content or sectioning root element. A footer typically contains information about the author
of the section, copyright data or links to related documents.
More at MDN →
The HTML <header> element represents introductory content, typically
a group of introductory or navigational aids. It may contain some heading elements but
also a logo, a search form, an author name, and other elements.
More at MDN
→
The HTML <hr> element represents a thematic break between
paragraph-level elements: for example, a change of scene in a story, or a shift of topic
within a section.
More at MDN →
The HTML Inline Frame element (<iframe>) represents a nested browsing
context, embedding another HTML page into the current one.
More at MDN
→
Example
A paragraph of text preceeding an <iframe> element.
A paragraph of text following an <iframe> element.
HTML Input Element Types
The HTML <input> element is used to create interactive controls for
web-based forms in order to accept data from the user; a wide variety of types of input
data and control widgets are available, depending on the device and user agent.
<input[type=date]> is a control for entering a date (year, month, and
day, with no time). Opens a date picker or numeric wheels for year, month, day when
active in supporting browsers.
More at
MDN →
<input[type=datetime-local]> is a control for entering a date and
time, with no time zone. Opens a date picker or numeric wheels for date- and
time-components when active in supporting browsers.
More
at MDN →
<input[type=email]> is a field for editing an email address. Looks
like a text input, but has validation parameters and relevant keyboard in supporting
browsers and devices with dynamic keyboards.
More at
MDN →
<input[type=file]> is a control that lets the user select a file. Use
the accept attribute to define the types of files that the control can select.
More at
MDN →
<input[type=image]> is a graphical submit button. Displays an image
defined by the src attribute. The alt attribute displays if the image src is missing.
More at
MDN →
<input[type=number]> is a control for entering a number. Displays a
spinner and adds default validation when supported. Displays a numeric keypad in some
devices with dynamic keypads.
More at
MDN →
<input[type=password]> is a control for entering a password. Displays
a spinner and adds default validation when supported. Displays a numeric keypad in some
devices with dynamic keypads.
<input[type=range]> is a control for entering a range. Displays a
spinner and adds default validation when supported. Displays a numeric keypad in some
devices with dynamic keypads.
<input[type=search]> is a single-line text field for entering search
strings. Line-breaks are automatically removed from the input value. May include a
delete icon in supporting browsers that can be used to clear the field. Displays a
search icon instead of enter key on some devices with dynamic keypads.
<input[type=url]> is a field for entering a URL. Looks like a text
input, but has validation parameters and relevant keyboard in supporting browsers and
devices with dynamic keyboards.
The HTML Keyboard Input element <kbd> represents a span of inline text
denoting textual user input from a keyboard, voice input, or any other text entry
device. By convention, the user agent defaults to rendering the contents of a
<kbd> element using its default monospace font, although this is not
mandated by the HTML standard.
Example
Please press Cmd + R to re-render this page.
The previous paragraph contains two kbd elements, one representing the Command
key and one representing the R key.
The HTML <main> element represents the dominant content of the
<body> of a document. The main content area consists of content that
is directly related to or expands upon the central topic of a document, or the central
functionality of an application.
The HTML Mark Text element <mark> represents text which is marked or
highlighted for reference or notation purposes, due to the marked passage's relevance or
importance in the enclosing context.
Example
Some paragraph of text that includes a mark element to highlight some of
the text.
The HTML <nav> element represents a section of a page whose purpose is
to provide navigation links, either within the current document or to other documents.
Common examples of navigation sections are menus, tables of contents, and indexes.
The HTML <option> element is used to define an item contained in a
<select>, an <optgroup>, or a
<datalist> element. As such, <option> can
represent menu items in popups and other lists of items in an HTML document.
The HTML Output element <output> is a container element into which a
site or app can inject the results of a calculation or the outcome of a user action.
The HTML <picture> element contains zero or more
<source> elements and one <img> element to offer
alternative versions of an image for different display/device scenarios.
ExampleThis example uses the picture element to display a higher resolution
image to wider viewports (> 600 pixels).
The HTML <q> element indicates that the enclosed text is a short
inline quotation. Most modern browsers implement this by surrounding the text in
quotation marks.
Example
Eugene Debs, on September 18, 1918, was sentenced to 10 years in prison and
disenfranchised. Speaking to the federal judge at his trial: Your Honor, years ago I
recognized my kinship with all living beings, and I made up my mind then
that I was not one bit better than the meanest on earth. I said then, and I
say now, that while there is a lower class, I am in it; and while there is a
criminal element, I am of it; and while there is a soul in prison, I am not
free.
The HTML <s> element renders text with a strikethrough, or a line
through it. Use the <s> element to represent things that are no
longer relevant or no longer accurate. However, <s> is not
appropriate when indicating document edits; for that, use the <del>
and <ins> elements, as appropriate.
Example
Here is strikethrough element rendered within an enclosing paragraph
The HTML <section> element represents a standalone section — which
doesn't have a more specific semantic element to represent it — contained within an HTML
document.
More at MDN
→
The HTML <small> element represents side-comments and small print,
like copyright and legal text, independent of its styled presentation. By default, it
renders text within it one font-size smaller, such as from small to x-small.
More at MDN
→
Example
A preceeding paragraph of text and then some text within the small
element followed by some additional text.
The HTML element is a generic inline container for phrasing content, which does
not inherently represent anything. It can be used to group elements for styling
purposes (using the class or id attributes), or because they share attribute values,
such as lang.
More at MDN
→
Example
A preceeding paragraph of text and then some text within the span
element followed by some additional text.
The HTML Strong Importance Element <strong> indicates that its
contents have strong importance, seriousness, or urgency. Browsers typically render the
contents in bold type.
More at MDN
→
Example
Some paragraph of text that includes a strong importance
element.
The HTML <table> element represents tabular data — that is,
information presented in a two-dimensional table comprised of rows and columns of cells
containing data.
More at MDN
→
The HTML Unarticulated Annotation Element (<u>) represents a span of
inline text which should be rendered in a way that indicates that it has a non-textual
annotation.
More at MDN →
Example
A paragraph of text which contains an unarticulated annotation element.
The HTML Video element <video> embeds a media player which supports
video playback into the document. You can use <video> for audio
content as well, but the <audio> element may provide a more
appropriate user experience.
More at MDN
→
The HTML <wbr> element represents a word break opportunity—a position
within text where the browser may optionally break a line, though its line-breaking
rules would not otherwise create a break at that location.
More at MDN
→
Example
A paragraph of text which contains a very, very long word:
Lopadotemachoselachogaleokranioleipsanodrimhypotrimmatosilphioparaomelitokatakechymenokichlepikossyphophattoperisteralektryonoptekephalliokigklopeleiolagoiosiraiobaphetraganopterygon
A paragraph of text which contains the same very, very long word, with word break
opportunity elements after each p:
Lopadotemachoselachogaleokranioleipsanodrimhypotrimmatosilphioparaomelitokatakechymenokichlepikossyphophattoperisteralektryonoptekephalliokigklopeleiolagoiosiraiobaphetraganopterygon
Omitted Elements
Reasonable.html omits a handful of HTML elements, the reason for each omission is stated
here. Mostly though, since it was built to test CSS rules, elements which need no
styling were not included.
If you disagree with any of the omissions, please file an issue and make your case.
br - Not an element that should be styled.
canvas - No default style necessary.
dialog - Experimental element with limited browser support.
embed - No default style necessary.
input[type=hidden] - No default style necessary.
input[type=reset] - No longer a recommended form element.
menu - Experimental element with limited browser support.
noscript - No default style necessary.
object - No default style necessary.
param - No default style necessary.
rb - Experimental element with limited browser support.
rtc - Experimental element with limited browser support.
The SVG illustration used in the <map> element is from the contagiously generous Katerina Limpitsouni, available for use, for free at unDraw.
Kimiko Ishizaka and Open Goldberg Variations
The music file used in the <audio> element example is a performance by Kimiko Ishizaka for
the Open Goldberg Variations. The project's stated and
accomplished goal was to create a public domain recording and
score of J.S. Bach's masterpiece, Die Goldberg Variationen.
The moving image used in the <video> element was created in June of 1877 by Eadweard
Muybridge using 12 cameras, the shutters tripped by wire, in Palo Alto, California. You can read more about
it on on Wikipedia or download
the video file here.
