Responsive Web Design with HTML

Make pages work on every screen: the viewport meta tag, fluid images and video, responsive tables, mobile-friendly forms and navigation, and testing on phones.

Lesson 40 of 44Intermediate15 min read

More than half of all web visits come from phones, and the same page might be viewed on a 360-pixel phone, a tablet, a laptop and a 4K monitor. Responsive web design means building one page that adapts to all of them: text stays readable without zooming, images shrink to fit, nothing scrolls sideways, and buttons are big enough to tap.

Most of the adapting is done with CSS, which the CSS course covers in lessons on media queries and responsive layouts. But HTML lays the foundation. Without the viewport meta tag, phones pretend to be desktop screens and shrink everything. Without width and height attributes and srcset, images either overflow or download far too large. Without the right input types, phone users get the wrong keyboard.

In this lesson you'll set up the viewport, make images, videos and tables fit any width, build forms and navigation that work well on touch screens, and test everything with your browser's device mode. Google also uses mobile-first indexing, so a page that works well on phones is the version that counts for search.

The viewport meta tag

HTML
<meta name="viewport" content="width=device-width, initial-scale=1">
  • Every responsive page needs this line in the <head>.
  • width=device-width tells the browser the page should be as wide as the screen, rather than a pretend 980-pixel desktop.
  • initial-scale=1 starts at normal zoom.
  • Never add user-scalable=no or maximum-scale=1: blocking zoom makes pages hard to read for people with low vision.

Fluid media and tables

  • Images: img { max-width: 100%; height: auto; } shrinks images to fit their container while keeping their shape. Add srcset and sizes so phones download smaller files, as shown in the responsive images lesson.
  • Video and embeds: width: 100% plus aspect-ratio: 16 / 9.
  • Tables: wide tables can't shrink below their content. Wrap them in a container with overflow-x: auto so the table scrolls inside its box instead of widening the whole page, or reorganise them into cards on small screens.
  • Long words and URLs: overflow-wrap: anywhere stops them breaking the layout.

Forms and navigation for touch

NeedHTML
Number keypadtype="tel", type="number" or inputmode="numeric"
Email keyboard with @type="email"
Faster fillingautocomplete="name", "email", "postal-code"
Big tap targetsButtons and links at least about 44 by 44 pixels
Compact menu<details>/<summary> or a button that toggles the nav

Use a mobile-first approach: write the small-screen layout as the default, then use CSS media queries to add columns and spacing for larger screens.

HTML Responsive Design Syntax

Responsive essentials

<meta name="viewport" content="width=device-width, initial-scale=1">
<img src="photo-800.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w" sizes="(max-width: 600px) 100vw, 600px" alt="..." width="800" height="533">
<div class="table-wrap"><table>...</table></div>
<input type="tel" autocomplete="tel">
<input inputmode="numeric" autocomplete="one-time-code">
img, video { max-width: 100%; height: auto; }
.table-wrap { overflow-x: auto; }

HTML Responsive Design Summary

  • Add <meta name="viewport" content="width=device-width, initial-scale=1"> to every page.
  • Make images and video fluid with max-width: 100% and aspect-ratio.
  • Let wide tables scroll inside a wrapper instead of widening the page.
  • Use the right input types, inputmode and autocomplete for mobile keyboards.
  • Build mobile first and test in device mode and on real phones.

HTML Responsive Design Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

Fluid images and video

<style>
  img, iframe { max-width: 100%; }
  img { height: auto; display: block; border-radius: 8px; }
  .video { width: 100%; aspect-ratio: 16 / 9; border: 0; }
</style>
<img src="https://picsum.photos/seed/rwd/900/500" alt="City skyline at dusk" width="900" height="500">
<iframe class="video" src="https://www.youtube-nocookie.com/embed/UB1O30fR-EE" title="Video: HTML basics" loading="lazy"></iframe>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 2 to 3The 900-pixel image shrinks to fit any narrower screen, keeping its proportions.
  2. Line 4The video fills the width and stays 16:9.
  3. Line 6Width and height still help the browser reserve the right space.
Example 2

A table that scrolls on small screens

<style>
  .table-wrap { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 8px; }
  table { border-collapse: collapse; min-width: 560px; width: 100%; }
  th, td { padding: 8px 12px; border-bottom: 1px solid #e5e7eb; text-align: left; white-space: nowrap; }
</style>
<div class="table-wrap" tabindex="0" role="region" aria-label="Plan comparison">
  <table>
    <tr><th>Plan</th><th>Storage</th><th>Users</th><th>Support</th><th>Price</th></tr>
    <tr><td>Starter</td><td>10 GB</td><td>1</td><td>Email</td><td>£4/month</td></tr>
    <tr><td>Team</td><td>100 GB</td><td>10</td><td>Chat</td><td>£19/month</td></tr>
  </table>
</div>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 2The wrapper scrolls sideways when the table is wider than the screen.
  2. Line 3The table keeps a sensible minimum width instead of squashing.
  3. Line 6tabindex, role and aria-label let keyboard users focus and scroll the region.
Example 3

A mobile-friendly form and menu

<style>
  input, button { font-size: 16px; padding: 12px; width: 100%; box-sizing: border-box; margin-bottom: 10px; }
  summary { padding: 12px; cursor: pointer; font-weight: bold; }
  nav a { display: block; padding: 12px; }
</style>
<details>
  <summary>Menu</summary>
  <nav><a href="#">Home</a><a href="#">Shop</a><a href="#">Contact</a></nav>
</details>
<form>
  <label for="ph">Phone</label>
  <input id="ph" type="tel" autocomplete="tel">
  <label for="pc">Postcode</label>
  <input id="pc" autocomplete="postal-code">
  <label for="code">Verification code</label>
  <input id="code" inputmode="numeric" autocomplete="one-time-code">
  <button type="submit">Continue</button>
</form>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 216px text stops iPhones zooming in on focus, and full-width fields are easy to tap.
  2. Line 4Large padding makes each menu link a comfortable tap target.
  3. Lines 6 to 9A collapsible menu with no JavaScript, using details and summary.
  4. Line 12type="tel" shows a phone keypad.
  5. Line 16inputmode="numeric" shows a number keypad, and one-time-code lets phones fill in codes from text messages.

Common HTML Responsive Design Mistakes

No viewport meta tag

Don't
<head><title>Shop</title></head>
Do
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shop</title>
</head>

Without it, phones show a tiny desktop-sized page.

Disabling zoom

Don't
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Do
<meta name="viewport" content="width=device-width, initial-scale=1">

People who need larger text rely on pinch-to-zoom.

Fixed widths

Don't
<img src="banner.jpg" alt="Sale" style="width: 1000px">
<table style="width: 1000px">...</table>
Do
<img src="banner.jpg" alt="Sale" style="max-width: 100%; height: auto">
<div style="overflow-x: auto"><table>...</table></div>

Fixed widths force sideways scrolling on phones.

HTML Responsive Design in Real Projects

Responsive design in practice

Every major site, from news publishers to banks, serves one responsive page rather than a separate mobile site. Search engines index the mobile version first, so problems on phones affect rankings. Design systems define breakpoints and touch target sizes, and teams check new pages at common widths such as 360, 768 and 1280 pixels before release. Codevra's own pages are tested at 360 pixels wide.

HTML Responsive Design Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Complete the viewport tag.

<meta name="viewport" content="width=, initial-scale=1">
Multiple choiceeasy

What happens on a phone without the viewport meta tag?

Multiple choicemedium

How do you stop a wide table from widening the whole page?

Multiple choicemedium

Which input shows a phone number keypad?

Fix the bugmedium

This head will look tiny on phones and blocks zooming, and the image overflows. Fix the viewport so it allows zoom, and make the image fluid.

<meta name="viewport" content="width=980, user-scalable=no">
<img class="hero" src="https://picsum.photos/seed/fix/1200/400" alt="Banner" style="width: 1200px">
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Viewport uses device-width
  • Zoom isn't blocked
  • Image is fluid

HTML Responsive Design Quiz

5 questions to check what you learned.

  1. What is responsive web design?

    • A separate site for phones
    • A fast website
    • A site that responds to clicks
    • One page that adapts its layout to any screen size

  2. Why shouldn't you use user-scalable=no?

    • It stops people zooming, which many need to read comfortably
    • It's slower
    • It breaks images
    • Search engines ban it

  3. What does max-width: 100% do to an image?

    • Makes it fill the screen
    • Crops it
    • Lets it shrink to fit its container but never grow beyond its natural size
    • Hides it on mobile

  4. What does mobile-first mean?

    • Phones load the page first
    • Write the small-screen layout as the default, then add styles for larger screens
    • Only phones are supported
    • Desktop styles come first

  5. Which autocomplete value helps phones fill in codes from text messages?

    • sms
    • otp-code
    • numeric
    • one-time-code

HTML Responsive Design Challenge

A mobile-ready page start

Create:

  1. A viewport meta tag with width=device-width, initial-scale=1
  2. An image with width and height attributes and inline max-width: 100%
  3. A <div class="scroll"> with inline overflow-x: auto that wraps a <table>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Correct viewport tag
  • Fluid image with dimensions
  • Table inside a scrolling wrapper

Related HTML topics

39Responsive ImagesServe the right image size and format to every screen.27Page LayoutPlan and build a complete web page layout with header, nav, main, article, aside and footer, then arrange it with simple, responsive CSS.34Media QueriesAdapt layouts to phones, tablets and desktops, starting with mobile.
Esc
↑↓ to navigateEnter to open