HTML Elements Visualizer

A visual guide to HTML elements - see how each element looks and works

<html>

Basic Structure

The root element of an HTML page

Code Example:

class="text-blue-600"><class="text-red-600">htmlclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">headclass="text-blue-600">>...class="text-blue-600"></class="text-red-600">headclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">bodyclass="text-blue-600">>...class="text-blue-600"></class="text-red-600">bodyclass="text-blue-600">>
class="text-blue-600"></class="text-red-600">htmlclass="text-blue-600">>

Result:

HTML Document
head
body (visible content)

<head>

Basic Structure

Contains meta information about the document

Code Example:

class="text-blue-600"><class="text-red-600">headclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">titleclass="text-blue-600">>Page Titleclass="text-blue-600"></class="text-red-600">titleclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">metaclass="text-blue-600"> charset="UTF-8">
class="text-blue-600"><class="text-red-600">linkclass="text-blue-600"> rel="stylesheet" href="styles.css">
class="text-blue-600"></class="text-red-600">headclass="text-blue-600">>

Result:

Head Section
(Not visible to users)
title
meta
link

<body>

Basic Structure

Contains all the visible content of the document

Code Example:

class="text-blue-600"><class="text-red-600">bodyclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">headerclass="text-blue-600">>...class="text-blue-600"></class="text-red-600">headerclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">mainclass="text-blue-600">>...class="text-blue-600"></class="text-red-600">mainclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">footerclass="text-blue-600">>...class="text-blue-600"></class="text-red-600">footerclass="text-blue-600">>
class="text-blue-600"></class="text-red-600">bodyclass="text-blue-600">>

Result:

Body Section
(Visible content)
header
main content
footer

<h1>

Text Content

The most important heading (largest)

Code Example:

class="text-blue-600"><class="text-red-600">h1class="text-blue-600">>Main Headingclass="text-blue-600"></class="text-red-600">h1class="text-blue-600">>

Result:

Main Heading

<h2>

Text Content

Second-level heading

Code Example:

class="text-blue-600"><class="text-red-600">h2class="text-blue-600">>Subheadingclass="text-blue-600"></class="text-red-600">h2class="text-blue-600">>

Result:

Subheading

<p>

Text Content

A paragraph of text

Code Example:

class="text-blue-600"><class="text-red-600">pclass="text-blue-600">>This is a paragraph of text. Paragraphs are block-level elements that create a new line before and after.class="text-blue-600"></class="text-red-600">pclass="text-blue-600">>

Result:

This is a paragraph of text. Paragraphs are block-level elements that create a new line before and after.

<a>

Text Content

A hyperlink to another page or location

Code Example:

class="text-blue-600"><class="text-red-600">aclass="text-blue-600"> href="https://example.com">Visit Exampleclass="text-blue-600"></class="text-red-600">aclass="text-blue-600">>

<strong>

Text Content

Important text (bold)

Code Example:

class="text-blue-600"><class="text-red-600">strongclass="text-blue-600">>Important textclass="text-blue-600"></class="text-red-600">strongclass="text-blue-600">>

Result:

Important text

<em>

Text Content

Emphasized text (italic)

Code Example:

class="text-blue-600"><class="text-red-600">emclass="text-blue-600">>Emphasized textclass="text-blue-600"></class="text-red-600">emclass="text-blue-600">>

Result:

Emphasized text

<ul>

Text Content

Unordered list (bullet points)

Code Example:

class="text-blue-600"><class="text-red-600">ulclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">liclass="text-blue-600">>Item 1class="text-blue-600"></class="text-red-600">liclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">liclass="text-blue-600">>Item 2class="text-blue-600"></class="text-red-600">liclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">liclass="text-blue-600">>Item 3class="text-blue-600"></class="text-red-600">liclass="text-blue-600">>
class="text-blue-600"></class="text-red-600">ulclass="text-blue-600">>

Result:

  • Item 1
  • Item 2
  • Item 3

<ol>

Text Content

Ordered list (numbered)

Code Example:

class="text-blue-600"><class="text-red-600">olclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">liclass="text-blue-600">>First itemclass="text-blue-600"></class="text-red-600">liclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">liclass="text-blue-600">>Second itemclass="text-blue-600"></class="text-red-600">liclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">liclass="text-blue-600">>Third itemclass="text-blue-600"></class="text-red-600">liclass="text-blue-600">>
class="text-blue-600"></class="text-red-600">olclass="text-blue-600">>

Result:

  1. First item
  2. Second item
  3. Third item

<img>

Media

An image

Code Example:

class="text-blue-600"><class="text-red-600">imgclass="text-blue-600"> src="image.jpg" alt="Description of image">

Result:

Example image
Image with alt text: "Example image"

<video>

Media

A video player

Code Example:

class="text-blue-600"><class="text-red-600">videoclass="text-blue-600"> controls>
class="text-blue-600"><class="text-red-600">sourceclass="text-blue-600"> src="video.mp4" type="video/mp4">
Your browser does not support video.
class="text-blue-600"></class="text-red-600">videoclass="text-blue-600">>

Result:

▶️ Video Player

<audio>

Media

An audio player

Code Example:

class="text-blue-600"><class="text-red-600">audioclass="text-blue-600"> controls>
class="text-blue-600"><class="text-red-600">sourceclass="text-blue-600"> src="audio.mp3" type="audio/mpeg">
Your browser does not support audio.
class="text-blue-600"></class="text-red-600">audioclass="text-blue-600">>

Result:

<form>

Forms

A container for form elements

Code Example:

class="text-blue-600"><class="text-red-600">formclass="text-blue-600"> action="/submit" method="post">
class="text-blue-600"><class="text-red-600">labelclass="text-blue-600"> for="name">Name:class="text-blue-600"></class="text-red-600">labelclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">inputclass="text-blue-600"> type="text" id="name" name="name">
class="text-blue-600"><class="text-red-600">inputclass="text-blue-600"> type="submit" value="Submit">
class="text-blue-600"></class="text-red-600">formclass="text-blue-600">>

Result:

<input>

Forms

An input field (many types available)

Code Example:

class="text-blue-600"><class="text-red-600">inputclass="text-blue-600"> type="text" placeholder="Enter text">
class="text-blue-600"><class="text-red-600">inputclass="text-blue-600"> type="checkbox"> Check me
class="text-blue-600"><class="text-red-600">inputclass="text-blue-600"> type="radio" name="option"> Option

Result:

Text input:
Checkbox:
Radio buttons:

<button>

Forms

A clickable button

Code Example:

class="text-blue-600"><class="text-red-600">buttonclass="text-blue-600"> type="button">Click Meclass="text-blue-600"></class="text-red-600">buttonclass="text-blue-600">>

Result:

<select>

Forms

A dropdown selection menu

Code Example:

class="text-blue-600"><class="text-red-600">selectclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">optionclass="text-blue-600"> value="option1">Option 1class="text-blue-600"></class="text-red-600">optionclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">optionclass="text-blue-600"> value="option2">Option 2class="text-blue-600"></class="text-red-600">optionclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">optionclass="text-blue-600"> value="option3">Option 3class="text-blue-600"></class="text-red-600">optionclass="text-blue-600">>
class="text-blue-600"></class="text-red-600">selectclass="text-blue-600">>

Result:

<table>

Tables

A table for displaying data in rows and columns

Code Example:

class="text-blue-600"><class="text-red-600">tableclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">theadclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">trclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">thclass="text-blue-600">>Nameclass="text-blue-600"></class="text-red-600">thclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">thclass="text-blue-600">>Ageclass="text-blue-600"></class="text-red-600">thclass="text-blue-600">>
class="text-blue-600"></class="text-red-600">trclass="text-blue-600">>
class="text-blue-600"></class="text-red-600">theadclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">tbodyclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">trclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">tdclass="text-blue-600">>Johnclass="text-blue-600"></class="text-red-600">tdclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">tdclass="text-blue-600">>25class="text-blue-600"></class="text-red-600">tdclass="text-blue-600">>
class="text-blue-600"></class="text-red-600">trclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">trclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">tdclass="text-blue-600">>Janeclass="text-blue-600"></class="text-red-600">tdclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">tdclass="text-blue-600">>30class="text-blue-600"></class="text-red-600">tdclass="text-blue-600">>
class="text-blue-600"></class="text-red-600">trclass="text-blue-600">>
class="text-blue-600"></class="text-red-600">tbodyclass="text-blue-600">>
class="text-blue-600"></class="text-red-600">tableclass="text-blue-600">>

Result:

NameAge
John25
Jane30

<header>

Semantic Elements

The header section of a page or section

Code Example:

class="text-blue-600"><class="text-red-600">headerclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">h1class="text-blue-600">>Website Titleclass="text-blue-600"></class="text-red-600">h1class="text-blue-600">>
class="text-blue-600"><class="text-red-600">navclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">ulclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">liclass="text-blue-600">>class="text-blue-600"><class="text-red-600">aclass="text-blue-600"> href="#">Homeclass="text-blue-600"></class="text-red-600">aclass="text-blue-600">>class="text-blue-600"></class="text-red-600">liclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">liclass="text-blue-600">>class="text-blue-600"><class="text-red-600">aclass="text-blue-600"> href="#">Aboutclass="text-blue-600"></class="text-red-600">aclass="text-blue-600">>class="text-blue-600"></class="text-red-600">liclass="text-blue-600">>
class="text-blue-600"></class="text-red-600">ulclass="text-blue-600">>
class="text-blue-600"></class="text-red-600">navclass="text-blue-600">>
class="text-blue-600"></class="text-red-600">headerclass="text-blue-600">>

Result:

Website Title
HomeAboutContact

<nav>

Semantic Elements

A navigation menu

Code Example:

class="text-blue-600"><class="text-red-600">navclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">ulclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">liclass="text-blue-600">>class="text-blue-600"><class="text-red-600">aclass="text-blue-600"> href="#">Homeclass="text-blue-600"></class="text-red-600">aclass="text-blue-600">>class="text-blue-600"></class="text-red-600">liclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">liclass="text-blue-600">>class="text-blue-600"><class="text-red-600">aclass="text-blue-600"> href="#">Aboutclass="text-blue-600"></class="text-red-600">aclass="text-blue-600">>class="text-blue-600"></class="text-red-600">liclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">liclass="text-blue-600">>class="text-blue-600"><class="text-red-600">aclass="text-blue-600"> href="#">Contactclass="text-blue-600"></class="text-red-600">aclass="text-blue-600">>class="text-blue-600"></class="text-red-600">liclass="text-blue-600">>
class="text-blue-600"></class="text-red-600">ulclass="text-blue-600">>
class="text-blue-600"></class="text-red-600">navclass="text-blue-600">>

<main>

Semantic Elements

The main content area of a page

Code Example:

class="text-blue-600"><class="text-red-600">mainclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">h2class="text-blue-600">>Main Contentclass="text-blue-600"></class="text-red-600">h2class="text-blue-600">>
class="text-blue-600"><class="text-red-600">pclass="text-blue-600">>This is the main content of the page.class="text-blue-600"></class="text-red-600">pclass="text-blue-600">>
class="text-blue-600"></class="text-red-600">mainclass="text-blue-600">>

Result:

Main Content

This is the main content of the page.

<footer>

Semantic Elements

The footer section of a page or section

Code Example:

class="text-blue-600"><class="text-red-600">footerclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">pclass="text-blue-600">>© 2023 My Websiteclass="text-blue-600"></class="text-red-600">pclass="text-blue-600">>
class="text-blue-600"><class="text-red-600">pclass="text-blue-600">>Contact: example@example.comclass="text-blue-600"></class="text-red-600">pclass="text-blue-600">>
class="text-blue-600"></class="text-red-600">footerclass="text-blue-600">>

Result:

© 2023 My Website

Contact: example@example.com