wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

Semantic HTML and Accessibility Worksheet

Total questions: 100

Worksheet time: 2hrs 40mins

Name
Class
Date
1.

A webpage requires proper semantic structure to improve accessibility. Which approach best demonstrates higher-order thinking in choosing HTML tags?

a)

Use

for everything

b)

Choose tags based on screen reader interpretation and content meaning

c)

Use semantic tags only for styling

d)

Replace headings with tags

e)

Use
for layout

2.

A developer must reorganize a webpage to improve SEO ranking. Which decision shows correct semantic judgment?

a)

Replacing

with multiple
tags

b)

Using

,
,
, and
for content grouping

c)

Using
repeatedly to create paragraphs

d)

Removing

e)

Putting all content inside

3.

While debugging, a webpage loads incorrectly because block-level and inline elements are used inconsistently. Which fix is most appropriate?

a)

Convert all elements to inline

b)

Reassign elements based on content intent and display behavior

c)

Nest block elements inside inline elements

d)

Remove all block tags

e)

Use only

4.

A team debates whether to wrap an entire article in

or
. Which reasoning is strongest?

a)

is for reusable, independent content

b)

always improves SEO

c)

is only for images

d)

must contain only lists

e)

cannot contain text

5.

To make content more maintainable, which structural decision is best?

a)

Use

for all structure

b)

Use semantic markup to describe content purpose

c)

Combine CSS and HTML into one file

d)

Use tags for styling

e)

Hardcode layout using tables

6.

A developer wants the most maintainable code. Which modification best aligns with modern HTML?

a)

Replace CSS with inline styles

b)

Replace with where meaning is intended

c)

Replace with

d)

Use

for alignment

e)

Use for animation

7.

You are asked to revise HTML content so that assistive technologies can interpret it better. Which modification demonstrates correct semantic enhancement?

a)

Use

for all headings

b)

Use hierarchical heading levels appropriately

c)

Replace

    with

d)

Use

to wrap entire document

e)

Remove image alt attributes

8.

A page renders incorrectly because several tags are not properly nested. Which strategy is best?

a)

Ignore errors if the browser loads

b)

Use a validator to enforce child-parent tag rules

c)

Remove closing tags

d)

Nest

inside

e)

Nest block elements inside

9.

You need to optimize HTML for mobile-first design. Which decision best supports this?

a)

Use fixed pixel widths

b)

Use semantic structure with responsive CSS

c)

Disable viewport meta

d)

Use tables for layout

e)

Use inline CSS for everything

10.

A designer uses for headings. How should you correct this for semantic accuracy?

a)

Replace with

b)

Replace with

-

tags according to importance

c)

Replace with

d)

Replace with

e)

Keep as

11.

If a webpage loads slow due to excessive tags, what is the most effective method to optimize structure?

a)

Remove all semantic tags

b)

Remove unnecessary nested wrappers

c)

Use
instead of

d)

Use table-based layouts

e)

Duplicate heading tags

12.

A junior dev creates headings in non-sequential order (e.g., h1, h4, h6). What is the best fix?

a)

Use only h1

b)

Use heading levels in logical hierarchy

c)

Use

instead

d)

Replace all with

e)

Use no headings

13.

An accessibility review shows missing

a)

Add placeholders only

b)

Add labels linked via for=""

c)

Use for labels

d)

Remove form controls

e)

Wrap labels inside

14.

A developer uses tables for layout. What is the best correction?

a)

Continue using tables

b)

Replace layout tables with CSS

c)

Add more rows to align content

d)

Merge cells for layout

e)

Use 

 tags
15.

To improve logical document flow, where should

a)

Wherever large text is needed

b)

Near content it supports

c)

Always at the bottom

d)

Always inside

e)

Must contain

16.

Why should you avoid using deprecated tags like ?

a)

They slow down CPU

b)

They break all browsers

c)

They are replaced by CSS for cleaner structure

d)

They remove semantics

e)

They are invisible

17.

A client requests a print-optimized HTML structure. What strategy works best?

a)

Put print rules inline

b)

Combine semantic HTML + CSS print media queries

c)

Use tables for print layout

d)

Expand images

e)

Remove CSS files

18.

A webpage has inconsistent heading styling. Which approach best solves this?

a)

Inline CSS

b)

External stylesheet + semantic headings

c)

More tags

d)

Replace all headings with

e)

Use tables for headings

19.

A student wraps entire page in a

tag. How do you fix structural correctness?

a)

Add CSS only

b)

Replace with correct block-level containers

c)

Replace with

d)

Duplicate tags

e)

Remove all closing tags

20.

A page uses images as buttons. What is more accessible?

a)

Use text

b)

Use

c)

Use

d)

Use

e)

Use hidden tables

21.

A developer struggles with CSS specificity. Which fix improves maintainability?

a)

Use inline styles

b)

Reduce selector complexity and rely on class selectors

c)

Use !important everywhere

d)

Use IDs for all elements

e)

Avoid CSS altogether

22.

To override an inherited property, which approach is BEST?

a)

Add more