HTML191 exercises

HTML Exercises with Answers

Practise HTML with 191 interactive exercises: multiple choice, fill-in-the-blank, output prediction and debugging. Every exercise gives instant feedback, a hint and the full solution.

Score0/ 191

1HTML Introduction

Read the lesson
Fill in the blankseasyHTML Introduction

Complete the code so the page shows a heading and a paragraph.

<>Cookie Club</h1>
<p>We meet every Friday to bake.</>
Multiple choiceeasyHTML Introduction

What does HTML stand for?

Fix the bugeasyHTML Introduction

This page should show a heading followed by a paragraph, but the whole page looks like a giant heading. Find the bug and fix it.

<h1>Space Facts
<p>A day on Venus is longer than a year on Venus.</p>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • There is an <h1> heading
  • The heading only contains "Space Facts"
  • The paragraph is not inside the heading

2HTML Editors

Read the lesson
Multiple choiceeasyHTML Editors

You edit your HTML file but the browser still shows the old version. What's the most likely reason?

Multiple choiceeasyHTML Editors

Which file name is best for your home page?

Fill in the blankseasyHTML Editors

Complete the link so it opens the gallery.html file in the same folder.

<a ="">See my photos</a>

3Page Structure

Read the lesson
Fill in the blankseasyPage Structure

Fill in the two missing element names.

<!DOCTYPE html>
<html lang="en">
<>
  <title>Space Blog</title>
</head>
<>
  <h1>Space Blog</h1>
</body>
</html>
Multiple choiceeasyPage Structure

Where does the text inside <title> appear?

Fix the bugmediumPage Structure

This page shows strange characters instead of "Café" on some computers, and it has no tab title. Fix both problems.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
  <h1>Café Menu</h1>
</body>
</html>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The page has a <title> that isn't empty
  • A <meta charset> tag is present

4Elements & Tags

Read the lesson
Multiple choiceeasyElements & Tags

Which line is nested correctly?

Multiple choicemediumElements & Tags

Which of these is a void (empty) element?

Fill in the blankseasyElements & Tags

Close the tags in the right order.

<p>Dinner is <strong>pizza <em>again</></></p>
Fix the bugmediumElements & Tags

The poem should have each line on its own line, but someone added closing tags to the line breaks. Fix it.

<p>
  Roses are red<br></br>
  Violets are blue<br></br>
  HTML is fun
</p>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • There are exactly two <br> elements
  • The paragraph contains all three lines

5Attributes

Read the lesson
Fill in the blankseasyAttributes

Complete the image so it loads sunset.jpg and describes it.

<img ="sunset.jpg" ="Orange sunset over the sea">
Multiple choiceeasyAttributes

Where do attributes go?

Predict the outputmediumAttributes

What happens with this button?

<button disabled="false">Send</button>
Fix the bugmediumAttributes

The link should go to https://example.com and show the tooltip "Example site", but it's broken. Fix it.

<a title=Example site>Visit</a href="https://example.com">
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The link has the right href
  • The tooltip is "Example site"
  • The link text is "Visit"

6Headings

Read the lesson
Fill in the blankseasyHeadings

Make "Our Menu" the main page title and "Drinks" a section heading.

<>Our Menu</>
<>Drinks</>
<p>Coffee, tea and hot chocolate.</p>
Multiple choiceeasyHeadings

How many <h1> elements should a typical page have?

Multiple choicemediumHeadings

You want a sub-section under an <h2>. Which tag should you use?

Fix the bugmediumHeadings

This page has two <h1> headings and skips from <h2> to <h4>. Fix the outline: keep "Travel Journal" as the only <h1>, make "Japan" an <h2>, and "Tokyo" an <h3>.

<h1>Travel Journal</h1>
<h1>Japan</h1>
<h4>Tokyo</h4>
<p>The trains are always on time.</p>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Exactly one <h1>
  • "Japan" is an <h2>
  • "Tokyo" is an <h3>
  • No <h4> left

7Paragraphs & Breaks

Read the lesson
Multiple choiceeasyParagraphs & Breaks

How do you force a new line inside a paragraph?

Predict the outputmediumParagraphs & Breaks

How many lines of text will this show?

<p>One
Two
Three</p>
Fill in the blankseasyParagraphs & Breaks

Put a divider between the two sections.

<p>Chapter 1 ends here.</p>
<>
<p>Chapter 2 begins.</p>
Fix the bugeasyParagraphs & Breaks

The song lyrics should show on three separate lines inside one paragraph. Fix it.

<p>
  Twinkle twinkle little star
  How I wonder what you are
  Up above the world so high
</p>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Still one paragraph
  • Two line breaks inside the paragraph

8Text Formatting

Read the lesson
Fill in the blankseasyText Formatting

Make the warning important and write the chemical formula for water.

<p><>Danger:</strong> do not drink the H<>2</sub>O from the lab!</p>
Multiple choiceeasyText Formatting

Which tag should you use to show a crossed-out old price?

Multiple choicemediumText Formatting

What's the difference between <strong> and <b>?

Fix the bugmediumText Formatting

Fix the maths: "2 to the power of 10" should show the 10 raised, and the keyboard shortcut should use <kbd>.

<p>2<sub>10</sub> = 1024</p>
<p>Copy with <code>Ctrl</code> + <code>C</code></p>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The 10 is in <sup>
  • No <sub> left
  • Two <kbd> elements

9Quotes & Citations

Read the lesson
Fill in the blankseasyQuotes & Citations

Complete the markup so the quote is a short inline quotation.

<p>The sign said <>mind the gap</>.</p>
Multiple choiceeasyQuotes & Citations

Which element is used for a long quotation that stands on its own?

Multiple choicemediumQuotes & Citations

Where does the full meaning of an abbreviation go?

Multiple choicemediumQuotes & Citations

What is <cite> meant for?

Fix the bugmediumQuotes & Citations

Fix the markup: the long review should be a block quotation, and the short quote inside the sentence should use <q> without typed quotation marks.

<p>
  The best thing about this course is how practical it is. Every lesson has something to build.
</p>
<p>Sam told us: "worth every minute".</p>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The review is inside a blockquote
  • The short quote uses q
  • No typed quotation marks around the quote

10Code & Preformatted Text

Read the lesson
Fill in the blankseasyCode & Preformatted Text

Complete the markup for a multi-line code block.

<><code>let a = 1;
let b = 2;</code></>
Multiple choiceeasyCode & Preformatted Text

Which element marks a key the user should press?

Multiple choicemediumCode & Preformatted Text

What does <pre> change?

Multiple choicemediumCode & Preformatted Text

How do you display the text <div> on a page?

Fix the bugmediumCode & Preformatted Text

The code sample lost its indentation and the shortcut isn't marked up. Wrap the code in <pre><code> and put each key in its own <kbd>.

<p>Save with Ctrl + S.</p>
<code>
for (let i = 0; i < 3; i++) {
  console.log(i);
}
</code>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The code is inside pre > code
  • Two kbd elements for the shortcut
  • The indentation is kept

11Comments

Read the lesson
Fill in the blankseasyComments

Turn this line into a comment.

 Remember to add the logo here
Multiple choiceeasyComments

Can visitors see your HTML comments?

Fix the bugeasyComments

The "Contact" paragraph should be visible, but the comment above it was never closed. Fix it.

<h1>About us</h1>
<!-- We started in 2019
<p>Contact us at hello@example.com</p>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The contact paragraph is visible
  • The heading is still there

12Colors & Styles

Read the lesson
Fill in the blankseasyColors & Styles

Complete the inline style to make the text blue.

<p style=": blue;">Blue text</p>
Multiple choiceeasyColors & Styles

Which property changes the background colour?

Multiple choicemediumColors & Styles

Which of these is the same colour as #000000?

Multiple choicemediumColors & Styles

Why is light grey text on a white background a problem?

Fix the bugmediumColors & Styles

The style declarations are written incorrectly. Fix them so the box has white text on a dark green (#14532d) background with 12px padding.

<div class="box" style="color=white, background-color=#14532d, padding=12px">Welcome!</div>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Text is white
  • Background is dark green
  • Padding is 12px

14File Paths & URLs

Read the lesson
Fill in the blankseasyFile Paths & URLs

From blog/post.html, complete the path to images/cat.jpg in the folder above.

<img src="images/cat.jpg" alt="A cat">
Multiple choiceeasyFile Paths & URLs

Which of these is an absolute URL?

Multiple choicemediumFile Paths & URLs

What does a path starting with / mean, such as /css/style.css?

Multiple choicemediumFile Paths & URLs

An image works on your computer but is broken after uploading. What's a likely cause?

Fix the bugmediumFile Paths & URLs

This page lives in the site's main folder, next to the images folder. Fix the paths: the image path points to a file on someone's computer, and the link should point to about.html in the same folder.

<img src="C:/Users/sam/site/images/team.jpg" alt="Our team" width="120" height="80">
<a href="/C:/site/about.html">About us</a>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The image uses a relative path
  • The link points to about.html

15Images

Read the lesson
Fill in the blankseasyImages

Complete the image tag.

<img ="logo.svg" ="Sprout Bakery logo" width="120" height="40">
Multiple choiceeasyImages

What's the best alt text for a photo of a red bicycle leaning on a wall, on a bike shop page?

Multiple choicemediumImages

Why should you set width and height on images?

Fix the bugmediumImages

This image has three problems: no alt text, a closing tag it doesn't need, and it should load lazily. Fix them.

<img src="https://picsum.photos/id/1025/300/200" width="300" height="200"></img>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Image has meaningful alt text
  • Image loads lazily
  • Still has width and height

16Lists

Read the lesson
Fill in the blankseasyLists

Make this a numbered list of steps.

<>
  <>Plug in the kettle</li>
  <li>Boil the water</li>
</ol>
Multiple choiceeasyLists

Which list should you use for the steps to assemble a bookshelf?

Multiple choicemediumLists

How do you make an ordered list start at 10?

Fix the bugmediumLists

The sub-list of planets should be nested inside the "Inner planets" item, and "Mars" is missing its <li>. Fix it.

<ul>
  <li>Inner planets</li>
  <ul>
    <li>Mercury</li>
    <li>Venus</li>
    Mars
  </ul>
  <li>Outer planets</li>
</ul>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The nested list is inside an li
  • The nested list has 3 items
  • "Mars" is in an li
  • The outer list has 2 items

17Buttons

Read the lesson
Fill in the blankseasyButtons

Complete the button so it doesn't submit the form.

<button type="">Show more</button>
Multiple choiceeasyButtons

What is the default type of a button inside a form?

Multiple choicemediumButtons

Which should be a link rather than a button?

Multiple choicemediumButtons

An icon-only close button shows "×". How do you give it a name screen readers can say?

Fix the bugmediumButtons

These "buttons" are divs and the real button submits the form by accident. Use proper buttons: "Subscribe" submits the form, and "Preview" must not.

<form>
  <input type="email" placeholder="Email">
  <div class="btn">Subscribe</div>
  <button>Preview</button>
</form>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Subscribe is a submit button
  • Preview is type button
  • No div acts as a button

18Tables

Read the lesson
Fill in the blankseasyTables

Complete the table row with two data cells.

<table>
  <tr><th>Pet</th><th>Name</th></tr>
  <><>Cat</td><td>Mochi</td></tr>
</table>
Multiple choiceeasyTables

Which element creates a header cell?

Multiple choicemediumTables

A cell should stretch across 3 columns. What do you write?

Fix the bughardTables

This price table has a broken layout: the "Pro" row has an extra cell and the header row uses <td>. Fix it so every row has 2 cells and the header uses <th>.

<table>
  <tr><td>Plan</td><td>Price</td></tr>
  <tr><td>Free</td><td>£0</td></tr>
  <tr><td>Pro</td><td>£9</td><td>per month</td></tr>
</table>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The header row uses two <th>
  • Every row has exactly 2 cells
  • The Pro price mentions £9

19Forms

Read the lesson
Fill in the blankseasyForms

Connect the label to the input.

<label ="phone">Phone number</label>
<input ="phone" name="phone" type="tel">
Multiple choiceeasyForms

Which attribute makes a field mandatory?

Multiple choicemediumForms

Which method should a login form use?

Fix the bugmediumForms

This feedback form has three problems: the label isn't connected, the textarea has no name, and the radio buttons don't form a group. Fix them.

<form action="/feedback" method="post">
  <label>Your comment</label>
  <textarea id="comment"></textarea>
  <p>Rating:
    <label><input type="radio" name="good" value="good"> Good</label>
    <label><input type="radio" name="bad" value="bad"> Bad</label>
  </p>
  <button type="submit">Send</button>
</form>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The label is connected to the textarea
  • The textarea has a name
  • Both radios share the same name

20Form Controls

Read the lesson
Fill in the blankseasyForm Controls

Link the label to the input.

<label ="city">City</label>
<input id="" name="city">
Multiple choiceeasyForm Controls

Which element creates a multi-line text box?

Multiple choicemediumForm Controls

What makes several radio buttons work as one group?

Multiple choicemediumForm Controls

What is a legend used for?

Fix the bugmediumForm Controls

Fix the form: the labels aren't linked to their fields, and the two size options can both be selected.

<form>
  <label>Email</label>
  <input id="email" name="email">
  <input type="radio" name="small" value="s"> Small
  <input type="radio" name="medium" value="m"> Medium
</form>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The email label points to the input
  • Both radios share one name
  • Each radio is inside a label

21Input Types

Read the lesson
Fill in the blankseasyInput Types

Use the input type that shows a calendar.

<label>Check-in <input type="" name="checkin"></label>
Multiple choiceeasyInput Types

Which type hides the characters you type?

Multiple choicemediumInput Types

Which input type should you use for a UK mobile number like 07700 900123?

Fix the bugmediumInput Types

The "Guests" field should only allow 1 to 8 guests, and the colour field should be a colour picker. Fix both.

<label>Guests <input type="text" name="guests"></label>
<label>Theme <input type="text" name="theme" value="#ff6600"></label>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Guests is a number input
  • Guests min is 1 and max is 8
  • Theme is a colour picker

22Form Validation

Read the lesson
Fill in the blankseasyForm Validation

Make the field mandatory.

<input name="name" >
Multiple choiceeasyForm Validation

Which attribute sets the minimum number of characters?

Multiple choicemediumForm Validation

Which method should a login form use?

Multiple choicemediumForm Validation

What does pattern="[0-9]{5}" require?

Fix the bugmediumForm Validation

Add validation so the form can't be sent empty: email is required and must be an email address, and the password needs at least 8 characters.

<form>
  <label for="e">Email</label>
  <input id="e" name="email" type="text">
  <label for="p">Password</label>
  <input id="p" name="password" type="password">
  <button type="submit">Sign in</button>
</form>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Email is required with type email
  • Password is required
  • Password minlength is 8

23Div, Span & Block/Inline

Read the lesson
Multiple choiceeasyDiv, Span & Block/Inline

Which of these is an inline element?

Multiple choicemediumDiv, Span & Block/Inline

You want to colour one word red inside a sentence. Which element do you wrap it in?

Fill in the blankseasyDiv, Span & Block/Inline

Group the heading and paragraph into one block container, and wrap the price in an inline container.

< class="product">
  <h3>Sprout Mug</h3>
  <p>Only < class="price">£9</span></p>
</div>
Fix the bugmediumDiv, Span & Block/Inline

The "Buy now" control should be a real button so keyboard users can reach it. Replace the <div> with a <button type="button">.

<h3>Sprout Hoodie</h3>
<p>£35</p>
<div class="buy">Buy now</div>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • There's a button saying "Buy now"
  • No div pretending to be a button
  • The button is type="button"

24Classes & IDs

Read the lesson
Fill in the blankseasyClasses & IDs

Give the paragraph two classes: tip and small.

<p class="">Drink water while you code.</p>
Multiple choiceeasyClasses & IDs

How many elements on a page can share the same id?

Multiple choicemediumClasses & IDs

Which is the best class name for a box that shows form errors?

Fix the bugmediumClasses & IDs

Both alerts should get the warning style, but they're using the same id and the CSS targets a class. Fix the HTML.

<p id="alert">Low battery</p>
<p id="alert">Storage almost full</p>

<style>
  .alert { background: #fff1c2; padding: 8px; border-left: 4px solid orange; }
</style>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Both paragraphs have the class "alert"
  • No duplicate ids
  • The style is applied

25Data Attributes

Read the lesson
Fill in the blankseasyData Attributes

Complete the custom attribute name.

<li category="books">The Hobbit</li>
Multiple choiceeasyData Attributes

How does JavaScript read data-user-id from an element?

Multiple choicemediumData Attributes

What type is el.dataset.price when the HTML says data-price="12"?

Multiple choicemediumData Attributes

Which CSS selector matches <div data-state="open">?

Fix the bugmediumData Attributes

The attributes aren't valid data attributes. Rename them so they work with dataset: the product id should be readable as dataset.productId and the colour as dataset.colour.

<button class="add" productId="55" colour="blue">Add to basket</button>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • dataset.productId is "55"
  • dataset.colour is "blue"

26Semantic Elements

Read the lesson
Fill in the blankseasySemantic Elements

Use the right semantic elements.

<>
  <h1>Green Thumb Garden Centre</h1>
</header>
<>
  <p>Spring bulbs are in stock!</p>
</main>
<>
  <p>© 2026 Green Thumb</p>
</footer>
Multiple choicemediumSemantic Elements

A single user comment under a video should be marked up as…

Multiple choicemediumSemantic Elements

Which element should wrap a "Related products" sidebar?

Fix the bugmediumSemantic Elements

Replace the generic divs with semantic elements: the site title area becomes header, the links become nav, the content becomes main, and the copyright becomes footer.

<div class="top">
  <h1>Comic Corner</h1>
  <div class="links"><a href="#">New</a> <a href="#">Classics</a></div>
</div>
<div class="content"><p>Issue #42 is out now!</p></div>
<div class="bottom"><p>© 2026 Comic Corner</p></div>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • There's a header with the h1
  • Links are inside a nav
  • There's exactly one main
  • There's a footer
  • No divs left

27Page Layout

Read the lesson
Fill in the blankseasyPage Layout

Complete the element for the page's unique content.

<>
  <h1>About us</h1>
</>
Multiple choiceeasyPage Layout

Which element usually holds the site logo and main navigation?

Multiple choicemediumPage Layout

What is aside used for?

Multiple choicemediumPage Layout

What does "mobile first" mean for layouts?

Fix the bugmediumPage Layout

Replace the generic divs with landmark elements: header, nav inside the header, main and footer.

<div class="top">
  <div class="links"><a href="#">Home</a> <a href="#">Shop</a></div>
</div>
<div class="content"><h1>Welcome</h1></div>
<div class="bottom">&copy; 2026 Shop</div>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • header contains nav
  • main contains the h1
  • There is a footer
  • Exactly one main

28Iframes

Read the lesson
Fill in the blankseasyIframes

Complete the iframe so it's accessible and lazy-loaded.

<iframe src="https://example.com/widget" ="Weather widget" loading=""></iframe>
Multiple choiceeasyIframes

Does <iframe> need a closing tag?

Multiple choicemediumIframes

What does an empty sandbox attribute do?

Fix the bugmediumIframes

Fix this iframe: it's missing a title and has no closing tag.

<iframe srcdoc="<h1>Hello from inside!</h1>" width="300" height="100">
<p>After the frame</p>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The iframe has a title
  • The paragraph is outside the iframe

29Embedding Content

Read the lesson
Fill in the blankseasyEmbedding Content

Make the video frame load only when it's near the viewport.

<iframe src="https://www.youtube-nocookie.com/embed/abc" title="Demo" loading=""></iframe>
Multiple choiceeasyEmbedding Content

Which YouTube address should go in an iframe's src?

Multiple choicemediumEmbedding Content

Which CSS property keeps an embed's shape as its width changes?

Multiple choicemediumEmbedding Content

Why add a download link inside an <object> showing a PDF?

Fix the bugmediumEmbedding Content

Fix this embed: use the embed URL on youtube-nocookie.com (video id abc123), add a title, lazy loading, and make it responsive with the .video class.

<style>.video { width: 100%; aspect-ratio: 16 / 9; border: 0; }</style>
<iframe src="https://www.youtube.com/watch?v=abc123" width="900" height="500"></iframe>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Uses the nocookie embed URL
  • Has a title
  • Lazy loaded
  • Uses the responsive class

30Entities & Symbols

Read the lesson
Fill in the blankseasyEntities & Symbols

Show the text <h1> on the page instead of creating a heading.

<p>The biggest heading is h1.</p>
Multiple choiceeasyEntities & Symbols

Which entity shows an ampersand (&)?

Multiple choicemediumEntities & Symbols

What does &nbsp; do?

Fix the bugeasyEntities & Symbols

The footer should show the text <footer> and a copyright symbol, but the code is wrong. Fix it.

<p>This text lives in a <footer> element.</p>
<p>(c) 2026 Bloom Studio</p>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The first paragraph shows "<footer>" as text
  • No real footer element was created
  • The copyright symbol is shown

31Figure, Time & Progress

Read the lesson
Fill in the blankseasyFigure, Time & Progress

Complete the caption element inside the figure.

<figure>
  <img src="map.png" alt="Map of the route">
  <>Our walking route</>
</figure>
Multiple choiceeasyFigure, Time & Progress

Which element highlights search matches?

Multiple choicemediumFigure, Time & Progress

Which datetime value is valid for 5 June 2026?

Multiple choicemediumFigure, Time & Progress

Which element suits a phone battery level?

Fix the bugmediumFigure, Time & Progress

Fix the markup: the caption should be a figcaption inside the figure, and the date needs a valid datetime of 2026-09-01.

<figure>
  <img src="team.jpg" alt="Our team at the summer party" width="200" height="120">
</figure>
<p class="caption">The team in summer.</p>
<p>Updated <time datetime="1 Sept">1 September</time></p>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The caption is a figcaption inside the figure
  • The time has a valid datetime

32Audio & Video

Read the lesson
Fill in the blankseasyAudio & Video

Show the player buttons and a cover image.

<video src="cats.mp4"  ="cats-cover.jpg" width="480"></video>
Multiple choicemediumAudio & Video

Which attribute is required for autoplay to work in modern browsers?

Multiple choicemediumAudio & Video

Which element adds captions to a video?

Fix the bugmediumAudio & Video

This background video never plays. Make it autoplay correctly, loop, and play inline on phones.

<video autoplay width="300">
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
</video>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The video is muted
  • The video loops
  • The video plays inline
  • Still autoplays

33Canvas

Read the lesson
Fill in the blankseasyCanvas

Get the 2D drawing context.

<script>
  const ctx = canvas.('2d');
</script>
Multiple choiceeasyCanvas

Where is the point (0, 0) on a canvas?

Multiple choicemediumCanvas

What does arc(50, 50, 20, 0, Math.PI * 2) describe?

Multiple choicemediumCanvas

When is SVG usually better than canvas?

Fix the bugmediumCanvas

Nothing is drawn: the context is requested with the wrong name and the colour is set after drawing. Fix it so the square is green.

<canvas id="c" width="120" height="120">A green square</canvas>
<script>
  const ctx = document.getElementById('c').getContext('two-d');
  ctx.fillRect(10, 10, 100, 100);
  ctx.fillStyle = 'green';
</script>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The centre pixel is green
  • No errors

34SVG

Read the lesson
Fill in the blankseasySVG

Complete the circle's radius attribute.

<svg viewBox="0 0 100 100"><circle cx="50" cy="50" ="40" fill="teal" /></svg>
Multiple choiceeasySVG

What's the main advantage of SVG over PNG for icons?

Multiple choicemediumSVG

What does viewBox="0 0 24 24" define?

Multiple choicemediumSVG

How do you make an icon use the same colour as the text around it?

Fix the bugmediumSVG

The icon is decorative (the button has text) but screen readers announce it, and its colour is fixed black. Hide it from assistive technology and make it follow the text colour.

<button type="button" style="color: white; background: #15803d; padding: 8px 12px; border: 0">
  <svg viewBox="0 0 24 24" width="18" height="18"><path d="M4 12l5 5L20 6" fill="none" stroke="#000000" stroke-width="3"/></svg>
  Done
</button>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The SVG is hidden from screen readers
  • The path uses currentColor

35Scripts in HTML

Read the lesson
Fill in the blankseasyScripts in HTML

Load the script without blocking the page and keep its order.

<script src="js/menu.js" ></script>
Multiple choiceeasyScripts in HTML

Which attribute loads an external JavaScript file?

Multiple choicemediumScripts in HTML

What's the main difference between async and defer?

Multiple choicemediumScripts in HTML

When is the content inside noscript shown?

Fix the bugmediumScripts in HTML

The script runs before the paragraph exists and can't find it. Fix it by moving the script after the paragraph.

<script>
  document.getElementById('msg').textContent = 'Updated by JavaScript';
</script>
<p id="msg">Original text</p>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The paragraph was updated
  • No errors

36Head & Meta Tags

Read the lesson
Fill in the blankseasyHead & Meta Tags

Complete the two most important SEO tags.

<>Learn Guitar Chords | StrumSchool</title>
<meta name="" content="Learn the 10 chords that unlock 1000 songs.">
Multiple choiceeasyHead & Meta Tags

Which tag makes a page display properly on phones?

Multiple choicemediumHead & Meta Tags

What does rel="canonical" tell search engines?

Fix the bugmediumHead & Meta Tags

This head is missing a viewport tag, the script blocks loading, and the title is just "Page". Fix all three (choose any descriptive title).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page</title>
  <script src="data:text/javascript,"></script>
</head>
<body><h1>Moon Phases Explained</h1></body>
</html>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • A viewport meta tag exists
  • The title is more descriptive than "Page"
  • The script uses defer

37SEO Meta & Schema

Read the lesson
Fill in the blankseasySEO Meta & Schema

Complete the tag that gives search engines a summary of the page.

<meta name="" content="Learn to bake sourdough bread at home in 10 simple steps.">
Multiple choiceeasySEO Meta & Schema

About how long should a page title be for search results?

Multiple choicemediumSEO Meta & Schema

What does a canonical link tell search engines?

Multiple choicemediumSEO Meta & Schema

Which tags control link previews on Facebook and LinkedIn?

Fix the bugmediumSEO Meta & Schema

This page's head is missing key SEO tags. Add a specific <title>, a meta description of at least 120 characters, and a canonical link to https://example.com/lamps.

<title>Page</title>
<h1>Desk Lamps</h1>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Title mentions Desk Lamps
  • Description is 120 to 160 characters
  • Canonical link set

38Accessibility

Read the lesson
Fill in the blankseasyAccessibility

Give the icon-only search button an accessible name.

<button type="button" ="Search">🔍</button>
Multiple choiceeasyAccessibility

What's the first rule of ARIA?

Multiple choicemediumAccessibility

Which key do keyboard users press to move to the next link or button?

Fix the bughardAccessibility

Make this mini form accessible: connect the label, give the image alt text, and turn the clickable div into a real submit button.

<img src="https://picsum.photos/id/292/120/80" width="120" height="80">
<form>
  <label>Your email</label>
  <input type="email" id="news-email" name="email">
  <div onclick="this.closest('form').requestSubmit()">Subscribe</div>
</form>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Image has alt text
  • Label is connected to the input
  • There's a real submit button
  • No clickable div left

39Responsive Images

Read the lesson
Fill in the blanksmediumResponsive Images

Tell the browser the real widths of each file.

<img src="dog-800.jpg" srcset="dog-400.jpg , dog-800.jpg " sizes="100vw" alt="Happy dog">
Multiple choicemediumResponsive Images

Which element must always be inside <picture>?

Multiple choicehardResponsive Images

What does sizes="(max-width: 600px) 100vw, 600px" mean?

Fix the bughardResponsive Images

This <picture> puts the alt text in the wrong place and has no fallback <img>. Fix it so the WebP source stays, and add an <img src="https://placehold.co/300x150?text=JPG" alt="Product photo">.

<picture>
  <source type="image/webp" srcset="https://placehold.co/300x150/webp?text=WEBP" alt="Product photo">
</picture>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • There's an img inside picture
  • The img has the alt text
  • The source has no alt
  • The WebP source is kept

40Responsive Design

Read the lesson
Fill in the blankseasyResponsive Design

Complete the viewport tag.

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

What happens on a phone without the viewport meta tag?

Multiple choicemediumResponsive Design

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

Multiple choicemediumResponsive Design

Which input shows a phone number keypad?

Fix the bugmediumResponsive Design

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

41Page Speed

Read the lesson
Fill in the blankseasyPage Speed

Delay loading an image that's far down the page.

<img src="footer-map.png" alt="Map" width="600" height="300" loading="">
Multiple choiceeasyPage Speed

What do width and height attributes on an image prevent?

Multiple choicemediumPage Speed

Which image should get fetchpriority="high"?

Multiple choicemediumPage Speed

What does rel="preconnect" do?

Fix the bugmediumPage Speed

Fix the images: the hero (first) image must not be lazy and should have high priority, and the second image needs width and height (400 by 300) and lazy loading.

<img class="hero" src="https://picsum.photos/seed/h/800/400" alt="Hero" width="800" height="400" loading="lazy">
<img class="second" src="https://picsum.photos/seed/s/400/300" alt="Second">
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Hero is not lazy and has high priority
  • Second image has dimensions
  • Second image is lazy

42Details & Dialog

Read the lesson
Fill in the blankseasyDetails & Dialog

Complete the accordion.

<>
  <>Shipping info</summary>
  <p>Free over £30.</p>
</details>
Multiple choicemediumDetails & Dialog

How do you make a <details> start expanded?

Multiple choicemediumDetails & Dialog

Which method opens a dialog as a modal?

Fix the bugmediumDetails & Dialog

The progress bar should show 3 out of 5 steps, and the FAQ answer should be hidden behind a clickable summary. Fix both.

<progress value="3"></progress>
<details>
  <p>Where are you based?</p>
  <p>Glasgow, Scotland.</p>
</details>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • progress max is 5
  • details has a summary with the question

43HTML5 APIs

Read the lesson
Fill in the blankseasyHTML5 APIs

Make the button open the popover with id "help".

<button ="help">Help</button>
<div id="help" popover>Contact us any time.</div>
Multiple choiceeasyHTML5 APIs

Which attribute makes an element draggable?

Multiple choicemediumHTML5 APIs

What must happen before Geolocation returns a position?

Multiple choicemediumHTML5 APIs

What happens when you click outside an open auto popover?

Fix the bugmediumHTML5 APIs

The popover never opens: the button points to the wrong id and the popover element is missing its attribute. Fix both.

<button popovertarget="#share">Share</button>
<div id="share">Copy link | Email | Message</div>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The button targets "share"
  • The div is a popover
  • The popover is hidden until opened

44Best Practices

Read the lesson
Fill in the blankseasyBest Practices

Complete the encoding declaration.

<meta charset="">
Multiple choiceeasyBest Practices

Which tool checks HTML against the standard?

Multiple choicemediumBest Practices

What does a space become in URL encoding?

Multiple choicemediumBest Practices

Which class name follows good practice?

Fix the bugmediumBest Practices

Clean up this markup: lowercase the tags, quote the attribute, and move the div out of the paragraph.

<P CLASS=intro>Welcome <DIV>to our shop</DIV></P>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The paragraph has class intro
  • The div is not inside the paragraph
  • The source uses lowercase tags

Next steps

Take the HTML QuizTimed, with explanations HTML Cheat SheetQuick syntax lookup Build a projectPut it all together All exercisesEvery language
Esc
↑↓ to navigateEnter to open