Export High-Res PDF
Switch to Light Mode
SkillSnap Official GuideUpdated 7/24/2026
HTML
The structural foundation of the web. Master semantic tags and accessibility attributes to create meaningful, SEO-friendly pages.
Document & Metadata
Trigger Standards Mode<!DOCTYPE html>
Critical for Screen Readers/SEO<html lang="en">
Enable Responsive Design<meta name="viewport">
Prevent Duplicate Content<link rel="canonical">
Semantic Structure
Primary content (Once per page)<main>
Major navigation blocks<nav>
Self-contained content (Blog post)<article>
Thematic grouping with heading<section>
Related content (Sidebar)<aside>
Forms & Input
Mandatory input association<label for="id">
Trigger mobile keyboardstype="email/tel"
Custom client-side validationpattern="Regex"
Group related form elements<fieldset>
Media & Performance
Lazy load off-screen imagesloading="lazy"
Art Direction (Diff images per screen)<picture>
Resolution switchingsrcset
Prioritize LCP assetsfetchpriority="high"
Accessibility (A11y)
Description for imagesalt="..."
Label for icon-only buttonsaria-label
Make element focusabletabindex="0"
If using div as button (Avoid!)role="button"
Interactive Elements
Native modal with backdrop<dialog>
Native accordion widget<details>
Security for target="_blank"rel="noopener"