HTML BEGINNERHTML
HTML5 cheat sheet covering semantic elements, form controls, media tags, accessibility attributes, and modern markup best practices.
10 min read
html5semanticformsmediaaccessibilitycanvassvg
Document Structure & Metadata
Essential HTML document structure and metadata tags
Basic HTML5 Document
Standard HTML5 document structure
css
📄 HTMLhtml
🟢 Essential - Every HTML page needs this structure
💡 DOCTYPE tells browser to use HTML5
📌 lang attribute helps screen readers
⚡ Put CSS in head, JS before </body>
⚠️ Always include viewport meta for mobile
structuredocumentessential
Meta Tags
Important metadata for SEO and browser behavior
html
🟢 Essential - Meta tags control how page appears
💡 Description shows in search results
📌 Open Graph controls social media previews
⚡ Theme color affects mobile browser UI
🔗 Related: schema.org for structured data
metaseometadata
Link Tags
Link external resources and define relationships
html
💡 preload for critical resources needed soon
📌 prefetch for resources needed later
⚡ preconnect speeds up external connections
🟢 Essential for performance optimization
⚠️ Too many preloads can hurt performance
linkresourcesperformance
Semantic HTML5 Elements
Meaningful HTML5 elements for better structure and accessibility
Page Structure Elements
Main structural elements for page layout
css
📄 HTMLhtml
🟢 Essential - Semantic HTML improves SEO and accessibility
💡 main element should be unique per page
📌 header/footer can be used in articles too
⚡ Screen readers use these for navigation
🔗 Related: ARIA roles for enhanced accessibility
semanticstructureaccessibility
Content Sections
Organize content with semantic section elements
css
📄 HTMLhtml
💡 article = standalone content (blog post, news)
📌 section = thematic grouping of content
🟢 Essential - Use figure for images with captions
⚡ details/summary creates native accordion
⚠️ Don't use section just for styling
semanticcontentsections
Text & Content Elements
Headings, paragraphs, and text formatting elements
Headings & Text
Basic text elements and hierarchy
css
📄 HTMLhtml
🟢 Essential - Use semantic text elements
💡 Only one h1 per page for SEO
📌 strong vs b: semantic importance vs visual
⚡ Use code for inline code, pre for blocks
⚠️ Don't skip heading levels (h1→h3)
textheadingsformatting
Lists
Ordered, unordered, and description lists
css
📄 HTMLhtml
🟢 Essential - Lists organize related items
💡 ul for unordered, ol for ordered sequences
📌 dl for term-definition pairs (glossaries)
⚡ Lists can be nested multiple levels
🔗 Related: CSS list-style for custom bullets
listsuloldl
Links & Navigation
Hyperlinks and navigation elements
css
📄 HTMLhtml
🟢 Essential - Links are the foundation of the web
💡 Use rel="noopener" for target="_blank" (security)
📌 aria-current="page" shows current location
⚡ Skip links improve keyboard navigation
⚠️ Make link text descriptive, not "click here"
linksnavigationanchor
Figure, Blockquote & Semantic Text
Semantic wrappers for images, quotes, and meaningful inline text
html
💡 <figure> is not just for images — use it for code blocks, videos, diagrams, anything with a caption
⚡ <time datetime="..."> gives machines a parseable date — great for SEO and accessibility
📌 <dl> description lists are perfect for glossaries, FAQs, and key-value pairs
🟢 <mark> highlights text, <kbd> shows keyboard keys, <code> shows inline code — all semantic
figureblockquotesemantictext
Forms & Input Elements
Form controls and input types for user interaction
Basic Form Elements
Essential form controls and structure
css
📄 HTMLhtml
🟢 Essential - Forms collect user input
💡 Always use labels for accessibility
📌 fieldset groups related inputs
⚠️ required attribute for client-side validation
⚡ novalidate disables browser validation
formsinputessential
HTML5 Input Types
Modern input types with built-in validation
css
📄 HTMLhtml
🟢 Essential - HTML5 inputs provide native validation
💡 date/time inputs have native pickers
📌 Use datalist for autocomplete suggestions
⚡ type="search" adds clear button
⚠️ Browser support varies for some types
html5inputforms
Form Attributes
Important attributes for form controls
html
💡 required, pattern, min/max for validation
📌 autocomplete helps users fill forms faster
⚠️ disabled fields don't submit with form
⚡ form attribute links inputs outside <form>
🟢 Essential for user experience and validation
attributesvalidationforms
Form Grouping & Advanced Controls
Group form fields, add autocomplete suggestions, and show progress indicators
html
💡 <fieldset> + <legend> groups related inputs with a label — essential for form accessibility
⚡ <datalist> gives native autocomplete for free — no JavaScript library needed
📌 A disabled <fieldset> disables ALL controls inside it — great for locked sections
🟢 <progress> shows completion; <meter> shows a measurement with colored thresholds
fieldsetdatalistprogressmeter
Media & Graphics
Images, video, audio, and graphics elements
Images
Responsive and accessible image elements
css
📄 HTMLhtml
🟢 Essential - Always include alt text
💡 loading="lazy" defers offscreen images
📌 picture element for art direction
⚡ srcset for resolution switching
⚠️ Specify width/height to prevent layout shift
imagesmediaresponsive
Video & Audio
Multimedia elements with controls
css
📄 HTMLhtml
🟢 Essential - Provide multiple formats for compatibility
💡 Use poster for video thumbnail
📌 Track elements for subtitles/captions
⚠️ Autoplay requires muted attribute
⚡ preload="metadata" loads video info only
videoaudiomedia
Canvas & SVG
Graphics and drawing elements
css
📄 HTMLhtml
💡 Canvas for dynamic/interactive graphics
📌 SVG for scalable vector graphics
⚡ SVG better for icons, Canvas for games
🟢 Essential for data visualization
🔗 Related: WebGL for 3D graphics
canvassvggraphics
Responsive Images
Serve optimized images for different screen sizes with picture, source, and srcset
html
💡 Use <picture> for art direction (different crops per breakpoint) and srcset for resolution switching
⚡ loading="lazy" defers offscreen images — massive performance win with zero JavaScript
📌 Set width and height attributes to prevent Cumulative Layout Shift (CLS)
🟢 Always provide a title attribute on iframes for accessibility — screen readers use it
picturesrcsetresponsiveiframelazy
Tables
Structured tabular data presentation
Table Structure
Complete table with semantic elements
css
📄 HTMLhtml
🟢 Essential - Use semantic table elements
💡 scope attribute helps screen readers
📌 caption describes table purpose
⚡ colgroup for column styling
⚠️ Only use tables for tabular data, not layout
tablesdatastructure
Interactive & Web Components
Modern interactive HTML elements
Interactive Elements
Dialog, details, and other interactive elements
css
📄 HTMLhtml
🟢 Essential - Native interactive elements
💡 dialog element for modals without JS libraries
📌 details/summary for native accordions
⚡ template for reusable HTML fragments
🔗 Related: Web Components for custom elements
interactivedialogdetails
Dialog (Native Modal)
Native modal and non-modal dialogs without JavaScript libraries
html
💡 <dialog> with showModal() gives you backdrop, focus trapping, and Escape-to-close for free
⚡ form method="dialog" auto-closes the dialog on submit — no JavaScript close handler needed
📌 Style the backdrop with dialog::backdrop — supports background, blur, and animations
🟢 Replaces most uses of modal libraries — native, accessible, and lightweight
dialogmodalinteractive
Template & Web Components
Reusable HTML templates and Web Component building blocks
html
💡 <template> content is parsed but NOT rendered — use cloneNode to stamp out copies
⚡ Templates are perfect for list items, table rows, and any repeated HTML structures
📌 <slot> lets consumers inject content into Web Components — named slots target specific areas
🟢 Web Components (custom elements + shadow DOM + templates) work in all modern browsers
templateslotweb-components
Accessibility
Make HTML accessible with ARIA attributes and semantic best practices
ARIA & Accessible HTML
Essential ARIA attributes and semantic patterns for accessible web pages
html
💡 The best ARIA is no ARIA — use semantic HTML elements first (button, nav, main, label)
⚡ aria-label is for elements with no visible text; aria-labelledby points to existing text
📌 Always use alt="" (empty) for decorative images — missing alt is an accessibility violation
🟢 aria-live="polite" announces changes without interrupting; "assertive" interrupts immediately
ariaaccessibilitya11y
Global HTML Attributes
Common attributes that work on any HTML element
html
💡 data-* attributes store custom data on elements — access via element.dataset in JavaScript
⚡ Use hidden instead of CSS display:none when you want to toggle visibility with JS
📌 tabindex="0" makes any element focusable; tabindex="-1" makes it programmatically focusable only
🟢 The lang attribute helps screen readers pronounce content correctly — set it on <html> at minimum
attributesdataglobal