AbairTechSolutionDIGITAL SOLUTIONS FOR A SMARTER TOMORROW

Menu
HomeLive DemosMobile AppsBusiness SoftwareServicesKnowledge CenterInterview PrepContact

Home › Programming MCQs › HTML & CSS

HTML5 & CSS3 · 40 MCQs with explanations

HTML and CSS MCQ Questions and Answers: 40 Practice Questions with Explanations

By AbairTech Solution · From the team that designs and builds our client websites

Published by AbairTech Solution · Reviewed November 2026 · Editorial policy
How to use this page. Questions 1–12 cover HTML, 13–34 cover CSS and 35–40 cover performance and accessibility practices. Try each question before you open Show answer. The best way to check CSS answers is to change the property in your browser’s developer tools and watch what happens.

HTML and CSS study notes

HTML describes what content is – a heading, a paragraph, a navigation menu, a form. CSS describes how it looks. Keeping that split clean is what makes a site accessible, easy to restyle and understandable to search engines.

Selector Specificity (id, class, element)
p 0, 0, 1
.note 0, 1, 0
nav .menu a 0, 1, 2
#top 1, 0, 0
1–12 HTML13–22 Selectors, box model & layout23–34 Responsive CSS35–40 Best practice

Questions 1–12: HTML structure, semantics and forms

1. What does HTML stand for?

  1. High Tech Modern Language
  2. HyperText Markup Language
  3. Hyperlink and Text Management Language
  4. Home Tool Markup Language
Show answer

Answer: B. “Markup” means tags describe the structure of content; HTML is not a programming language.

2. What is the purpose of <!DOCTYPE html>?

  1. It links the CSS file
  2. It makes the page load faster
  3. It is a comment
  4. It tells the browser to render the page in standards mode
Show answer

Answer: D. Without it, browsers fall back to “quirks mode”, which imitates old browser bugs and can break layouts.

3. Which element should wrap a site’s main navigation links?

  1. <nav>
  2. <menu-bar>
  3. <navigation>
  4. <links>
Show answer

Answer: A. Screen-reader users can jump straight to the nav landmark. Only <nav> is a real HTML element among the options.

4. Why is the alt attribute on images important?

  1. It sets the image size
  2. It adds a tooltip in all browsers
  3. It provides text for screen readers, search engines and when the image fails to load
  4. It compresses the image
Show answer

Answer: C. Describe what the image shows. For purely decorative images, use an empty alt (alt="") so screen readers skip them.

5. How many <h1> headings should a typical page have?

  1. None
  2. One, describing the page’s main topic
  3. One per paragraph
  4. At least five
Show answer

Answer: B. HTML allows more, but one clear h1 followed by h2 and h3 in order gives the clearest outline for users and search engines.

6. Which of these elements is inline by default?

  1. <div>
  2. <p>
  3. <section>
  4. <span>
Show answer

Answer: D. Inline elements sit within a line of text and ignore width and height; block elements start on a new line and take the full width.

7. When a link opens in a new tab with target="_blank", what is good practice to add?

  1. rel="noopener"
  2. href="new"
  3. type="tab"
  4. window="new"
Show answer

Answer: A. It stops the new page from controlling the original through window.opener. Modern browsers apply this by default, but adding it is still common practice.

8. Which form method should be used to submit a login form?

  1. GET
  2. FETCH
  3. POST
  4. PUT, because it is a form
Show answer

Answer: C – POST. GET puts the data in the URL, where it ends up in browser history and server logs. Use HTTPS as well.

9. Which input type gives built-in email format validation and an email keyboard on phones?

  1. type="text"
  2. type="email"
  3. type="mail"
  4. type="address"
Show answer

Answer: B. Similarly, type="tel" shows a number pad. Always validate on the server too.

10. How do you link a <label> to an input with id="phone"?

  1. <label name="phone">
  2. <label id="phone">
  3. <label input="phone">
  4. <label for="phone">
Show answer

Answer: D. Screen readers then announce the label, and clicking the label focuses the input – a bigger tap target on mobile.

11. What does <meta name="viewport" content="width=device-width, initial-scale=1"> do?

  1. Makes mobile browsers use the device width instead of a zoomed-out desktop width
  2. Hides the page from search engines
  3. Sets the page title
  4. Loads the page faster
Show answer

Answer: A. Without it, media queries do not work as expected on phones and text appears tiny.

12. Which element suits a self-contained piece of content such as a blog post or news story?

  1. <aside>
  2. <div>
  3. <article>
  4. <span>
Show answer

Answer: C. An article makes sense on its own. <aside> is for related side content, such as a sidebar.

Questions 13–22: selectors, the box model, positioning and layout

13. Which selector has the highest specificity?

  1. .menu
  2. nav ul li a
  3. #menu
  4. a:hover
Show answer

Answer: C – #menu. One ID outweighs any number of classes and elements. Inline styles beat IDs, and !important beats both – use it sparingly.

14. What is the order of the box model, from inside to outside?

  1. Content, padding, border, margin
  2. Content, margin, border, padding
  3. Padding, content, border, margin
  4. Margin, border, padding, content
Show answer

Answer: A. Padding adds space inside the border (and takes the background colour); margin adds space outside it.

15. With box-sizing: border-box, an element has width: 300px; padding: 20px; border: 5px. How wide is it on screen?

  1. 350px
  2. 300px
  3. 340px
  4. 250px
Show answer

Answer: B – 300px. Padding and border fit inside the width. With the default content-box, it would be 300 + 40 + 10 = 350px.

16. An element with position: absolute is positioned relative to:

  1. Its previous sibling
  2. The browser window, always
  3. Its normal position
  4. Its nearest positioned ancestor (or the page if there is none)
Show answer

Answer: D. That is why a parent often gets position: relative – so an absolute badge or icon is placed inside it.

17. Which position value keeps a header in the flow until it reaches a scroll threshold, then fixes it in place?

  1. fixed
  2. static
  3. sticky
  4. relative
Show answer

Answer: C – sticky. position: sticky; top: 0; is how the header on this page stays visible. It needs a top (or other) offset to work.

18. What is the difference between display: none and visibility: hidden?

  1. display: none removes the element from layout; visibility: hidden hides it but keeps its space
  2. They are identical
  3. visibility: hidden removes the space
  4. display: none only works on images
Show answer

Answer: A. Both hide content from screen readers. To hide something visually but keep it readable by screen readers, use a “visually hidden” utility class.

19. In a flex container with the default flex-direction: row, what does justify-content: space-between control?

  1. Vertical alignment
  2. Distribution along the main (horizontal) axis
  3. Font spacing
  4. Wrapping onto new lines
Show answer

Answer: B. The first item goes to the start, the last to the end, with equal space between. If flex-direction is column, the main axis becomes vertical.

20. Which Flexbox property aligns items on the cross axis, such as centring them vertically in a row?

  1. justify-content
  2. flex-wrap
  3. order
  4. align-items
Show answer

Answer: D. display: flex; justify-content: center; align-items: center; is the classic way to centre something in both directions.

21. What does grid-template-columns: repeat(3, 1fr) create?

  1. Three rows
  2. Three columns of 1px
  3. Three columns of equal width
  4. One column repeated three times vertically
Show answer

Answer: C. For a responsive gallery without media queries, use repeat(auto-fit, minmax(220px, 1fr)).

22. In CSS Grid, what is the fr unit?

  1. A fraction of the free space in the grid container
  2. A fixed number of pixels
  3. A font-relative unit
  4. A frame rate
Show answer

Answer: A. 2fr 1fr makes the first column twice as wide as the second, after fixed-size tracks and gaps are subtracted.

Questions 23–34: units, responsive design and styling

23. Which media query applies styles to screens 600px wide or narrower?

  1. @media (min-width: 600px)
  2. @media (max-width: 600px)
  3. @media screen = 600px
  4. @screen (600px)
Show answer

Answer: B. max-width targets narrow screens; min-width targets screens at least that wide.

24. What is rem relative to?

  1. The parent element’s font size
  2. The viewport width
  3. The element’s own width
  4. The root (html) element’s font size
Show answer

Answer: D. With the default 16px root size, 1.5rem is 24px. rem sizes respect users who increase their browser’s default font size.

25. When used for font-size, what is em relative to?

  1. The root font size
  2. The viewport height
  3. The parent element’s font size
  4. A fixed 16px
Show answer

Answer: C. Because em compounds through nested elements, rem is usually easier to predict for font sizes.

26. Why might z-index: 999 have no effect?

  1. The element is not positioned (it is static) and is not a flex or grid item
  2. z-index only accepts values below 100
  3. z-index only works on images
  4. The element has a background colour
Show answer

Answer: A. Also check stacking contexts: an element can never appear above something outside its parent’s stacking context.

27. Which of these is a pseudo-class?

  1. ::before
  2. :hover
  3. .active
  4. #main
Show answer

Answer: B. Pseudo-classes (single colon) select elements in a state, such as :hover, :focus or :nth-child(2).

28. What does the ::before pseudo-element do?

  1. Selects the previous sibling
  2. Runs styles before the page loads
  3. Selects the first child
  4. Inserts generated content before an element’s content (it needs a content property)
Show answer

Answer: D. Often used for icons and decorations. Generated content should not carry important information, since some assistive tools ignore it.

29. How do you declare and use a CSS custom property (variable)?

  1. $brand: blue; and color: $brand;
  2. @brand = blue;
  3. --brand: blue; and color: var(--brand);
  4. var brand = blue;
Show answer

Answer: C. Custom properties live in the browser, cascade and can change at run time – ideal for themes and dark mode. Option A is Sass syntax.

30. What is the difference between ul li and ul > li?

  1. ul li matches li elements at any depth inside ul; ul > li matches only direct children
  2. They are identical
  3. ul > li matches any depth
  4. ul li only matches the first li
Show answer

Answer: A. The child combinator is useful for nested menus, where you want to style only the top level.

31. Two rules with the same specificity set different colours on the same element. Which wins?

  1. The first one in the stylesheet
  2. The one that appears later
  3. The shorter one
  4. Neither; the browser uses black
Show answer

Answer: B. Source order is the final tie-breaker in the cascade.

32. Which property is inherited by child elements by default?

  1. border
  2. margin
  3. padding
  4. color
Show answer

Answer: D – color. Text properties such as color, font-family and line-height inherit; box properties such as border, margin and padding do not.

33. Which property animates a change smoothly, for example when a button’s background changes on hover?

  1. animation-name
  2. transform
  3. transition
  4. @keyframes
Show answer

Answer: C. transition: background-color .2s ease;. Use @keyframes with animation for multi-step or looping animations.

34. Which unit equals 1% of the viewport width?

  1. vw
  2. %
  3. vh
  4. px
Show answer

Answer: A – vw. font-size: clamp(32px, 4.6vw, 50px), used for headings on this page, scales with the screen but stays within limits.

Questions 35–40: performance, accessibility and best practice

35. What is the standard way to load an external stylesheet?

  1. <style src="style.css">
  2. <link rel="stylesheet" href="style.css"> in the head
  3. <css href="style.css">
  4. <script src="style.css">
Show answer

Answer: B. External stylesheets can be cached by the browser and shared across every page of a site.

36. What does loading="lazy" on an <img> do?

  1. Lowers the image quality
  2. Loads the image after all scripts
  3. Makes the image fade in
  4. Delays loading off-screen images until the user scrolls near them
Show answer

Answer: D. It speeds up the first page load. Do not lazy-load the main image at the top of the page, as that slows the Largest Contentful Paint.

37. What does the defer attribute on a <script> tag do?

  1. Runs the script immediately, blocking the page
  2. Prevents the script from running
  3. Downloads the script in parallel and runs it after the HTML is parsed, in order
  4. Runs the script only on mobile
Show answer

Answer: C. async also downloads in parallel but runs as soon as the script arrives, in any order – fine for independent scripts such as analytics.

38. Which elements are meant for an image or chart with a caption?

  1. <figure> and <figcaption>
  2. <picture> and <title>
  3. <image> and <caption>
  4. <div> and <p>
Show answer

Answer: A. <caption> exists, but only for tables. <picture> chooses between image sources for different screens.

39. Why should a form field not rely on placeholder text instead of a label?

  1. Placeholders are not supported in modern browsers
  2. The placeholder disappears as the user types and is often low-contrast and poorly announced, so the field loses its description
  3. Placeholders slow down the page
  4. Labels are required for the form to submit
Show answer

Answer: B. Use a visible label and, if helpful, a placeholder showing an example format, such as 0300-1234567.

40. What does a “mobile-first” CSS approach mean?

  1. Building a separate mobile website
  2. Hiding content on desktop
  3. Using only percentage widths
  4. Writing base styles for small screens, then adding min-width media queries for larger screens
Show answer

Answer: D. Most visitors now browse on phones, and Google indexes the mobile version of pages first, so starting small is the practical default.

What to practise next

If the box model, specificity or Flexbox questions caught you out, build a small page – a pricing card or a navbar – and experiment in the browser’s developer tools. Then add behaviour with the JavaScript MCQs. All topics are on the Programming MCQs hub.

Want a fast, professional website?

AbairTech designs and builds responsive, SEO-friendly websites and web apps for businesses.

Website DevelopmentMore MCQs