Anatomy of a Website

This Page Explains Itself

Every element you see — navbar, hero, buttons, cards, forms — is real, functional, and annotated. Toggle Inspect to reveal what's under the hood.

Explore the Anatomy

Structure

The skeleton of every webpage — navigation, layout containers, and footer.

Card

A self-contained content block. This card uses CSS Grid to sit alongside others in a responsive layout.

Content

How information is presented — cards, lists, quotes, code, tables, and media.

Card Component

A self-contained content block. This card uses CSS Grid to sit alongside others in a responsive layout.

List

  • Semantic HTML
  • Accessible markup
  • Clean CSS

Blockquote

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."

— Tim Berners-Lee

Code Block

<nav>
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</nav>

Data Table

TagPurpose
<header>Introductory content
<nav>Navigation links
<article>Self-contained content

Image with Caption

Demo placeholder showing an img tag with descriptive alt text
Fig. 1 — A placeholder image with alt text for screen readers.

Carousel

A content slider with swipe, arrows, and dot navigation.

CSS scroll-snap diagram

Slide 1

CSS scroll-snap with JS-controlled navigation.

Touch and keyboard accessibility diagram

Slide 2

Touch-friendly and keyboard-accessible.

Auto-advance animation diagram

Slide 3

Auto-advances every 5 seconds. Pause on hover.

Icons

Scalable vector graphics embedded directly in HTML.

Check

Heart

Document

Info

Interaction

How users engage with the page — buttons, forms, dialogs, and tooltips.

Buttons & States

Interactive elements with visual feedback.

Hover, active, focus, and disabled states shown.

Form & Validation

Input fields with focus and validation states.

Modal / Dialog

A popup overlay that traps focus.

Tooltip

Hover over the word highlighted to see a tooltip in action.

Uses CSS ::before with attr(data-tip) for content.

Modal Dialog

This modal uses a fixed overlay with opacity and scale transitions. Click outside or press the × to close.

Motion

Animations and transitions that guide attention and provide feedback.

Fade-in on Scroll

Elements animate into view as you scroll down the page.

👋 I fade in when scrolled into view

Hover Transform

Hover over the box below.

Loading Spinner

Indicates content is loading.

Micro-interaction

Click the button for a ripple effect.

Meta

Behind-the-scenes elements that shape the experience.

Favicon

Look at your browser tab — the icon there is this site's favicon.

Favicon at actual size

32×32px SVG favicon

Custom Scrollbar

This page uses a custom-styled scrollbar. Scroll down to see it in action — the thumb is colored and the track matches the page background.

Dark / Light Mode

Click the Theme button in the top bar to switch between dark and light modes.

Uses CSS variables + data-theme attribute.

Footer

The footer appears at the bottom of every page.

Privacy Terms Contact

© 2026 Anatomy of a Website. Built by Bark — TheKennelHQ.