Modern websites must work across many screen sizes:
Desktop Laptop Tablet Mobile
1920px 1440px 768px 390px
↓ ↓ ↓ ↓
┌────────┐ ┌────────┐ ┌───────┐ ┌────┐
│ │ │ │ │ │ │ │
│ │ │ │ │ │ │ │
└────────┘ └────────┘ └───────┘ └────┘Responsive design means the webpage can adapt to the available space and device characteristics instead of assuming one fixed screen size.
HTML plays a major role in this.
CSS performs much of the visual adaptation, but HTML provides the correct structure, responsive resources, semantics, and content relationships.
Responsive web design means creating websites that adapt to different:
For example:
Desktop
┌────────────────────────────────────────────┐
│ Logo Home Products Blog Search │
├────────────────────────────────────────────┤
│ │
│ Main Content │
│ │
├──────────────────────┬─────────────────────┤
│ Article │ Sidebar │
│ │ │
└──────────────────────┴─────────────────────┘Mobile:
┌──────────────────┐
│ Logo ☰ │
├──────────────────┤
│ │
│ Main Content │
│ │
│ │
├──────────────────┤
│ Sidebar content │
└──────────────────┘The content and semantics remain meaningful, while CSS can change the visual arrangement.
This distinction is important.
HTML:
<main>
<article>
<h1>AI Agents</h1>
<p>...</p>
</article>
<aside>
Related articles
</aside>
</main>CSS determines whether these appear:
Desktop:
Article | Asideor:
Mobile:
Article
AsideSo:
HTML → Structure + meaning
CSS → Layout + appearance
JavaScript → BehaviorYou learned this in Chapter 14.
For responsive websites, a typical document contains:
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">Without an appropriate viewport configuration, mobile browsers may use a layout viewport that doesn't correspond to the device's CSS pixel width in the way you expect.
width=device-width Matters#Consider a phone that has a physical display around:
390 CSS pixels wideYou want your layout to respond to approximately that viewport width.
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">Conceptually:
Device
┌─────────────────┐
│ │
│ 390px │
│ viewport │
│ │
└─────────────────┘
↓
HTML/CSS layoutA common professional approach is:
Design for smaller screens first, then progressively enhance the layout for larger screens.
For example:
Mobile
↓
Tablet
↓
Desktop
↓
Large DesktopInstead of:
Desktop
↓
Try to squeeze everything into mobileMobile-first encourages you to prioritize:
Essential content
↓
Essential navigation
↓
Essential actionsrather than trying to fit every desktop element onto a tiny screen.
Example:
Desktop:
┌────────────────────────────────────┐
│ Logo | Home | Blog | Docs | Login │
└────────────────────────────────────┘Mobile may become:
┌──────────────────┐
│ Logo ☰ │
└──────────────────┘with the navigation revealed when needed.
A beginner might write:
<!-- Desktop navigation -->
<nav class="desktop-nav">
...
</nav>
<!-- Mobile navigation -->
<nav class="mobile-nav">
...
</nav>This can result in duplicate content and potentially duplicate interactive controls.
Often, a better architecture is:
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>Then CSS/JavaScript controls how the same navigation behaves across screen sizes.
Images are one of the most important responsive HTML topics.
A basic image:
<img
src="/images/hero.jpg"
alt="AI agent architecture">works, but the browser has only one primary image resource to choose from.
Suppose you have:
hero-small.jpg → 480px
hero-medium.jpg → 800px
hero-large.jpg → 1600pxSending the 1600px image to every mobile user wastes bandwidth.
Responsive images solve this.
srcset#Example:
<img
src="/images/hero-800.jpg"
srcset="
/images/hero-480.jpg 480w,
/images/hero-800.jpg 800w,
/images/hero-1600.jpg 1600w
"
alt="AI agent architecture">The browser gets multiple candidate resources.
The values:
480w
800w
1600wdescribe the image's intrinsic width in pixels.
480w Mean?#It does not mean:
Display this image at 480 CSS pixels.
It means:
This resource is approximately 480 pixels wide.
For example:
hero-480.jpg
↓
480w
hero-800.jpg
↓
800w
hero-1600.jpg
↓
1600wThe browser uses these candidates together with information about the rendered size and device pixel ratio.
src Is Still Included#Example:
<img
src="/images/hero-800.jpg"
srcset="
/images/hero-480.jpg 480w,
/images/hero-800.jpg 800w,
/images/hero-1600.jpg 1600w"
alt="AI agent architecture">src provides a default/fallback resource.
Modern browsers that understand srcset can select an appropriate candidate.
sizes#srcset alone doesn't tell the browser how large the image will actually appear in the layout.
That's where sizes helps.
Example:
<img
src="/images/hero-800.jpg"
srcset="
/images/hero-480.jpg 480w,
/images/hero-800.jpg 800w,
/images/hero-1600.jpg 1600w"
sizes="
(max-width: 600px) 100vw,
(max-width: 1000px) 80vw,
800px"
alt="AI agent architecture">Now the browser has more information.
sizes#This:
sizes="
(max-width: 600px) 100vw,
(max-width: 1000px) 80vw,
800px"roughly means:
If viewport ≤ 600px
image display width ≈ 100vw
Otherwise if viewport ≤ 1000px
image display width ≈ 80vw
Otherwise
image display width ≈ 800pxvw?#vw means:
viewport width
So:
100vwmeans approximately:
100% of viewport widthand:
50vwmeans approximately:
50% of viewport widthExample:
Viewport = 400px
100vw ≈ 400px
50vw ≈ 200pxConceptually:
HTML
│
├── srcset
│ ├── 480w
│ ├── 800w
│ └── 1600w
│
└── sizes
↓
What width will image occupy?
↓
Device pixel ratio
↓
Browser chooses suitable candidateYou don't manually write:
if (mobile) {
load small image
}The browser handles resource selection.
<img
src="/images/product-800.jpg"
srcset="
/images/product-400.jpg 400w,
/images/product-800.jpg 800w,
/images/product-1200.jpg 1200w"
sizes="
(max-width: 600px) 100vw,
(max-width: 900px) 50vw,
400px"
alt="Black wireless headphones"
width="1200"
height="1200">Notice:
srcset → available resources
sizes → expected display width
alt → accessibility
width/height → intrinsic dimensions/aspect ratio informationwidth and height Still Matter#You learned that width and height can help prevent layout shifts.
Example:
<img
src="/images/product.jpg"
alt="Wireless headphones"
width="1200"
height="1200">The browser knows the intrinsic aspect ratio:
1200 : 1200
↓
1 : 1Before the image loads, it can reserve the appropriate space.
This helps reduce unexpected layout movement.
width: 100%#You might see:
img {
width: 100%;
height: auto;
}This makes an image responsive in layout.
But it doesn't necessarily solve the bandwidth problem.
For example:
One 3000px image
↓
Mobile
↓
Browser downloads huge image
↓
CSS shrinks itBetter:
Multiple image candidates
↓
Browser selects suitable resource
↓
Mobile downloads smaller resourceThis is the difference between:
responsive display and responsive image delivery.
<picture>#<picture> provides more advanced image selection.
Example:
<picture>
<source
media="(max-width: 600px)"
srcset="/images/mobile.jpg">
<source
media="(min-width: 601px)"
srcset="/images/desktop.jpg">
<img
src="/images/desktop.jpg"
alt="AI technology illustration">
</picture>The browser chooses an appropriate source.
<picture>?#<picture> is especially useful when you need:
Different crops/compositions for different screen sizes.
For example:
Desktop:
┌──────────────────────────────────────────┐
│ │
│ Person + Laptop + Office │
│ │
└──────────────────────────────────────────┘Mobile:
┌────────────────┐
│ │
│ Person │
│ │
└────────────────┘These aren't merely different resolutions.
They're different compositions.
srcset vs <picture>#| Requirement | Use |
|---|---|
| Same image, different resolutions | srcset |
| Same image, different display sizes | srcset + sizes |
| Different crops | <picture> |
| Different formats | <picture> |
| Art direction | <picture> |
You may encounter:
JPEG
PNG
WebP
AVIF
SVGFor photographic content, modern formats such as WebP and AVIF can provide useful compression.
You can use <picture> to provide format alternatives.
Example:
<picture>
<source
type="image/avif"
srcset="/images/hero.avif">
<source
type="image/webp"
srcset="/images/hero.webp">
<img
src="/images/hero.jpg"
alt="AI technology illustration">
</picture>The browser can choose a supported format.
From Chapter 12:
<video controls>
<source
src="/videos/intro.mp4"
type="video/mp4">
</video>CSS can make it responsive:
video {
width: 100%;
height: auto;
}Or use a wrapper:
<div class="video-wrapper">
<video controls>
<source
src="/videos/intro.mp4"
type="video/mp4">
</video>
</div>.video-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
}
.video-wrapper video {
width: 100%;
height: 100%;
}You learned this in Chapter 13.
<div class="video-wrapper">
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
title="HTML tutorial"
loading="lazy"
allowfullscreen>
</iframe>
</div>CSS:
.video-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
}
.video-wrapper iframe {
width: 100%;
height: 100%;
border: 0;
}This works across screen sizes.
Tables can be problematic on mobile.
Desktop:
┌──────────┬──────────┬──────────┬──────────┐
│ Employee │ Dept │ Salary │ Location │
├──────────┼──────────┼──────────┼──────────┤
│ Anubhav │ Eng │ ₹26.5L │ Delhi │
└──────────┴──────────┴──────────┴──────────┘Mobile:
┌──────────────────┐
│ Employee | Dept │
│ Salary | City │
└──────────────────┘A common solution is horizontal scrolling.
<div class="table-wrapper">
<table>
...
</table>
</div>.table-wrapper {
overflow-x: auto;
}Now:
Mobile
┌────────────────────┐
│ Employee | Dept... │ → scroll
└────────────────────┘A common mistake is turning every table into:
div
div
div
divjust to make it responsive.
If the data is truly tabular, preserve:
<table>
<thead>
<tbody>
<tr>
<th>
<td>Then use CSS to make it usable on smaller screens.
Forms need special attention on mobile.
Desktop:
First Name Last Name
[________] [________]
Email
[________________________]
Password
[________________________]Mobile:
First Name
[____________]
Last Name
[____________]
Email
[____________]
Password
[____________]The same HTML can often support both.
<form>
<div class="form-group">
<label for="first-name">
First name
</label>
<input
id="first-name"
name="first_name"
type="text">
</div>
<div class="form-group">
<label for="last-name">
Last name
</label>
<input
id="last-name"
name="last_name"
type="text">
</div>
</form>CSS controls the layout.
Old approach:
<table>
<tr>
<td>Name</td>
<td>
<input>
</td>
</tr>
</table>Don't do this for layout.
Use semantic form structure:
<label for="name">Name</label>
<input id="name" name="name">Then CSS handles layout.
Mobile users often interact with fingers rather than a precise mouse pointer.
Don't create tiny controls like:
[×]with almost no clickable area.
Use sufficient target size and spacing.
Example:
button,
a {
min-height: 44px;
}The exact dimensions depend on your design system and platform guidance, but the principle is:
Interactive controls should be easy to accurately activate.
Desktop users have:
Mouse
↓
HoverMobile users may not.
So don't make essential information available only through:
:hoverFor example:
Hover over icon → important information appearsmay fail on touch devices.
Important information should have an accessible interaction model that doesn't depend solely on hover.
Desktop:
┌──────────────────────────────────────────┐
│ Logo Home Blog Courses About Login │
└──────────────────────────────────────────┘Mobile:
┌────────────────────┐
│ Logo ☰ │
└────────────────────┘The HTML can remain semantic:
<header>
<a href="/">
NextGen Blog
</a>
<button
type="button"
aria-expanded="false"
aria-controls="main-menu">
Menu
</button>
<nav
id="main-menu"
aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/courses">Courses</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>CSS and JavaScript can control how the navigation behaves on mobile.
Consider a blog:
<main>
<div class="content-layout">
<article>
<h1>AI Agents</h1>
...
</article>
<aside>
<h2>Related Articles</h2>
...
</aside>
</div>
</main>Desktop CSS might produce:
┌─────────────────────────────────────┐
│ Article │ Related │
│ │ Articles │
│ │ │
└──────────────────────┴──────────────┘Mobile:
┌──────────────────────┐
│ Article │
│ │
├──────────────────────┤
│ Related Articles │
└──────────────────────┘The semantic structure remains intact.
Suppose you have:
Article
Advertisement
Related articles
NewsletterOn mobile, the user may need:
Article
Related articles
Newsletter
AdvertisementDon't duplicate the entire page just to change visual order.
Use meaningful HTML order and CSS layout intentionally.
HTML:
<main>
<article>
...
</article>
<aside>
...
</aside>
</main>CSS:
main {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 900px) {
main {
grid-template-columns: 2fr 1fr;
}
}Mobile:
Article
AsideDesktop:
Article | AsideHTML remains semantic.
Example:
.navigation {
display: flex;
gap: 1rem;
}At smaller widths:
@media (max-width: 700px) {
.navigation {
flex-direction: column;
}
}Again:
HTML
↓
Same semantic content
CSS
↓
Different visual layoutA media query allows CSS to adapt based on conditions.
Example:
@media (max-width: 768px) {
.sidebar {
display: none;
}
}But be careful.
If the sidebar contains important content, simply hiding it on mobile may be a poor design.
A better solution may be to move it below the main content.
Bad:
@media (max-width: 768px) {
.important-content {
display: none;
}
}If that content is essential, you've created a mobile accessibility/content problem.
Better:
Desktop:
Main | Important content
Mobile:
Main
Important contentUse responsive layout rather than removing meaningful information unnecessarily.
HTML:
<h1>
The Future of AI Agents
</h1>CSS can adjust the size:
h1 {
font-size: 2.5rem;
}
@media (max-width: 600px) {
h1 {
font-size: 2rem;
}
}The HTML doesn't change.
Bad:
.container {
width: 1200px;
}On mobile:
1200px content
↓
390px screen
↓
OverflowBetter:
.container {
width: 100%;
max-width: 1200px;
margin-inline: auto;
padding-inline: 1rem;
}Now:
Mobile
390px
↓
container ≈ available width
Desktop
1920px
↓
container stops at max-widthmax-width Pattern#A very common production pattern:
.container {
width: min(100% - 2rem, 1200px);
margin-inline: auto;
}This gives you:
Small screen
↓
Almost full width
Large screen
↓
Maximum readable widthResponsive design and accessibility are connected.
Suppose desktop has:
Navigation
Article
SidebarOn mobile:
Navigation hidden
Article
Sidebar hiddenIf the navigation and sidebar contain important functionality, simply hiding them can make the site inaccessible.
Responsive design should preserve:
Content
Functionality
Navigation
Meaningacross screen sizes.
Don't forget:
<img
src="/images/hero.jpg"
srcset="
/images/hero-small.jpg 480w,
/images/hero-large.jpg 1200w"
alt="Developer building an AI application"
width="1200"
height="675">This combines:
srcset → performance
sizes → resource selection
alt → accessibility
width/height → layout stability<picture> + Accessibility#Example:
<picture>
<source
media="(max-width: 600px)"
srcset="/images/mobile-office.jpg">
<source
media="(min-width: 601px)"
srcset="/images/desktop-office.jpg">
<img
src="/images/desktop-office.jpg"
alt="Developers working together in an office">
</picture>The alt belongs on the fallback <img>.
The <source> elements don't have their own alt.
A device may have a device pixel ratio greater than 1.
For example:
CSS width: 390px
Physical pixels: much moreThe browser can select higher-resolution image candidates when appropriate.
That's one reason srcset is useful.
Example:
<img
src="/images/logo.png"
srcset="
/images/logo.png 1x,
/images/logo@2x.png 2x"
alt="NextGen Blog">Here:
1x → normal resolution
2x → higher-density candidatesrcset Width vs Density Descriptors#There are two common styles.
srcset="
image-480.jpg 480w,
image-800.jpg 800w,
image-1200.jpg 1200w"Usually paired with:
sizes="..."srcset="
logo.png 1x,
logo@2x.png 2x"These are useful for fixed-size images such as icons/logos.
If an image conveys meaningful information:
Prefer:
<img
src="/images/product.jpg"
alt="Black wireless headphones">rather than hiding it in CSS:
.product {
background-image: url("/images/product.jpg");
}CSS background images are generally better suited to decorative visuals.
This is another accessibility principle:
Meaningful content belongs in HTML whenever appropriate.
If something is purely decorative:
.hero {
background-image: url("/images/pattern.svg");
}can be appropriate.
The browser doesn't need an alt because the image isn't content.
From Chapter 13:
<div class="embed">
<iframe
src="..."
title="Embedded content"
loading="lazy">
</iframe>
</div>CSS:
.embed {
width: 100%;
aspect-ratio: 16 / 9;
}
.embed iframe {
width: 100%;
height: 100%;
border: 0;
}This pattern can be used for:
YouTube
Maps
External dashboards
Other embedded applicationsDevices can rotate.
Portrait
┌───────┐
│ │
│ │
│ │
└───────┘
Landscape
┌─────────────────┐
│ │
└─────────────────┘Your layout should not assume only portrait or landscape.
CSS can respond to orientation when appropriate:
@media (orientation: landscape) {
...
}But don't design separate websites unnecessarily.
Ask these questions:
Main article
Primary CTA
NavigationSidebar
Related content
Secondary informationHeavy embeds
Large images
Secondary widgetsCritical information
Essential controls
Primary navigationThis is responsive design at the architectural level.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">
<title>
AI Agents — NextGen Blog
</title>
<meta
name="description"
content="Learn how AI agents are changing modern software development.">
</head>
<body>
<a href="#main-content">
Skip to main content
</a>
<header>
<div class="container">
<a href="/">
NextGen Blog
</a>
<button
type="button"
aria-expanded="false"
aria-controls="main-navigation">
Menu
</button>
<nav
id="main-navigation"
aria-label="Main navigation">
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/ai">AI</a>
</li>
<li>
<a href="/development">
Development
</a>
</li>
<li>
<a href="/about">About</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="main-content">
<div class="container">
<article>
<header>
<h1>
AI Agents Are Changing Software Development
</h1>
<p>
Published October 1, 2026
</p>
</header>
<figure>
<img
src="/images/ai-agents-800.jpg"
srcset="
/images/ai-agents-480.jpg 480w,
/images/ai-agents-800.jpg 800w,
/images/ai-agents-1200.jpg 1200w"
sizes="
(max-width: 600px) 100vw,
(max-width: 1000px) 90vw,
800px"
alt="AI agent workflow connecting multiple software tools"
width="1200"
height="675">
<figcaption>
AI agents can coordinate multiple tools
to complete tasks.
</figcaption>
</figure>
<p>
AI agents are changing how modern software
applications are designed.
</p>
<h2>
What Are AI Agents?
</h2>
<p>
An AI agent can reason about a task,
use tools, and take actions.
</p>
</article>
<aside>
<h2>Related Articles</h2>
<ul>
<li>
<a href="/rag">
Understanding RAG
</a>
</li>
<li>
<a href="/vector-databases">
Vector Databases Explained
</a>
</li>
</ul>
</aside>
</div>
</main>
<footer>
<div class="container">
<p>
© 2026 NextGen Blog
</p>
</div>
</footer>
</body>
</html>Notice something important:
The HTML itself doesn't contain desktop/mobile-specific content.
It contains meaningful structure.
CSS can then transform that structure into different layouts.
.container {
width: 1200px;
}Can cause mobile overflow.
<img src="4000px-image.jpg">and then:
img {
width: 300px;
}The browser may still download the huge source.
Use responsive image techniques.
<div class="desktop">
...
</div>
<div class="mobile">
...
</div>This can create:
Prefer a shared semantic structure where practical.
@media (max-width: 600px) {
.important {
display: none;
}
}Don't remove essential content just because the screen is small.
[ x ]with almost no clickable area.
Make interactive elements comfortable to use.
Don't make essential functionality available only on hover.
Trying to shrink a complex desktop layout into a phone often produces poor UX.
Start with the content and interactions that matter most.
Responsive HTML
│
├── Viewport
│ └── <meta name="viewport">
│
├── Images
│ ├── srcset
│ ├── sizes
│ └── <picture>
│
├── Formats
│ ├── WebP
│ ├── AVIF
│ └── fallback
│
├── Video
│ └── responsive <video>
│
├── Iframes
│ └── responsive embeds
│
├── Tables
│ └── horizontal scrolling
│
├── Forms
│ └── flexible layouts
│
├── Navigation
│ └── responsive interaction
│
├── Accessibility
│ ├── keyboard
│ ├── focus
│ └── semantic HTML
│
└── Layout
├── Flexbox
├── Grid
└── Media queriesRemember this:
USER
│
↓
Available viewport
│
↓
HTML
│
┌──────────┴──────────┐
↓ ↓
Structure Content
│ │
└──────────┬──────────┘
↓
CSS
│
┌─────────┴─────────┐
↓ ↓
Mobile Desktop
│ │
↓ ↓
Layout LayoutThe HTML shouldn't be designed as:
"desktop HTML"
"mobile HTML"Instead:
Build meaningful HTML, then allow CSS and responsive browser features to adapt its presentation.
A design approach where a website adapts its layout and resources to different viewport sizes and device characteristics.
To configure the layout viewport appropriately for modern responsive pages.
srcset?#It provides multiple image resource candidates so the browser can select an appropriate one.
sizes?#It tells the browser the expected rendered width of an image under different viewport conditions, helping it choose from srcset.
<picture>?#A container for multiple image sources, useful for art direction and format selection.
srcset and <picture>?#srcset is commonly used to select among different resolutions/sizes of the same image, while <picture> allows different sources based on media conditions or formats.
They provide intrinsic dimensions/aspect-ratio information and can help the browser reserve space before an image loads.
A common approach is:
.wrapper {
width: 100%;
aspect-ratio: 16 / 9;
}
.wrapper iframe {
width: 100%;
height: 100%;
}Usually no. Prefer a shared semantic structure and responsive CSS/behavior.
It encourages prioritizing essential content and progressively enhancing the layout for larger screens.
Create:
responsive-blog.htmlBuild:
┌──────────────────────────────────────────┐
│ Desktop │
├──────────────────────────────────────────┤
│ Logo Home Blog AI Courses About │
├──────────────────────────────────────────┤
│ │
│ Article Sidebar │
│ │
│ [Responsive Hero Image] │
│ │
│ Article content │
│ │
└──────────────────────────────────────────┘On mobile:
┌────────────────────┐
│ Logo ☰ │
├────────────────────┤
│ │
│ Article │
│ │
│ [Hero Image] │
│ │
│ Content │
│ │
├────────────────────┤
│ Related Articles │
└────────────────────┘Requirements:
✓ Responsive viewport
✓ Semantic HTML
✓ Responsive navigation
✓ Responsive image
✓ srcset
✓ sizes
✓ <picture>
✓ Responsive video
✓ Responsive iframe
✓ Responsive table
✓ Responsive form
✓ Keyboard accessible
✓ Visible focus
✓ Mobile-friendly controls
✓ No horizontal page overflowNext we'll move beyond basic markup and learn the modern browser capabilities that HTML exposes, including:
data-* attributescontenteditabledraggablespellcheckhiddeninert<dialog><details> and <summary><template><slot>popoverautocompleteinputmodeenterkeyhintcaptureMark it as complete to track your mastery.