HTML182 questions in the bank

HTML Quiz: Test Your HTML Knowledge

Pick how many questions you want, choose a difficulty and go. You'll see why each answer is right or wrong, then you can retry to beat your score.

Questions
Difficulty
Topic
Mode

  1. Which of these is the correct way to write a paragraph?

    • <p>Hello<p>
    • <paragraph>Hello</paragraph>
    • </p>Hello<p>
    • <p>Hello</p>

  2. HTML is a programming language.

    • True
    • False

  3. Which file extension do HTML files usually use?

    • .html
    • .ht
    • .txt
    • .web

  4. What does the browser show from <h1>Welcome</h1>?

    • <h1>Welcome</h1> exactly as written
    • Nothing, because tags hide content
    • The word "Welcome" as a large heading
    • An error message

  5. Which of these do you need to start writing HTML?

    • A paid program
    • An internet connection
    • A text editor and a browser
    • A web server

  6. What does the VS Code extension Live Server do?

    • Publishes your site on the internet
    • Reloads the browser automatically when you save
    • Checks your spelling
    • Converts HTML to CSS

  7. Why should you avoid spaces in HTML file names?

    • Browsers can't open them at all
    • HTML forbids spaces anywhere
    • They make the file larger
    • They become %20 in links and are easy to mistype

  8. What must be the very first line of an HTML page?

    • <!DOCTYPE html>
    • <html>
    • <head>
    • <body>

  9. Which part of the page contains the visible content?

    • head
    • title
    • body
    • meta

  10. What does <meta charset="UTF-8"> do?

    • Allows the page to display characters from any language, including emoji
    • Makes the page load faster
    • Sets the page font
    • Makes the page work on phones

  11. The lang attribute in <html lang="en"> helps…

    • the page load in English-speaking countries only
    • screen readers pronounce words correctly and search engines know the language
    • translate the page automatically
    • Nothing, because it's optional decoration

  12. What is an HTML element?

    • Only the start tag
    • Only the content
    • A CSS file
    • The start tag, the content and the end tag together

  13. HTML tags should be written in…

    • lowercase
    • UPPERCASE
    • Any mix, but <P> is recommended
    • Title Case

  14. How many elements are in <p>Hi <em>there</em></p>?

    • 1
    • 2
    • 3
    • 4

  15. What happens to three spaces between two words in HTML content?

    • They all show
    • They become a line break
    • They collapse into a single space
    • The browser shows an error

  16. Which attribute tells a link where to go?

    • src
    • href
    • link
    • go

  17. Which attribute describes an image for screen readers?

    • alt
    • title
    • src
    • describe

  18. Which of these is a boolean attribute?

    • href
    • class
    • required
    • src

  19. What is a "global attribute"?

    • An attribute that can be used on any element, like id or class
    • An attribute that only works on <html>
    • An attribute that affects every page on a site
    • An attribute written in capital letters

  20. Which heading is the most important?

    • <h3>
    • <h6>
    • <heading>
    • <h1>

  21. There is an <h7> tag in HTML.

    • False
    • True

  22. You want some text to look big, but it isn't a section title. What should you do?

    • Use <h1> because it's big
    • Use a paragraph and make it big with CSS
    • Use <h6> so it's less important
    • Use several <br> tags

  23. Why do screen-reader users care about headings?

    • Screen readers read headings in a louder voice
    • Headings are the only text a screen reader reads
    • They can jump between headings to skim the page
    • They don't, because headings are visual only

  24. What does the <hr> element represent?

    • A heading row
    • A hidden region
    • A hyperlink reference
    • A thematic break between sections

  25. Which element keeps spaces and line breaks exactly as typed?

    • <p>
    • <span>
    • <pre>
    • <keep>

  26. Does <br> need a closing tag?

    • No, it's a void element
    • Yes, </br>
    • Only inside paragraphs
    • Only in old HTML

  27. Which tag highlights text like a highlighter pen?

    • <mark>
    • <highlight>
    • <em>
    • <hl>

  28. Which element is best for a long, separate quotation?

    • <q>
    • <quote>
    • <cite>
    • <blockquote>

  29. What does <abbr title="HyperText Markup Language">HTML</abbr> do?

    • Makes HTML bold
    • Marks HTML as an abbreviation and shows the full form on hover
    • Hides the text
    • Creates a link

  30. Does the browser add quotation marks around <q> automatically?

    • Yes
    • No
    • Only with CSS
    • Only in English

  31. What does the cite attribute on <blockquote> hold?

    • The author's name
    • The date
    • The URL of the source
    • A visible caption

  32. Which element suits an author's email and phone number at the end of an article?

    • footer only
    • address
    • contact
    • cite

  33. How do browsers usually show <abbr title="...">?

    • With a dotted underline and a tooltip on hover
    • In bold
    • In capitals
    • They hide it

  34. Why use quotation elements instead of italics or indentation?

    • They load faster
    • CSS can't style plain paragraphs
    • They are required by HTML5
    • They describe what the content is, which helps screen readers and search engines

  35. Which element is used for short code inside a sentence?

    • code
    • pre
    • samp
    • script

  36. What does <samp> represent?

    • Sample images
    • A code comment
    • Output from a program
    • A keyboard key

  37. What is the standard markup for a block of code?

    • <code><pre>
    • <block>
    • <script>
    • <pre><code>

  38. Which entity displays a less-than sign?

    • &lt;
    • &gt;
    • &amp;
    • &less;

  39. Why add overflow-x: auto to code blocks?

    • To hide long lines
    • So long lines scroll inside the block instead of widening the whole page on phones
    • To add syntax colours
    • To wrap every line

  40. Which is a correct HTML comment?

    • // comment
    • <!-- comment -->
    • /* comment */
    • # comment

  41. What's the keyboard shortcut to toggle a comment in most code editors?

    • Ctrl + C
    • Ctrl + H
    • Alt + C
    • Ctrl + /

  42. Why should you never put a password in an HTML comment?

    • It will break the page
    • Comments are limited to 10 characters
    • Anyone can read it by viewing the page source
    • Browsers delete comments

  43. What does the style attribute contain?

    • HTML tags
    • CSS declarations
    • JavaScript
    • A file name

  44. In rgb(255 0 0), what colour is shown?

    • Green
    • Red
    • Blue
    • Black

  45. What does the value after the slash in rgb(0 0 0 / 50%) control?

    • Transparency (alpha)
    • Brightness
    • Hue
    • Size

  46. Which colour format makes it easiest to create lighter and darker shades?

    • Names
    • HEX
    • HSL
    • None

  47. Why are inline styles avoided for whole websites?

    • Browsers ignore them
    • They don't support colours
    • They must be repeated on every element and are hard to update consistently
    • They make pages invalid

  48. What does the a in <a> stand for?

    • address
    • anchor
    • action
    • attribute

  49. Which attribute opens a link in a new tab?

    • new="tab"
    • href="_new"
    • target="_blank"
    • open="tab"

  50. <a href="images/logo.png"> is an example of…

    • an absolute URL
    • an email link
    • a broken link
    • a relative URL

  51. What does href="../about.html" point to?

    • about.html in the parent folder
    • about.html in a sub-folder
    • about.html on another website
    • The about section of the current page

  52. What does ../ mean in a path?

    • The current folder
    • The website root
    • Go up one folder
    • The home page

  53. Why are relative paths useful?

    • They load faster than absolute URLs
    • The site keeps working if it moves to a new domain
    • They're required for images
    • They hide files

  54. Where can you see which files failed to load?

    • In the HTML source only
    • In the address bar
    • Nowhere
    • In the browser developer tools, Console and Network tabs

  55. What does about.html#team link to?

    • The element with id="team" on about.html
    • A file called team
    • The team folder
    • A new tab

  56. Why should file names avoid spaces?

    • Spaces are invalid in HTML
    • Servers delete them
    • Images can't have spaces
    • Spaces become %20 in URLs and cause mistakes

  57. Does <img> have a closing tag?

    • Yes, </img>
    • No, it's a void element
    • Only when it has a caption
    • Only in HTML5

  58. When should alt be empty (alt="")?

    • When the image is purely decorative
    • When you're in a hurry
    • Never
    • When the image has a caption

  59. What does loading="lazy" do?

    • Loads a low-quality version
    • Slows the page on purpose
    • Hides the image
    • Waits to download the image until it's near the screen

  60. Which format is best for a logo that must stay sharp at every size?

    • JPG
    • GIF
    • SVG
    • BMP

  61. What does <li> stand for?

    • line
    • list item
    • link
    • list index

  62. Which attribute makes an ordered list count down?

    • down
    • start="-1"
    • reversed
    • order="desc"

  63. Which elements make up a description list?

    • <ul>, <li>
    • <dl>, <li>
    • <desc>, <term>
    • <dl>, <dt>, <dd>

  64. Which element should you use for a clickable action on the page?

    • button
    • div
    • span
    • p

  65. What does type="reset" do?

    • Reloads the page
    • Deletes the form
    • Restores every form field to its starting value
    • Submits the form

  66. What does the disabled attribute do?

    • Makes the button unclickable and unfocusable
    • Hides the button
    • Changes its colour to red
    • Removes it from the form

  67. What's a good minimum size for a button on touch screens?

    • 10 by 10 pixels
    • 20 by 20 pixels
    • About 44 by 44 pixels
    • 200 by 200 pixels

  68. Why is a styled div worse than a button?

    • Divs can't be styled
    • It loads slower
    • It can't have click events
    • It lacks keyboard focus, Enter and Space activation, and a button role for screen readers

  69. What does <tr> stand for?

    • table record
    • table row
    • text row
    • top row

  70. Which element gives a table a title that screen readers announce?

    • <caption>
    • <title>
    • <th>
    • <legend>

  71. Should you use tables to lay out a whole web page?

    • Yes, it's the standard way
    • Only on mobile
    • No, use CSS Flexbox or Grid; tables are for data
    • Only for footers

  72. In a row where one cell has rowspan="2", what happens to the next row?

    • It needs an extra cell
    • Nothing changes
    • It needs one fewer cell, because that space is taken
    • It's deleted

  73. Which element is used for a multi-line text box?

    • <input type="multiline">
    • <textarea>
    • <textbox>
    • <input rows="4">

  74. What happens to an input that has no name attribute when the form is submitted?

    • It's sent with a random name
    • The form refuses to submit
    • Its value isn't sent at all
    • It's sent as "undefined"

  75. How do you make radio buttons a "choose one" group?

    • Put them in a <ul>
    • Give them the same id
    • Use type="group"
    • Give them the same name

  76. What is <legend> used for?

    • The title of a <fieldset> group
    • A form's footer text
    • Tooltip text for inputs
    • A map key

  77. Which element creates a dropdown list?

    • dropdown
    • list
    • select
    • option alone

  78. What is sent to the server for a selected option?

    • Its value attribute (or its text if there's no value)
    • The visible text always
    • Its index
    • Nothing

  79. How do checkboxes differ from radio buttons?

    • Checkboxes allow one choice
    • They're identical
    • Radio buttons can't be pre-selected
    • Checkboxes allow several choices; radio buttons allow one per group

  80. What does a datalist provide?

    • Suggestions while typing, without restricting the value
    • A fixed list users must choose from
    • A table of data
    • Validation messages

  81. Why shouldn't a placeholder replace a label?

    • Placeholders aren't valid HTML
    • Placeholders are sent with the form
    • It disappears when typing and is often hard to read, leaving the field unlabelled
    • Screen readers ignore labels

  82. Which input type shows a slider?

    • range
    • slider
    • scale
    • number

  83. What does the step attribute do on a number input?

    • Sets how many inputs appear
    • Sets the allowed increments, like 0.5
    • Moves the cursor
    • Limits the number of characters

  84. Which attribute limits a file input to images?

    • type="image"
    • only="images"
    • filter="img"
    • accept="image/*"

  85. What's the difference between readonly and disabled?

    • Read-only values are still submitted; disabled values are not
    • No difference
    • Disabled values are submitted; read-only aren't
    • Read-only only works on checkboxes

  86. What happens when you submit a form with an empty required field?

    • It's sent anyway
    • The browser blocks it and shows a message
    • The page reloads
    • The field is filled automatically

  87. Is HTML validation enough to protect your server?

    • Yes
    • Only with pattern
    • Only for passwords
    • No, the server must validate too

  88. What does autocomplete="new-password" help with?

    • Telling password managers to suggest a new strong password
    • Blocking autofill
    • Validating the password
    • Hiding the password

  89. What's the difference between :invalid and :user-invalid?

    • They're identical
    • :invalid is only for numbers
    • :user-invalid only applies after the user has interacted with the field
    • :user-invalid is a JavaScript method

  90. What does novalidate on a form do?

    • Removes all fields
    • Validates on the server
    • Turns off the browser's built-in validation, usually so JavaScript can handle it
    • Hides error messages forever

  91. Block elements start on a new line.

    • True
    • False

  92. Which pair is generic (has no meaning of its own)?

    • <nav> and <a>
    • <section> and <strong>
    • <header> and <em>
    • <div> and <span>

  93. How wide is an inline element by default?

    • 100% of the page
    • 50%
    • As wide as its content
    • It has no width

  94. In CSS, how do you select elements with class="box"?

    • #box
    • box
    • *box
    • .box

  95. Can one element have more than one class?

    • No, only one
    • Yes, separated by commas
    • Yes, separated by spaces
    • Only if it has no id

  96. Which is a good use for an id?

    • Styling every button
    • The target of a jump link like #contact
    • Styling all paragraphs
    • Grouping list items

  97. What must a custom data attribute name start with?

    • x-
    • custom-
    • data-
    • my-

  98. What does el.dataset.state = 'open' do?

    • Adds or updates data-state="open" on the element
    • Nothing
    • Creates a new element
    • Changes the class

  99. Which is a good use of a data attribute?

    • The page's main heading text
    • A password
    • The alt text of an image
    • Storing which category a product belongs to

  100. What does content: attr(data-label) do in CSS?

    • Sets a variable
    • Hides the element
    • Validates the attribute
    • Shows the data-label value as generated text

  101. Why should data attribute names use hyphens instead of capitals?

    • HTML lowercases attribute names, so camelCase names don't map to dataset as expected
    • Capitals are slower
    • Hyphens are required by CSS
    • Capitals aren't allowed in HTML at all

  102. How many <main> elements should a page have?

    • One
    • One per section
    • As many as you like
    • None

  103. Do semantic elements look different from a <div> by default?

    • Mostly no. They behave like blocks; the benefit is meaning
    • Yes, very different
    • They're invisible
    • They're always bold

  104. What is the purpose of the datetime attribute on <time>?

    • To show a clock
    • To format the date automatically
    • To set the page's timezone
    • To give a machine-readable date while the visible text stays friendly

  105. How many main elements should a page have?

    • Any number
    • One
    • Two
    • None

  106. Which CSS tool is best for the overall page grid of rows and columns?

    • float
    • CSS Grid
    • position: absolute
    • tables

  107. What does position: sticky do on a header?

    • Removes it on scroll
    • Makes it fixed width
    • Hides it on mobile
    • Keeps it visible at the top while the page scrolls

  108. Why limit the width of text columns?

    • To save bandwidth
    • Browsers require it
    • Lines of about 60 to 80 characters are easier to read
    • For SEO only

  109. Why write HTML in reading order even if CSS moves things around?

    • It loads faster
    • CSS can't move elements
    • Search engines ignore CSS
    • Keyboard, screen-reader and small-screen users follow the HTML order

  110. What is an iframe used for?

    • Embedding another web page inside yours
    • Drawing frames around images
    • Making forms
    • Adding borders

  111. Why should you add title to an iframe?

    • It changes the browser tab title
    • It tells screen-reader users what the frame contains
    • It's required for it to load
    • It shows a tooltip only

  112. Some websites appear blank when put in an iframe. Why?

    • Iframes only show images
    • The width is too small
    • Iframes don't support HTTPS
    • Those sites send security headers that forbid being framed

  113. What does youtube-nocookie.com do?

    • Removes adverts
    • Makes videos load faster
    • Hides the YouTube logo
    • Avoids setting tracking cookies until the video is played

  114. How do you start an embedded YouTube video at 2 minutes?

    • ?time=2m
    • ?start=120
    • #120
    • ?seek=2

  115. Why include the address as text next to an embedded map?

    • Maps require it
    • To improve map accuracy
    • So it's readable if the map doesn't load and for screen-reader and search engine users
    • It isn't useful

  116. What is a facade for an embedded video?

    • A lightweight thumbnail and play button that loads the real player only on click
    • A fake video
    • A video filter
    • A CSS animation

  117. Why is <embed> usually avoided for PDFs?

    • It's not valid HTML
    • It only works with images
    • It has no fallback content, so nothing helpful shows when the PDF can't be displayed
    • It requires JavaScript

  118. Every named entity starts with which character?

    • #
    • &
    • <
    • $

  119. With <meta charset="UTF-8">, can you type emoji directly in HTML?

    • No, you must use entities
    • Only in headings
    • Yes
    • Only in comments

  120. What is &#169;?

    • An error
    • A colour code
    • A comment
    • A numeric entity (it's ©)

  121. What does figure usually contain?

    • Only text paragraphs
    • Self-contained content such as an image, chart or code listing, often with a caption
    • Navigation links
    • Form fields

  122. What does a progress element with no value attribute show?

    • An indeterminate bar for a task of unknown length
    • An empty bar
    • A full bar
    • Nothing

  123. What does the datetime attribute provide?

    • The visible text
    • A countdown
    • A time zone converter
    • A machine-readable version of the date or time

  124. Does figcaption replace an image's alt text?

    • No, alt describes the image while the caption adds context
    • Yes
    • Only for charts
    • Only on mobile

  125. What do the low, high and optimum attributes of meter control?

    • The bar's size
    • Animation speed
    • Which ranges count as good or bad, which changes the colour browsers use
    • Accessibility labels

  126. Which attribute shows play/pause buttons?

    • controls
    • buttons
    • player
    • ui

  127. Why list several <source> elements?

    • To play them all at once
    • So each browser can pick a format it supports
    • To make the video longer
    • It's required for audio only

  128. What file format do captions for <track> use?

    • .txt
    • .srt only
    • .mp4
    • .vtt (WebVTT)

  129. What draws on a canvas?

    • JavaScript
    • CSS
    • HTML attributes
    • The browser automatically

  130. What do the width and height attributes of canvas control?

    • The number of drawing pixels
    • Only the visible size
    • The border
    • The zoom level

  131. Which method writes text on a canvas?

    • drawText
    • writeText
    • text
    • fillText

  132. Why do canvases look blurry on high-resolution screens?

    • Canvas doesn't support colour
    • Browsers compress them
    • Each canvas pixel is stretched over several screen pixels
    • The fallback text overlaps

  133. Why is canvas content not accessible by default?

    • It's always hidden
    • It's just pixels, with no elements or text that assistive technology can read
    • It requires a plug-in
    • Canvas can't be used with keyboards

  134. What does SVG stand for?

    • Scalable Vector Graphics
    • Simple Vector Graphics
    • Styled Visual Graphics
    • Static Vector Grid

  135. Which attribute colours the inside of an SVG shape?

    • color
    • background
    • fill
    • stroke

  136. How should a decorative SVG icon next to visible text be marked?

    • role="img"
    • aria-hidden="true"
    • alt=""
    • title=""

  137. When is an SVG file in an img tag better than inline SVG?

    • When you need CSS hover effects on parts of it
    • For icons that change colour
    • Never
    • For large, unchanging graphics that benefit from browser caching

  138. What does the path command M do?

    • Moves the pen to a point without drawing
    • Draws a curve
    • Closes the path
    • Mirrors the shape

  139. What does a plain script tag without defer or async do while it loads?

    • Blocks the browser from building the rest of the page
    • Nothing
    • Loads in the background
    • Runs last

  140. Which kind of script can use import and export?

    • Any inline script
    • A script with type="module"
    • A script with async
    • Only scripts in the body

  141. Why prefer external script files for most code?

    • They're cached by the browser and easier to maintain
    • They run faster than inline code
    • Inline scripts are invalid
    • They can't be blocked

  142. Which is a good fit for async?

    • A script that needs a library loaded first
    • A module
    • Inline code
    • An independent analytics script

  143. What is progressive enhancement?

    • Loading scripts gradually
    • Upgrading browsers
    • Building a working page in HTML first, then adding JavaScript improvements on top
    • Using only modules

  144. Is the <head> content visible on the page?

    • Yes
    • Only the meta tags
    • No
    • Only on mobile

  145. Roughly how long should a meta description be?

    • 10 characters
    • About 150 to 160 characters
    • 50 characters
    • 1000 characters

  146. What is og:image used for?

    • The favicon
    • The background image
    • The picture shown when the link is shared on social media
    • Image SEO alt text

  147. What does defer do on a script tag?

    • Delays the script by 5 seconds
    • Prevents the script from running
    • Runs it before the page loads
    • Downloads it in parallel and runs it after the HTML is parsed

  148. Where do SEO meta tags go?

    • At the end of the body
    • In the head
    • Inside the h1
    • In a footer

  149. What does meta robots noindex do?

    • Speeds up indexing
    • Removes images
    • Asks search engines not to show the page in results
    • Hides the page from visitors

  150. What format is recommended for structured data?

    • Microdata in comments
    • CSV
    • XML sitemaps
    • JSON-LD in a script type="application/ld+json"

  151. What size works well for an Open Graph image?

    • 16 by 16 pixels
    • About 1200 by 630 pixels
    • 100 by 100 pixels
    • 4000 by 4000 pixels

  152. Why should structured data match the visible page?

    • It loads faster
    • JSON-LD requires it technically
    • Browsers display it
    • Search engines check it, and misleading markup can lose rich results or bring penalties

  153. What does "a11y" mean?

    • Ally, a JavaScript library
    • An HTML attribute
    • Version 11 of HTML
    • Accessibility (a + 11 letters + y)

  154. Which attribute announces changing content to screen readers?

    • aria-hidden
    • aria-change
    • aria-live
    • role="alert-me"

  155. What is WCAG?

    • A CSS framework
    • The Web Content Accessibility Guidelines
    • A screen reader
    • A Google ranking tool

  156. Why is outline: none on focus a problem?

    • Keyboard users can no longer see which element is focused
    • It slows the page down
    • It breaks links
    • It's invalid CSS

  157. What does the 2x in srcset="logo@2x.png 2x" mean?

    • Make the image twice as big on screen
    • Load it twice
    • It's 2 KB
    • Use this file on screens with double pixel density (retina)

  158. Why put AVIF and WebP sources before a JPG <img>?

    • They look different
    • Browsers that support the smaller modern formats use them; others fall back to JPG
    • JPG must always be last for SEO
    • To show all three

  159. What is "art direction" in responsive images?

    • Choosing image colours
    • Adding captions
    • Showing a different crop or image at different screen sizes
    • Compressing images

  160. 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

  161. 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

  162. 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

  163. 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

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

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

  165. What does CLS measure?

    • Load time
    • Server speed
    • Image quality
    • How much the layout jumps around while loading

  166. What does LCP measure?

    • The number of links
    • How long the largest visible element takes to appear
    • Code length
    • Colour contrast

  167. Which tool can audit a page's performance in Chrome?

    • View source
    • The address bar
    • Lighthouse in DevTools
    • Print preview

  168. Why is preloading many files a bad idea?

    • It removes the priority benefit and competes with critical downloads
    • Preload is deprecated
    • Browsers ignore more than one
    • It breaks images

  169. What does decoding="async" on an image suggest?

    • Download later
    • Lower quality
    • The browser may decode the image off the main thread so it doesn't hold up other work
    • Convert the format

  170. Which element is the clickable heading of a <details> element?

    • <legend>
    • <caption>
    • <title>
    • <summary>

  171. What does <form method="dialog"> do inside a dialog?

    • Sends data to the server
    • Opens another dialog
    • Nothing
    • Closes the dialog and sets its returnValue

  172. Which element is best for "disk 90% full"?

    • <progress>
    • <range>
    • <meter>
    • <bar>

  173. Does the popover attribute need JavaScript to work?

    • Yes, always
    • Only for menus
    • No, a button with popovertarget can open it
    • Only in Chrome

  174. Which event must call preventDefault to allow dropping?

    • dragover
    • dragstart
    • drop
    • dragend

  175. What does contenteditable="true" do?

    • Makes text bold
    • Lets users edit the element's content directly
    • Saves text to the server
    • Turns the element into a textarea that submits with forms

  176. What's a good practice when a feature needs location?

    • Request it on page load
    • Hide the prompt
    • Ask when the user clicks a clearly labelled button, and offer an alternative
    • Require it for the whole site

  177. Why offer buttons as well as drag and drop for reordering?

    • Buttons are faster
    • Drag and drop is deprecated
    • Browsers require it
    • Drag and drop isn't usable by keyboard users and doesn't work everywhere on touch screens

  178. Where should the charset meta tag go?

    • First in the head
    • At the end of the body
    • In the footer
    • Anywhere

  179. What happens if two elements share an id?

    • Both are styled correctly
    • Labels, links and scripts only find the first, and the page is invalid
    • The page won't load
    • Nothing at all

  180. Can a div go inside a p?

    • Yes
    • No, paragraphs can only contain inline content
    • Only with a class
    • Only in HTML5

  181. Which JavaScript function encodes a value for a URL?

    • escapeHTML
    • toURL
    • urlEncode
    • encodeURIComponent

  182. Why validate HTML if browsers display it anyway?

    • Browsers require valid HTML
    • Hidden errors can behave differently across browsers and break accessibility, styling and scripts
    • Validation makes pages faster
    • Search engines reject invalid pages
RelaxedNo clock. Read the explanation after each answer.
Timed30 seconds per question. Great for revision.
Exam modeNo feedback until the end, then a full review.

About the HTML quiz

The question bank holds 182 questions drawn from 44 HTML lessons: 51 easy, 100 medium and 31 hard. Every time you start, the quiz picks a fresh random selection that matches your settings, so retaking it is a good way to practise. After each answer, or at the end in exam mode, you'll see why the right answer is right, and every question you miss links back to the lesson that teaches it.

What the HTML quiz covers

Basics

  1. 1Introduction to HTML4 questions
  2. 2HTML Editors & Your First File3 questions
  3. 3HTML Page Structure4 questions
  4. 4HTML Elements4 questions
  5. 5HTML Attributes4 questions
  6. 6HTML Headings4 questions
  7. 7HTML Paragraphs3 questions
  8. 8HTML Text Formatting3 questions
  9. 9HTML Quotations and Citations5 questions
  10. 10Showing Code in HTML5 questions
  11. 11HTML Comments3 questions
  12. 12HTML Colors and Inline Styles5 questions
  13. 13HTML Links4 questions
  14. 14HTML File Paths and URLs5 questions
  15. 15HTML Images4 questions
  16. 16HTML Lists3 questions
  17. 17HTML Buttons5 questions

Intermediate

  1. 18HTML Tables4 questions
  2. 19HTML Forms4 questions
  3. 20HTML Form Controls5 questions
  4. 21HTML Input Types4 questions
  5. 22HTML Form Validation5 questions
  6. 23Block vs Inline: div and span3 questions
  7. 24HTML Classes and IDs3 questions
  8. 25HTML Data Attributes5 questions
  9. 26HTML Semantic Elements3 questions
  10. 27HTML Page Layout5 questions
  11. 28HTML Iframes3 questions
  12. 29Embedding Content in HTML5 questions
  13. 30HTML Entities & Symbols3 questions
  14. 31Figures, Dates, Highlights and Progress Bars5 questions

Advanced

  1. 32HTML Audio & Video3 questions
  2. 33HTML Canvas5 questions
  3. 34HTML SVG Graphics5 questions
  4. 35Adding JavaScript to HTML5 questions
  5. 36HTML Head & Meta Tags4 questions
  6. 37HTML for SEO: Meta Tags and Structured Data5 questions
  7. 38HTML Accessibility (a11y)4 questions
  8. 39HTML Responsive Images3 questions
  9. 40Responsive Web Design with HTML5 questions
  10. 41Faster Pages with HTML5 questions
  11. 42HTML Interactive Elements3 questions
  12. 43HTML5 Web APIs5 questions
  13. 44HTML Best Practices and Validation5 questions
Esc
↑↓ to navigateEnter to open