1. Searchable Master Reference of ALL HTML Tags & Global Attributes
HTML contains over 110 standardized tags organized across 12 functional categories, alongside 13 global attributes supported by every DOM element.
| Global Attribute | Data Type | Description & Use Case |
|---|---|---|
id |
Unique String | Unique identifier for CSS styling, JS DOM selection, and fragment links (`#header`). |
class |
Space-separated list | Assigns element to CSS style classes or utility frameworks. |
data-* |
Custom String | Stores private custom data attributes accessible via `element.dataset`. |
tabindex |
Integer (`0`, `-1`, `1+`) | Controls keyboard focus navigation order and focusability. |
contenteditable |
Boolean (`"true"`, `"false"`) | Enables direct in-browser text editing for rich-text editors. |
Master HTML5 Reference Configuration
Search any tag name or keyword to inspect syntax and specification details:
2. Interactive HTML Tag Periodic Table & Category Matrix
Visualizing HTML tags as a periodic matrix provides an instant overview of element categories and semantic groupings.
HTML Tag Periodic Table & Functional Family Matrix
Click any element tile below to view its syntax and browser support:
3. Web Developer Utility Suite: PX to EM/REM Unit Converter
Modern responsive typography uses relative units (`rem` based on root `16px`, `em` based on parent font size).
| Pixel (PX) Value | Base Font Size | Equivalent REM | Equivalent EM |
|---|---|---|---|
16px |
16px | 1.00 rem | 1.00 em |
24px |
16px | 1.50 rem | 1.50 em |
32px |
16px | 2.00 rem | 2.00 em |
CSS Relative Sizing Boilerplate
Enter pixel values to calculate equivalent `rem` and `em` sizes live:
4. HTTP Methods, Status Codes & Web Standards Reference
Understanding HTTP response status codes and request methods is critical when handling HTML forms, AJAX fetches, and server redirects.
HTTP Request-Response Protocol Flow Lifecycle
Select an HTTP status code to inspect its official definition:
5. Developer Productivity: Emmet Shortcuts & Keyboard Reference
Accelerate your HTML workflow using Emmet abbreviation expansions supported in modern code editors.
Emmet Expansion Quick Reference
Select an Emmet shortcut template to view its instant HTML expansion:
Course Completion Challenge: HTML Mastery Series Final Review
Congratulations on reaching Chapter 25! Review the searchable tag reference, convert responsive CSS units, and launch the Code Playground to complete your final master project.
Launch Code Playground & Try »Chapter 25 Key Takeaways
- Use global attributes (`id`, `class`, `data-*`, `tabindex`) to add standard hooks and keyboard accessibility.
- Leverage relative sizing (`rem`, `em`) for responsive typography calculations.
- Understand HTTP status codes (`200`, `301`, `404`, `500`) for form handling and navigation debugging.
- Boost coding velocity with Emmet abbreviation shortcuts.