(This is a <header> element, often used at the top of a page or section)
The Kitchen Sink Page
(👆 that’s a <hr> - horizontal rule!)
Text & Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading 1 inside an <hgroup>
Heading 2 inside an <hgroup>
Here’s a bunch of paragraphs, so we can see what paragraphs will look like on our site.
The <dfn> element indicates a term to be defined, usually by
the enclosing paragraph. There’s also the <abbr> element,
used in HTML (Hypertext Markup Language) to indicate an abbreviation.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod magna eu purus suscipit, vitae semper
ligula
efficitur. Suspendisse semper vel mauris id sollicitudin. Aliquam erat volutpat. Vivamus luctus est ligula, eu
commodo metus ullamcorper id. Donec massa metus, cursus sit amet consequat sit amet, posuere vitae purus. Proin
nec
felis efficitur, scelerisque tortor quis, feugiat tellus. Sed imperdiet tincidunt dolor a molestie. Nullam tempus
purus felis, quis efficitur turpis maximus et. Phasellus nec nibh commodo, elementum est ut, interdum odio.
Aliquam
cursus consequat tortor sit amet maximus. Fusce aliquam eleifend leo a laoreet. Donec nibh massa, lacinia sodales
iaculis nec, finibus sed lorem. Etiam vitae tortor nec mi sodales malesuada.
This is a paragraph demonstrating strong, emphasised, underlined, and
highlighted text. It also contains a quotation, denoted
by a <q> element.
This paragraph contains examples of superscript (x2),
subscript (H2SO4),
variables like x, y & z,
an HTML <data> element,
an <time> element ().
This one contains some deleted text, some inserted text, and
some strikethrough text.
This paragraph contains a snippet of code, inside a <code> element.
You'll also see the <kbd> element used to indicate user input (like this).
Unicode and Emoji
Let’s check our page doesn’t blow up if somebody renders content in Ukrainian, Greek,
Arabic or Hebrew:
Це абзац українською мовою, тому ми можемо переконатися, що
кирилиця відображатиметься правильно.
Αυτή η παράγραφος είναι στα ελληνικά, ώστε να μπορούμε να ελέγξουμε ότι ο ιστότοπός μας υποστηρίζει σωστά τα
ελληνικά.
هذه فقرة عربية، لذا يمكننا التأكد من ظهور الأبجدية العربية بشكل صحيح.
פסקה זו היא בעברית, כדי שנוכל לבדוק שהאתר שלנו תומך בעברית כראוי.
There’s also the <ruby> element, and the associated
<rt> and <rp> elements,
which are used to add pronunciation hints for text rendered
in Japanese and East Asian character sets, such as:
漢
字
or
ゆきひろ まつもと
Special characters: £ £ & & < >
Pictorial Emoji: 😀🎸🎤🦕👩🏿🚀
Pictoral Flags: 🏁🚩🎌🏴🏳️🏳️🌈🏳️⚧️🏴☠️🇺🇳
Regional Flags: 🇿🇼 🇺🇸 🇬🇧 🇦🇶 🏴
This heading 2 is part of a section inside an article.
And here’s a paragraph
Content might also be contained in a <div> element - a block element
with no semantic significance - or in a <span> element, denoting an
inline element with no semantic significance.
Lists
Unordered Lists
Unordered list item 1
Unordered list item 2
Unordered list item 3
Ordered Lists
Ordered list item 1
Ordered list item 2
Ordered list item 3
Ordered sub-list item 1
Ordered sub-list item 2
Ordered sub-list item 3
Definition List
Term
Definition
Selector
The part of a CSS rule used to identify the element or elements which should be affected by the rule.
Property
The part of a CSS rule indicating what’s being modified
Value
The part of a CSS rule indicating what
Blockquote
This is a blockquote. It is used to indicate quoted text.
Code and Preformatted Text
This is preformatted text, which preserves
whitespace and line breaks.
// This is a block of code, using the <code> tag inside a <pre> tag.
console.log('Hello, world!');
Details & Summary
How It Works
Using <details> creates a region which the user can expand
and collapse. When collapsed, the <summary> remains visible.
What’s It Useful For?
It’s a built-in way to present content in an accordion style.
Associated elements can be linked using the name attribute
on the <details> elements; only one linked element will be displayed
at a time.
Why’s it called an "accordion"?
I honestly have no idea. Maybe something to do with French café jazz?
Figures
Using <figure> to present a quotation:
The dream behind the Web is of a common information space in which we communicate by sharing information. Its
universality is essential: the fact that a hypertext link can point to anything, be it personal, local or
global, be it draft or highly polished.
