HTML Element Reference
Browse, search, and learn about every HTML5 element with descriptions, attributes, code examples, and browser support information.
About This Tool
The HTML Element Reference is a comprehensive, searchable guide to every HTML5 element available to web developers. Whether you are building your first web page or looking up the correct attributes for a specific element, this tool provides instant access to detailed information organized by category: Document Metadata, Content Sectioning, Text Content, Inline Text, Image and Multimedia, Embedded Content, Table Content, Forms, Interactive elements, Web Components, and Deprecated elements.
Each element entry includes a description of its purpose, a list of commonly used attributes, whether the element is self-closing, a ready-to-copy code example, and browser support information. You can search by element name, description, or attribute name, and filter by category to quickly find what you need.
Beyond the element reference, this tool includes a Global Attributes
section covering attributes like id, class, data-*,
aria-*, and the newer inert and popover attributes. The
Event Attributes section lists all inline event handlers organized
by type: Mouse, Keyboard, Focus, Form, Document, Drag and Drop,
Touch, and Animation events. A Semantic HTML Guide section explains
best practices for using semantic elements instead of generic divs
to improve accessibility and SEO.
All content is rendered entirely in your browser. No data is sent to any server, making this reference available offline after the initial page load. The reference is designed to complement tools like the HTML Entity Encoder for special character handling and the HTML to Markdown Converter for format conversion.
How to Use
- The Elements tab is selected by default, showing all HTML5 elements organized by category.
- Use the search bar to find elements by tag name, description, or attribute name.
- Click a category badge to filter elements by type (e.g., Forms, Table Content, Inline Text).
- Click any element row to expand its details, including description, attributes, browser support, and a code example.
- Click the Copy button on any example to copy the code snippet to your clipboard.
- Switch to Global Attributes to browse attributes available on every HTML element.
- Switch to Event Attributes to see all inline event handlers grouped by category.
- Switch to Semantic Guide for best practices on using semantic HTML elements for accessibility and SEO.
Popular HTML Element Guides
FAQ
Is my data safe when using this tool?
Yes. This is a purely static reference tool. No data is sent to any server. All content is rendered client-side in your browser using JavaScript. There is no input processing, no logging, and no tracking.
Does this reference cover all HTML5 elements?
Yes. The reference includes all current HTML5 elements across 11 categories including Document Metadata, Content Sectioning, Text Content, Inline Text, Image/Multimedia, Embedded Content, Table Content, Forms, Interactive, Web Components, and Deprecated elements. Over 110 elements are documented.
What is a self-closing element?
A self-closing (or void) element is an HTML element that cannot have child content and does not need a closing tag. Examples include <img>, <br>, <hr>, <input>, <meta>, and <link>. In HTML5, the trailing slash is optional (e.g., <br> and <br/> are both valid).
What are global attributes?
Global attributes are attributes that can be used on any HTML element, regardless of its type. Common examples include id, class, style, title, tabindex, hidden, and data-* attributes. ARIA attributes (aria-*) are also considered global as they can be applied to any element for accessibility.
What is semantic HTML and why does it matter?
Semantic HTML uses elements that clearly describe their meaning (like header, nav, main, article, section, footer) instead of generic divs and spans. It matters because screen readers use semantic elements to navigate pages, search engines use them to understand content structure, and it makes code more readable and maintainable.
Are deprecated elements still supported by browsers?
Most deprecated elements like font, center, and big still render in modern browsers for backward compatibility, but they should not be used in new code. Elements like blink, applet, frame, and frameset have been completely removed from the specification and may not work in modern browsers.
What keyboard shortcuts are available?
Ctrl+Shift+C copies the first visible element example to your clipboard. You can use Tab to navigate between interactive elements and Enter to expand or collapse element details.
Related Tools
HTML Entity Encode/Decode
Encode and decode HTML entities, named characters, and Unicode escape sequences.
CSS Selector Reference
Complete interactive CSS selector reference with specificity calculator, live preview, searchable categories, and browser support for every selector.
HTML to Markdown
Convert HTML to clean Markdown with support for headings, links, images, lists, tables, and code blocks.
Markdown to HTML
Convert Markdown to clean HTML with GFM support, syntax highlighting preview, and one-click copy.
Accessibility Color Checker
Check WCAG 2.1 color contrast ratios for AA and AAA compliance. Test foreground and background color pairs with live preview.
Accessibility Audit Checklist
Interactive WCAG 2.1 compliance checklist organized by level (A, AA, AAA) and category with progress tracking and exportable audit reports.