Skip to main content

HTML Phase Assessments 📝

Mentor's Note: Assessments help you identify gaps in your understanding. Take each quiz after completing the corresponding phase. If you score below 7/10, review the phase lessons before moving on. Learning is about mastery, not speed!

🗺️ Assessment Flow​

Phase 1 Assessment: HTML Foundations​

1. What does HTML stand for?

  • High Tech Modern Language
  • Home Tool Markup Language
  • Hyper Text Markup Language
  • Hyper Transfer Markup Language

2. Which tag is used for the largest heading?

  • <heading>
  • <h6>
  • <h1>
  • <head>

3. Which tag creates a paragraph?

  • <para>
  • <p>
  • <text>
  • <paragraph>

4. What attribute specifies the image source in an <img> tag?

  • href
  • src
  • link
  • url

5. Which tag creates a hyperlink?

  • <link>
  • <a>
  • <href>
  • <url>

6. Which tag is used for an unordered list?

  • <ol>
  • <ul>
  • <li>
  • <list>

7. Which tag creates a line break?

  • <break>
  • <lb>
  • <newline>
  • <br>

8. What does <!DOCTYPE html> do?

  • Creates an HTML element
  • Declares the document as HTML5
  • Starts the body section
  • Imports a stylesheet

9. How do you write a comment in HTML?

  • // This is a comment
  • /* This is a comment */
  • <!-- This is a comment -->
  • # This is a comment

10. Which tag is used to make text bold?

  • <strong>
  • <bold>
  • <bld>
  • <em>

Phase 2 Assessment: Structure​

1. Which semantic tag represents the main content area of a page?

  • <header>
  • <main>
  • <section>
  • <aside>

2. What does colspan="2" do in a table?

  • Merges two rows vertically
  • Merges two columns horizontally
  • Creates two columns
  • Doubles the column width

3. Which elements group table content into head, body, and foot sections?

  • <tr>, <td>, <th>
  • <thead>, <tbody>, <tfoot>
  • <col>, <colgroup>, <caption>
  • <table>, <tr>, <td>

4. What is the difference between <div> and <span>?

  • <div> is block-level; <span> is inline
  • <div> is inline; <span> is block-level
  • They are identical
  • <div> is for text; <span> is for images

5. Which HTML5 element defines navigation links?

  • <navigation>
  • <nav>
  • <links>
  • <menu>

6. What is the difference between <article> and <section>?

  • <article> is self-contained content; <section> groups related content
  • <section> is self-contained content; <article> groups related content
  • They are interchangeable
  • <article> is for blogs only

7. Which element contains introductory content or navigational aids?

  • <header>
  • <top>
  • <intro>
  • <banner>

8. Which element typically contains copyright, links, and author info?

  • <bottom>
  • <footer>
  • <copyright>
  • <closing>

9. Which semantic element represents content tangentially related to the main content?

  • <sidebar>
  • <aside>
  • <related>
  • <extra>

10. What does rowspan="3" do in a table?

  • Makes a cell span 3 rows vertically
  • Makes a cell span 3 columns horizontally
  • Creates 3 rows
  • Triples the row height

Phase 3 Assessment: Multimedia​

1. Which image format supports transparency and animation?

  • JPEG
  • GIF
  • BMP
  • TIFF

2. What does the srcset attribute on <img> do?

  • Sets the image source
  • Provides multiple image sources for different screen resolutions
  • Sets the image size
  • Specifies the image format

3. Why is the alt attribute important?

  • Provides alternative text for screen readers and when images fail to load
  • Sets the image alignment
  • Defines the image border
  • Specifies image dimensions

4. Which attribute adds playback controls to <audio> and <video>?

  • playback
  • play
  • controls
  • player

5. What does the <source> element inside <video> do?

  • Starts the video
  • Specifies alternative video file formats
  • Adds subtitles
  • Sets video dimensions

6. Which is a vector graphics format natively supported in HTML5?

  • SVG
  • JPEG
  • PNG
  • BMP

7. What attribute on <iframe> improves security by restricting capabilities?

  • secure
  • restrict
  • sandbox
  • protect

8. Which element groups an image with its caption?

  • <img>
  • <caption>
  • <figure>
  • <image-group>

9. What does the <picture> element do?

  • Provides multiple image sources for different screen sizes/conditions
  • Creates a photo gallery
  • Adds a border to images
  • Converts image formats

10. Which video attribute enables automatic playback when the page loads?

  • play
  • start
  • autoplay
  • preload

Phase 4 Assessment: Forms​

1. What does the action attribute on <form> specify?

  • The HTTP method to use
  • The URL where form data is sent
  • The form's name
  • The form's encoding type

2. What is the difference between GET and POST methods?

  • GET appends data to URL; POST sends data in the request body
  • GET is faster; POST is slower
  • GET is secure; POST is insecure
  • GET sends files; POST sends text

3. Which input type creates a field for entering an email address?

  • <input type="text">
  • <input type="email">
  • <input type="mail">
  • <input type="url">

4. What does the required attribute do?

  • Makes a form field mandatory
  • Requires user confirmation
  • Requests data from server
  • Requires a specific value

5. What does the pattern attribute accept to validate input?

  • A JavaScript function
  • A CSS selector
  • A regular expression
  • An HTML element ID

6. What do minlength and maxlength control?

  • Minimum and maximum character count for input
  • Minimum and maximum numeric value
  • Input field width in pixels
  • Number of options in a select menu

7. How does the <label> element associate with an input?

  • By wrapping the input
  • Using the for attribute matching the input's id
  • By placing it after the input
  • Using the name attribute

8. Which elements group related form fields and provide a legend?

  • <group> and <title>
  • <fieldset> and <legend>
  • <section> and <heading>
  • <box> and <label>

9. Which input type creates a dropdown list?

  • <input type="dropdown">
  • <list>
  • <select>
  • <input type="list">

10. Which button type resets form fields to their initial values?

  • <button type="submit">
  • <button type="reset">
  • <button type="button">
  • <button type="clear">

Phase 5 Assessment: APIs​

1. What method gets the 2D drawing context from a <canvas> element?

  • canvas.getContext()
  • canvas.getContext('2d')
  • canvas.get2DContext()
  • canvas.getCanvasRenderingContext()

2. Which canvas method draws a filled rectangle?

  • drawRect()
  • fillRect()
  • paintRect()
  • createRect()

3. Which canvas methods define and draw a custom shape path?

  • beginPath(), moveTo(), lineTo(), fill()/stroke()
  • startPath(), goTo(), drawTo(), render()
  • newPath(), setPosition(), draw(), output()
  • createPath(), setPoint(), addLine(), display()

4. How do you save data to localStorage?

  • localStorage.save('key', value)
  • localStorage.setItem('key', value)
  • localStorage.put('key', value)
  • localStorage.store('key', value)

5. How do you retrieve data from localStorage?

  • localStorage.retrieve('key')
  • localStorage.read('key')
  • localStorage.getItem('key')
  • localStorage.fetch('key')

6. What is the difference between localStorage and sessionStorage?

  • localStorage persists until cleared; sessionStorage clears when the tab closes
  • localStorage is faster; sessionStorage is slower
  • localStorage stores strings; sessionStorage stores objects
  • There is no difference

7. What does localStorage.removeItem('key') do?

  • Removes the last item from storage
  • Removes a specific key-value pair from localStorage
  • Clears all localStorage data
  • Hides the item from view

8. Which method gets the user's current position using the Geolocation API?

  • navigator.geolocation.getLocation()
  • navigator.geolocation.getCurrentPosition()
  • navigator.geolocation.getCoordinates()
  • window.geolocation.getPosition()

9. Which method is best for smooth 60fps canvas animations?

  • setInterval()
  • setTimeout()
  • requestAnimationFrame()
  • animate()

10. Which canvas method draws a circle or arc?

  • drawCircle()
  • createArc()
  • arc()
  • circle()

Phase 6 Assessment: Professional HTML​

1. Which meta tag provides a brief page summary for search results?

  • <meta name="keywords">
  • <meta name="description">
  • <meta name="author">
  • <meta name="summary">

2. What does the Open Graph tag og:title control?

  • The title shown when the page is shared on social media platforms
  • The browser tab title
  • The page's heading tag
  • The site's navigation label

3. Which meta tag controls how a page appears when shared on X/Twitter?

  • <meta name="twitter:card">
  • <meta name="twitter:card"> with appropriate content value
  • <meta name="x:preview">
  • <meta name="social:card">

4. What format is used for JSON-LD structured data?

  • XML
  • YAML
  • JSON
  • CSV

5. Which ARIA attribute defines a label for an element?

  • aria-title
  • aria-name
  • aria-label
  • aria-text

6. What does role="navigation" indicate?

  • The element contains a map
  • The element contains navigation links
  • The element is a menu
  • The element redirects the page

7. How do you enable lazy loading for images?

  • <img src="..." lazy>
  • <img src="..." loading="lazy">
  • <img src="..." defer="true">
  • <img src="..." lazy="true">

8. What does the viewport meta tag do?

  • Controls page layout and scaling on mobile devices
  • Sets the browser window size
  • Defines visible area for images
  • Configures the camera viewport

9. What is the purpose of a canonical tag?

  • Prevents duplicate content issues by specifying the preferred URL
  • Creates a copy of the page
  • Links to the top of the page
  • Adds a page to the browser history

10. Which meta tag prevents search engines from indexing a page?

  • <meta name="index" content="no">
  • <meta name="robots" content="noindex">
  • <meta name="search" content="off">
  • <meta name="google" content="ignore">

Phase 7 Assessment: Modern Web​

1. Which method registers a custom element in Web Components?

  • registerElement()
  • customElements.define()
  • document.createComponent()
  • window.defineElement()

2. What does attachShadow({ mode: 'open' }) do?

  • Attaches a shadow DOM root that can be accessed via element.shadowRoot
  • Creates a page shadow effect
  • Hides the element from the DOM
  • Attaches a click handler

3. Which HTML element holds reusable markup for Web Components?

  • <component>
  • <slot>
  • <template>
  • <fragment>

4. What file does a PWA use to define its name, icons, and theme color?

  • pwa.json
  • app.json
  • config.json
  • manifest.json

5. Why do email newsletters use table-based layouts?

  • Tables are more reliably rendered across email clients than CSS layouts
  • Tables load faster than divs
  • Emails cannot use div elements
  • CSS is not allowed in emails

6. Which DevTools panel lets you modify HTML and CSS in real-time?

  • Console
  • Elements
  • Sources
  • Network

7. What does the Lighthouse "Performance" category measure?

  • How fast the page loads and responds to user interaction
  • How much CPU the page uses
  • The page's ranking in search results
  • The number of requests made

8. Which attribute on <template> is essential for cloning its content?

  • id
  • class
  • content (property, not attribute)
  • src

9. What does the <slot> element do in a Web Component?

  • Defines a placeholder where user-provided content can be inserted
  • Creates a form input field
  • Adds a drop-down menu
  • Inserts a timestamp

10. Which CSS pseudo-class styles the host element of a Web Component?

  • :root
  • :host
  • :element
  • :component

Phase 8 Assessment: Projects​

1. What is the first step when planning a website project?

  • Writing HTML code
  • Defining the site's purpose and target audience
  • Choosing colors
  • Buying a domain name

2. Why is semantic HTML important in real projects?

  • Improves accessibility, SEO, and code maintainability
  • Makes pages load faster
  • Allows use of CSS frameworks
  • Reduces file size

3. Which tool validates HTML code against web standards?

  • Lighthouse
  • W3C Validator
  • Chrome DevTools
  • Prettier

4. What attribute provides responsive images that adapt to screen size?

  • responsive
  • adaptive
  • srcset
  • flex

5. Why should every page include Open Graph tags in a production site?

  • Controls how the page appears when shared on social media
  • Improves server performance
  • Enables offline access
  • Validates the HTML

6. Which practice ensures your website is usable by people with disabilities?

  • Using lots of images
  • Following WCAG accessibility guidelines
  • Adding animations
  • Using complex layouts

7. Which service can deploy a static HTML website for free?

  • AWS EC2
  • Netlify or GitHub Pages
  • Google Cloud Run
  • Heroku

8. What is the purpose of a site map (sitemap.xml)?

  • Shows the page layout design
  • Helps search engines discover and index all pages
  • Lists all site errors
  • Provides navigation for users

9. Which form attribute prevents browser autocomplete on sensitive fields?

  • no-autocomplete
  • off
  • autocomplete="off"
  • disable-autofill

10. What should you check before deploying a website?

  • All links work, forms submit correctly, pages pass validation
  • The logo is animated
  • The background is a gradient
  • There are at least 10 pages

Phase 9 Assessment: Integration & Interview​

1. Which CSS integration method has the highest specificity?

  • Inline CSS (style attribute)
  • Internal CSS (<style> block)
  • External CSS (linked file)
  • Imported CSS (@import)

2. Where should <script> tags be placed for optimal page load performance?

  • In the <head> without any attributes
  • In the <head> with defer or at the end of <body>
  • After the closing </html> tag
  • Inside the <footer> element

3. What does the defer attribute do on a <script> tag?

  • Downloads the script while parsing HTML and executes after parsing completes
  • Delays the script execution by 1 second
  • Prevents the script from loading
  • Duplicates the script

4. What is the difference between defer and async?

  • defer preserves execution order; async does not
  • async preserves execution order; defer does not
  • They are identical
  • defer is for CSS; async is for JavaScript

5. Which event fires when the HTML document is fully loaded and parsed?

  • window.onload
  • DOMContentLoaded
  • document.ready
  • page.loaded

6. Which method selects an element by its ID?

  • document.querySelectorAll('#id')
  • document.getElementById('id')
  • document.find('#id')
  • document.fetch('id')

7. Which method adds an event listener to an element?

  • element.on('click', handler)
  • element.bind('click', handler)
  • element.addEventListener('click', handler)
  • element.listen('click', handler)

8. How can JavaScript validate a form before submission?

  • Listen for the submit event and call event.preventDefault() if validation fails
  • Use the onerror attribute
  • Check the form status periodically
  • Disable the submit button

9. What does event.preventDefault() do?

  • Prevents the default browser behavior (e.g., form submission, link navigation)
  • Stops all JavaScript execution
  • Prevents the page from scrolling
  • Blocks all events on the page

10. What is the difference between innerHTML and textContent?

  • innerHTML parses HTML tags; textContent treats everything as plain text
  • textContent parses HTML tags; innerHTML treats everything as plain text
  • They are identical
  • innerHTML is faster; textContent is slower

← Back to HTML Home