HTML Playground

Create and test your HTML code

HTML Editor

Type your HTML code in the editor below and see the results instantly in the preview window!

HTML Code

Preview

Templates

Try out these templates to learn different HTML features:

How HTML Works

HTML (HyperText Markup Language) uses "tags" to structure content on webpages. Each tag serves a specific purpose:

  • <html> - Contains all HTML content
  • <head> - Contains information about the page that isn't visible
  • <title> - Sets the page title that appears in the browser tab
  • <body> - Contains all visible content
  • <h1>, <h2>, etc. - Different levels of headings
  • <p> - Paragraphs
  • <ul> - Unordered list (bullet points)
  • <ol> - Ordered list (numbers)
  • <li> - List item
  • <img> - Image
  • <a> - Link to another page

Most HTML tags have an opening tag <tag> and a closing tag </tag>. The content goes between these tags.

HTML Tag Reference

Tag Description Example
<h1> to <h6> Headings (h1 is largest, h6 is smallest) <h1>Main Title</h1>
<p> Paragraph <p>This is a paragraph.</p>
<a> Link (anchor) <a href="https://example.com">Visit Example</a>
<img> Image <img src="image.jpg" alt="Description">
<ul> Unordered list <ul><li>Item 1</li><li>Item 2</li></ul>
<ol> Ordered list <ol><li>First</li><li>Second</li></ol>
<li> List item <li>An item in a list</li>
<strong> Bold text <strong>Bold text</strong>
<em> Italic text <em>Italic text</em>
<br> Line break Line 1<br>Line 2
<hr> Horizontal rule (line) <hr>
<div> Division (container) <div>Content here</div>
<span> Inline container <span>Text</span>
<table> Table <table><tr><td>Cell</td></tr></table>