Title `<title>`

Brand (Bigger Size) <brand>

Headings Size 1`<h1>`

Heading Size 2 `<h2>`

Heading Size 3 `<h3>`

Heading Size 4 `<h4>`

Heading Size 5 `<h5>`

Heading Size 6 `<h6>`

Text Section (surfaced): `<section class="surface" id="main-content">`

This is a short sentence containing an anchor hyperlink that opens in a new tab <a target="_blank"> to the Main HTML homepage; this link.

Common inline elements inside a paragraph `<p>…</p>`

This paragraph is contiguous and has no line breaks and contains bold text <b>, italic text <i>, underlined text <u>, emphasized text <em>, strong text <strong>, small text <small>, highlighted or <marked> text <mark>, inverted text <invert>, ~~strikethrough or <del>~~ <del>, inserted text <ins>, _subscript <sub>, ^superscript <sup>, abbr <abbr title="…">. abbr <abbr>, branded text <brand> and rainbow text <rainbow> or rainbow background <rainbow class="background">. Combining abbreviations like HTML <abbr> are useful with _subscript and ^superscript for specific notations like H₂O or E=mc². Definitions: Semantic HTML <dfn> refers to using HTML elements according to their meaning.

Other inline & breaking elements:

Inline unclassed span <span> element here between open “ and close ” quotation marks and “this is an span.” Using the <wbr> element to suggest a word break: crazysuperlonglongwordherewithpotentialbreakpointathepotentialbreakwordpoint and split long words, you can also prevent breaking by inserting   non-breaking spaces between words, followed by a line break <br>.
This sentence starts on new line within the same paragraph and tests bidirectional text; BiDi text <bdo dir="rtl"> text between open ‘ and close ’ single quotation marks: ‘This text will be right-to-left.’ (this text should render RTL). Isolated bidi: تست (this Arabic text should render correctly within LTR context)

This paragraph hugs the line above it, emulating a <br> line break, followed by a <hr> horizontal ruler;

A sample <samp> output: File: Sample Found.
Here the x is a variable <var>: x = 10;
Time <time>: June 1, 2025
Date & Time <time datetime="2025-06-01T10:00:00Z">: June 1, 2025, 10:00 AM UTC

Here are some quotes

Here's a cited <cite> quotation: first an This is a short inline quote. <q> and then a <blockquote>;

A wise developer once told me the introduction of the <main> element importance cannot be overstated. Some might think that's an exaggeration, but I think it's very accurate.

— Andy Futcher <cite>

Address and Links

This is an address <address> followed by telephone number <a href="tel:"> and email address <a href="mailto:">.

123 Main St
Anytown, 1234
Australia

Tel: 555 123 4567
Email: you@example.com

Text Section (continued):

Here are some icons with tooltips with an tab space &emsp; before each, these support small inline sizes & & inherit line heights too:
Small:
Normal:
Big:
Bigger:

Definition lists `<dl>`

Definition Term <dt>: Definition Description <dd>

Here are some lists:

First ordered <ol> then unordered; <ul>

Ordered list item 1 <l1>
Ordered list item 2 <l1>
Ordered list item 3 <l1>

Unordered list item 1 <l1>
Unordered list item 2 <l1>
Unordered list item 3 <l1>

Text in an unsurfaced `<section>`

An unsurfaced section omits the surface class="surface" class attribute from the <section>…</section> container.

Here is the large closed paragraph

The introduction of main <main> element in HTML5 <!DOCTYPE html> was a real game-changer and brought semantic clarity to an HTML document. Before main, we were lost in a sea of generic divider <div> elements, but now we can confidently say, Here lies the dominant content of the body <body>. This isn't just a suggestion; it's a bold statement of purpose; you could even describe it as "the main content of the document." The main element so much more than just a block-level element; it's a landmark role and a real hero for accessibility and SEO too. It helps screen readers and other assistive technologies understand the structure of a page. A user can easily skip to the main content, bypassing headers <header> and navigation <nav>.

Code Section:

An inline code <code> embedded in a sample <samp>: <code class="element"><span class="html">code</span></code>

Here is some HTML:

<section id="main-content" class="surface">	<h2>Heading Number Size Two</h2>	<p>This is paragraph contains a link to <a href="https://www.mainhtml.dev/" target="_blank">Main HTML</a> that opens in a new tab.</p></section>

Preformatted block <pre> with code <code>:

Here is some CSS:

body {	font-family: "Roboto Serif",sans-serif;	line-height: 1.5;}

You can copy the code above using keyboard <kbd> shortcut Ctrl + C.

Media Embedding

Standard Image `<img>`

Audio `<audio>`

Video `<video>`

Note: Actual video source not embedded to keep file size small. This is a placeholder.

Embedded Content `<iframe>`

Note: Iframe to example.com. Some sites may block embedding.

Slideshow `<slideshow>`

Tables `<table>`

Employee Data - Q2 2025
ID	Name	Department	Salary	Start Date
001	Alice Wonderland	Engineering	$95,000	2023-01-15
002	Bob The Builder	Operations	$72,000	2022-07-01
003	Charlie Brown	Marketing	$80,000	2023-05-20
004	Diana Prince	Human Resources	$78,000	2024-02-10
Total Employees: 4			Average Salary: Approx. $81,250

Even Flexible Columns `<flexible>`

Thin Columns

Column 1

Lorem ipsum Optima demonstratio elementorum HTML "Main", structurae filariae Main.CSS, et sustentatione Main.JS. Introductio elementi "main" in HTML5 vere mutavit omnia et claritatem semanticam documento HTML attulit.

Ante "main", in mari elementorum divisoriorum genericorum immersi eramus, sed nunc confidenter dicere possumus, "Hic iacet contentum praevalens corporis." Haec non est modo suggestio; est audax declaratio propositi; etiam describere posses ut "contentum principale documenti."

Column 2

Elementum principale multo plus quam elementum in gradu quadrati; munus insignis est et verus heros pro accessibilitate et SEO quoque. Lectoribus scrinii aliisque technologiarum adiuvantium adiuvat ut structuram paginae intellegant.

Haec est brevis sententia continens nexum hypertextualem ancoralem qui in nova scheda ad paginam primam HTML principalem aperitur; usor facile ad contentum principale transire potest, inscriptiones et navigationem praetermittens.

Column 3

Sapiens quidam programmator mihi olim dixit introductionem elementi "important" non posse nimis exaggerari. Quidam fortasse existiment id esse exaggerationem, sed mihi videtur accuratissima esse.

English Section:
These Lorem ipsum are all in elements tagged as latin <p lang="la"> attribute, this is best for accessibility and translators.

Wide Columns

Latin Column 1

Latin Column 2

Uneven Flexible Columns `<flexible>`

Thin Surfaced Column `<aside class="surface">`

Column 1 Examples

English Section:
These Lorem ipsum are all in elements tagged as latin <p lang="la"> attribute, this is best for accessibility and translators.

Thin Complementary Column `<div role="complementary">`

Latin Column 2 `<div class="wide">` Examples

Ipsum lorem Elementum principale multo plus quam elementum in gradu quadrati; munus insignis est et verus heros pro accessibilitate et SEO quoque. Lectoribus scrinii aliisque technologiarum adiuvantium adiuvat ut structuram paginae intellegant.

English Section:
These Lorem ipsum are all in elements tagged as latin <p lang="la"> attribute, this is best for accessibility and translators.

Flex Text 2 Columns (2nd Wide)

Latin Column 2 with Image

These Lorem ipsum are all in elements tagged as latin <p lang="la"> attribute, this is best for accessibility and translators.

Flexible Area Image — Figcaption for the standard image.

Interactive Modules

Accordion `<details>`

Accordion Item 1 <summary> (Initially open)

This is the content for the first accordion item. Most of the time these are hidden by default and revealed when the summary element is clicked, unless like in this case, the <details> container includes the open attribute, then it will be automatically revealed.

This is the content For a second paragraph in the accordion!

Accordion Item 2

Here's some more content for the second item. You can put any HTML structure you like in here, such as paragraphs, lists, or images.

List item A
List item B

Accordion Item 3

This item could be styled to appear open by default if needed, or you could use JavaScript to manage an 'open' attribute for more complex state management. For this demo, it behaves like the others.

Showcases / Action Cards `<cards>`

Card Title One

Some quick example text to build on the card title and make up the bulk of the card's content.

Learn More

Card Title Two

This card has supporting text below as a natural lead-in to additional content. It's also quite a bit longer and should automatically adjust the adjacent cards.

Read Article

Card Title Three (No Image)

This card demonstrates content without a top image. It uses a bit more text to fill the space.

Last updated 3 mins ago

View Details

Separate Article `<article>`

Some developers might still be using #main <div id="main"> it's time to use the main element instead! Using Main <main> is not only best practice but also more descriptive. Think of it this way: main is like the keynote speaker at a conference, while all the other sections are the supporting acts. You wouldn't want the keynote to be lost in the crowd, would you? Of course not! So, let's give <main> the respect it deserves. Your future self (and your users) will thank you.

Title <title> A very large title, not the same as the page title

Headings Size 1<h1>

Heading Size 2 <h2>

Heading Size 3 <h3>

Heading Size 4 <h4>

Heading Size 5 <h5>

Heading Size 6 <h6> A tiny heading, so small its not really usable

Text Section (surfaced): <section class="surface" id="main-content">

Common inline elements inside a paragraph <p>…</p>

Other inline & breaking elements:

Here are some quotes

Address and Links

Text Section (continued):

Definition lists <dl>

Here are some lists:

Text in an unsurfaced <section>

Here is the large closed paragraph

Code Section:

Here is some HTML:

Here is some CSS:

Media Embedding

Standard Image <img>

Audio <audio>

Video <video>

Embedded Content <iframe>

Slideshow <slideshow>

Tables <table>

Even Flexible Columns <flexible>

Thin Columns

Column 1

Column 2

Column 3

Wide Columns

Latin Column 1

Latin Column 2

Uneven Flexible Columns <flexible>

Thin Surfaced Column <aside class="surface">

Column 1 Examples

Thin Complementary Column <div role="complementary">

Latin Column 1

Latin Column 2 <div class="wide"> Examples

Flex Text 2 Columns (2nd Wide)

Latin Column 2 with Image

Interactive Modules

Accordion <details>

Showcases / Action Cards <cards>

Card Title One

Card Title Two

Card Title Three (No Image)

Forms <form>

Separate Article <article>

Related Content

Title `<title>`

Headings Size 1`<h1>`

Heading Size 2 `<h2>`

Heading Size 3 `<h3>`

Heading Size 4 `<h4>`

Heading Size 5 `<h5>`

Heading Size 6 `<h6>`

Text Section (surfaced): `<section class="surface" id="main-content">`

Common inline elements inside a paragraph `<p>…</p>`

Definition lists `<dl>`

Text in an unsurfaced `<section>`

Standard Image `<img>`

Audio `<audio>`

Video `<video>`

Embedded Content `<iframe>`

Slideshow `<slideshow>`

Tables `<table>`

Even Flexible Columns `<flexible>`

Uneven Flexible Columns `<flexible>`

Thin Surfaced Column `<aside class="surface">`

Thin Complementary Column `<div role="complementary">`

Latin Column 2 `<div class="wide">` Examples

Accordion `<details>`

Showcases / Action Cards `<cards>`

Forms `<form>`

Separate Article `<article>`