Website Components — Broad Reference

A structured checklist of common website components grouped by purpose (layout, content, interactive features, e-commerce, etc.). Use the TOC on the right to jump to categories.

Core Layout & Structure

Building blocks that appear on nearly every website.

Header & Navigation — logo, menus, search, CTAs
  • Logo — brand mark or wordmark Best practice: link to homepage, use SVG for crisp scaling.
  • Navigation Menu — primary / secondary Best practice: keyboard accessible, clear hierarchy.
  • Search Bar, Contact / CTA, Language Switcher
Footer — links, legal, contact
  • Quick Links / Sitemap
  • Social Icons, Contact Info, Newsletter Signup
  • Copyright & Legal Links
Sidebar (optional) — related items, ads
  • Quick Navigation, Promotions, Widgets

Content Components

Elements used to present content clearly and attractively.

Hero Section — banner, heading, CTA
  • Large headline, supporting copy, background image or video
  • CTAs and microcopy — guide user action
Text & Media
  • Headings & body text
  • Images & galleries, embedded video
  • Icons, illustrations, tables, charts, downloadable files

Interactive Components

Components that respond to user input and improve engagement.

Forms — contact, login, register
  • Contact Form, Signup / Registration, Login
  • Validation, Captcha / Bot protection, File Uploads
Controls & Widgets
  • Buttons (primary/secondary), sliders, carousels
  • Tabs / accordions (use <details> for no-JS collapsibles), modals
  • Tooltips, hover states, pagination / infinite scroll

Functional Components

Feature-driven parts that provide real user utility.

Authentication & Profiles
  • Login / Signup, User Dashboard, Profile Settings
E‑commerce — product flow & checkout
  • Product listing & pages, cart, checkout, payment gateway, order tracking
Search & Filters
  • Auto-suggest search, faceted filters, sorting

Navigation & User Flow

Patterns
  • Breadcrumbs, mega menu, sticky nav
  • Back-to-top, progress indicators (multi-step forms)

Communication & Engagement

Channels
  • Live chat / chatbot, social feeds, testimonials, forums
  • Newsletter signup, push notifications

Technical & Utility

Helpers
  • Loading spinners, skeletons, error pages (404/500), maintenance page
  • Cookie consent, dark mode toggle, language selector, print styles

Analytics, SEO & Security

Essentials
  • Meta tags, structured data (schema.org), sitemap, robots.txt
  • Analytics integration, SSL/HTTPS, GDPR/privacy compliance, captchas
This reference is a condensed checklist — adapt to your project's needs (simple landing page vs large product site).