HTML Advanced
Accessibility, responsive media, interactive elements, Web Components, graphics, metadata for sharing, i18n and security.
This is an overview — pick a sub-topic below.
Sub-topics (22)
Web Accessibility
Make sites usable by everyone, including people using screen readers, keyboards or magnification.
ARIA
Accessible Rich Internet Applications attributes add roles, states and properties for assistive technology.
Landmarks
Regions screen-reader users can jump between: `header` (banner), `nav`, `main`, `aside` (complementary), `footer` (contentinfo), `form`, `search`.
Keyboard Navigation
Everything usable with the mouse must work with Tab, Shift+Tab, Enter, Space, Escape and arrow keys.
SEO Semantics
Semantic markup helps search engines understand pages: headings, descriptive titles, meaningful link text, `alt` text, canonical URLs.
Responsive Images
Serve the right image size and format for each screen.
srcset and sizes
Offer several image widths and let the browser pick.
The picture Element
Choose between image sources by format or media query (art direction).
Lazy Loading
`loading="lazy"` on images and iframes delays loading until they're near the viewport.
Native Dialogs
The `dialog` element provides accessible modals and popups with `showModal()` and `close()`.
Details and Summary
A built-in disclosure widget — click the summary to show or hide content.
Web Components
Reusable custom elements with encapsulated markup and styles: custom elements, shadow DOM, templates and slots.
Custom Elements
Define your own HTML tags backed by JavaScript classes.
HTML Templates
`template` holds inert markup that scripts clone and insert later.
Slots
`slot` placeholders in a component's shadow DOM where the user's content is inserted.
Canvas
A pixel drawing surface controlled by JavaScript — charts, games, oscilloscope-style plots.
Embedding SVG
Scalable vector graphics inline or via `img` — crisp icons, diagrams and circuit symbols at any size.
Microdata
Attributes (`itemscope`, `itemtype`, `itemprop`) that embed structured data in HTML.
Open Graph Metadata
`meta property="og:*"` tags control how links look when shared on social media and messaging apps.
Structured Data
JSON-LD using schema.org vocabulary describes events, courses, articles and organisations for search engines.
Internationalization
Support many languages and scripts: `lang` attributes, UTF-8, `dir="rtl"`, translated content and locale-aware formatting.
HTML Security Considerations
Prevent XSS and related attacks in markup.
Spotted a mistake or want to add detail? Suggest an improvement — Content Contributors' edits are reviewed by editors before they go live.
Discussion (0)
Sign in or join free to ask questions and discuss this topic.