HTML MCQ Set 1: Beginner
Thirty multiple choice questions on document structure, elements, text, links, lists and images. Questions only - verify each answer by building it.
-
HTML Basics
- What is HTML: The Structure Layer of Every Web Page
- HTML Document Structure: DOCTYPE, html, head and body
- Elements, Tags and Attributes: The Vocabulary of HTML
- HTML Comments: Notes That Ship With Your Code
- Block Level and Inline Elements
- Writing and Running Your First HTML Page
- How a Browser Turns Markup Into a Page
- Text and Formatting
- Links and Navigation
- Images and Media
- Lists
- Tables
-
Forms
- Form Structure: form, action and method
- Input Types: Text, Email, Number, Date and the Rest
- Labels: The Most Important Element in a Form
- Checkboxes, Radio Buttons and Grouping
- select, option, optgroup and datalist
- textarea, File Uploads and Hidden Fields
- Buttons: submit, reset and button
- Built In Form Validation
- GET or POST: What Happens When a Form Is Submitted
- Semantic HTML
- HTML5 Features
- Head and Metadata
- HTML with CSS
- HTML with JavaScript
- Accessibility
-
HTML SEO
- How Google Works: Crawling, Indexing and Ranking
- SEO Friendly HTML Structure
- Titles and Descriptions That Earn Clicks
- Headings and Content Structure for Search
- Internal Linking and Anchor Text
- robots.txt and XML Sitemaps
- Canonical URLs and Duplicate Content
- Structured Data and JSON-LD
- Image SEO
- Core Web Vitals and Mobile Friendliness
- DevTools and Debugging
- Editor Productivity
- HTML Best Practices
- HTML Projects
- Advanced Projects
- Practice and Exams
How to use this set
These are questions only. No answer key is given, and that is deliberate.
For almost every question here you can settle the answer definitively in under a minute: write the markup, open it in a browser, and look at the Elements panel or run the validator. An answer you established yourself that way is worth considerably more than one you read at the bottom of a page.
Where a question is about behaviour, test it. Where it is about validity, validate it. Where it is about what a screen reader announces, check the accessibility pane in DevTools.
Thirty questions. Allow forty minutes.
Document structure
- What is the only purpose of
<!DOCTYPE html>in a modern browser?
a) It declares the HTML version b) It switches the browser into standards mode c) It validates the document d) It loads the default stylesheet - Which element must be the root of every HTML document?
a)bodyb)headc)htmld)document - Which of these belongs in the
headrather than thebody?
a)h1b)metac)footerd)figure - Where in the document should
<meta charset="utf-8">appear, and why does the position matter?
a) Anywhere in the head b) First in the head, before any text content c) At the end of the body d) Immediately after the doctype, outside the head - What happens if you place an
h1element inside thehead?
a) It renders in the head b) It is ignored c) The head ends and the body begins at that point d) The document fails to parse - What does the
langattribute onhtmlaffect?
a) Only the browser interface language b) Screen reader pronunciation, translation offers and hyphenation c) The character encoding d) Nothing, it is advisory only
Elements and attributes
- In
<a href="/x">Link</a>, how many tags, elements and attributes are there?
a) 1, 1, 1 b) 2, 1, 1 c) 2, 2, 1 d) 1, 2, 2 - Which of these is a void element?
a)pb)spanc)imgd)li - What does
<input required="false">do?
a) Makes the field optional b) Makes the field required c) Is a parse error d) Is ignored entirely - Which attribute may appear on any element?
a)hrefb)srcc)classd)type - How many elements in a document may share the same
idvalue?
a) Any number b) Two c) One d) One per parent element - Which prefix must a custom attribute use to be valid?
a)x-b)custom-c)data-d)my-
Text elements
- What decides which heading level to use?
a) The required font size b) The position in the document outline c) The importance of the text d) The length of the heading - Which pair carries meaning rather than only appearance?
a)bandib)strongandemc)spananddivd)smallandbig - What does the browser do with a run of twenty spaces in the source?
a) Renders all twenty b) Collapses them to one space c) Removes them entirely d) Renders them as a tab - Which element preserves whitespace exactly as written?
a)codeb)prec)blockquoted)samp - What does
hrmean semantically?
a) A horizontal rule for decoration b) A thematic break in the content c) A section divider for layout d) A page break for printing - Which is correct for a chemical formula such as water?
a)H<small>2</small>Ob)H<sub>2</sub>Oc)H<sup>2</sup>Od)H<em>2</em>O - What is the difference between the
citeelement and theciteattribute?
a) None, they are the same feature b) The element is displayed, the attribute is not c) The attribute is displayed, the element is not d) Both are displayed in different places
Links
- From a page at
/blog/2026/rain.html, where doeshref="../index.html"point?
a)/index.htmlb)/blog/index.htmlc)/blog/2026/index.htmld)/blog/2026/../index.html - What does a leading slash in
href="/about"mean?
a) The parent folder b) The current folder c) The root of the site d) The root of the disk - Which
hrefresolves to a different host?
a)/images/logo.pngb)//images/logo.pngc)./images/logo.pngd)images/logo.png - Why should
target="_blank"be paired withrel="noopener"?
a) To improve performance b) To stop the new page getting a reference to yours c) To pass ranking credit d) To keep the referrer header - An anchor with no
hrefattribute is:
a) A link that goes to the current page b) Not focusable and not announced as a link c) Invalid markup d) Focusable but not clickable - Which link text is most useful when read out of context?
a) Click here b) Read more c) Download the 2026 fee structure d) This link
Lists and images
- You are marking up a recipe method where the steps must happen in order. Which element?
a)ulb)olc)dld)menu - Where does a nested list belong?
a) Directly inside the parentulb) Inside theliit belongs to c) After the closing</ul>d) Inside adivwithin theul - What is the difference between a missing
altattribute andalt=""?
a) None b) Missing is announced as the file name; empty is skipped c) Empty is announced as blank; missing is skipped d) Both cause a validation error - Why do
widthandheightattributes matter on animg?
a) They set the display size b) They let the browser reserve space and prevent layout shift c) They are required for validation d) They improve image quality - Which format is most appropriate for a logo that must stay sharp at any size?
a) JPEG b) PNG c) SVG d) GIF
How to verify your answers
| Question type | How to settle it |
|---|---|
| Structure and parsing | Write it, open the Elements panel, compare with your source |
| Validity | Run it through the W3C validator |
| Path resolution | Build the folder structure and click the link |
| Announcement | Read the computed name in the DevTools accessibility pane |
| Rendering behaviour | Try it and look |
Practice
- Work through all thirty, writing down your answer and your confidence for each.
- Verify every answer in the browser. Note which ones you were confident about and wrong.
- For each one you got wrong, find the note in this path that covers it and reread that section.
- Write five new questions of your own at the same level.