Complete HTML Reference — Tags, Attributes, Events & Best Practices

Hello my friend! Welcome to the Complete HTML Reference on dev.rean.me! This page is your one-stop reference for every important HTML5 tag, attribute, event, input type, meta tag, and character entity — organized by category so you can find what you need instantly!

Bookmark this page and use it every time you write HTML! Let's go!

1. 📄 Document Structure Tags

Every HTML document starts with these foundational structural tags.

Tag	Description
`<!DOCTYPE html>`	Declares the document as HTML5 — must be the very first line
`<html>`	Root element of the HTML page. Add `lang="en"` for accessibility
`<head>`	Container for meta information (not visible on the page)
`<title>`	Sets the browser tab title and SEO title
`<body>`	Contains all visible page content
`<meta>`	Defines page metadata (charset, viewport, description, OG tags)
`<link>`	Links external resources like CSS stylesheets and favicons
`<style>`	Embeds internal CSS styles directly in the page
`<script>`	Embeds or links external JavaScript
`<base>`	Sets a base URL for all relative links on the page
`<noscript>`	Fallback content shown when JavaScript is disabled

💡 Tip: Always add <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1.0"> inside every <head> — these two lines make your page Unicode-safe and mobile responsive!

2. 🗂️ Semantic Layout / Section Tags

Semantic tags give meaning to page structure for both browsers and search engines.

Tag	Description
`<header>`	Top section of a page or section — logo, site title, nav
`<nav>`	Navigation menu — a group of navigation links
`<main>`	The primary/unique content of the page (only one per page)
`<article>`	Self-contained content — blog post, news article, card
`<section>`	Thematic grouping of content with a heading
`<aside>`	Side content — sidebar, related articles, ads
`<footer>`	Bottom section — copyright, contact links, legal
`<address>`	Contact information for the nearest `<article>` or `<body>`
`<details>`	Native collapsible disclosure widget (accordion)
`<summary>`	Visible heading/label for a `<details>` element
`<dialog>`	Native modal dialog popup window

💡 Tip: Avoid Div Soup! Use <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> instead of generic <div> everywhere. This helps Google understand your page and improves accessibility!

📖 Related: HTML Tips and Tricks with Examples

3. 📝 Text Content Tags

Tags for headings, paragraphs, quotes, code, and inline text formatting.

Tag	Description
`<h1>` to `<h6>`	Headings — `<h1>` is the most important (only one per page!)
`<p>`	Paragraph of text
`<br>`	Line break (self-closing)
`<hr>`	Horizontal divider line
`<pre>`	Preformatted text that preserves spaces and line breaks
`<blockquote>`	Long quotation block — use `cite` attribute for source URL
`<q>`	Inline quotation — browser adds quotation marks automatically
`<cite>`	Title of a creative work (book, film, article)
`<abbr>`	Abbreviation or acronym — use `title` attribute for full text
`<address>`	Physical or digital contact information
`<time>`	Machine-readable date/time — use `datetime` attribute
`<code>`	Inline code snippet
`<pre><code>`	Multi-line code block
`<kbd>`	Keyboard input — displays like a keyboard key
`<samp>`	Sample output from a program or script
`<var>`	Variable in math or programming context
`<mark>`	Highlighted/marked text (yellow background by default)
`<del>`	Deleted (strikethrough) text
`<ins>`	Inserted (underlined) text
`<sub>`	Subscript text — H₂O
`<sup>`	Superscript text — E=mc²
`<small>`	Fine print, copyright, legal text
`<strong>`	Important text — renders bold, carries semantic meaning
`<b>`	Bold text — visual only, no semantic meaning
`<em>`	Emphasized text — renders italic, carries semantic stress
`<i>`	Italic text — visual only, also used for icons
`<u>`	Underlined text
`<s>`	Strikethrough text — no longer accurate
`<wbr>`	Word break opportunity — hint where a long word can break
`<bdo>`	Bi-directional text override — change text direction
`<ruby>`	Ruby annotation for East Asian typography

💡 Tip: Use <strong> for important text (screen readers emphasize it) and <em> for stressed text — do not use <b> and <i> for semantic meaning!

Tag / Attribute	Description
`<a href="...">`	Hyperlink to another page, section, email, or phone
`target="_blank"`	Opens link in a new browser tab
`target="_self"`	Opens link in the same tab (default)
`rel="noopener noreferrer"`	Security attribute — always use with `target="_blank"`
`href="#id"`	Anchor link — jumps to an element with that `id`
`href="mailto:..."`	Opens the default email client
`href="tel:..."`	Initiates a phone call on mobile devices
`download="filename"`	Forces the browser to download the linked file
`<nav>`	Semantic wrapper for navigation link groups

💡 Tip: Whenever you use target="_blank", always add rel="noopener noreferrer" to prevent tab-nabbing — a security vulnerability where the opened page can control the opener window!

📖 Related: HTML Tips and Tricks with Examples

5. 🖼️ Image & Media Tags

Tag	Description
`<img>`	Embeds an image — always add `alt`, `width`, and `height`
`<picture>`	Responsive image container for art-directed images
`<source>`	Alternative image/media source inside `<picture>`, `<video>`, `<audio>`
`<figure>`	Self-contained media content with optional caption
`<figcaption>`	Caption for a `<figure>` element
`<video>`	Embeds a video player
`<audio>`	Embeds an audio player
`<track>`	Text track for subtitles, captions inside `<video>`
`<embed>`	Embeds external plugin content
`<object>`	Embeds external resources (PDF, Flash, etc.)
`<canvas>`	2D/3D drawing surface controlled by JavaScript
`<svg>`	Scalable Vector Graphics — inline XML-based vector image
`<iframe>`	Embeds another HTML page (YouTube, Google Maps, etc.)
`<map>`	Image map container with clickable hotspot areas
`<area>`	Defines clickable area inside an image map

Important <img> Attributes:

Attribute	Description
`src`	Path or URL of the image file
`alt`	Alternative text for accessibility and SEO
`width` / `height`	Reserve layout space to prevent Cumulative Layout Shift
`loading="lazy"`	Defer loading until image is near the viewport
`loading="eager"`	Load image immediately (use for above-the-fold images)
`decoding="async"`	Decode image off the main thread for better performance
`fetchpriority="high"`	Mark LCP (hero) image as high priority
`srcset`	Provide multiple image sources for different screen densities
`sizes`	Tell browser which image size to use at different viewports

💡 Tip: Always specify width and height on <img> tags! Without them, the browser does not know the image size before it loads, causing content to jump around — hurting your Core Web Vitals (CLS) score!

Tag	Description
`<ul>`	Unordered (bullet) list
`<ol>`	Ordered (numbered) list
`<li>`	List item — child of `<ul>` or `<ol>`
`<dl>`	Description / definition list
`<dt>`	Term or name in a `<dl>` list
`<dd>`	Description or definition of the `<dt>` term

<ol> Attributes:

Attribute	Description
`type="1"`	Numbers (default)
`type="A"`	Uppercase letters
`type="a"`	Lowercase letters
`type="I"`	Uppercase Roman numerals
`type="i"`	Lowercase Roman numerals
`start="5"`	Start numbering from a custom number
`reversed`	Counts down instead of up

7. 📊 Table Tags

Tag	Description
`<table>`	Container for the entire table
`<caption>`	Visible title above the table (good for accessibility)
`<thead>`	Groups header rows — semantic section
`<tbody>`	Groups body data rows — semantic section
`<tfoot>`	Groups footer rows — semantic section
`<tr>`	Table row
`<th>`	Table header cell — bold and centered by default
`<td>`	Table data cell
`<colgroup>`	Groups columns for shared styling
`<col>`	Defines properties for one or more columns

Table Cell Attributes:

Attribute	Description
`colspan="2"`	Span across 2 columns
`rowspan="3"`	Span down across 3 rows
`scope="col"`	Indicates a `<th>` is a column header (accessibility)
`scope="row"`	Indicates a `<th>` is a row header (accessibility)

📖 Related: How to Use HTML Table Tag

8. 📝 Form Tags & Attributes

Tag	Description
`<form>`	Container for all form controls
`<label>`	Accessible label for form controls — always use with `for`
`<input>`	Interactive form control — many types available (see below)
`<textarea>`	Multi-line text input area
`<select>`	Dropdown selection list
`<option>`	Individual item inside `<select>` or `<datalist>`
`<optgroup>`	Groups related `<option>` items with a label
`<datalist>`	Auto-complete suggestion list linked to an `<input>`
`<button>`	Clickable button — always specify `type`
`<fieldset>`	Groups related form fields with a visual border
`<legend>`	Title/caption for a `<fieldset>` group
`<output>`	Displays result of a calculation or script
`<progress>`	Progress bar showing task completion
`<meter>`	Scalar gauge — disk usage, score, temperature

<form> Attributes:

Attribute	Description
`action="/url"`	URL where form data is submitted
`method="GET"`	Appends data to URL query string
`method="POST"`	Sends data in the request body (more secure)
`enctype="multipart/form-data"`	Required for file upload forms
`novalidate`	Disables browser built-in validation
`autocomplete="off"`	Turns off browser autofill for the whole form

<button> Types:

Type	Description
`type="submit"`	Submits the form (default inside a `<form>`)
`type="reset"`	Resets all form fields to initial values
`type="button"`	No default behavior — triggers JavaScript

💡 Tip: Always pair <label for="input-id"> with <input id="input-id">. When a user clicks the label text, the input gets focus automatically — this is especially important for checkboxes and radio buttons on mobile!

9. ✏️ Input Types Reference

The <input> tag supports over 20 different type values!

Type	Description
`text`	Single-line text input (default)
`password`	Masked password input
`email`	Email address — validates `@` format
`number`	Numeric input with min/max/step
`tel`	Telephone number input
`url`	URL input — validates http/https format
`search`	Search field — sometimes shows clear button
`date`	Date picker — `YYYY-MM-DD` format
`time`	Time picker — `HH:MM` format
`datetime-local`	Date and time picker (no timezone)
`month`	Month and year picker
`week`	Week number picker
`color`	Native color picker
`range`	Slider control for numeric range
`file`	File upload picker — use with `enctype="multipart/form-data"`
`checkbox`	Boolean checkbox — `checked` state
`radio`	Radio button — single choice from a group
`submit`	Submit button
`reset`	Reset button
`button`	Generic button with no default behavior
`image`	Image as a submit button
`hidden`	Hidden field not shown to user

Common <input> Attributes:

Attribute	Description
`id`	Unique ID — connect to `<label for="...">`
`name`	Key name sent with form data
`value`	Default or preset value
`placeholder`	Hint text shown when field is empty
`required`	Makes field mandatory before submitting
`disabled`	Disables the field completely
`readonly`	Field is visible but not editable
`autofocus`	Focus this field when page loads
`autocomplete`	Control browser autofill behavior
`min` / `max`	Minimum and maximum values (number, date, range)
`step`	Increment step for number and range
`minlength` / `maxlength`	Min/Max character length for text
`pattern`	Regex validation pattern
`multiple`	Allow selecting multiple files or email addresses
`accept`	Restrict accepted file types (file input)
`checked`	Pre-check a checkbox or radio button
`size`	Visible width in characters

10. 🌐 Global Attributes

These attributes can be applied to any HTML element.

Attribute	Description
`id`	Unique identifier — must be unique on the page
`class`	CSS class name(s) for styling
`style`	Inline CSS styles
`title`	Tooltip text shown on hover
`lang`	Language of the element's content
`dir`	Text direction: `ltr` (left-to-right) or `rtl`
`tabindex`	Controls keyboard focus order (`0` = focusable, `-1` = no tab)
`hidden`	Hides element from display and screen readers
`data-*`	Custom data attribute — accessible via JavaScript
`draggable`	Makes an element draggable — `true` or `false`
`contenteditable`	Makes an element's content directly editable
`spellcheck`	Enables/disables spell checking
`translate`	Whether content should be translated — `yes` or `no`
`accesskey`	Keyboard shortcut key to focus the element

11. ♿ ARIA Accessibility Attributes

ARIA (Accessible Rich Internet Applications) attributes make web content accessible to screen readers.

Attribute	Description
`aria-label`	Provides an accessible name not visible on screen
`aria-labelledby`	Points to an element whose text is the accessible name
`aria-describedby`	Points to an element that describes this element
`aria-hidden="true"`	Hides the element from screen readers (icon decoration)
`aria-live`	Announces dynamic content changes (`polite`, `assertive`)
`aria-expanded`	Indicates if a collapsible element is open or closed
`aria-selected`	Indicates selected state in a list or tab
`aria-checked`	State of a custom checkbox or radio
`aria-disabled`	Marks element as disabled for screen readers
`aria-required`	Marks form field as required for screen readers
`aria-invalid`	Marks field as having an invalid value
`aria-current`	Marks the current item — `page`, `step`, `location`
`aria-role`	Defines the ARIA role of an element
`role="button"`	Non-button elements acting as buttons
`role="alert"`	Announces important status messages
`role="navigation"`	Marks navigation landmark
`role="main"`	Marks the main content landmark
`role="dialog"`	Marks a modal dialog

12. ⚡ HTML Events Reference

Attach JavaScript behavior directly to HTML elements using event attributes.

🖱️ Mouse Events

Event	Triggers When...
`onclick`	User clicks the element
`ondblclick`	User double-clicks the element
`onmouseenter`	Mouse pointer enters the element area
`onmouseleave`	Mouse pointer leaves the element area
`onmousemove`	Mouse pointer moves over the element
`onmousedown`	Mouse button is pressed
`onmouseup`	Mouse button is released
`oncontextmenu`	Right-click context menu is triggered
`onwheel`	Mouse wheel is scrolled

⌨️ Keyboard Events

Event	Triggers When...
`onkeydown`	A key is pressed down
`onkeyup`	A key is released
`onkeypress`	A key is pressed and held (deprecated — use `onkeydown`)

📝 Form Events

Event	Triggers When...
`onchange`	Input value changes and loses focus
`oninput`	Input value changes in real time
`onfocus`	Element receives keyboard/mouse focus
`onblur`	Element loses focus
`onsubmit`	Form is submitted
`onreset`	Form is reset
`onselect`	Text inside an input is selected
`oninvalid`	Input fails built-in validation

📄 Window & Document Events

Event	Triggers When...
`onload`	Page (or element) has fully loaded
`onunload`	Page is being closed or navigated away
`onresize`	Browser window is resized
`onscroll`	Page or element is scrolled
`onhashchange`	URL hash (`#`) changes

📱 Touch Events

Event	Triggers When...
`ontouchstart`	Touch begins on the element
`ontouchend`	Touch ends on the element
`ontouchmove`	Finger moves while touching
`ontouchcancel`	Touch is interrupted

🎬 Media Events

Event	Triggers When...
`onplay`	Media starts playing
`onpause`	Media is paused
`onended`	Media playback reaches the end
`onvolumechange`	Volume is changed
`ontimeupdate`	Playback position updates
`oncanplay`	Browser can start playing media

13. 🔖 Meta Tags Reference

Meta tags go inside <head> and control SEO, social sharing, and browser behavior.

SEO & Page Info

<!-- Character encoding — always first! -->
<meta charset="UTF-8" />

<!-- Mobile responsive viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- Page description for search engines (keep under 160 chars) -->
<meta name="description" content="Your page description here." />

<!-- Page keywords (less important now but still used) -->
<meta name="keywords" content="html, css, javascript" />

<!-- Author name -->
<meta name="author" content="Your Name" />

<!-- Prevent search engine indexing -->
<meta name="robots" content="noindex, nofollow" />

<!-- Auto refresh page every 30 seconds -->
<meta http-equiv="refresh" content="30" />

<!-- Facebook / LinkedIn / WhatsApp preview -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your page description." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Site Name" />

Twitter Card

<!-- Twitter preview card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="Your page description." />
<meta name="twitter:image" content="https://example.com/twitter-image.jpg" />
<meta name="twitter:site" content="@yourhandle" />

14. 🔣 HTML Character Entities

Use character entities to display special characters that might conflict with HTML code.

Entity	Character	Description
`&`	&	Ampersand
`<`	<	Less than
`>`	>	Greater than
`"`	"	Double quote
`'`	'	Single quote / apostrophe
` `	(space)	Non-breaking space
`©`	©	Copyright
`®`	®	Registered trademark
`™`	™	Trademark
`€`	€	Euro currency
`£`	£	British pound
`¥`	¥	Japanese yen
`¢`	¢	Cent
`°`	°	Degree symbol
`±`	±	Plus or minus
`×`	×	Multiplication
`÷`	÷	Division
`½`	½	One half
`¼`	¼	One quarter
`—`	—	Em dash
`–`	–	En dash
`«`	«	Left angle quote
`»`	»	Right angle quote
`…`	…	Ellipsis
`&hearts;`	♥	Heart
`&spades;`	♠	Spade
`&clubs;`	♣	Club
`&diams;`	♦	Diamond
`★`	★	Solid star
`☆`	☆	Outline star

15. ✅ HTML5 Best Practices Checklist

Here is a quick checklist every HTML developer should follow:

✅ Start every file with <!DOCTYPE html> declaration
✅ Set <html lang="en"> and <meta charset="UTF-8">
✅ Add responsive viewport meta tag inside every <head>
✅ Use only one <h1> per page for the main page title
✅ Use semantic tags (<header>, <nav>, <main>, <article>, <section>, <footer>)
✅ Link every <input> with <label for="id"> for accessibility
✅ Always add descriptive alt text to every <img> tag
✅ Specify width and height on images to prevent layout shift
✅ Add loading="lazy" on below-the-fold images for performance
✅ Add rel="noopener noreferrer" to all target="_blank" links
✅ Use aria-label on icon-only buttons for screen reader support
✅ Add <meta name="description"> for SEO on every page
✅ Add Open Graph meta tags for social sharing previews
✅ Validate your HTML at validator.w3.org

📖 Related: HTML Tips and Tricks with Examples

Hope this HTML reference guide helps you write better, cleaner, and more accessible HTML every day! Bookmark this page and share it with your developer friends! 🌐✨

Complete HTML Reference — Tags, Attributes, Events & Best Practices

HTML & Web Development Complete Tutorial Series & Course List

1. 📄 Document Structure Tags

2. 🗂️ Semantic Layout / Section Tags

3. 📝 Text Content Tags

4. 🔗 Link & Navigation Tags

5. 🖼️ Image & Media Tags

7. 📊 Table Tags

8. 📝 Form Tags & Attributes

9. ✏️ Input Types Reference

10. 🌐 Global Attributes

11. ♿ ARIA Accessibility Attributes

12. ⚡ HTML Events Reference

🖱️ Mouse Events

⌨️ Keyboard Events

📝 Form Events

📄 Window & Document Events

📱 Touch Events

🎬 Media Events

13. 🔖 Meta Tags Reference

SEO & Page Info

Twitter Card

14. 🔣 HTML Character Entities

15. ✅ HTML5 Best Practices Checklist

HTML & Web Development Complete Tutorial Series & Course List

HTML & Web Development Complete Tutorial Series & Course List

1. 📄 Document Structure Tags

2. 🗂️ Semantic Layout / Section Tags

3. 📝 Text Content Tags

4. 🔗 Link & Navigation Tags

5. 🖼️ Image & Media Tags

6. 📋 List Tags

7. 📊 Table Tags

8. 📝 Form Tags & Attributes

9. ✏️ Input Types Reference

10. 🌐 Global Attributes

11. ♿ ARIA Accessibility Attributes

12. ⚡ HTML Events Reference

🖱️ Mouse Events

⌨️ Keyboard Events

📝 Form Events

📄 Window & Document Events

📱 Touch Events

🎬 Media Events

13. 🔖 Meta Tags Reference

SEO & Page Info

Open Graph (Social Sharing)

Twitter Card

14. 🔣 HTML Character Entities

15. ✅ HTML5 Best Practices Checklist

🔗 Related HTML Tutorials & Resources

HTML & Web Development Complete Tutorial Series & Course List