Article Title
This is a blog post inside <article>.
This is the <main> content of the page.
Complete HTML Elements Reference Guide
Document Structure & Metadata Elements
These elements form the basic structure of an HTML document and provide metadata about the page.
<!DOCTYPE>
Description: Defines HTML5 document type so browsers know how to render the page.
Example: <!DOCTYPE html> is written at the top of every HTML document.
<html>
Description: Root element that contains the whole HTML page.
Example: This entire document is wrapped inside <html>.
<head>
Description: Holds metadata, links, title, and scripts for the page.
Example: This demo's CSS and JavaScript are inside the <head>.
<title>
Description: Sets the title of the page (shown in browser tab).
Example: Current page title is "HTML Elements Demo".
<meta>
Description: Provides metadata like character encoding and viewport.
Example: <meta charset="UTF-8">
<base>
Description: Defines a base URL for all relative links.
Example: If you write <a href="page.html">, it will point to https://example.com/page.html.
<link>
Description: Links external resources like CSS or icons.
Example: <link rel="stylesheet" href="style.css">
<style>
Description: Lets you write internal CSS rules.
Example: The white boxes on this page are styled using <style>.
<script>
Description: Used to include JavaScript code or external JS files.
Example: Open console to see message from <script>.
<noscript>
Description: Provides fallback content if JavaScript is disabled.
Example: If JS is off, you'll see a warning message.
Sectioning & Content Elements
These elements help organize content into logical sections and provide structure to the document.
My Website Header
This is inside a <header> element.
News Section
Latest updates are shown here.
Text & Inline Elements
These elements are used for formatting and structuring text content within HTML documents.
This is a paragraph using the <p> tag.
This word is red using <span>.
This text has bold, italic, emphasized, and strong text.
This text is highlighted.
Abbreviation: WHO
Normal text smaller note.
Mathematical expressions: x2 + y2 and H2O
Deleted text and inserted text
Quote: This is a short quotation
This is a famous quote written inside <blockquote>.
Citation: Hamlet by Shakespeare
Definition: HTML is HyperText Markup Language.
Keyboard input: Press Ctrl + C to copy.
Sample output: File not found
Variable: x + y = 10
Meeting scheduled for .
Code example: <html> element
This is preformatted text
with preserved spacing
and line breaks
Line breaks:
This text is on
multiple lines
A longwordthatmight
Thematic break above
Lists & Table Elements
These elements are used for creating lists and tabular data structures.
Unordered List:
- Apple
- Banana
- Mango
Ordered List:
- Wake up
- Brush teeth
- Go to work
Description List:
- HTML
- HyperText Markup Language
- CSS
- Cascading Style Sheets
Table:
| Name | Marks |
|---|---|
| Sara | 95 |
| Ali | 85 |
| End of Table | |
Forms & Input Elements
These elements are used to create interactive forms for collecting user input.
Media Elements
These elements are used for embedding multimedia content such as images, audio, and video.
Image:
Audio (placeholder - would need actual audio file):
Audio element would appear here with controls
Video (placeholder - would need actual video file):
Video element would appear here with controls
Figure with Caption:
Inline Frame:
Canvas:
SVG:
Embed (placeholder - would need actual file):
Embedded content would appear here
Object (placeholder - would need actual file):
Object content would appear here
Track (placeholder - would need actual video file):
Track element for subtitles would appear here
Interactive & Semantic Elements
These elements provide additional meaning to content and create interactive components.
Click to expand this details element
This content is hidden by default and revealed when the summary is clicked.
Meeting scheduled for .
Contact information:
Written by John DoeVisit us at:
Example.com
Box 564, Disneyland
Citation: The Great Gatsby by F. Scott Fitzgerald
Code example: console.log("Hello");
Line 1
Indented Line 2
Line 3
Keyboard input: Press Ctrl + C to copy.
Sample output: Error: File not found
Variable: x + y = 10
Terms and conditions apply
Subscript and superscript: H2O and x2
My favorite color is blue green.
He said, Hello there!
"The journey of a thousand miles begins with a single step."
This text is right-to-left
Obsolete / Deprecated Elements
These elements are no longer recommended for use in modern HTML and have been replaced by CSS or other elements.
Warning: These elements are deprecated and should not be used in new projects.
This is small text (Still valid)
Underlined text (Deprecated) WWW (Deprecated) This is teletype text (Deprecated)
Note: Most deprecated elements have been replaced by CSS for styling purposes.
HTML Compiler - Practice Your HTML Skills
Use this HTML compiler to practice writing HTML code. Type your HTML code in the editor on the left and see the live preview on the right.
HTML Code Editor
Live Preview