About This Page

This page is designed to demonstrate various HTML elements and allow you to inspect them. Click on any element on the page, or select a tag from the inspector panel at the bottom, to learn more about its purpose and properties.

Structure & Semantics

These tags define the broad structure and meaning of your web content.

Content & Layout

These tags help organize and structure content within sections.

Sometimes you need a simple line break, like this one.
This text appears on a new line thanks to <br>.

The line above is a <hr> tag, representing a thematic break or a shift in topic.

Text Elements

Tags for displaying and structuring textual content.

Heading Level 1 (Typically one per page)

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6 (Smallest)

This is a standard <p> (paragraph) element. It can contain various inline text elements. For example, this text is <strong> (important, typically bold), and this text is <em> (emphasized, typically italic).

Links are crucial for navigation. Here’s an anchor <a> tag linking to MDN Web Docs (opens in new tab).

Lists

Unordered List (<ul> with <li> items):

• First item
• Second item
• Third item with nested span

Ordered List (<ol> with <li> items):

1. Apple
2. Banana
3. Cherry

Quotes

For longer quotations, use <blockquote>:

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

– Tim Berners-Lee

For short, inline quotations, use <q>. For example, she said, HTML is the skeleton of the web.

Media Elements

Tags for embedding images, audio, video, and other external content.

Image (<img>)

The image above uses a placeholder service. The alt attribute is crucial for accessibility.

Video (<video>)

This is a <video> tag. To make it work, you’d need to uncomment one of the <source> tags and provide a valid video file path.

Audio (<audio>)

This is an <audio> tag. Similar to video, uncomment a <source> and provide an audio file.

Embedded Content (<iframe>)

The <iframe> above embeds a blank page. You can change the src attribute to embed other web content. For example, a YouTube video or another website (if permitted by that site).

Basic Forms (<form> and inputs)

Forms are used to collect user input.