HTML Tutorial
HTML Responsive
A viewport meta tag, flexible images, and media queries make a page work on phones.
One page, many widths
A phone is not a tiny desktop. Without a few HTML and CSS rules, a phone browser pretends the page is about 980 pixels wide, then shrinks the whole layout so it fits. Text becomes unreadably small. You pinch to zoom. That is the default, not a broken phone.
Responsive HTML does three jobs: tell the browser to use the real screen width, stop images from overflowing, and rearrange layout when the viewport is narrow. You do not need a shelf of test devices to learn this. Resize the live preview at /html/try and watch the page react.
The viewport meta tag
Put this in the <head>, near the charset tag. It is the one line that turns off the “fake wide desktop” zoom:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Viewport</title>
</head>
<body>
<h1>This heading uses the real screen width</h1>
<p>On a phone, 1 CSS pixel matches a device pixel at the starting zoom. You read the text without pinching.</p>
</body>
</html>width=device-width— the layout width follows the device, not a 980-pixel guess.initial-scale=1.0— start at zoom level 1, not zoomed out to fit a fake desktop.
Skip user-scalable=no and skip locking maximum-scale. People need to zoom. Accessibility is part of responsive design, not an extra chapter.
Flexible images
A 1400-pixel photo will overflow a 360-pixel screen. The usual fix is one CSS rule on images: never wider than the parent, and keep the aspect ratio when the width shrinks.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexible image</title>
<style>
img {
max-width: 100%;
height: auto;
display: block;
}
</style>
</head>
<body>
<h1>Menu</h1>
<p>The banner scales down. It never pushes the page sideways.</p>
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='400'%3E%3Crect fill='%239a3412' width='1400' height='400'/%3E%3Ctext x='50%25' y='50%25' fill='%23fff' font-size='48' text-anchor='middle' dominant-baseline='middle'%3EWide photo%3C/text%3E%3C/svg%3E"
alt="Wide cafe banner"
width="1400"
height="400"
>
</body>
</html>max-width: 100% caps the painted width at the parent. height: auto keeps proportions so the picture does not squash. The HTML width and height attributes still help the browser reserve space before the file loads.
A media query at 640 pixels
CSS media queries change rules when the viewport crosses a width. A common beginner breakpoint is 640 pixels: two columns become one. The HTML stays the same. Only the stylesheet reacts.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media query</title>
<style>
body { margin: 0; font-family: system-ui, sans-serif; }
header, footer { background: #9a3412; color: #fff; padding: 1rem 1.25rem; }
main {
display: grid;
grid-template-columns: 1fr 220px;
gap: 1rem;
padding: 1.25rem;
}
aside { background: #fff7ed; padding: 1rem; }
@media (max-width: 640px) {
main { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<header><h1>Newsroom</h1></header>
<main>
<article>
<h2>Today</h2>
<p>Widen and narrow the preview. The aside drops under the article below 640 pixels.</p>
</article>
<aside>
<h3>Related</h3>
<p>Viewport, images, media queries.</p>
</aside>
</main>
<footer>StudyGrid HTML</footer>
</body>
</html>@media (max-width: 640px) means “when the viewport is 640 pixels wide or less.” Inside that block you override only what must change. The rest of the stylesheet still applies.
How the three pieces work together
| Piece | If you skip it |
|---|---|
| Viewport meta | The phone zooms a desktop layout. Media queries fire at the wrong width. |
img max-width 100% | Wide photos force a horizontal scrollbar even when columns stack. |
@media (max-width: 640px) | Side-by-side columns stay side by side and become unreadable. |
Start with the viewport tag on every page. Add the image rule once in your stylesheet. Add media queries when a layout actually breaks — not because a list of device names told you to.
Do not wait for a device farm
You do not need a lab of phones, tablets, and laptops to write a first responsive page. The layout cares about viewport width, not a brand name on the bezel. Open /html/try, drag the split pane, or resize the browser window. If the page is readable at a narrow width, you are on the right track.
- Check that body text does not require sideways scrolling.
- Check that tap targets are not sitting on top of each other.
- Check that images shrink instead of overflowing.
Later you will meet srcset and <picture> for serving smaller image files to small screens. Those save bandwidth. They are not required to make a page fit.
What to remember
- Always include
<meta name="viewport" content="width=device-width, initial-scale=1.0">. - Let images scale with
max-width: 100%andheight: auto. - Use
@media (max-width: 640px)(or another breakpoint you measured) to restack layout. - Test by resizing. A list of device models is not a substitute for a narrowing window.
Next: semantic tags that name regions of the page so the outline is not just a pile of divs.
Worked examples
The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.
HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.
Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.
Engineering
An image that fits a phone
max-width: 100% and height: auto let an image shrink with the column. Fixed width="600" on a 320 px screen overflows.
The viewport meta in the head is the other half. HTML starts responsive layout; CSS media queries finish it.
Example
<img
src="https://picsum.photos/seed/harborwide/600/180"
alt="Harbor lab window"
style="max-width:100%;height:auto">Maths
A formula that can wrap
Long formulae overflow on a phone. Allow wrapping, or use a smaller type size in CSS. Do not put the whole proof in one unbreakable line.
x = (−b ± √(b² − 4ac)) / (2a)
Example
<p style="max-width:20rem">
For x² − 5x + 6 = 0 the roots are 2 and 3.
</p>