Comprehensive HTML Elements Example

Headings

This is a Heading Level 1

This is a Heading Level 2

This is a Heading Level 3

This is a Heading Level 4

This is a Heading Level 5
This is a Heading Level 6

Paragraphs

This is a paragraph of text. Paragraphs are defined using the <p> tag. This tag automatically adds space before and after the paragraph.

Here is another paragraph to show how paragraphs are separated from each other.

Links

Visit Example.com for more information.

Images

Here is an example of an image:

Placeholder Image

Lists

Unordered List

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Ordered List

  1. First item
  2. Second item
  3. Third item
  4. Fourth item
  5. Fifth item

Blockquotes

"This is a blockquote. Blockquotes are used to highlight text that is quoted from another source."

Code

Inline code can be added using the <code> tag. For example, <div> is an HTML element.


function greet() {
    console.log("Hello, world!");
}

Tables

Tables are used to display tabular data. Here is an example of a table:

Header 1 Header 2 Header 3 Header 4 Header 5
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3 Row 1, Cell 4 Row 1, Cell 5
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3 Row 2, Cell 4 Row 2, Cell 5
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 Row 3, Cell 4 Row 3, Cell 5
Row 4, Cell 1 Row 4, Cell 2 Row 4, Cell 3 Row 4, Cell 4 Row 4, Cell 5
Row 5, Cell 1 Row 5, Cell 2 Row 5, Cell 3 Row 5, Cell 4 Row 5, Cell 5

Forms

Forms are used to collect user input. Here is an example of a form:

Inline Styles

This paragraph has inline styling to change its text color to red.

Semantic Elements

Article Heading

This is an article section. Articles are used for self-contained content.

Details Summary

This content is hidden by default and revealed when the summary is clicked.

This is a figcaption. Figcaptions are used to describe a figure element.

Placeholder Image
Placeholder Image Description

Embedded Content

Script and NoScript

JavaScript can be included using the <script> tag. If JavaScript is not enabled, the <noscript> tag provides alternative content:

Embedded Frames

The <iframe> element can be used to embed another HTML document within the current page.

Audio and Video

The <audio> and <video> elements are used to embed media content:

Audio Example

Video Example

Data Attributes

Custom data attributes can be added to HTML elements using the data- prefix:

Hover over this text to see custom data attributes in action.

Meta Tags

Meta tags are used in the <head> section to provide metadata about the document:

  • <meta charset="UTF-8">: Specifies the character encoding.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport for responsive design.
  • <meta name="description" content="A comprehensive example of HTML elements">: Provides a description of the page content.

Custom Attributes and Classes

HTML elements can have custom attributes and classes:

Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 4
Flex Item 5