Semantic HTML Best Practices
Learn how to write meaningful, accessible HTML that follows web standards
Genesis Design System
Semantic HTML5 Components with Accessibility-First Design and Ontological SCSS
Card Components
Responsive card layouts with semantic HTML and ontological styling
Accessibility First
WCAG AA compliant with proper landmarks, skip links, and screen reader support
Learn more
Genesis Theme
Starting at $99
Complete design system with ontological SCSS engine
150+
CSS Custom Properties
31
Ontological Variants
100%
WCAG AA Compliant
Form Components
Accessible forms with proper labels, ARIA attributes, and validation
Interactive Elements
Accordion, alerts, and other interactive components
Genesis is a semantic design system built on a three-tier ontological architecture that separates content semantics from visual presentation.
Import the ontology system and use semantic mixins like
@include genesis-entity('primary') in your SCSS files.
Success!
Information
Warning
Error
Accessibility Features
This page demonstrates WCAG AA compliance and best practices
Skip Navigation
Skip link at the top allows keyboard users to jump directly to main content
Proper Landmarks
Semantic HTML5 landmarks (header, main, nav, footer) for screen reader navigation
ARIA Labels
All interactive elements have proper ARIA attributes for assistive technology
Keyboard Navigation
All functionality accessible via keyboard with visible focus indicators
Color Contrast
WCAG AA compliant color contrast ratios (4.5:1 for text, 3:1 for UI)
Touch Targets
Interactive elements are ≥ 44x44px on mobile devices (WCAG 2.5.5)
Data Display
Tables, definition lists, and structured data
| Category | Purpose | Variants |
|---|---|---|
| Environment | Layout organization | 5 variants |
| Entity | Visual presence | 6 variants |
| Cognition | Typography intent | 6 variants |
| Synapse | Interaction type | 5 variants |
| State | Temporal condition | 5 variants |
| Atmosphere | Sensory texture | 4 variants |
- Semantic HTML
- HTML that uses meaningful element names to describe content structure
- Ontological Design
- A design system based on semantic categories that describe WHAT content is, not HOW it looks
- WCAG
- Web Content Accessibility Guidelines - standards for making web content accessible to all users
Ready to Build with Genesis?
Start creating accessible, semantic web experiences today