HTML Beginner Quiz
40 questions on HTML for Beginners.
Question 1: What does HTML stand for?
- A. Hyper Trainer Marking Language
- B. Hyper Text Markup Language β (correct answer)
- C. Hyper Text Marketing Language
- D. Hyper Tool Multi Language
Explanation: HTML is the standard markup language used to create webpages and web applications.
Question 2: Which tag is used to define the largest heading in HTML?
- A.
<head>
- B.
<h6>
- C.
<heading>
- D.
<h1> β (correct answer)
Explanation: <h1> represents the highest level of heading, typically used for the main title of a page.
Question 3: What is the correct HTML element for inserting a line break?
- A.
<lb>
- B.
<break>
- C.
<br> β (correct answer)
- D.
<tr>
Explanation: The <br> tag inserts a single line break and is an empty element, meaning it has no closing tag.
Question 4: Which attribute is used to provide an alternate text for an image?
- A. title
- B. alt β (correct answer)
- C. src
- D. description
Explanation: The alt attribute provides alternative information for an image if a user cannot view it (e.g., due to slow connection or using a screen reader).
Question 5: How do you create a hyperlink in HTML?
- A.
<a url="http://www.example.com">Example</a>
- B.
<link href="http://www.example.com">Example</link>
- C.
<a href="http://www.example.com">Example</a> β (correct answer)
- D.
<href="http://www.example.com">Example</href>
Explanation: The <a> (anchor) tag combined with the href attribute is used to link from one page to another.
Question 6: Which tag is used to create an unordered list?
- A.
<ol>
- B.
<ul> β (correct answer)
- C.
<li>
- D.
<list>
Explanation: <ul> stands for Unordered List, which creates a bulleted list.
Question 7: What is the correct HTML element to define important text visually bold?
- A.
<strong> β (correct answer)
- B.
<b>
- C.
<important>
- D.
<i>
Explanation: While both <b> and <strong> make text bold visually, <strong> adds semantic importance to the text for screen readers.
Question 8: Which attribute specifies the destination URL in a form?
- A. method
- B. action β (correct answer)
- C. target
- D. submit
Explanation: The action attribute in the <form> tag specifies where to send the form data when a form is submitted.
Question 9: What is the correct doctype declaration for HTML5?
- A.
<!DOCTYPE HTML5>
- B.
<!DOCTYPE html> β (correct answer)
- C.
</DOCTYPE html>
- D.
<doctype html5>
Explanation: <!DOCTYPE html> is the exact, case-insensitive string required at the top of a document to trigger HTML5 standards mode.
Question 10: Which character is used to indicate an end tag?
- A.
*
- B.
<
- C.
/ β (correct answer)
- D.
^
Explanation: The forward slash / is placed before the tag name in a closing tag, like </p>.
Question 11: What is the purpose of the <head> element?
- A. To display the main title on the web page.
- B. To store metadata, titles, and links to scripts/stylesheets. β (correct answer)
- C. To create a header section visible to users.
- D. To define the top margin of the page.
Explanation: The <head> element contains machine-readable information about the document, like its title, scripts, and CSS. It is not visible on the webpage itself.
Question 12: How do you create a checkbox input in a form?
- A.
<input type="check">
- B.
<input type="checkbox"> β (correct answer)
- C.
<checkbox>
- D.
<check>
Explanation: The type="checkbox" attribute inside an <input> tag renders a standard checkbox.
Question 13: Which tag is used to define a table row?
- A.
<td>
- B.
<th>
- C.
<tr> β (correct answer)
- D.
<table>
Explanation: <tr> stands for Table Row and contains <th> (headers) or <td> (data cells).
Question 14: Which HTML attribute specifies that an input field must be filled out?
- A. validate
- B. placeholder
- C. required β (correct answer)
- D. necessary
Explanation: The required attribute is a boolean attribute that prevents form submission if the input field is empty.
Question 15: What tag is used to embed a video in an HTML page?
- A.
<media>
- B.
<video> β (correct answer)
- C.
<movie>
- D.
<embed>
Explanation: The <video> tag is the standard HTML5 element for embedding video content.
Question 16: What is the correct HTML for making a drop-down list?
- A.
<input type="dropdown">
- B.
<select> β (correct answer)
- C.
<list>
- D.
<dropdown>
Explanation: The <select> element is used to create a drop-down list, which contains multiple <option> elements.
Question 17: Which element is used to group block-level content for styling?
- A.
<span>
- B.
<div> β (correct answer)
- C.
<section>
- D.
<group>
Explanation: The <div> (division) element is a generic container for block-level content, primarily used for applying CSS classes.
Question 18: Which HTML element is used for short quotes?
- A.
<q> β (correct answer)
- B.
<blockquote>
- C.
<quote>
- D.
<cite>
Explanation: The <q> tag is used for short, inline quotations, and browsers usually insert quotation marks automatically.
Question 19: How can you open a link in a new tab or browser window?
- A.
<a href="url" target="new">
- B.
<a href="url" new>
- C.
<a href="url" target="_blank"> β (correct answer)
- D.
<a href="url" target="_window">
Explanation: The target="_blank" attribute tells the browser to open the linked document in a new tab or window.
Question 20: Which input type is best for entering a user's phone number?
- A.
type="number"
- B.
type="phone"
- C.
type="tel" β (correct answer)
- D.
type="text"
Explanation: type="tel" provides the correct keyboard on mobile devices for entering telephone numbers.
Question 21: What does the <iframe> tag do?
- A. It creates an animated frame around an image.
- B. It embeds another HTML document within the current one. β (correct answer)
- C. It defines a structural layout for the page.
- D. It prevents users from inspecting the code.
Explanation: The Inline Frame (<iframe>) tag is used to embed another document, like a YouTube video or Google Map.
Question 22: Why is Semantic HTML important?
- A. It makes the code execute faster in the browser.
- B. It provides meaning to the code, improving accessibility and SEO. β (correct answer)
- C. It allows you to use fewer CSS classes.
- D. It automatically styles the webpage.
Explanation: Semantic elements like <article> and <nav> describe their meaning clearly to both the browser and developer, aiding screen readers and search engines.
Question 23: In HTML5, which tag is intended to wrap the main navigation links?
- A.
<navigation>
- B.
<links>
- C.
<nav> β (correct answer)
- D.
<menu>
Explanation: The <nav> element is a semantic tag specifically designed to contain major navigational blocks.
Question 24: What is the purpose of the meta name="viewport" tag?
- A. To block search engines from crawling the site.
- B. To define the background color of the webpage.
- C. To control the layout on mobile browsers. β (correct answer)
- D. To link an external CSS file.
Explanation: The viewport meta tag tells mobile browsers how to scale and dimension the page, making responsive design possible.
Question 25: How do you merge two columns in an HTML table?
- A.
<td merge="2">
- B.
<td colspan="2"> β (correct answer)
- C.
<td rowspan="2">
- D.
<td span="2">
Explanation: The colspan attribute specifies the number of columns a table cell should span across.
Question 26: Which attribute prevents an audio file from playing automatically?
- A. By removing the
autoplay attribute. β (correct answer)
- B.
play="false"
- C.
muted="true"
- D.
stop="true"
Explanation: autoplay is a boolean attribute. If it is omitted, the audio will not play automatically upon loading.
Question 27: How do you group radio buttons together so only one can be selected?
- A. Give them the same
id attribute.
- B. Give them the same
class attribute.
- C. Give them the same
value attribute.
- D. Give them the same
name attribute. β (correct answer)
Explanation: Radio buttons behave as a group when they share the exact same name attribute.
Question 28: What is the difference between <script> and <noscript>?
- A.
<noscript> runs faster than <script>.
- B.
<noscript> displays alternative content if JavaScript is disabled. β (correct answer)
- C.
<noscript> hides the JavaScript code from users.
- D.
<noscript> is for older versions of JavaScript.
Explanation: The <noscript> element defines alternate HTML to display if the user's browser has disabled JavaScript.
Question 29: Which attribute adds invisible data to an element that can be read by JavaScript?
- A.
info-*
- B.
meta-*
- C.
data-* β (correct answer)
- D.
js-*
Explanation: data-* attributes allow developers to store custom data directly within standard HTML elements safely.
Question 30: What does the tabindex attribute do?
- A. Creates a table index for databases.
- B. Specifies the tab order of an element when using the keyboard. β (correct answer)
- C. Adds physical spaces (tabs) before a paragraph.
- D. Opens a link in a new browser tab.
Explanation: tabindex allows you to define whether an element is focusable, and in what order it is focused during keyboard navigation.
Question 31: Which tag defines a thematic break (a horizontal line)?
- A.
<hr> β (correct answer)
- B.
<br>
- C.
<line>
- D.
<tr>
Explanation: The <hr> (Horizontal Rule) tag defines a thematic break in an HTML page, usually displayed as a line.
Question 32: Which attribute allows a user to edit the text of an HTML element directly in the browser?
- A.
editable="true"
- B.
contenteditable="true" β (correct answer)
- C.
modify="yes"
- D.
user-edit="true"
Explanation: The contenteditable global attribute specifies whether the content of an element is editable by the user.
Question 33: Which input type shows a slider control?
- A.
type="slider"
- B.
type="scale"
- C.
type="range" β (correct answer)
- D.
type="number"
Explanation: type="range" creates an interactive slider to select a number within a specified range.
Question 34: How do you write a comment in HTML?
- A.
// Comment here
- B.
/* Comment here */
- C.
<!-- Comment here --> β (correct answer)
- D.
<comment> Comment here </comment>
Explanation: HTML comments begin with <!-- and end with -->. They are ignored by the browser.
Question 35: Which HTML5 element is used to draw graphics via JavaScript?
- A.
<svg>
- B.
<graphic>
- C.
<canvas> β (correct answer)
- D.
<draw>
Explanation: The <canvas> element provides a blank surface where JavaScript can render 2D shapes, text, and images.
Question 36: What is the purpose of the for attribute in a <label> tag?
- A. To create a loop in the form.
- B. To bind the label to a specific input element by its
id. β (correct answer)
- C. To specify the name of the form.
- D. To bind the label to a specific input element by its
name.
Explanation: Clicking a label with a for attribute that matches an input's id will automatically focus or check that input.
Question 37: Which combination of attributes allows a video to autoplay successfully in modern browsers?
- A.
autoplay="true"
- B.
autoplay and muted β (correct answer)
- C.
play="auto" and volume="0"
- D.
autoplay and controls
Explanation: Browsers strictly block autoplaying media with sound to protect users. You must include muted alongside autoplay for it to work.
Question 38: What is the correct way to specify multiple source files for a <picture> element?
- A. Using multiple
src attributes on the <img> tag.
- B. Using the
<source> tag nested inside <picture>. β (correct answer)
- C. Using the
srcset attribute on the <picture> tag.
- D. Using the
<link> tag.
Explanation: The <picture> element uses multiple <source> child tags to define different image URLs for different screen sizes (Art Direction).
Question 39: What is the difference between localStorage and sessionStorage?
- A.
localStorage is faster than sessionStorage.
- B.
sessionStorage survives browser restarts; localStorage does not.
- C.
localStorage persists until manually cleared; sessionStorage clears when the tab is closed. β (correct answer)
- D.
sessionStorage holds more data than localStorage.
Explanation: This is the fundamental difference in the Web Storage API regarding data lifespan.
Question 40: How does the browser handle an invalid HTML tag, like <mycustomtag>?
- A. It crashes the webpage.
- B. It throws a fatal error in the console.
- C. It treats it as an inline element and ignores it, rendering the text inside. β (correct answer)
- D. It deletes the tag and the text inside it.
Explanation: HTML is highly forgiving. If it encounters an unknown tag, it treats it like a generic <span> and renders the content anyway.