Skip to main content
HTML for Beginners
CHAPTER 13 Beginner

HTML Responsive Design Basics

Updated: May 10, 2026
5 min read

# HTML Responsive Design Basics

1. Introduction

In the modern web, more than 60% of traffic comes from mobile phones. Your website MUST look good on tiny 4-inch screens, large tablets, and massive 32-inch desktop monitors. This is called Responsive Web Design.

2. Learning Objectives

  • Understand the role of HTML in responsiveness.
  • Use responsive images using HTML attributes.
  • Use the <picture> element for art direction.

3. Detailed Explanations

*Note: The heavy lifting of Responsive Design is done with CSS Media Queries (which you will learn in the CSS course). However, HTML has specific tools to help!*

1. The Viewport Meta Tag

As learned in the previous chapter, responsive design is impossible without telling the browser to scale the viewport to the device width.
html
1 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Responsive Images in HTML

If you load a 4000px wide image on a mobile phone, you are wasting massive amounts of user data and slowing down the site. HTML allows you to provide different image sizes, and the browser will automatically download the smallest one that fits!

We do this using srcset.

html
1234 
<img 
  src="small.jpg" 
  srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" 
  alt="A beautiful landscape">

*How it works:* We tell the browser we have 3 images (500px, 1000px, 2000px wide). The browser looks at the user's screen size and downloads only the appropriate file!

3. The <picture> Element (Art Direction)

Sometimes, you don't just want a smaller image on mobile, you want a *completely different cropped image*. This is called Art Direction.
html
1234567 
<picture>
  <!-- If screen is wider than 800px, use the wide landscape crop -->
  <source media="(min-width: 800px)" srcset="landscape.jpg">
  
  <!-- Otherwise, use the tall portrait crop for mobile -->
  <img src="portrait.jpg" alt="A beautiful landscape">
</picture>

4. Mini Project: Responsive Homepage Setup

html
123456789101112131415161718 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Architecture</title>
</head>
<body>
    <header>
        <!-- Art directed hero image -->
        <picture>
            <source media="(min-width: 1024px)" srcset="hero-desktop.jpg">
            <source media="(min-width: 768px)" srcset="hero-tablet.jpg">
            <img src="hero-mobile.jpg" alt="Hero background" style="width: 100%;">
        </picture>
        <h1>Welcome to Mobile First</h1>
    </header>
</body>
</html>

5. MCQs

Q1: Which HTML element allows you to define completely different image sources based on media queries (Art Direction)? A) <image> B) <figure> C) <picture> D) <responsive> *Answer: C*

6. Summary

While CSS handles the layout shifting for responsive design, HTML handles the assets. By using srcset and the <picture> tag, you ensure your mobile users aren't downloading 5MB desktop images, making your site blazing fast.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter HTML Meta Tags and SEO Basics
Next Chapter HTML Accessibility (A11Y) Basics

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6

🎥 Related Videos 1