Web Development MCQs - HTML5 and CSS3: Semantics, Box Model, Flexbox and Grid (Set 1)

Q1. Which HTML5 element is meant for a self-contained piece of content, such as a blog post or news story, that could be distributed on its own?

a) <section>

b) <article>

c) <aside>

d) <div>

Q2. What is the main purpose of <meta name="viewport" content="width=device-width, initial-scale=1"> in a page's head?

a) It makes images load lazily on mobile

b) It sets the layout viewport width to the device width so mobile browsers do not render the page as a zoomed-out desktop layout

c) It prevents users from zooming the page

d) It enables CSS media queries, which do not work without it

Q3. Which input type gives built-in browser validation that the entered value looks like an email address?

a) type="email"

b) type="text" with name="email"

c) type="mail"

d) type="url"

Q4. A purely decorative image should be marked up so that screen readers skip it. Which is the correct approach?

a) Omit the alt attribute entirely

b) Use alt="image"

c) Use alt="" (an empty alt)

d) Use title="decorative"

Q5. How is a <label> correctly associated with <input id="phone" type="tel">?

a) <label name="phone">Phone</label>

b) <label for="phone">Phone</label>

c) <label id="phone">Phone</label>

d) <label aria-for="phone">Phone</label>

Q6. A close button contains only an X icon (an SVG) and no visible text. Which attribute best gives it an accessible name for screen reader users?

a) aria-hidden="true"

b) role="presentation"

c) tabindex="-1"

d) aria-label="Close"

Q7. Which of the following is a pseudo-element rather than a pseudo-class?

a) ::first-line

b) :nth-child(2)

c) :focus

d) :not(.active)

Q8. What is the specificity of the selector #nav .item a:hover, written as (IDs, classes/attributes/pseudo-classes, elements)?

a) (1, 1, 2)

b) (0, 3, 1)

c) (1, 2, 1)

d) (1, 3, 0)

Q9. What colour will the paragraph text be?

<div class="content">
  <p class="intro">Hello</p>
</div>

/* CSS */
div p { color: red; }
.content p { color: blue; }
p.intro { color: green; }

a) red

b) blue

c) black (browser default)

d) green

Q10. With the default box-sizing, what is the total horizontal space the box occupies including its margins?

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

a) 200px

b) 250px

c) 270px

d) 230px

Q11. If the same box uses box-sizing: border-box, what will be the width of its content area?

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

a) 150px

b) 160px

c) 200px

d) 130px

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

a) Its immediate parent, always

b) The nearest ancestor whose position is anything other than static (or the initial containing block if none)

c) The viewport, always

d) Its own normal position in the flow

Q13. In a mobile-first stylesheet, when do the rules inside @media (min-width: 768px) { ... } apply?

a) Only when the viewport is narrower than 768px

b) Only when the viewport is exactly 768px wide

c) When the viewport is 768px wide or wider

d) Only on devices whose screen resolution is above 768 dpi

Q14. A flex container has flex-direction: column. Which property now controls the vertical alignment of the items?

a) align-items

b) align-content

c) text-align

d) justify-content

Q15. What does the shorthand flex: 1 expand to?

a) flex-grow: 1; flex-shrink: 0; flex-basis: auto

b) flex-grow: 1; flex-shrink: 1; flex-basis: auto

c) flex-grow: 1 only; other values unchanged

d) flex-grow: 1; flex-shrink: 1; flex-basis: 0%

Q16. The root font-size is 16px. What are the computed font-size and padding of .child?

html   { font-size: 16px; }
.parent { font-size: 20px; }
.child {
  font-size: 1.5em;
  padding: 2rem;
}

a) 30px and 32px

b) 24px and 40px

c) 30px and 40px

d) 24px and 32px

Q17. A flex container is 600px wide with no gap. Each of its three children has flex-basis: 100px and they have flex-grow values 1, 2 and 3 respectively. What is the final width of the third item?

a) 300px

b) 250px

c) 200px

d) 150px

Q18. What is the width of the third column?

.grid {
  display: grid;
  width: 840px;
  grid-template-columns: 200px 1fr 2fr;
  column-gap: 20px;
}

a) 400px

b) 413.33px

c) 373.33px

d) 426.67px