HTML Reference

Complete guide to HTML5 — the standard markup language for creating web pages.

HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure of a page using a series of elements — represented as tags — that tell the browser how to display content.

Every HTML document follows the same basic structure: a <!DOCTYPE html> declaration, an <html> root element, a <head> section for metadata, and a <body> section for visible content.

Basic HTML Document Structure

Every HTML page starts with this skeleton. The lang attribute on <html> is important for accessibility and SEO.

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page Title</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
    <script src="app.js" defer></script>
  </body>
</html>

HTML Chapters

HTML Tags →

Complete list of all HTML5 tags with descriptions, attributes, and code examples.

Key Concepts

Elements and Tags

An HTML element consists of a start tag, content, and an end tag. Void elements (like <br>, <img>, <input>) have no closing tag.

html

<!-- Regular element: start tag + content + end tag -->
<p>This is a paragraph.</p>

<!-- Void element: self-closing, no content -->
<img src="photo.jpg" alt="A photo" />
<br />
<input type="text" />

Attributes

Attributes provide additional information about elements. They appear in the start tag as name="value" pairs.

html

<!-- href and target are attributes of <a> -->
<a href="https://diffcheck.org" target="_blank">Visit DiffCheck</a>

<!-- src, alt, width, height are attributes of <img> -->
<img src="logo.png" alt="Logo" width="200" height="60" />

Semantic HTML

Semantic elements clearly describe their meaning to both the browser and the developer. They improve accessibility and SEO compared to using generic <div> elements everywhere.

html

<!-- Non-semantic (avoid) -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>

<!-- Semantic (prefer) -->
<header>...</header>
<nav>...</nav>
<main>
  <article>...</article>
  <aside>...</aside>
</main>
<footer>...</footer>

Related Tools on DiffCheck

HTML Formatter →HTML Minifier →HTML Diff →HTML Escape →Markdown to HTML →HTML to Markdown →