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.
