HTML REFERENCE

The Complete
HTML Source Guide

A comprehensive reference for HTML tags, attributes, structure, and best practices — built for developers at every level.

Browse Tags Live Playground
100+HTML Tags
60+Global Attributes
5Content Categories
HTML5Standard
01 — Foundation

HTML Document Structure

<!-- Document Type Declaration -->
<!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>
<header> <!-- Page header / nav --> </header>
<main>
<section> ... </section>
<article> ... </article>
</main>
<footer> <!-- Page footer --> </footer>
<script src="app.js"></script>
</body>
</html>
02 — Reference

HTML Tags by Category

<html>STRUCTURAL

Root element of an HTML page. All other elements are descendants of this element.

<head>STRUCTURAL

Contains machine-readable metadata about the document, like title, styles, and scripts.

<body>STRUCTURAL

Represents the content of an HTML document. Only one body element per document.

<header>STRUCTURAL

Represents introductory content or navigational links, typically placed at the top.

<nav>STRUCTURAL

Defines a set of navigation links for the current document or to other documents.

<main>STRUCTURAL

Specifies the main content of a document — unique and central to the document.

<section>STRUCTURAL

Defines a section in a document. Used to group related content thematically.

<article>STRUCTURAL

Represents a self-contained composition such as a blog post, news story, or comment.

<aside>STRUCTURAL

Defines content that is tangentially related to the main content, like a sidebar.

<footer>STRUCTURAL

Defines a footer for a document or section, often containing copyright and links.

<div>STRUCTURAL

Generic container element for grouping content. Has no semantic meaning on its own.

<span>STRUCTURAL

Inline generic container for phrasing content. Used to apply styles or hooks to text.

<h1>–<h6>TEXT

Six levels of section headings, h1 being most important and h6 least important.

<p>TEXT

Defines a paragraph of text. Browsers automatically add margin above and below.

<a>TEXT

Anchor element creates hyperlinks to pages, files, locations, or URL schemes.

<strong>TEXT

Indicates text of strong importance. Typically rendered in bold by browsers.

<em>TEXT

Marks text that has emphasis. Typically rendered in italic; changes semantic meaning.

<ul>TEXT

Unordered list of items, typically rendered as a bulleted list.

<ol>TEXT

Ordered list of items, typically rendered as a numbered list.

<li>TEXT

List item element, used inside <ul>, <ol>, or <menu> elements.

<code>TEXT

Displays its contents styled in monospace font, indicating computer code.

<pre>TEXT

Preformatted text. Whitespace inside is displayed exactly as written in the HTML.

<blockquote>TEXT

Indicates that the enclosed text is an extended quotation from another source.

<img>MEDIA

Embeds an image into the document. Requires src and alt attributes.

<video>MEDIA

Embeds a media player for video playback. Supports controls, autoplay, loop attributes.

<audio>MEDIA

Embeds sound content in documents. Supports multiple <source> children for fallbacks.

<canvas>MEDIA

Container for 2D or 3D graphics drawn via JavaScript Canvas or WebGL APIs.

<svg>MEDIA

Container for Scalable Vector Graphics, embedded inline for resolution-independent art.

<iframe>MEDIA

Inline frame that embeds another HTML page or external content inside the current one.

<form>FORM

Represents a document section containing interactive controls for submitting information.

<input>FORM

Creates interactive controls. Behavior varies based on the type attribute value.

<button>FORM

Clickable button that can trigger actions, submit forms, or fire JavaScript events.

<label>FORM

Caption for a form control element. Improves accessibility and click target size.

<select>FORM

Provides a menu of options. Works with <option> and <optgroup> elements.

<textarea>FORM

Multi-line plain text editing control. Rows and cols attributes control default size.

<table>TABLE

Represents a two-dimensional data table with rows and columns.

<thead>TABLE

Defines a set of rows summarizing the columns of the table, used as header.

<tbody>TABLE

Encapsulates the main body of rows in a table, excluding header and footer rows.

<tr>TABLE

Defines a row of cells in a table. Contains <th> or <td> elements.

<th>TABLE

Header cell in a table. Bold and centered by default. Use scope for accessibility.

<td>TABLE

Standard data cell in a table. Supports colspan and rowspan for spanning.

<meta>META

Represents metadata that cannot be expressed with other meta-related elements.

<title>META

Defines the document's title shown in browser tab and used by search engines.

<link>META

Specifies relationships between the current document and an external resource.

<script>META

Embeds or references executable JavaScript code within an HTML document.

<style>META

Contains CSS styling information to be applied to the document.

03 — Attributes

Global HTML Attributes

ATTRIBUTE VALUE DESCRIPTION
id unique-id Unique identifier for an element. Used by CSS selectors and JavaScript.
class class-name One or more CSS class names separated by spaces. Used for styling and scripting.
style css: value; Inline CSS styles applied directly to the element.
href URL Hypertext reference. Specifies the URL of the resource linked to.
src URL Specifies the URL of an embedded resource (image, script, video, etc.).
alt text Alternative text for images. Essential for accessibility and SEO.
type text | submit | ... Specifies the type of <input>, <button>, <script>, or <link> element.
name identifier Name of the element, used for form submission or as a target anchor.
value text | number Default value for form controls like <input>, <option>, and <button>.
placeholder hint text Short hint shown inside an input before the user enters a value.
disabled (boolean) Disables a form element so it cannot be interacted with or submitted.
required (boolean) Specifies that the input field must be filled before form submission.
data-* custom value Custom data attributes for storing extra information on HTML elements.
aria-* role / value Accessibility attributes that provide semantic meaning to assistive technologies.
tabindex number Specifies the element's tab order for keyboard navigation.
04 — Interactive

Live HTML Playground

index.html
05 — Best Practices

HTML Tips & Best Practices

♿

Use Semantic HTML

Use tags like <header>, <nav>, <main>, <article> to provide meaning and improve accessibility for screen readers.

🖼️

Always Use alt on Images

Every <img> tag needs an alt attribute. Use descriptive text for meaningful images; use alt="" for purely decorative ones.

📱

Include Viewport Meta Tag

Add <meta name="viewport" content="width=device-width, initial-scale=1.0"> for responsive mobile-friendly pages.

🏷️

Close All Tags

Always close your tags properly. Use self-closing syntax for void elements like <br/>, <hr/>, and <img/>.

🔗

Meaningful Link Text

Avoid "click here" in anchor text. Use descriptive text that explains where the link goes, improving SEO and accessibility.

⚡

Scripts at Bottom

Place <script> tags just before </body> or use defer/async attributes to avoid blocking page rendering.

🔤

One <h1> Per Page

Use only one <h1> per page for clear document hierarchy. Use <h2>–<h6> for subsections in order.

🔒

Validate Your HTML

Use the W3C HTML Validator to check your markup for errors, deprecated tags, and accessibility issues.

📋

Use Labels for Inputs

Always associate <label> elements with form inputs using the for attribute matching the input's id.