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.
60 Questions · 3 Sections · Select an answer to reveal explanation
Progress
0 / 60 answered
1
Section 1 — Foundations of HTML
Questions 1 – 20 · Topics: HTML basics, heading tags, background colour, font tag
0%
Section 1 Score
Answer questions to update your score
0
Correct
0
Wrong
20
Total
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.
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 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.
Questions 3–5 · Root Element, Heading Tags, and Display Size
Once you know what HTML is, you can 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).
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 treat it as the main topic of the page. Furthermore, good HTML practice recommends using only one <h1> per page. Therefore, 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.
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> carries the least visual weight. Consequently, it also holds the least semantic importance in the document hierarchy. Therefore, use it only for minor sub-headings deep within a page structure.
Background Colour
7
Which HTML attribute sets the background colour of a webpage in the <body> tag?
A
color
B
bgcolor
C
backcolor
D
background-color
Correct Answer: B — bgcolor The bgcolor attribute sets the background colour of the entire webpage when you place it inside the <body> tag. For example, <body bgcolor=”yellow”> turns the page yellow. However, HTML5 dropped support for this attribute. Instead, modern developers use CSS to set background colours. Therefore, while you should know bgcolor for Class 7, practise CSS background-color for advanced work.
Questions 8–10 · Setting Background Colour and Font Sizes
Setting background colour and controlling font size are among the most visual HTML tasks. For instance, bgcolor belongs inside the body tag, and font size values must stay between 1 and 7.
Background Colour
8
Which of the following correctly sets the background colour of a page to red using the bgcolor attribute?
A
<body color=”red”>
B
<html bgcolor=”red”>
C
<body bgcolor=”red”>
D
<background color=”red”>
Correct Answer: C — <body bgcolor=”red”> You must place the bgcolor attribute inside the opening <body> tag to set the page background colour. The value accepts a colour name like “red” or a hex code like “#FF0000″. In contrast, placing bgcolor in <html> or another tag will not work. Therefore, always write <body bgcolor=”red”> for the correct syntax.
Font Tag
9
Which HTML tag is used to change the font size, face, and colour of text?
A
<text>
B
<font>
C
<style>
D
<format>
Correct Answer: B — <font> The <font> tag modifies the visual appearance of text in HTML. It supports three main attributes: size controls font size, face specifies the font name like Arial, and color sets the text colour. However, HTML5 deprecated this tag. Instead, developers now use CSS for text styling. Therefore, understand <font> for older HTML, but practise CSS for modern web pages.
Font Tag
10
What is the valid range of font size values in the HTML <font> tag?
A
1 to 5
B
1 to 7
C
1 to 10
D
1 to 12
Correct Answer: B — 1 to 7 The HTML <font> tag accepts size values ranging from 1 (smallest) to 7 (largest). The default size is 3. For example, <font size=”5″> makes the text larger than the default. Additionally, the browser ignores or clamps values outside this range. Therefore, always keep your size value between 1 and 7 to ensure consistent text display.
Questions 11–15 · Font Attributes and Document Structure
Font attributes and document structure work closely together to build well-formed pages. Specifically, the face and color attributes control how text looks. Therefore, understanding both the visual layer and the structural layer helps you write better HTML.
Font Tag
11
Which attribute of the <font> tag specifies the name of the typeface?
A
type
B
style
C
face
D
name
Correct Answer: C — face The face attribute specifies the font family or typeface name for the enclosed text. For example, <font face=”Arial”> renders text in Arial font. Furthermore, you can list multiple fonts separated by commas as fallback options in case the first font is unavailable on the user’s device. Therefore, always provide fallback fonts to ensure your text displays correctly.
Font Tag
12
Which attribute of the <font> tag changes the text colour?
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”). For example, <font color=”green”>Hello</font> renders “Hello” in green. In contrast, bgcolor changes the page background, not the text itself. Therefore, use color specifically when you want to style text.
Questions 13–15 · Visible Content, Title Tag, and Body Section
Once you understand font attributes, you can explore how the browser displays content. For example, the body tag holds all visible elements, whereas the head tag holds invisible metadata.
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> and your document settings inside <head>.
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, 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 place them inside the <body> section. In contrast, the <head> section holds metadata such as titles, style sheets, and scripts. 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.
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 correctly.
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 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.
Questions 18–20 · Colour Values, Heading Behaviour, and Tag Definition
Colour values, heading behaviour, and tag definitions are closely related concepts. 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 need a separate formatting tag.
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 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.
Questions 19–20 · Heading Appearance and Tag Definitions
Understanding heading appearance and tag definitions strengthens your overall HTML knowledge. For example, heading tags produce bold text by default without any extra code. Moreover, a tag is simply a keyword inside angle brackets that tells the browser how to display content.
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 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 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 · Topics: Text alignment, paragraph tags, list tags, background image
0%
Section 2 Score
Answer questions to update your score
0
Correct
0
Wrong
20
Total
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.
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 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.
Questions 23–25 · Right Alignment, Paragraph Tag, and Line Breaks
Right alignment, the paragraph tag, and line breaks handle spacing differently. For example, the p tag adds vertical margins, whereas the br tag only moves text to the next line.
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 frequently appears in HTML text layout. While <h1> can also use the align attribute, the <p> tag serves as the standard container for flowing paragraphs that need alignment. 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, 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, 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–30 · Line Breaks, Bold, Italic, and Lists
Line breaks, bold text, italic text, and list tags give you powerful formatting options. Consequently, combining them lets you create well-structured, readable pages. For instance, nesting the b and i tags together produces bold italic text efficiently.
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 commonly 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 applies bold formatting to enclosed text, making it appear thicker and darker. For example, <b>Hello</b> renders “Hello” in bold. While <strong> also produces bold text, it additionally carries semantic meaning by indicating importance. In contrast, <b> is purely a visual formatting tag with no semantic weight. Therefore, use <b> for visual bold and <strong> when the text is genuinely important.
Questions 28–30 · Italic Text, Ordered Lists, and Unordered Lists
Italic text, ordered lists, and unordered lists each serve a specific display purpose. For example, the i tag slants text visually, whereas the ol tag numbers items automatically. Additionally, the ul tag uses bullet points when the order of items does not matter.
Paragraph Tags
28
Which tag makes text appear in italic format?
A
<it>
B
<slant>
C
<i>
D
<em> only
Correct Answer: C — <i> The <i> tag renders text in italic style — slanted text that stands out visually. For example, <i>world</i> displays “world” in italics. Similarly, the <em> tag also italicises text; however, it adds semantic emphasis in addition to the visual style. In contrast, <i> is the basic visual italic tag with no semantic meaning. Therefore, choose between them based on whether meaning matters.
List Tags
29
Which HTML tag creates an ordered (numbered) list?
A
<ul>
B
<ol>
C
<list>
D
<nl>
Correct Answer: B — <ol> The <ol> tag creates an Ordered List, where items number automatically as 1, 2, 3, and so on. Each item within an ordered list uses the <li> tag. Furthermore, ordered lists work best when sequence matters, such as steps in a recipe or a ranked list. Additionally, numbering begins at 1 by default. Therefore, use <ol> whenever the order of your list items carries specific meaning.
List Tags
30
Which HTML tag creates an unordered (bulleted) list?
A
<ul>
B
<ol>
C
<bl>
D
<dl>
Correct Answer: A — <ul> The <ul> tag creates an Unordered List, where each item displays a bullet point (•) instead of a number. You place each list item inside <li> tags. Furthermore, use unordered lists when the order of items does not matter, such as shopping lists or navigation menus. In contrast, <ol> creates a numbered list. Therefore, choose <ul> whenever sequence is unimportant.
Questions 31–35 · List Items, Bullets, and Background Images
List items, bullet symbols, and background images each add depth to a webpage. Therefore, knowing the correct tag for each situation saves time and prevents errors. For instance, every list item needs an li tag, regardless of whether it belongs to ol or ul.
List Tags
31
Which tag do you use to define each item inside a list?
A
<item>
B
<list-item>
C
<li>
D
<point>
Correct Answer: C — <li> The <li> tag defines a List Item, and you use it inside both <ol> (ordered) and <ul> (unordered) lists. Each item you add to a list must wrap in <li></li> tags. For example, <ul><li>Apple</li><li>Mango</li></ul> creates a two-item bulleted list. Therefore, always pair <li> with either <ul> or <ol> to create valid list structures.
List Tags
32
What symbol does an unordered list use to mark each item by default?
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> 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, for example to a circle or square. In contrast, ordered lists use numbers. Therefore, use <ul> whenever bullets suit the content better than numbers.
Questions 33–35 · Background Image Attribute and List Syntax
Background image attributes and list syntax both require precise code. For example, the background attribute takes a file path, whereas bgcolor takes a colour value.
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. The path works as either a relative or absolute address, and the image tiles by default to fill the entire page. However, HTML5 removed support for this attribute. Instead, developers now use the CSS background-image property. Therefore, know both approaches, but prefer CSS for modern projects.
Questions 34–35 · Image Tiling Behaviour and Numbered List Syntax
When a background image is smaller than the window, the browser tiles it automatically. Similarly, creating a numbered list requires the ol tag with li items inside it.
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 the default for images set with the background attribute in the <body> tag. 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 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 (unordered) list rather than a numbered one. Therefore, always use <ol> when you need your list items to appear in a numbered sequence.
Questions 36–40 · Self-Closing Tags, Alignment, and Nested Lists
Self-closing tags, alignment values, and nested lists each follow distinct rules. For instance, the br tag needs no closing tag because it contains no content. Similarly, nested lists must go inside an li element rather than directly inside ul or ol.
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 has no closing tag. It simply inserts a line break wherever you place it. In XHTML, developers write it as <br />. However, in HTML5, plain <br> is the correct and accepted form. Therefore, never write </br> after a <br> tag, as it serves no purpose.
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 pushes text to the right margin of the container or page. This approach works well for placing captions, dates, or any content that conventionally appears on the right side. 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.
Questions 38–40 · Paragraph vs Line Break and Nested Lists
The difference between paragraph spacing and line breaks becomes clear when you examine visual output. For example, p adds top and bottom margins, whereas br only moves to the next line. Additionally, HTML allows you to place lists inside other lists for hierarchical content.
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, adding noticeable vertical spacing between paragraphs. In contrast, the <br> tag simply moves the cursor to the next line without any additional space. Furthermore, HTML experts regard using <br><br> to mimic paragraph spacing as poor practice. Therefore, use <p> tags for proper paragraph structure and spacing.
Questions 39–40 · Nested Lists and Background Image Values
Nested lists and background image values round off this section on HTML formatting. Specifically, placing a new ul or ol inside any li item creates useful sub-lists. Furthermore, the background attribute always requires an image file path rather than a colour name.
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. This technique works well for displaying hierarchical information, such as a multi-level table of contents or a recipe with sub-steps. Furthermore, browsers automatically indent nested lists to show the hierarchy visually. 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”> uses a local image, while <body background=”https://example.com/img.png”> 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–45 · Inserting Images and Creating 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.
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 requires at minimum the src attribute, which specifies the image path. Additionally, the alt attribute provides alternative text for accessibility in case the image cannot load. 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”) points to a local file. Alternatively, an absolute URL (e.g., “https://example.com/cat.jpg”) points to an image on the internet. Therefore, without the src attribute, the browser cannot load any image at all.
Questions 43–45 · Alt Text, Image Dimensions, and Anchor Tag
Alt text, image dimensions, and the anchor tag work together to make pages accessible. For example, alt text displays when an image fails to load, which also helps screen readers.
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 displays when the image cannot load, for example due to a broken link or slow internet. 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.
Questions 44–45 · Image Dimensions and the Anchor Tag
The width and height attributes control how an image displays on screen. Furthermore, the anchor tag uses the href attribute to create clickable hyperlinks that navigate users to any URL.
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″> renders the image at 300×200 pixels. Furthermore, setting both values maintains a precise layout. Alternatively, setting only one allows the browser to scale the image proportionally. Therefore, use these attributes to control how images fit into your page design.
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 or image, the browser navigates to the address you specify in the href attribute. For example, <a href=”https://google.com”>Visit Google</a> creates a link labelled “Visit Google”. Therefore, the <a> tag is the primary tool for connecting pages and resources across the web.
Questions 46–50 · Anchor Tag Attributes and Link Targets
Anchor tag attributes and link targets give you precise control over navigation behaviour. For instance, href sets the destination URL, while target blank opens the link in a new tab. Furthermore, visited links turn purple by default, helping users track where they have already been.
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 navigates to when clicked. It can point to an external website (https://…) or a local file (page2.html). Additionally, it supports email addresses (mailto:…) or a specific section on the same page using a fragment identifier (#section). 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 instructs the browser to open the linked page in a new tab or window. For example, <a href=”https://google.com” target=”_blank”>Google</a> opens Google in a new tab. In contrast, without this attribute, links open in the same tab by default. 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 page.
Questions 48–50 · Link Colours, Image Syntax, and Email Links
Link colours, image syntax, and email links each follow distinct rules. For example, unvisited links appear blue and visited links appear purple by default.
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 changes its colour to purple to indicate it has already been visited. This visual cue helps users remember which links they have already explored. Furthermore, CSS allows developers to change these default colours to match any design. Therefore, the blue/purple default behaviour comes built into every browser.
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 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 your image dimensions.
Anchor Tag
50
Which of the following correctly creates a hyperlink to an email address?
Correct Answer: B — href=”mailto:…” To link to an email address, you 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 with the address. Furthermore, this approach works across most devices and email clients without any extra setup. Therefore, use mailto: links for “Contact Us” sections on websites to give users an easy way to reach you.
Questions 51–55 · HTML Structure and Tag Naming Review
HTML structure and tag naming form the core of valid, well-organised code. Therefore, knowing which element contains which is absolutely essential. For instance, the html tag wraps both head and body, and hr — short for Horizontal Rule — draws a visible dividing line.
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 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 typically 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.
Questions 53–55 · Tag Nesting, Background Priority, and Anchor Name
Tag nesting, background priority, and anchor names are important advanced topics. For example, you must close nested tags in reverse order, and when both background and bgcolor appear, the image always overrides the colour.
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> makes it bold as well. Furthermore, the closing tags must mirror the opening tags in reverse order — </i> before </b> — to maintain correct nesting. As a result, the text renders as bold italic. Therefore, always close nested tags in the reverse order you opened them.
Questions 54–55 · Background Priority and the Anchor Tag Name
When both background and bgcolor appear in the body tag, the image overrides the colour. Additionally, the a tag takes its name from the concept of anchoring a link to a specific resource on the web.
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 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, making it a useful fallback. 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 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.
Questions 56–60 · Case Sensitivity, Closing Tags, and HTML Facts
Case sensitivity, closing tags, and general HTML facts test your overall understanding. For instance, HTML tags are not case-sensitive, although lowercase is the recommended standard. Additionally, forgetting to close a tag causes formatting to extend unintentionally to the end of the page.
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>, <b>, and <b> all work the same way. However, the widely recommended best practice and W3C standard is to write all HTML tags in lowercase. Furthermore, lowercase keeps code consistent, readable, and compatible with stricter XML-based languages like XHTML. Therefore, always write your HTML tags in lowercase to follow standard conventions.
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 </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.
Questions 58–60 · Unclosed Tags, Hyperlink Syntax, and HTML Facts
Unclosed tags, hyperlink syntax, and HTML’s role as a language are all crucial concepts. Consequently, always closing your tags prevents unexpected layout bugs. Furthermore, HTML is a markup language that structures content, rather than a programming language that performs calculations.
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 continues applying bold formatting to all following content. As a result, the formatting extends to the end of the parent element or the page. This causes unintended visual bugs. Therefore, properly closing all tags is an important habit that keeps your HTML clean and predictable.
Questions 59–60 · Correct Hyperlink Syntax and HTML as a Language
Correct hyperlink syntax and HTML’s fundamental nature bring this final section to a close. For example, a valid hyperlink always uses the a tag with an href attribute. Additionally, browsers interpret HTML files directly without any compilation step, making HTML beginner-friendly.
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 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.
Question 60 · Understanding HTML as a Markup Language
This final question tests your understanding of what HTML fundamentally is as a language. Therefore, think carefully about the distinction between markup languages and programming languages. For instance, HTML cannot perform calculations, but it structures and presents content clearly.
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. Web browsers like Chrome, Firefox, and Edge 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.
End of Section 3 — Well Done on Completing the Quiz!
You have now reached the end of Section 3 and completed all 60 questions. Consequently, your score panels above reflect your total performance across all topics. Furthermore, reviewing any wrong answers in detail will help you strengthen areas that need more practice.
