Back to Subject

View Notes Practice MCQ

Unit 1: HTML Fundamentals - Subjective Questions

CSE326 — Internet Programming • Practice Questions with Detailed Answers

20 questions

Define the Internet and the World Wide Web. Explain how they differ from each other.

Explain the roles of URL, DNS, HTTP/HTTPS, web browsers, and web servers in accessing a website.

Describe client-server architecture and explain the complete request-response cycle for loading a web page.

What is HTML5? Discuss its important features and advantages over earlier versions of HTML.

Describe the basic structure of an HTML5 document and state the purpose of each major part.

A basic HTML5 document is:

HTML

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Sample Page</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This is a web page.</p>
</body>
</html>

Purpose of each part:

<!DOCTYPE html> tells the browser to interpret the document using HTML5 standards.
<html> is the root element. Its lang attribute identifies the document language.
<head> contains metadata and references to resources that are not normally displayed as page content.
<meta charset='UTF-8'> specifies Unicode character encoding.
The viewport metadata helps the page display correctly on mobile devices.
<title> defines the text shown on the browser tab and is also important for SEO.
<body> contains visible and interactive page content.
<h1> represents the main heading.
<p> represents a paragraph.

A properly structured document improves browser compatibility, accessibility, maintainability, and search-engine interpretation.

Explain HTML elements and attributes. Distinguish between container elements, void elements, block-level elements, and inline elements with examples.

Compare semantic and non-semantic HTML elements. Explain how semantic HTML benefits accessibility, SEO, and maintainability.

Describe the HTML elements used for headings, paragraphs, line breaks, quotations, preformatted text, and text emphasis. Differentiate <strong> from <b> and <em> from <i>.

Explain ordered lists, unordered lists, and description lists in HTML. Show how nested lists can be created.

HTML supports three principal list types:

Unordered list: <ul> contains list items marked with <li>. It is used when item order is not important.
Ordered list: <ol> contains <li> items and is used when sequence or ranking matters.
Description list: <dl> contains terms in <dt> and their descriptions in <dd>.

Example:

HTML

<h2>Course Contents</h2>
<ol>
  <li>HTML
    <ul>
      <li>Elements</li>
      <li>Attributes</li>
    </ul>
  </li>
  <li>CSS</li>
</ol>

<dl>
  <dt>HTML</dt>
  <dd>A markup language for structuring web content.</dd>
</dl>

In a nested list, the inner <ul> or <ol> should be placed inside the relevant <li>. Ordered lists may also use attributes such as start, reversed, and type, although visual marker styling is often better handled with CSS.

Appropriate list markup conveys the relationship between items and improves both readability and accessibility.

Explain how hyperlinks are created in HTML. Discuss absolute URLs, relative URLs, fragment links, email links, and important anchor attributes.

A hyperlink is created with the anchor element:

HTML

<a href='https://example.com'>Visit Example</a>

The href attribute specifies the destination.

Types of links:

Absolute URL: Includes the complete location, such as https://example.com/docs/page.html.
Relative URL: Refers to a resource relative to the current document, such as about.html or ../images/logo.png.
Fragment link: Links to an element with a matching id, such as <a href='#contact'>Contact</a>.
Email link: Uses the mailto: scheme, such as <a href='mailto:help@example.com'>Email us</a>.
Telephone link: Uses the tel: scheme and is especially useful on mobile devices.

Important attributes:

target='_blank' opens a link in a new browsing context.
rel='noopener noreferrer' improves security and privacy for certain external links opened in a new tab.
download suggests that the linked resource should be downloaded.
hreflang indicates the language of the linked resource.

Link text should describe the destination. Phrases such as click here should be avoided because they provide little context to users and assistive technologies.

Describe how images are embedded in HTML. Explain the purpose of src, alt, width, height, srcset, <picture>, <figure>, and <figcaption>.

The <img> element embeds an image:

HTML

<figure>
  <picture>
    <source media='(min-width: 800px)' srcset='banner-large.webp'>
    <img src='banner-small.jpg' alt='Students learning web development' width='640' height='360'>
  </picture>
  <figcaption>Students attending an HTML workshop.</figcaption>
</figure>

Purpose of the features:

src specifies the default image resource.
alt provides a text alternative when the image cannot be seen or loaded. Decorative images normally use alt=''.
width and height provide intrinsic dimensions and help the browser reserve space, reducing layout shifts.
srcset supplies multiple image candidates for different resolutions or display widths.
<picture> allows the browser to choose among sources based on media conditions or supported formats.
<figure> represents self-contained content such as an image, illustration, or diagram.
<figcaption> provides a caption for the figure.

Good image practices include using meaningful file names, selecting efficient formats, compressing files, supplying accurate alternative text, and using responsive images rather than sending unnecessarily large files.

What is SVG? Explain how SVG graphics are created in HTML and compare SVG with raster images.

Scalable Vector Graphics or SVG is an XML-based format for describing two-dimensional graphics using shapes, paths, text, gradients, and transformations.

Example of inline SVG:

HTML

<svg width='200' height='120' viewBox='0 0 200 120' role='img' aria-labelledby='svgTitle'>
  <title id='svgTitle'>Blue circle</title>
  <circle cx='100' cy='60' r='45' fill='royalblue' />
</svg>

Important concepts:

viewBox defines the SVG coordinate system and enables scaling.
Elements such as <circle>, <rect>, <line>, <polygon>, <path>, and <text> define graphic objects.
SVG can be embedded inline, loaded through <img>, or used as a CSS background.
Inline SVG elements can be styled with CSS and manipulated with JavaScript.

SVG versus raster images:

SVG is vector-based and remains sharp at different sizes; JPEG and PNG are pixel-based and can become blurred when enlarged.
SVG is often efficient for logos, icons, diagrams, and simple illustrations.
Raster formats are generally more suitable for detailed photographs.
SVG source is text-based, searchable, and potentially accessible when titles and descriptions are supplied.
Extremely complex SVG illustrations may be slower or larger than an appropriately compressed raster image.

SVG is therefore especially useful for responsive, resolution-independent web graphics.

Explain the HTML5 <audio> element and describe how fallback content, multiple sources, and accessibility considerations are handled.

The <audio> element embeds sound without requiring a third-party plugin.

HTML

<audio controls preload='metadata'>
  <source src='lesson.ogg' type='audio/ogg'>
  <source src='lesson.mp3' type='audio/mpeg'>
  Your browser does not support HTML audio.
  <a href='lesson.mp3'>Download the recording</a>.
</audio>

Important features:

controls displays browser-provided playback controls.
<source> supplies alternative formats. The browser uses the first format it supports.
preload='metadata' suggests loading only metadata initially.
autoplay starts playback automatically but may be blocked by browsers and can harm usability.
loop repeats the media.
muted starts playback without sound.
Text inside <audio> acts as fallback for browsers that do not support the element.

Accessibility considerations:

Provide a transcript for spoken content.
Do not rely on autoplay.
Ensure controls can be operated with a keyboard.
Clearly identify the purpose and duration of the recording.
Provide a direct download link when appropriate.

Using multiple sources increases browser compatibility, while transcripts make audio information available to users who cannot hear or play the recording.

Explain the HTML5 <video> element. Discuss its major attributes, multiple source formats, captions, poster images, and fallback content.

The <video> element provides native video playback:

HTML

<video controls width='640' height='360' poster='preview.jpg' preload='metadata'>
  <source src='lesson.webm' type='video/webm'>
  <source src='lesson.mp4' type='video/mp4'>
  <track kind='captions' src='captions-en.vtt' srclang='en' label='English' default>
  Your browser does not support HTML video.
  <a href='lesson.mp4'>Download the video</a>.
</video>

Major features:

controls displays playback, volume, and seeking controls.
width and height define the media display dimensions.
poster specifies an image displayed before playback begins.
preload gives the browser a loading hint.
autoplay, muted, and loop control playback behavior.
Multiple <source> elements provide different video formats.
<track> associates WebVTT captions, subtitles, descriptions, chapters, or metadata with the video.
Fallback text and a download link help users whose browsers cannot play the embedded video.

For accessibility, videos should provide synchronized captions, and audio descriptions or transcripts should be supplied when visual information is necessary for understanding. Autoplay with sound should generally be avoided.

What is an iframe? Explain its common uses, important attributes, security risks, and recommended practices.

An iframe, created with <iframe>, embeds another HTML document within the current page.

HTML

<iframe
  src='https://example.com/map'
  title='Location map'
  width='600'
  height='400'
  loading='lazy'
  sandbox='allow-scripts allow-same-origin'>
</iframe>

Common uses:

Embedding maps, videos, documents, or third-party applications.
Isolating external or independently managed content.

Important attributes:

src specifies the embedded document.
title provides an accessible name.
width and height define dimensions.
loading='lazy' delays loading until the frame is near the viewport.
allow grants selected features such as fullscreen or camera access.
sandbox restricts scripts, forms, navigation, pop-ups, and other capabilities.
referrerpolicy controls referrer information sent to the framed resource.

Risks and limitations:

Untrusted content may attempt malicious actions.
Third-party frames can affect privacy and performance.
Framed pages can create accessibility and navigation difficulties.
Websites may prevent embedding using security headers.

Iframes should be used only when necessary, given meaningful titles, restricted through sandbox and allow, lazy-loaded where suitable, and sourced from trusted providers.

Define Search Engine Optimization and explain the important on-page SEO practices related to HTML.

Explain the purpose of important metadata placed in the HTML <head>, including character encoding, viewport settings, description, canonical links, robots directives, and social metadata.

The <head> contains metadata and resource references used by browsers, search engines, and social platforms.

Example:

HTML

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <meta name='description' content='Learn the fundamentals of HTML5.'>
  <meta name='robots' content='index, follow'>
  <link rel='canonical' href='https://example.com/html-fundamentals'>
  <meta property='og:title' content='HTML5 Fundamentals'>
  <meta property='og:image' content='https://example.com/html-cover.jpg'>
  <title>HTML5 Fundamentals</title>
</head>

Purpose:

charset ensures that text is decoded correctly; UTF-8 supports a wide range of characters.
The viewport setting makes responsive layouts behave correctly on mobile screens.
The description can be used as a search-result summary.
The robots directive advises crawlers whether to index the page and follow its links.
A canonical link identifies the preferred URL for duplicate or near-duplicate content.
Open Graph and similar social metadata control how links may appear when shared.
<title> names the document for browser tabs, bookmarks, and search results.

Metadata should be accurate, page-specific, and consistent with visible content. It supports usability and discoverability but cannot compensate for poor-quality content.

Discuss HTML accessibility best practices for document language, headings, landmarks, images, links, forms, tables, and multimedia.

Describe the major HTML coding and validation best practices that improve readability, compatibility, accessibility, performance, and maintainability.

Design the HTML structure of a small SEO-friendly and accessible article page containing navigation, formatted text, a list, a hyperlink, a responsive image, an SVG icon, video, and a footer. Explain the design decisions.

A suitable structure is:

HTML

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <meta name='description' content='An introduction to essential HTML5 features.'>
  <title>Essential HTML5 Features</title>
</head>
<body>
  <header>
    <a href='#main'>Skip to main content</a>
    <nav aria-label='Primary navigation'>
      <ul>
        <li><a href='/'>Home</a></li>
        <li><a href='/tutorials'>Tutorials</a></li>
      </ul>
    </nav>
  </header>

  <main id='main'>
    <article>
      <h1>Essential HTML5 Features</h1>
      <p>HTML gives web content <strong>meaningful structure</strong>.</p>

      <h2>Core Benefits</h2>
      <ul>
        <li>Semantic structure</li>
        <li>Native multimedia</li>
        <li>Accessible content</li>
      </ul>

      <p>Read the <a href='https://html.spec.whatwg.org/'>HTML standard</a>.</p>

      <figure>
        <picture>
          <source media='(min-width: 800px)' srcset='html-large.webp'>
          <img src='html-small.jpg' alt='HTML code displayed in an editor' width='640' height='360'>
        </picture>
        <figcaption>An example HTML document.</figcaption>
      </figure>

      <svg viewBox='0 0 100 100' width='50' height='50' role='img' aria-label='Information icon'>
        <circle cx='50' cy='50' r='45' fill='navy' />
        <text x='50' y='65' text-anchor='middle' font-size='50' fill='white'>i</text>
      </svg>

      <video controls width='640' poster='video-preview.jpg'>
        <source src='html-guide.mp4' type='video/mp4'>
        <track kind='captions' src='captions.vtt' srclang='en' label='English' default>
        <a href='html-guide.mp4'>Download the video</a>.
      </video>
    </article>
  </main>

  <footer>
    <p><small>&copy; 2025 Web Learning</small></p>
  </footer>
</body>
</html>

Design decisions:

Semantic landmarks make the page understandable to browsers, search engines, and assistive technologies.
A unique title, description, heading hierarchy, and descriptive link support SEO.
The skip link and navigation label improve keyboard and screen-reader navigation.
<picture> supports responsive delivery, while alt, dimensions, and <figcaption> improve accessibility and layout stability.
Inline SVG scales without losing quality and includes an accessible name.
Native video controls and captions make multimedia easier to operate and understand.
The list uses correct structural markup rather than manual bullets.

This design applies HTML5 structure, accessibility, responsive media, SEO, and coding best practices in one document.

Question 1

Define the Internet and the World Wide Web. Explain how they differ from each other.

Tap card to reveal answer

Answer 1

Internet: The Internet is a worldwide network of interconnected computer networks that communicate using the TCP/IP protocol suite. It provides infrastructure for services such as email, file transfer, online gaming, and the Web.

World Wide Web: The World Wide Web is a service that operates over the Internet. It consists of interlinked web pages and resources identified by URLs and accessed through web browsers using protocols such as HTTP and HTTPS.

Major differences:

The Internet is the underlying global network infrastructure, while the Web is an information system built on top of it.
The Internet supports many services, whereas the Web primarily provides access to websites and web applications.
Internet communication commonly uses TCP/IP, while the Web mainly uses HTTP or HTTPS at the application layer.
The Web uses technologies such as HTML, CSS, and JavaScript to present and interact with information.

Thus, the Web is only one of the many services available through the Internet.

Tap card to flip back

Question 2

Explain the roles of URL, DNS, HTTP/HTTPS, web browsers, and web servers in accessing a website.

Tap card to reveal answer

Answer 2

When a user accesses a website, several web technologies work together:

URL: A Uniform Resource Locator identifies the location of a resource. For example, https://example.com/products.html specifies the protocol, domain, and path.
DNS: The Domain Name System translates a human-readable domain such as example.com into an IP address.
Web browser: The browser acts as a client. It sends a request, receives the response, interprets HTML, CSS, and JavaScript, and displays the page.
HTTP: Hypertext Transfer Protocol defines how requests and responses are exchanged between clients and servers.
HTTPS: HTTPS is HTTP protected by TLS encryption. It provides confidentiality, integrity, and server authentication.
Web server: The server receives the HTTP request, locates or generates the requested resource, and returns an HTTP response.

Therefore, the URL identifies the resource, DNS locates the server, HTTP/HTTPS manages communication, the server supplies the resource, and the browser presents it.

Tap card to flip back

Question 3

Describe client-server architecture and explain the complete request-response cycle for loading a web page.

Tap card to reveal answer

Answer 3

Client-server architecture is a computing model in which clients request services or resources and servers process those requests and return responses.

Request-response cycle:

The user enters a URL or follows a hyperlink in a browser.
The browser checks caches and asks DNS to resolve the domain name into an IP address.
A network connection is established with the server. For HTTPS, a TLS handshake also takes place.
The browser sends an HTTP request containing a method such as GET, the resource path, headers, and sometimes a body.
The web server receives the request and may invoke application logic or query a database.
The server returns an HTTP response containing a status code, headers, and a response body.
The browser parses the HTML and builds the Document Object Model or DOM.
Additional resources such as stylesheets, scripts, images, fonts, audio, and video are requested.
The browser combines the DOM with styling information, calculates the page layout, and renders the page.

Common response status codes include:

200 OK — request succeeded.
301 Moved Permanently — resource has a new permanent URL.
404 Not Found — resource could not be found.
500 Internal Server Error — server encountered an error.

This architecture enables centralized resource management while allowing many clients to access the same server.

Tap card to flip back

Question 4

What is HTML5? Discuss its important features and advantages over earlier versions of HTML.

Tap card to reveal answer

Answer 4

HTML5 is the modern standard markup language used to structure and describe content on web pages and web applications.

Important features:

A simple document type declaration: <!DOCTYPE html>.
Semantic elements such as <header>, <nav>, <main>, <article>, <section>, and <footer>.
Native multimedia support through <audio> and <video>.
Graphics support through <svg> and <canvas>.
Improved form controls and input types such as email, date, number, and range.
Useful attributes such as required, placeholder, and autofocus.
Better support for accessibility, responsive design, and mobile devices.
Browser APIs for features such as local storage, geolocation, and drag-and-drop.

Advantages over earlier HTML versions:

Reduces dependence on third-party plugins for multimedia.
Gives documents clearer and more meaningful structure.
Improves search-engine understanding and accessibility.
Uses shorter and simpler syntax.
Provides a consistent foundation for modern web applications.

HTML5 focuses on semantic structure, native browser capabilities, interoperability, and maintainable web development.

Tap card to flip back

Question 5

Describe the basic structure of an HTML5 document and state the purpose of each major part.

Tap card to reveal answer

Answer 5

A basic HTML5 document is:

HTML

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Sample Page</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This is a web page.</p>
</body>
</html>

Purpose of each part:

<!DOCTYPE html> tells the browser to interpret the document using HTML5 standards.
<html> is the root element. Its lang attribute identifies the document language.
<head> contains metadata and references to resources that are not normally displayed as page content.
<meta charset='UTF-8'> specifies Unicode character encoding.
The viewport metadata helps the page display correctly on mobile devices.
<title> defines the text shown on the browser tab and is also important for SEO.
<body> contains visible and interactive page content.
<h1> represents the main heading.
<p> represents a paragraph.

A properly structured document improves browser compatibility, accessibility, maintainability, and search-engine interpretation.

Tap card to flip back

Question 6

Explain HTML elements and attributes. Distinguish between container elements, void elements, block-level elements, and inline elements with examples.

Tap card to reveal answer

Answer 6

An HTML element is a structural component of a web document. A typical element consists of an opening tag, content, and a closing tag, as in <p>Text</p>.

An attribute provides additional information or configuration in an opening tag. For example, in <a href='page.html'>Open</a>, href is the attribute and page.html is its value.

Element categories:

Container elements: Have opening and closing tags and can contain content. Examples include <p>, <div>, and <strong>.
Void elements: Do not contain child content and do not require closing tags in HTML. Examples include <img>, <br>, <hr>, <meta>, and <input>.
Block-level elements: Normally begin on a new line and occupy available horizontal space. Examples include <div>, <p>, <section>, and headings.
Inline elements: Flow within surrounding text and normally occupy only the required space. Examples include <span>, <a>, <em>, and <strong>.

Attribute guidelines:

Place attributes in the opening tag.
Use meaningful id values that are unique within the document.
Use class for reusable classification.
Quote attribute values consistently.
Use global attributes such as id, class, title, lang, and data-* appropriately.

Tap card to flip back

Question 7

Compare semantic and non-semantic HTML elements. Explain how semantic HTML benefits accessibility, SEO, and maintainability.

Tap card to reveal answer

Answer 7

Semantic elements communicate the meaning or role of their content to browsers, developers, search engines, and assistive technologies. Examples include <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer>.

Non-semantic elements do not describe the meaning of their content. The main examples are <div> and <span>. Their purpose is usually inferred from class names, IDs, or context.

Comparison:

<nav> clearly identifies a navigation area, while <div class='navigation'> depends on a custom class for meaning.
<article> identifies self-contained content, whereas a generic <div> does not.
Semantic elements provide a logical page outline and landmark structure.

Benefits:

Accessibility: Screen readers can use landmarks such as main and nav to help users navigate efficiently.
SEO: Search engines can better recognize primary content, navigation, headings, and related sections.
Maintainability: Meaningful tags make source code easier to read and modify.
Consistency: Developers are encouraged to use a standard document structure.

Semantic HTML should be preferred whenever an appropriate element exists. Generic <div> and <span> elements remain useful when no specific semantic element matches the required purpose.

Tap card to flip back

Question 8

Describe the HTML elements used for headings, paragraphs, line breaks, quotations, preformatted text, and text emphasis. Differentiate <strong> from <b> and <em> from <i>.

Tap card to reveal answer

Answer 8

HTML provides several elements for organizing and formatting textual content:

<h1> to <h6> define headings in decreasing levels of importance.
<p> defines a paragraph.
<br> inserts a line break where the break itself is meaningful, such as in an address or poem.
<hr> represents a thematic break between sections.
<blockquote> represents a long quotation, while <q> represents a short inline quotation.
<pre> preserves spaces and line breaks and is useful for preformatted content.
<code> marks computer code.
<mark> highlights relevant text.
<small> represents side comments or fine print.
<sub> and <sup> create subscript and superscript text.

Semantic distinctions:

<strong> indicates strong importance, seriousness, or urgency. <b> draws visual attention without adding such importance.
<em> gives stress emphasis that may change the meaning of a sentence. <i> marks text in an alternative voice, technical term, idiom, or similar context.

HTML elements should describe meaning rather than being selected only for visual appearance. CSS should be used when the requirement is purely presentational.

Tap card to flip back

Question 9

Explain ordered lists, unordered lists, and description lists in HTML. Show how nested lists can be created.

Tap card to reveal answer

Answer 9

HTML supports three principal list types:

Unordered list: <ul> contains list items marked with <li>. It is used when item order is not important.
Ordered list: <ol> contains <li> items and is used when sequence or ranking matters.
Description list: <dl> contains terms in <dt> and their descriptions in <dd>.

Example:

HTML

<h2>Course Contents</h2>
<ol>
  <li>HTML
    <ul>
      <li>Elements</li>
      <li>Attributes</li>
    </ul>
  </li>
  <li>CSS</li>
</ol>

<dl>
  <dt>HTML</dt>
  <dd>A markup language for structuring web content.</dd>
</dl>

Appropriate list markup conveys the relationship between items and improves both readability and accessibility.

Tap card to flip back

Question 10

Explain how hyperlinks are created in HTML. Discuss absolute URLs, relative URLs, fragment links, email links, and important anchor attributes.

Tap card to reveal answer

Answer 10

A hyperlink is created with the anchor element:

HTML

<a href='https://example.com'>Visit Example</a>

The href attribute specifies the destination.

Types of links:

Absolute URL: Includes the complete location, such as https://example.com/docs/page.html.
Relative URL: Refers to a resource relative to the current document, such as about.html or ../images/logo.png.
Fragment link: Links to an element with a matching id, such as <a href='#contact'>Contact</a>.
Email link: Uses the mailto: scheme, such as <a href='mailto:help@example.com'>Email us</a>.
Telephone link: Uses the tel: scheme and is especially useful on mobile devices.

Important attributes:

target='_blank' opens a link in a new browsing context.
rel='noopener noreferrer' improves security and privacy for certain external links opened in a new tab.
download suggests that the linked resource should be downloaded.
hreflang indicates the language of the linked resource.

Link text should describe the destination. Phrases such as click here should be avoided because they provide little context to users and assistive technologies.

Tap card to flip back

Question 11

Describe how images are embedded in HTML. Explain the purpose of src, alt, width, height, srcset, <picture>, <figure>, and <figcaption>.

Tap card to reveal answer

Answer 11

The <img> element embeds an image:

HTML

<figure>
  <picture>
    <source media='(min-width: 800px)' srcset='banner-large.webp'>
    <img src='banner-small.jpg' alt='Students learning web development' width='640' height='360'>
  </picture>
  <figcaption>Students attending an HTML workshop.</figcaption>
</figure>

Purpose of the features:

src specifies the default image resource.
alt provides a text alternative when the image cannot be seen or loaded. Decorative images normally use alt=''.
width and height provide intrinsic dimensions and help the browser reserve space, reducing layout shifts.
srcset supplies multiple image candidates for different resolutions or display widths.
<picture> allows the browser to choose among sources based on media conditions or supported formats.
<figure> represents self-contained content such as an image, illustration, or diagram.
<figcaption> provides a caption for the figure.

Tap card to flip back

Question 12

What is SVG? Explain how SVG graphics are created in HTML and compare SVG with raster images.

Tap card to reveal answer

Answer 12

Scalable Vector Graphics or SVG is an XML-based format for describing two-dimensional graphics using shapes, paths, text, gradients, and transformations.

Example of inline SVG:

HTML

<svg width='200' height='120' viewBox='0 0 200 120' role='img' aria-labelledby='svgTitle'>
  <title id='svgTitle'>Blue circle</title>
  <circle cx='100' cy='60' r='45' fill='royalblue' />
</svg>

Important concepts:

viewBox defines the SVG coordinate system and enables scaling.
Elements such as <circle>, <rect>, <line>, <polygon>, <path>, and <text> define graphic objects.
SVG can be embedded inline, loaded through <img>, or used as a CSS background.
Inline SVG elements can be styled with CSS and manipulated with JavaScript.

SVG versus raster images:

SVG is vector-based and remains sharp at different sizes; JPEG and PNG are pixel-based and can become blurred when enlarged.
SVG is often efficient for logos, icons, diagrams, and simple illustrations.
Raster formats are generally more suitable for detailed photographs.
SVG source is text-based, searchable, and potentially accessible when titles and descriptions are supplied.
Extremely complex SVG illustrations may be slower or larger than an appropriately compressed raster image.

SVG is therefore especially useful for responsive, resolution-independent web graphics.

Tap card to flip back

Question 13

Explain the HTML5 <audio> element and describe how fallback content, multiple sources, and accessibility considerations are handled.

Tap card to reveal answer

Answer 13

The <audio> element embeds sound without requiring a third-party plugin.

HTML

<audio controls preload='metadata'>
  <source src='lesson.ogg' type='audio/ogg'>
  <source src='lesson.mp3' type='audio/mpeg'>
  Your browser does not support HTML audio.
  <a href='lesson.mp3'>Download the recording</a>.
</audio>

Important features:

controls displays browser-provided playback controls.
<source> supplies alternative formats. The browser uses the first format it supports.
preload='metadata' suggests loading only metadata initially.
autoplay starts playback automatically but may be blocked by browsers and can harm usability.
loop repeats the media.
muted starts playback without sound.
Text inside <audio> acts as fallback for browsers that do not support the element.

Accessibility considerations:

Provide a transcript for spoken content.
Do not rely on autoplay.
Ensure controls can be operated with a keyboard.
Clearly identify the purpose and duration of the recording.
Provide a direct download link when appropriate.

Using multiple sources increases browser compatibility, while transcripts make audio information available to users who cannot hear or play the recording.

Tap card to flip back

Question 14

Explain the HTML5 <video> element. Discuss its major attributes, multiple source formats, captions, poster images, and fallback content.

Tap card to reveal answer

Answer 14

The <video> element provides native video playback:

HTML

<video controls width='640' height='360' poster='preview.jpg' preload='metadata'>
  <source src='lesson.webm' type='video/webm'>
  <source src='lesson.mp4' type='video/mp4'>
  <track kind='captions' src='captions-en.vtt' srclang='en' label='English' default>
  Your browser does not support HTML video.
  <a href='lesson.mp4'>Download the video</a>.
</video>

Major features:

controls displays playback, volume, and seeking controls.
width and height define the media display dimensions.
poster specifies an image displayed before playback begins.
preload gives the browser a loading hint.
autoplay, muted, and loop control playback behavior.
Multiple <source> elements provide different video formats.
<track> associates WebVTT captions, subtitles, descriptions, chapters, or metadata with the video.
Fallback text and a download link help users whose browsers cannot play the embedded video.

Tap card to flip back

Question 15

What is an iframe? Explain its common uses, important attributes, security risks, and recommended practices.

Tap card to reveal answer

Answer 15

An iframe, created with <iframe>, embeds another HTML document within the current page.

HTML

<iframe
  src='https://example.com/map'
  title='Location map'
  width='600'
  height='400'
  loading='lazy'
  sandbox='allow-scripts allow-same-origin'>
</iframe>

Common uses:

Embedding maps, videos, documents, or third-party applications.
Isolating external or independently managed content.

Important attributes:

src specifies the embedded document.
title provides an accessible name.
width and height define dimensions.
loading='lazy' delays loading until the frame is near the viewport.
allow grants selected features such as fullscreen or camera access.
sandbox restricts scripts, forms, navigation, pop-ups, and other capabilities.
referrerpolicy controls referrer information sent to the framed resource.

Risks and limitations:

Untrusted content may attempt malicious actions.
Third-party frames can affect privacy and performance.
Framed pages can create accessibility and navigation difficulties.
Websites may prevent embedding using security headers.

Iframes should be used only when necessary, given meaningful titles, restricted through sandbox and allow, lazy-loaded where suitable, and sourced from trusted providers.

Tap card to flip back

Question 16

Define Search Engine Optimization and explain the important on-page SEO practices related to HTML.

Tap card to reveal answer

Answer 16

Search Engine Optimization or SEO is the process of improving a website so that search engines can crawl, understand, index, and rank its useful content effectively.

Important HTML-related SEO practices:

Give every page a unique and descriptive <title>.
Add a concise <meta name='description'> that summarizes page content.
Use one clear primary heading and arrange later headings in a logical hierarchy.
Use semantic elements such as <main>, <article>, and <nav>.
Write original, useful, and well-structured content.
Use descriptive hyperlink text and maintain a clear internal-link structure.
Provide meaningful alt text for informative images.
Specify the document language with the lang attribute.
Use canonical URLs where duplicate or similar pages exist.
Add suitable structured data when appropriate.
Ensure that pages are mobile-friendly, secure, and fast.
Avoid hidden text, keyword stuffing, misleading titles, and duplicate content.

SEO is not limited to inserting keywords. It depends on content quality, meaningful structure, accessibility, performance, mobile usability, and trustworthy linking.

Tap card to flip back

Question 17

Explain the purpose of important metadata placed in the HTML <head>, including character encoding, viewport settings, description, canonical links, robots directives, and social metadata.

Tap card to reveal answer

Answer 17

The <head> contains metadata and resource references used by browsers, search engines, and social platforms.

Example:

HTML

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <meta name='description' content='Learn the fundamentals of HTML5.'>
  <meta name='robots' content='index, follow'>
  <link rel='canonical' href='https://example.com/html-fundamentals'>
  <meta property='og:title' content='HTML5 Fundamentals'>
  <meta property='og:image' content='https://example.com/html-cover.jpg'>
  <title>HTML5 Fundamentals</title>
</head>

Purpose:

charset ensures that text is decoded correctly; UTF-8 supports a wide range of characters.
The viewport setting makes responsive layouts behave correctly on mobile screens.
The description can be used as a search-result summary.
The robots directive advises crawlers whether to index the page and follow its links.
A canonical link identifies the preferred URL for duplicate or near-duplicate content.
Open Graph and similar social metadata control how links may appear when shared.
<title> names the document for browser tabs, bookmarks, and search results.

Metadata should be accurate, page-specific, and consistent with visible content. It supports usability and discoverability but cannot compensate for poor-quality content.

Tap card to flip back

Question 18

Discuss HTML accessibility best practices for document language, headings, landmarks, images, links, forms, tables, and multimedia.

Tap card to reveal answer

Answer 18

Accessible HTML enables people with different abilities and assistive technologies to understand and operate a page.

Best practices:

Declare the primary language using <html lang='en'> and mark language changes where necessary.
Use headings in a logical hierarchy without choosing levels merely for visual size.
Provide landmarks through elements such as <header>, <nav>, <main>, and <footer>.
Include a keyboard-accessible skip link to the main content on complex pages.
Give informative images meaningful alt text and decorative images alt=''.
Use descriptive link text that makes sense outside its surrounding paragraph.
Associate each form control with a visible <label> and provide understandable error messages.
Use <th> for table headers, caption for the table title, and appropriate header relationships.
Provide captions for video and transcripts for audio.
Ensure all interactive components are keyboard-operable and have visible focus indicators.
Use native HTML elements before adding ARIA roles because native controls already include useful semantics and behavior.
Avoid using color, position, or sound as the only method of conveying information.

Accessibility is most effective when it is incorporated into the HTML structure from the beginning rather than added after development.

Tap card to flip back

Question 19

Describe the major HTML coding and validation best practices that improve readability, compatibility, accessibility, performance, and maintainability.

Tap card to reveal answer

Answer 19

Recommended HTML best practices include:

Begin with <!DOCTYPE html> and declare the page language.
Use UTF-8 character encoding and responsive viewport metadata.
Prefer semantic elements over unnecessary <div> containers.
Maintain valid nesting and close elements where required.
Use consistent indentation, lowercase tag names, and quoted attribute values.
Assign unique id values and meaningful reusable class names.
Separate structure, presentation, and behavior by using HTML, CSS, and JavaScript for their intended roles.
Avoid obsolete presentational elements and attributes.
Provide alternative text, labels, captions, and logical headings.
Use descriptive page titles, metadata, file names, and link text.
Optimize images and multimedia and use lazy loading where suitable.
Avoid excessive DOM depth and unnecessary embedded content.
Add comments only when they clarify non-obvious structure; do not use comments to preserve unused code.
Test pages across modern browsers, screen sizes, keyboard navigation, and assistive technologies.
Validate markup with a standards-based HTML validator and correct errors such as duplicate IDs, invalid nesting, and missing attributes.

Clean and valid HTML does not automatically guarantee a perfect page, but it greatly improves interoperability and reduces debugging and maintenance costs.

Tap card to flip back

Question 20

Tap card to reveal answer

Answer 20

A suitable structure is:

HTML

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <meta name='description' content='An introduction to essential HTML5 features.'>
  <title>Essential HTML5 Features</title>
</head>
<body>
  <header>
    <a href='#main'>Skip to main content</a>
    <nav aria-label='Primary navigation'>
      <ul>
        <li><a href='/'>Home</a></li>
        <li><a href='/tutorials'>Tutorials</a></li>
      </ul>
    </nav>
  </header>

  <main id='main'>
    <article>
      <h1>Essential HTML5 Features</h1>
      <p>HTML gives web content <strong>meaningful structure</strong>.</p>

      <h2>Core Benefits</h2>
      <ul>
        <li>Semantic structure</li>
        <li>Native multimedia</li>
        <li>Accessible content</li>
      </ul>

      <p>Read the <a href='https://html.spec.whatwg.org/'>HTML standard</a>.</p>

      <figure>
        <picture>
          <source media='(min-width: 800px)' srcset='html-large.webp'>
          <img src='html-small.jpg' alt='HTML code displayed in an editor' width='640' height='360'>
        </picture>
        <figcaption>An example HTML document.</figcaption>
      </figure>

      <svg viewBox='0 0 100 100' width='50' height='50' role='img' aria-label='Information icon'>
        <circle cx='50' cy='50' r='45' fill='navy' />
        <text x='50' y='65' text-anchor='middle' font-size='50' fill='white'>i</text>
      </svg>

      <video controls width='640' poster='video-preview.jpg'>
        <source src='html-guide.mp4' type='video/mp4'>
        <track kind='captions' src='captions.vtt' srclang='en' label='English' default>
        <a href='html-guide.mp4'>Download the video</a>.
      </video>
    </article>
  </main>

  <footer>
    <p><small>&copy; 2025 Web Learning</small></p>
  </footer>
</body>
</html>

Design decisions:

Semantic landmarks make the page understandable to browsers, search engines, and assistive technologies.
A unique title, description, heading hierarchy, and descriptive link support SEO.
The skip link and navigation label improve keyboard and screen-reader navigation.
<picture> supports responsive delivery, while alt, dimensions, and <figcaption> improve accessibility and layout stability.
Inline SVG scales without losing quality and includes an accessible name.
Native video controls and captions make multimedia easier to operate and understand.
The list uses correct structural markup rather than manual bullets.

This design applies HTML5 structure, accessibility, responsive media, SEO, and coding best practices in one document.

Tap card to flip back

1 / 20

Unit2

Unit 1: HTML Fundamentals - Subjective Questions

Did this save you a night before the exam?