The Ultimate Frontend Foundation

Master HTML with Interactive Examples & Live Preview

Learn the skeleton of the web. Explore essential tags, test your code instantly in our interactive browser playground, and test your skills.

Launch Live Playground Explore Basics

HTML Core Concepts

Everything you need to know about how HTML documents are structured.

1. Document Structure

Every webpage starts with a standard boilerplate including <!DOCTYPE html>, <html>, <head>, and <body>.

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

2. Tags & Attributes

Tags are enclosed in angle brackets like <p>. Attributes provide extra information about elements, such as href in anchor tags or src in images.

<a href="https://google.com" target="_blank">
  Visit Google
</a>

<img src="image.jpg" alt="Example">

3. Semantic HTML

Semantic tags clearly describe their meaning to both the browser and the developer. Examples include <header>, <article>, and <footer>.

<header>
  <nav>Logo & Links</nav>
</header>
<main>
  <article>Main content</article>
</main>
<footer>Copyright 2026</footer>

Interactive HTML Playground

Type or edit HTML code below and see the live rendering update instantly in the preview panel.

code-editor.html

<div style="font-family: Inter, sans-serif; padding: 20px; color: #334155;">
  <h2 style="color: #f97316; margin-bottom: 10px;">Welcome to HTML Playground!</h2>
  <p>You can edit this code and see the result instantly.</p>
  <ul style="margin-top: 10px; padding-left: 20px;">
    <li>Fast & responsive</li>
    <li>Real-time sandbox</li>
  </ul>
  <button style="margin-top: 15px; background: #f97316; color: white; border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-weight: 600;">Click Me</button>
</div>

Live Preview

Active

HTML Tag Reference Guide

Quickly search and look up commonly used HTML tags and their purpose.

<h1> - <h6> Structure

Headings. <h1> is the highest level and <h6> is the lowest.

<h1>Main Title</h1>

<p> Text

Defines a text paragraph with default spacing before and after.

<p>Hello world!</p>

<a> Link

Creates a hyperlink to web pages, files, email addresses, or locations.

<a href="url">Link</a>

<img> Media

Embeds an image into the webpage (self-closing tag).

<img src="img.jpg" alt="desc">

<div> Container

A block-level generic container used for styling and layout structuring.

<div>Content</div>

<ul> / <li> List

Unordered list items bulleted on page. Use <ol> for numbered.

<ul><li>Item</li></ul>

<table> Table

Displays tabular data using rows (<tr>) and cells (<td>).

<table><tr><td>Data</td></tr></table>

<form> Form

Creates an interactive form containing inputs, checkboxes, and buttons.

<form><input></form>

Test Your Knowledge

HTML Quick Challenge

Test what you've learned about HTML structure and tags with this quick interactive question.

Question 1 of 1 Score: 0/0