Back to Home
HTML logoHTML BEGINNER

HTML5 Tags & Elements

Comprehensive guide to modern HTML5 semantic elements, form controls, and media elements with accessibility best practices

8 min read
html5semanticformsmediaaccessibilitycanvassvg
Official Docs

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

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

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

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