Class 7 HTML MCQ with Solutions helps students learn the basic concepts of HTML in a simple and exam-oriented way. This post explains important topics such as headings (H1 to H6), background color, font size, font color, text alignment (center, left, right), paragraph formatting, formatting tags, and list tags like ordered and unordered lists.
Students can practice these Class 7 HTML MCQ with Solutions to improve their understanding of concepts and prepare for school exams and computer tests. These MCQs help learners revise basics and understand how developers create and structure web pages using HTML.
Questions 1–20 · HTML basics, heading tags, background colour, font tag
Questions 1–5 · What HTML Is and How It Works
HTML serves as the foundation of every webpage on the internet. Therefore, understanding what HTML stands for and how it works is your first essential step. Furthermore, knowing the correct file extension ensures your browser opens HTML files properly. As a result, mastering these basics will make all future topics easier to understand.
Q1–2 · Full Form and File Extension
Before you write your first tag, you consequently need to know what HTML stands for and how to save your file correctly. Additionally, the file extension tells the browser which language to expect.
HTML Basics
1
What does HTML stand for?
A
Hyper Transfer Markup Language
B
HyperText Markup Language
C
High Text Markup Language
D
HyperText Management Language
Correct Answer: B — HyperText Markup Language. HTML stands for HyperText Markup Language. It serves as the standard language developers use to create and structure content on the web. “HyperText” refers to the ability to link documents together. Additionally, “Markup” refers to the tags that format and organise text and other content on a webpage. Therefore, understanding this full form helps you remember what HTML actually does.
HTML Basics
2
Which file extension do HTML documents typically use?
A
.hml
B
.xml
C
.html
D
.web
Correct Answer: C — .html HTML files use the .html extension (or sometimes .htm). Web browsers recognise this extension and consequently render the file as a webpage. Furthermore, using the correct extension ensures the browser interprets and displays the content using HTML rules. Therefore, always save your HTML files with this extension so they open correctly in any browser.
Q3–5 · Root Element, Heading Tags, and Display Size
Once you know what HTML is, you can consequently explore its core structure. For instance, the root element wraps the entire document, and heading tags let you organise content by importance. Additionally, headings range from h1 (largest) down to h6 (smallest), so each level serves a distinct purpose.
HTML Basics
3
Which tag is used to define the root element of an HTML document?
A
<head>
B
<html>
C
<body>
D
<root>
Correct Answer: B — <html> The <html> tag acts as the root element that wraps all content on an HTML page. Every HTML document must start and end with this tag. Additionally, all other elements such as <head> and <body> nest inside the <html> tag. Therefore, you must always place this tag at the outermost level of every page you create.
Heading Tags
4
How many types of heading tags does HTML provide?
A
4
B
5
C
6
D
8
Correct Answer: C — 6 HTML provides exactly 6 heading tags: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. <h1> represents the most important (largest) heading. In contrast, <h6> represents the least important (smallest). Furthermore, these tags help you organise content hierarchically on a webpage. Therefore, choosing the right heading level improves both readability and page structure.
Heading Tags
5
Which heading tag displays the largest text by default?
A
<h1>
B
<h2>
C
<h6>
D
<head>
Correct Answer: A — <h1> The <h1> tag produces the largest and most prominent heading on a webpage. It also carries the highest semantic importance, and search engines therefore treat it as the main topic of the page. Furthermore, good HTML practice recommends using only one <h1> per page. As a result, always place your most important heading inside this tag.
Questions 6–10 · Heading Tags and the Font Tag
Heading tags and the font tag give you direct control over text appearance. However, each tag serves a different purpose. For example, heading tags add bold formatting automatically, while the font tag lets you choose size, typeface, and colour independently. Therefore, understanding both helps you format text effectively in early HTML.
Q6–7 · Smallest Heading and the Font Tag
First, it is important to know that heading sizes decrease as the number increases. Furthermore, the font tag offers three independent attributes so you can customise text precisely. Consequently, even a single font tag can control size, face, and colour at the same time.
Heading Tags
6
Which heading tag displays the smallest text among all heading tags?
A
<h1>
B
<h4>
C
<h5>
D
<h6>
Correct Answer: D — <h6> The <h6> heading tag displays the smallest text among all six heading tags. The size decreases from <h1> to <h6>, so <h6> consequently carries the least visual weight. It also holds the least semantic importance in the document hierarchy. Therefore, use it only for minor sub-headings deep within a page structure.
Font Tag
7
Which HTML tag lets you change the font size, face, and colour of text?
A
<text>
B
<font>
C
<style>
D
<format>
Correct Answer: B — <font> The <font> tag lets you control three text properties: size (using the size attribute), typeface (using the face attribute), and colour (using the color attribute). For example, <font size=”4″ face=”Arial” color=”red”>Text</font> renders red Arial text at size 4. However, HTML5 deprecated the <font> tag, consequently recommending CSS instead.
Q8–10 · Font Size Range, Face Attribute, and Background Colour
Additionally, once you know the font tag exists, you need to understand its size limits. Furthermore, the face attribute controls typeface selection, while bgcolor is an entirely separate attribute that controls the page background. As a result, these three topics build directly on each other.
Font Tag
8
What is the valid range of values for the size attribute in the <font> tag?
A
1 to 100
B
1 to 7
C
1 to 10
D
0 to 5
Correct Answer: B — 1 to 7 The size attribute in the <font> tag accepts values from 1 (smallest) to 7 (largest). The default size is 3, which consequently corresponds to normal body text. Using size=”7″ produces the largest possible text, while size=”1″ gives the smallest. Therefore, the font size attribute works on a 1–7 scale, not in pixels.
Font Tag
9
Which attribute of the <font> tag sets the typeface (font family)?
A
face
B
type
C
family
D
name
Correct Answer: A — face The face attribute inside the <font> tag sets the typeface or font family. For example, <font face=”Arial”>Hello</font> displays “Hello” in the Arial font. You can also provide multiple font names separated by commas, and the browser will therefore use the first one that is installed on the user’s system.
Background Colour
10
Which attribute of the <body> tag sets the background colour of a webpage?
A
color
B
background
C
bgcolor
D
fill
Correct Answer: C — bgcolor The bgcolor attribute sets the background colour of the entire webpage. For example, <body bgcolor=”lightblue”> fills the page with a light blue colour. You can use either a colour name or a hex code like #ADD8E6. In contrast, the color attribute changes text colour rather than the background. Therefore, always use bgcolor specifically for the page background.
Questions 11–15 · Colour Attributes and Document Structure
Colour attributes and document structure are both core skills you must develop early. Furthermore, understanding where each element belongs — head versus body — prevents structural errors in your code. Additionally, both bgcolor and color work in similar ways, yet they target very different parts of the page. As a result, confusing them is one of the most common beginner mistakes.
Q11–12 · Font Colour and Background Colour
In addition to the font tag, the body tag also uses a colour attribute of its own. However, these two attributes serve opposite purposes: one styles text, while the other styles the page background. Therefore, knowing which attribute belongs to which tag is essential.
Background Colour
11
Which of the following correctly sets the page background to yellow?
A
<body color=”yellow”>
B
<body bgcolor=”yellow”>
C
<body background=”yellow”>
D
<body fill=”yellow”>
Correct Answer: B — <body bgcolor=”yellow”> The correct attribute for setting a background colour is bgcolor. Using bgcolor=”yellow” therefore fills the entire page with yellow. In contrast, color changes text colour, and background expects an image file path rather than a colour name. As a result, always use bgcolor when you want to set a solid background colour for your page.
Font Tag
12
Which attribute of the <font> tag sets the colour of the text?
A
color
B
bgcolor
C
shade
D
hue
Correct Answer: A — color The color attribute sets the colour of the text inside the <font> tag. You can provide a colour name (e.g., “blue”) or a hex code (e.g., “#0000FF”). In contrast, bgcolor changes the page background, not the text itself. Therefore, use color specifically when you want to style text colour.
Q13–15 · Visible Content, Title Tag, and Body Section
Once you understand font attributes, you can consequently explore how the browser displays content. For example, the body tag holds all visible elements, whereas the head tag holds invisible metadata. Furthermore, the title tag is unique because, although it lives in the head section, it still affects how users see the page — specifically on the browser tab.
HTML Basics
13
Which section of an HTML document contains the main visible content?
A
<head>
B
<title>
C
<body>
D
<meta>
Correct Answer: C — <body> The <body> tag contains all the visible content of an HTML page — text, images, links, tables, and headings. Whatever you write inside <body> appears in the browser window. In contrast, the <head> section holds metadata that the browser does not directly display to the user. Therefore, always place your visible content inside <body>.
HTML Basics
14
Where does the <title> tag content appear in a browser?
A
At the top of the webpage body
B
Inside a header banner
C
On the browser tab or title bar
D
Below the navigation bar
Correct Answer: C — Browser tab or title bar The content inside the <title> tag appears on the browser’s tab and in the title bar. It does not appear in the visible body of the webpage. Furthermore, search engines use it as the page title in search results, consequently making it important for SEO. Therefore, always write a clear and descriptive title that accurately represents your page’s content.
Heading Tags
15
Heading tags in HTML are placed inside which section of the document?
A
<head>
B
<title>
C
<body>
D
<html> directly
Correct Answer: C — <body> Heading tags like <h1> through <h6> are content elements, so you must consequently place them inside the <body> section. In contrast, the <head> section holds metadata. Placing headings in <head> would result in an incorrect HTML structure. Therefore, always add your headings and visible content inside the <body> tag.
Questions 16–20 · Head Section, Title Tag, and Tag Syntax
The head section, title tag, and tag syntax form the backbone of every HTML document. Furthermore, the title tag content appears on the browser tab rather than on the page body. Therefore, choosing a clear and descriptive title improves both usability and search visibility. Additionally, understanding tag syntax helps you write clean and error-free code from the very start.
Q16–17 · Head Section Purpose and Font Tag Reading
Before writing code, you should first understand what the head section actually does. Moreover, you should also be able to read existing font tag code and predict its output. Consequently, both skills are tested here side by side.
HTML Basics
16
What is the purpose of the <head> section in an HTML document?
A
It displays the main text of the page
B
It contains metadata and document settings
C
It defines the footer of the page
D
It creates hyperlinks on the page
Correct Answer: B — Metadata and document settings The <head> section holds metadata about the HTML document that the browser does not directly display. It includes the page title (<title>), links to CSS stylesheets, and character encoding declarations (<meta charset>). Additionally, it contains JavaScript references. Therefore, the <head> section gives the browser important instructions about how to process and present your document.
Font Tag
17
What does the following HTML code display? <font size="7" face="Arial" color="blue">Hello</font>
A
Small red text in Times New Roman
B
Large blue text in Arial font
C
Default sized black text
D
Medium green text in Arial
Correct Answer: B — Large blue text in Arial font The <font> tag uses size=”7″, which is the maximum and therefore the largest possible value. Additionally, face=”Arial” specifies the Arial typeface, and color=”blue” sets the text colour to blue. As a result, all three attributes combine to render “Hello” as large, blue Arial text. Therefore, reading <font> tag attributes carefully helps you predict exactly how text will appear on screen.
Q18–20 · Colour Values, Heading Behaviour, and Tag Definition
Colour values, heading behaviour, and tag definitions are closely related concepts that wrap up Section 1. For instance, both colour names and hex codes work equally well with bgcolor. Additionally, all heading tags apply bold text automatically, so you do not therefore need a separate formatting tag. Moreover, understanding what a tag actually is will strengthen your overall HTML foundation.
Background Colour
18
Which colour value can you use with the bgcolor attribute?
A
Only colour names like “blue”
B
Only hex codes like “#0000FF”
C
Both colour names and hex codes
D
Only RGB values
Correct Answer: C — Both colour names and hex codes The bgcolor attribute accepts both named colours (e.g., bgcolor=”yellow”) and hexadecimal colour codes (e.g., bgcolor=”#FFFF00″). Both therefore refer to the same colour and produce the same background result. However, hex codes offer more precise colour control, while named colours are easier to remember. Therefore, you can use whichever format suits your preference.
Heading Tags
19
Heading tags automatically add which visual property to the text?
A
Italic style
B
Underline style
C
Bold style and line breaks
D
Colour change
Correct Answer: C — Bold style and line breaks All HTML heading tags (<h1> to <h6>) automatically apply bold formatting to the text. Furthermore, they insert a line break before and after the heading. This behaviour consequently comes built into the browser’s default stylesheet. Additionally, the size of the bold text decreases from <h1> to <h6>. Therefore, heading tags make text stand out visually without requiring any extra styling.
HTML Basics
20
Which of the following best describes an HTML tag?
A
A programming function that calculates values
B
A database query command
C
A keyword enclosed in angle brackets that instructs the browser
D
A styling rule written in a CSS file
Correct Answer: C — A keyword enclosed in angle brackets An HTML tag is a keyword or command enclosed in angle brackets, like <p> or <body>. Tags consequently instruct the browser on how to format or display content. Most tags come in pairs — an opening tag and a closing tag with a forward slash. However, some tags like <br> are self-closing. Therefore, recognising the structure of an HTML tag forms the foundation of writing any webpage.
Section 1 of 3
2
Section 2 — Formatting, Lists & Images
Questions 21–40 · Text alignment, paragraph tags, list tags, background image
Questions 21–25 · Text Alignment and Paragraph Basics
Text alignment and paragraph basics let you control the layout and flow of your content. For instance, the align attribute accepts values like left, center, and right. However, the default alignment is always left unless you explicitly specify otherwise. Furthermore, the paragraph and line-break tags handle vertical spacing in very different ways, so understanding both will save you from common layout mistakes.
Q21–22 · Centre and Default Alignment
First, you need to know how to centre text using the align attribute. Additionally, it is equally important to know what alignment HTML uses by default. Consequently, these two questions work as a pair to test both directions of the same concept.
Text Alignment
21
Which attribute do you add to an HTML tag to align text to the centre?
A
position=”centre”
B
align=”center”
C
text=”centre”
D
middle=”true”
Correct Answer: B — align=”center” The align attribute with the value “center” positions text in the middle of the page or its container. For example, <h1 align=”center”>Title</h1> centres the heading on screen. Additionally, note that HTML uses the American spelling “center” rather than the British “centre” for this value. Therefore, always use “center” to avoid errors when aligning content.
Text Alignment
22
What is the default text alignment in HTML if no align attribute is specified?
A
Left
B
Centre
C
Right
D
Justified
Correct Answer: A — Left By default, HTML renders text aligned to the left side of the page. This default behaviour consequently applies to left-to-right languages like English. Furthermore, unless you explicitly specify align=”center” or align=”right”, all text naturally flows from the left margin. Therefore, you only need to add the align attribute when you want a non-default alignment.
Q23–25 · Right Alignment, Paragraph Tag, and Line Breaks
Moreover, you also need to understand right alignment and the difference between paragraph spacing and simple line breaks. For example, the p tag adds vertical margins, whereas the br tag only moves text to the next line. As a result, using the wrong tag can make your layout look inconsistent.
Text Alignment
23
Which tag is commonly used with the align attribute to align a paragraph of text to the right?
A
<h1 align=”right”>
B
<p align=”right”>
C
<body align=”right”>
D
<font align=”right”>
Correct Answer: B — <p align=”right”> The paragraph tag <p> combined with align=”right” aligns its text content to the right side of the page. This combination consequently works well for placing captions, dates, or signatures. While <h1> can also use the align attribute, the <p> tag serves as the standard container for flowing paragraphs. Therefore, use <p align=”right”> for right-aligned paragraph text.
Paragraph Tags
24
Which HTML tag creates a paragraph?
A
<para>
B
<p>
C
<pg>
D
<txt>
Correct Answer: B — <p> The <p> tag defines a paragraph of text in HTML. The browser automatically adds vertical spacing above and below each paragraph, consequently creating a visual separation between sections. Furthermore, every paragraph must open with <p> and close with </p> to correctly structure the content. Therefore, use this tag whenever you write a block of continuous text on your webpage.
Paragraph Tags
25
What does the <br> tag do in HTML?
A
Creates a new paragraph with spacing
B
Inserts a single line break without extra spacing
C
Draws a horizontal line
D
Creates a bold text element
Correct Answer: B — Inserts a single line break The <br> tag inserts a line break, consequently moving following text to the next line without adding extra paragraph spacing. In contrast, <p> creates a new paragraph with margins. Additionally, <br> is a self-closing tag, meaning it does not require a closing </br> tag. Therefore, use <br> whenever you want to break a line without starting a new paragraph.
Questions 26–32 · Text Formatting and List Tags
Text formatting tags and list tags give you powerful tools to organise content on screen. Furthermore, combining bold, italic, and underline tags produces a wide range of visual styles. Additionally, unordered and ordered lists each serve distinct purposes, so choosing the right type improves readability. Consequently, this group covers both inline formatting and block-level list structures together.
Q26–29 · Horizontal Rule, Bold, Italic, and Underline
In addition to paragraph spacing, HTML also provides dedicated tags for bold, italic, and underline formatting. Furthermore, the hr tag draws a horizontal line that visually separates sections. Therefore, mastering these four tags helps you create clean, well-structured pages without relying on CSS.
Paragraph Tags
26
Which HTML tag draws a horizontal line across the page?
A
<line>
B
<hl>
C
<hr>
D
<rule>
Correct Answer: C — <hr> The <hr> tag stands for “Horizontal Rule” and draws a visible horizontal line across the width of the page. Developers consequently use it as a visual divider between sections of content. Additionally, like <br>, it is a self-closing tag that does not need a closing tag. Furthermore, you can customise it with attributes like size, width, and color. Therefore, use <hr> whenever you want to visually separate sections.
Paragraph Tags
27
Which HTML tag makes text appear in bold?
A
<strong> only
B
<b>
C
<bold>
D
<thick>
Correct Answer: B — <b> The <b> tag makes text appear in bold. For example, <b>Hello</b> displays “Hello” in bold. The <strong> tag also produces bold text but additionally carries semantic meaning — it signals importance to browsers and screen readers. In contrast, <b> is purely visual. Both are therefore valid in HTML5.
Paragraph Tags
28
Which HTML tag makes text appear in italics?
A
<i>
B
<italic>
C
<it>
D
<slant>
Correct Answer: A — <i> The <i> tag renders text in italics. For example, <i>Hello</i> displays “Hello” in a slanted style. Similar to <b> and <strong>, the <em> tag also produces italic text but additionally adds semantic emphasis. Both <i> and <em> are therefore valid in HTML5.
Paragraph Tags
29
Which HTML tag underlines text?
A
<underline>
B
<u>
C
<ul>
D
<line>
Correct Answer: B — <u> The <u> tag underlines text on the screen. For example, <u>Hello</u> consequently displays “Hello” with a horizontal line below it. Use this tag carefully, as underlined text can be mistaken for a hyperlink. Therefore, reserve <u> for specific cases like spelling annotations rather than general emphasis.
Q30–32 · Unordered Lists, Ordered Lists, and Default Markers
Additionally, beyond text formatting, HTML also provides structured list tags. Therefore, you need to know both ul for bullet lists and ol for numbered lists. Furthermore, understanding which marker each list type uses by default prevents confusion when reading existing code.
List Tags
30
Which HTML tag creates an unordered (bulleted) list?
A
<ol>
B
<ul>
C
<list>
D
<bl>
Correct Answer: B — <ul> The <ul> tag creates an unordered list, where each item consequently displays with a bullet point by default. Each item goes inside an <li> tag. In contrast, <ol> creates an ordered (numbered) list. Therefore, use <ul> for lists where the sequence does not matter, such as a list of features or ingredients.
List Tags
31
Which HTML tag creates an ordered (numbered) list?
A
<ol>
B
<ul>
C
<nl>
D
<numlist>
Correct Answer: A — <ol> The <ol> tag creates an ordered list where each item is consequently numbered starting from 1. Each list item uses the <li> tag inside. In contrast, <ul> produces bullet points without numbers. Therefore, use <ol> whenever the order of items matters, such as in step-by-step instructions or ranked results.
List Tags
32
What marker does an unordered list use by default for each item?
A
Numbers (1, 2, 3…)
B
Letters (a, b, c…)
C
Bullet points (•)
D
Dashes (–)
Correct Answer: C — Bullet points (•) By default, an unordered list created with <ul> consequently marks each <li> item with a solid bullet point (•). This visual marker clearly distinguishes each item without implying any specific order. Furthermore, you can change the bullet style using CSS. In contrast, ordered lists use numbers. Therefore, use <ul> whenever bullets suit the content better than numbers.
Questions 33–40 · Background Images, Self-Closing Tags, and Nesting
Background images, self-closing tags, and nested lists each follow distinct rules that are worth studying carefully. For instance, the background attribute takes a file path, whereas bgcolor takes a colour value. Furthermore, self-closing tags like br do not wrap any content, so they require no closing tag. Additionally, nested lists must always go inside an li element rather than directly inside ul or ol. Consequently, understanding these rules prevents many common HTML errors.
Q33–35 · Background Image Attribute and List Syntax
Before moving to self-closing tags, it is important to first understand how background images and numbered list syntax work. Furthermore, both require precise attribute values, so getting them right matters. As a result, practising these questions will help you avoid attribute mix-ups in your own code.
Background Image
33
Which attribute of the <body> tag sets a background image for a webpage?
A
image
B
bgimage
C
background
D
wallpaper
Correct Answer: C — background The background attribute in the <body> tag sets an image as the page background. For example, <body background=”image.jpg”> loads the image, which consequently tiles by default to fill the entire page. However, HTML5 removed support for this attribute. Therefore, developers now use the CSS background-image property for modern projects instead.
Background Image
34
What happens to a background image if it is smaller than the browser window?
A
It stretches to fill the screen
B
It appears only in the top-left corner
C
It repeats (tiles) to fill the entire page
D
It is hidden if too small
Correct Answer: C — It tiles to fill the page When an HTML background image is smaller than the browser window, the browser automatically repeats (tiles) the image both horizontally and vertically. As a result, the image fills the entire visible area. This tiling behaviour is consequently the default for images set with the background attribute. Therefore, choose a small, seamless image if you want a repeating pattern background.
List Tags
35
What is the correct HTML to create a numbered list with two fruits?
A
<ul><li>Apple</li><li>Mango</li></ul>
B
<ol><li>Apple</li><li>Mango</li></ol>
C
<nl><item>Apple</item></nl>
D
<list><li>Apple</li></list>
Correct Answer: B — <ol> with <li> items To create a numbered list, you use the <ol> (ordered list) tag as the container and consequently place individual items inside <li> tags. As a result, the browser automatically assigns numbers starting from 1. In contrast, Option A uses <ul>, which creates a bulleted list rather than a numbered one. Therefore, always use <ol> when you need items to appear in a numbered sequence.
Q36–40 · Self-Closing Tags, Alignment Values, Paragraph Spacing, and Nesting
Furthermore, once you understand list syntax, you should also know how self-closing tags work and how paragraph spacing differs from line breaks. Additionally, nested lists add another layer of complexity. However, understanding each concept individually first makes them easier to combine. Therefore, these five questions test your ability to apply all of these ideas together.
Paragraph Tags
36
What type of tag is <br> — does it need a closing tag?
A
Yes, it always needs </br>
B
Yes, sometimes it needs a closing tag
C
No, it is a self-closing tag
D
It depends on the browser
Correct Answer: C — It is a self-closing tag The <br> tag is a void element — it does not wrap any content, so it consequently has no closing tag. It simply inserts a line break wherever you place it. In HTML5, plain <br> is the correct and accepted form. Therefore, never write </br> after a <br> tag, as it serves no purpose and can cause validation errors.
Text Alignment
37
Which align attribute value positions text flush against the right margin?
A
align=”middle”
B
align=”end”
C
align=”right”
D
align=”far”
Correct Answer: C — align=”right” The value “right” in the align attribute consequently pushes text to the right margin of the container or page. Furthermore, the three core alignment values are “left”, “center”, and “right”. Therefore, use align=”right” whenever you need text to flush against the right edge of its container for placement like dates or captions.
Paragraph Tags
38
What is the visual difference between using <p> twice and using <br> twice?
A
There is no difference at all
B
<p> adds extra vertical spacing; <br> only breaks the line
C
<br> adds more space than <p>
D
<p> is only for headings
Correct Answer: B — <p> adds margin; <br> only breaks the line The <p> tag creates a block-level element with top and bottom margins, consequently adding noticeable vertical spacing between paragraphs. In contrast, the <br> tag simply moves the cursor to the next line without any additional space. Furthermore, using <br><br> to mimic paragraph spacing is regarded as poor practice. Therefore, use <p> tags for proper paragraph structure.
List Tags
39
Can you nest a list inside another list in HTML?
A
Yes, you can place <ul> or <ol> inside an <li>
B
No, HTML does not allow nested lists
C
Only unordered lists can be nested
D
Only ordered lists can contain sub-lists
Correct Answer: A — Yes, you can nest lists HTML allows you to place a new <ul> or <ol> inside an <li> item to create a nested (sub) list. Furthermore, browsers automatically indent nested lists to show the hierarchy visually. As a result, this technique works well for displaying hierarchical information like multi-level menus. Therefore, nesting lists helps you organise complex, multi-level content in a clear way.
Background Image
40
In the HTML background attribute, what type of value do you provide?
A
A colour name
B
A hex colour code
C
A path or URL to an image file
D
A gradient description
Correct Answer: C — A path or URL to an image file The background attribute requires the file path or web URL of an image. For example, <body background=”bg.jpg”> consequently uses a local image, while an absolute URL loads an image from the web. In contrast, the bgcolor attribute accepts colour values, not image paths. Therefore, always provide an image file path when using background, and a colour value when using bgcolor.
Questions 41–50 · Inserting Images and Working with Hyperlinks
Inserting images and creating hyperlinks are two of the most widely used HTML skills. Therefore, mastering the img and a tags opens up a broad range of webpage possibilities. For instance, every image needs a src attribute, and every hyperlink needs an href attribute. Furthermore, each of these tags also includes additional attributes that give you finer control over behaviour and appearance. Consequently, this group covers both topics in depth across ten questions.
Q41–43 · The img Tag, src Attribute, and Alt Text
First, you should learn how to insert an image using the img tag. Additionally, you need to understand both the src attribute, which points to the image file, and the alt attribute, which improves accessibility. As a result, using both src and alt together is considered best practice in modern HTML.
Image Insertion
41
Which HTML tag do you use to insert an image into a webpage?
A
<picture>
B
<photo>
C
<img>
D
<graphic>
Correct Answer: C — <img> The <img> tag embeds an image directly into an HTML page. It is a self-closing tag and consequently requires at minimum the src attribute, which specifies the image path. Additionally, the alt attribute provides alternative text for accessibility. For example: <img src=”photo.jpg” alt=”A photo”>. Therefore, always include both src and alt when inserting images.
Image Insertion
42
Which attribute of <img> specifies the path to the image file?
A
src
B
href
C
link
D
path
Correct Answer: A — src The src (source) attribute tells the browser where to find the image. A relative path (e.g., “images/cat.jpg”) consequently points to a local file. Alternatively, an absolute URL points to an image on the internet. Therefore, without the src attribute, the browser cannot load any image at all, making it the most essential img attribute.
Image Insertion
43
What is the purpose of the alt attribute in the <img> tag?
A
It sets the image alignment
B
It links the image to another page
C
It provides alternative text if the image does not load
D
It sets the image border colour
Correct Answer: C — Alternative text if image fails to load The alt attribute provides descriptive text that the browser consequently displays when the image cannot load. Furthermore, screen readers use alt text to describe images to visually impaired users. As a result, it serves both as an important accessibility feature and an SEO tool. Therefore, always write clear and meaningful alt text for every image you insert.
Q44–45 · Image Dimensions and the Anchor Tag
Furthermore, beyond source and alt text, images also support width and height attributes. Additionally, once you understand images, you are ready to learn about the anchor tag, which similarly uses a single key attribute — href — to define its behaviour. Therefore, both tags follow the same pattern of having one required attribute that controls their core function.
Image Insertion
44
Which attributes control the display size of an image in the <img> tag?
A
length and breadth
B
x and y
C
width and height
D
size and scale
Correct Answer: C — width and height The width and height attributes in the <img> tag control the displayed dimensions of the image in pixels. For example, <img src=”photo.jpg” width=”300″ height=”200″> consequently renders the image at 300×200 pixels. Alternatively, setting only one value allows the browser to scale the image proportionally. Therefore, use these attributes to control how images fit into your page layout.
Anchor Tag
45
Which HTML tag creates a hyperlink?
A
<link>
B
<href>
C
<a>
D
<url>
Correct Answer: C — <a> The <a> tag, known as the anchor tag, creates a clickable hyperlink. When a user clicks the linked text, the browser consequently navigates to the address you specify in the href attribute. For example, <a href=”https://google.com”>Visit Google</a> creates a working link. Therefore, the <a> tag is the primary tool for connecting pages and resources across the web.
Q46–48 · href Attribute, target=”_blank”, and Link Colours
Moreover, beyond the basic anchor tag, you also need to understand its key attributes: href for the destination and target for window behaviour. Furthermore, browsers apply default colours to links that help users track which pages they have already visited. Consequently, understanding these defaults helps you design and debug link styles more effectively.
Anchor Tag
46
What does the href attribute in the <a> tag specify?
A
The colour of the hyperlink text
B
The destination URL or file the link points to
C
The size of the anchor text
D
The font face of the link text
Correct Answer: B — The destination URL or file The href (Hypertext Reference) attribute specifies the URL or file path the link consequently navigates to when clicked. It can point to an external website (https://…), a local file (page2.html), or a specific section using a fragment identifier (#section). Additionally, mailto: links allow you to pre-fill an email address. Therefore, href is the most essential attribute of the <a> tag.
Anchor Tag
47
Which attribute in the <a> tag opens the link in a new browser tab?
A
newtab=”true”
B
open=”new”
C
target=”_blank”
D
window=”new”
Correct Answer: C — target=”_blank” Adding target=”_blank” to an <a> tag consequently instructs the browser to open the linked page in a new tab or window. Without this attribute, links open in the same tab by default. Furthermore, the default target value is “_self”, which means the same window. Therefore, use target=”_blank” for external links you want to keep open alongside your current page.
Anchor Tag
48
What colour does a visited hyperlink appear in by default?
A
Blue
B
Red
C
Purple
D
Green
Correct Answer: C — Purple Browsers display unvisited hyperlinks in blue by default. However, once a user clicks a link, the browser consequently changes its colour to purple to indicate it has already been visited. This visual cue helps users remember which links they have explored. Furthermore, CSS allows developers to override these default colours to match any design. Therefore, the blue/purple default behaviour comes built into every browser.
Q49–50 · Image Syntax Review and Email Links
Additionally, to round off this group, you should also know how to write full img tag syntax and how to create email links using mailto. As a result, these two questions combine knowledge from both img and a tag sections. Therefore, they serve as useful practice that consolidates everything you have learned so far about images and hyperlinks.
Image Insertion
49
Which of the following is the correct syntax to insert an image named “dog.jpg” with a width of 200px?
A
<image src=”dog.jpg” width=”200″>
B
<img src=”dog.jpg” width=”200″>
C
<img href=”dog.jpg” w=”200″>
D
<img path=”dog.jpg” size=”200″>
Correct Answer: B — <img src=”dog.jpg” width=”200″> The correct tag is <img> (not <image>), and the source attribute is src (not href or path). Additionally, the dimension attribute consequently uses width (not w or size). This question tests three key syntax rules at once. Therefore, always remember the three key <img> attributes: src, alt, and optionally width/height for image dimensions.
Anchor Tag
50
Which of the following correctly creates a hyperlink to an email address?
A
<a href=”email:user@example.com”>
B
<a href=”mailto:user@example.com”>
C
<a href=”send:user@example.com”>
D
<a href=”@user@example.com”>
Correct Answer: B — href=”mailto:…” To link to an email address, you consequently prefix the address with mailto: in the href attribute. When a user clicks this link, their default email application opens with the “To” field pre-filled. Furthermore, this approach works across most devices and email clients without any extra setup. Therefore, use mailto: links for “Contact Us” sections to give users an easy way to reach you.
Questions 51–60 · HTML Structure and Mixed Review
This final group tests your understanding of HTML structure, tag naming, and general facts across the whole syllabus. Furthermore, knowing how elements nest together and how to avoid common syntax errors is essential for writing clean code. Additionally, case sensitivity rules and the distinction between markup and programming languages round off your foundational knowledge. As a result, answering these questions well demonstrates that you have genuinely mastered the core concepts of HTML. Therefore, approach each question carefully and apply everything you have learned so far.
Q51–53 · HTML Root Structure, hr Tag, and Nested Formatting
First, it is important to revisit the root structure of HTML documents and the tags that divide content visually. Furthermore, tag nesting rules are equally important because incorrectly nested tags can break your page layout. Therefore, these three questions consolidate the structural foundations introduced in earlier sections.
Mixed Review
51
Which HTML element is the correct container for both <head> and <body>?
A
<main>
B
<page>
C
<html>
D
<document>
Correct Answer: C — <html> The <html> element is the root and outermost container of every HTML document. Both the <head> and <body> sections must consequently nest directly inside it. This structure is fundamental: <html> → <head> (metadata) + <body> (visible content). Furthermore, this hierarchy gives the document its correct semantic structure. Therefore, every valid HTML page must start and end with the <html> tag.
Mixed Review
52
What does the <hr> tag stand for?
A
Header Row
B
Hyper Reference
C
Horizontal Rule
D
High Resolution
Correct Answer: C — Horizontal Rule <hr> stands for Horizontal Rule. It draws a horizontal line across the full width of the page, and developers consequently use it as a visual divider between sections of content. Additionally, like <br>, it is a self-closing (void) tag. Furthermore, you can customise its appearance using attributes like color, size, and width. Therefore, use <hr> whenever your page needs a clear visual break between sections.
Mixed Review
53
Which combination of tags correctly bolds AND italicises the word “HTML”?
A
<bold><italic>HTML</italic></bold>
B
<b><i>HTML</i></b>
C
<bi>HTML</bi>
D
<b+i>HTML</b+i>
Correct Answer: B — <b><i>HTML</i></b> You can apply multiple formatting tags by nesting them. First, wrapping text in <i> makes it italic. Then, wrapping that in <b> consequently makes it bold as well. Furthermore, the closing tags must mirror the opening tags in reverse order — </i> before </b>. As a result, the text renders as bold italic. Therefore, always close nested tags in the reverse order you opened them.
Q54–55 · Background Priority and the Anchor Tag Name
Additionally, when both background and bgcolor appear in the same body tag, it is important to know which one takes priority. Furthermore, understanding the full name of the anchor tag helps you remember its purpose. As a result, these two questions test both a practical rule and a fundamental piece of HTML vocabulary.
Mixed Review
54
A webpage has <body bgcolor=”yellow” background=”bg.jpg”>. Which one takes effect?
A
The bgcolor yellow background shows
B
The background image overrides the bgcolor
C
Both appear simultaneously in different sections
D
Neither applies and the page is white
Correct Answer: B — The background image overrides bgcolor When both the background (image) and bgcolor (colour) attributes appear in the <body> tag, the background image consequently takes priority and displays on top. However, the bgcolor colour shows in areas where the image has transparency or if the image fails to load. Therefore, always set bgcolor as a backup colour when you also use a background image.
Anchor Tag
55
What is the full name of the <a> tag?
A
Address Tag
B
Anchor Tag
C
Attribute Tag
D
Application Tag
Correct Answer: B — Anchor Tag The <a> tag officially carries the name Anchor tag. It consequently derives its name from the concept of “anchoring” a link to a specific location or resource on the web. Furthermore, it is the primary tool for creating hyperlinks in HTML, allowing users to navigate between pages, sections, files, and external resources. Therefore, mastering the <a> tag is essential for building any connected webpage.
Q56–58 · Case Sensitivity, Closing Tags, and Unclosed Tags
Moreover, some of the most common beginner mistakes in HTML involve case sensitivity errors and forgetting to close tags. Therefore, the next three questions test these specific problem areas. Furthermore, understanding what happens when you leave a tag unclosed helps you diagnose layout bugs much more quickly. As a result, these questions are especially practical for real-world coding.
Mixed Review
56
HTML tags are case-sensitive — TRUE or FALSE?
A
True — you must always use uppercase tags
B
False — HTML tags are NOT case-sensitive
C
True — you must always use lowercase tags
D
It depends on the web browser
Correct Answer: B — FALSE, HTML is not case-sensitive HTML tags are not case-sensitive, meaning <B> and <b> both work the same way. However, the widely recommended best practice is to write all HTML tags in lowercase. Furthermore, lowercase keeps code consistent, readable, and compatible with stricter languages like XHTML. Therefore, although both cases work, you should consequently always write tags in lowercase as a standard habit.
Mixed Review
57
Which symbol indicates a closing tag in HTML?
A
A hyphen (-) before the tag name
B
An asterisk (*) before the tag name
C
A forward slash (/) before the tag name
D
An exclamation mark (!) before the tag name
Correct Answer: C — A forward slash (/) before the tag name A closing tag uses a forward slash (/) placed immediately after the opening angle bracket. For example, the closing tag for a paragraph is consequently </p>. This signals to the browser that the element ends at that point. However, self-closing tags like <br> and <img> do not require a separate closing tag. Therefore, add a closing tag after every opening tag that wraps content.
Mixed Review
58
What happens when you do NOT close an HTML tag like <b>?
A
The browser shows an error message
B
The page does not load at all
C
The formatting continues until the end of the page or parent element
D
The tag is completely ignored
Correct Answer: C — Formatting continues to the end If you forget to close a tag like <b>, the browser tries to correct the error automatically and consequently continues applying bold formatting to all following content. As a result, the formatting extends to the end of the parent element or the page, causing unintended visual bugs. Therefore, properly closing all tags is an important habit that keeps your HTML clean and predictable.
Q59–60 · Correct Hyperlink Syntax and HTML as a Markup Language
Finally, these last two questions test your understanding of correct hyperlink syntax and HTML’s fundamental nature as a language. Additionally, knowing that HTML is a markup language — not a programming language — is one of the most important distinctions to understand. Therefore, approach these final questions as an opportunity to confirm that you have fully mastered the core concepts of this quiz.
Anchor Tag
59
Which of these is the correct syntax for a basic hyperlink that says “Click Here”?
A
<link href=”page.html”>Click Here</link>
B
<a url=”page.html”>Click Here</a>
C
<a href=”page.html”>Click Here</a>
D
<hyperlink to=”page.html”>Click Here</hyperlink>
Correct Answer: C — <a href=”page.html”>Click Here</a> The correct hyperlink consequently uses the <a> (anchor) tag with the href attribute to specify the destination. The visible link text goes between the opening and closing <a> tags. In contrast, the wrong options use invalid tags like <link> and <hyperlink>, or the incorrect attribute “url” instead of “href”. Therefore, always remember: use <a href=”…”> for every hyperlink you create.
Mixed Review
60
Which of the following statements about HTML is TRUE?
A
HTML is a programming language that performs calculations
B
HTML files can only be viewed offline
C
HTML requires a special compiler to run
D
HTML is a markup language interpreted by web browsers
Correct Answer: D — A markup language interpreted by web browsers HTML is a markup language, not a programming language. It does not perform calculations or logic — instead, it structures and presents content. Furthermore, web browsers like Chrome, Firefox, and Edge consequently interpret HTML files directly without needing any compilation step. As a result, this makes HTML easy for beginners to write and test quickly. Therefore, understanding that HTML is a markup language helps you know its purpose and limitations from the start.
You have now reached the end of Section 3 and completed all 60 questions. Consequently, your progress bar above reflects your total answered count. Furthermore, reviewing any wrong answers in detail will help you strengthen areas that need more practice. Well done on reaching the end of this quiz!
