Unit 2: Semantic HTML and Forms - Subjective Questions

CSE326 — Internet Programming • Practice Questions with Detailed Answers

20 questions

Define semantic HTML. Explain the purpose of any four semantic HTML elements with suitable examples.

Semantic HTML means using HTML elements according to the meaning and role of their content, rather than using generic elements only for visual presentation.

Common semantic elements include:

<header>: Represents introductory content, such as a page title, logo, or navigation links.
<nav>: Contains the major navigation links of a website.
<main>: Identifies the primary content of the document. A page should normally have only one visible <main> element.
<article>: Represents self-contained content that can be distributed independently, such as a blog post or news story.
<section>: Groups related content under a common heading.
<footer>: Contains closing information, such as copyright details or related links.

Example:

HTML

<header><h1>College Portal</h1></header>
<nav><a href="/courses">Courses</a></nav>
<main>
  <article><h2>Admissions</h2><p>Applications are open.</p></article>
</main>
<footer>Copyright 2025</footer>

Semantic elements improve readability, accessibility, search engine optimization, and maintainability.

Distinguish between <div> and semantic elements such as <section>, <article>, and <nav>. When is the use of <div> appropriate?

Describe the semantic page structure of a typical website. Develop an HTML outline containing a header, navigation area, main content, complementary content, and footer.

A typical semantic page structure separates content according to its role:

<header> contains introductory information.
<nav> contains primary navigation.
<main> contains the page's unique primary content.
<article> represents independent content within the main area.
<aside> contains related but complementary information.
<footer> contains authorship, copyright, or supporting links.

HTML

<body>
  <header>
    <h1>Technology Journal</h1>
    <nav aria-label="Primary navigation">
      <a href="/">Home</a>
      <a href="/articles">Articles</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Semantic HTML</h2>
      <p>Article content appears here.</p>
    </article>
    <aside>
      <h2>Related Resources</h2>
      <a href="/reference">HTML Reference</a>
    </aside>
  </main>

  <footer>
    <p>Copyright 2025 Technology Journal</p>
  </footer>
</body>

The visual arrangement should be controlled with CSS. Semantic HTML describes the content hierarchy and purpose, not merely its position on the screen.

Explain how semantic HTML improves accessibility and search engine optimization.

Explain the importance of heading hierarchy, landmarks, alternative text, and keyboard accessibility in an accessible web page.

What is an HTML form? Describe the functions of the <form> element's action, method, enctype, autocomplete, and novalidate attributes.

An HTML form collects user input and submits it for processing.

action specifies the URL that receives the submitted data.
method specifies the HTTP submission method. get appends form data to the URL, while post sends it in the request body.
enctype defines how submitted data is encoded. The value multipart/form-data is required when uploading files.
autocomplete indicates whether the browser may suggest or fill previously stored values.
novalidate disables the browser's built-in constraint validation for that form submission.

Example:

HTML

<form action="/register" method="post" autocomplete="on">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Register</button>
</form>

Only successful controls with a name attribute contribute name-value pairs to the submitted form data.

Compare the HTTP GET and POST methods in the context of HTML form submission. Give suitable use cases for each.

Describe the major HTML form controls and explain how labels, fieldsets, and legends make a form more usable and accessible.

Major form controls include:

<input> for short text, numbers, dates, choices, files, and other specialized values.
<textarea> for multi-line text.
<select> and <option> for choosing from a predefined list.
<button> for submitting, resetting, or triggering an action.
<output> for displaying a calculated result.

Every control should have an accessible name. A visible <label> can be associated explicitly by matching its for attribute with the control's id:

HTML

<label for="phone">Phone number</label>
<input id="phone" name="phone" type="tel">

Related controls, especially radio buttons and checkboxes, should be grouped with <fieldset>. The <legend> provides a common group label:

HTML

<fieldset>
  <legend>Preferred contact method</legend>
  <label><input type="radio" name="contact" value="email"> Email</label>
  <label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>

Placeholders must not replace labels because they disappear during input and may have poor contrast.

Explain the purpose and appropriate use of the input types text, email, password, number, date, radio, checkbox, and file.

Discuss the purpose of the form-control attributes name, value, placeholder, required, readonly, disabled, min, max, step, minlength, maxlength, and pattern.

These attributes control submission, interaction, and validation:

name identifies the key used when the value is submitted.
value provides the current or default control value.
placeholder gives a short input hint but does not replace a label.
required prevents valid submission while the control has no acceptable value.
readonly prevents editing while generally keeping the value focusable and submit-able.
disabled prevents interaction and normally excludes the control from form submission.
min and max define lower and upper limits for supported types.
step defines valid numeric or date increments.
minlength and maxlength constrain text length.
pattern applies a regular-expression constraint to supported textual inputs.

Example:

HTML

<input name="quantity" type="number" min="1" max="20" step="1" required>
<input name="code" type="text" pattern="[A-Z]{3}-[0-9]{4}" placeholder="ABC-1234">

Client-side attributes improve feedback, but equivalent validation must be performed on the server.

What is client-side form validation? Explain HTML constraint validation and its limitations.

Design an accessible registration form that collects a user's name, email address, password, date of birth, preferred contact method, and acceptance of terms. Apply suitable validation attributes.

An accessible solution uses visible labels, meaningful input types, logical grouping, clear instructions, and native validation:

HTML

<form action="/register" method="post">
  <p>
    <label for="full-name">Full name</label>
    <input id="full-name" name="fullName" type="text"
           autocomplete="name" minlength="2" required>
  </p>

  <p>
    <label for="email">Email address</label>
    <input id="email" name="email" type="email"
           autocomplete="email" required>
  </p>

  <p>
    <label for="password">Password</label>
    <input id="password" name="password" type="password"
           autocomplete="new-password" minlength="8"
           aria-describedby="password-help" required>
    <span id="password-help">Use at least 8 characters.</span>
  </p>

  <p>
    <label for="birth-date">Date of birth</label>
    <input id="birth-date" name="birthDate" type="date" required>
  </p>

  <fieldset>
    <legend>Preferred contact method</legend>
    <label><input type="radio" name="contact" value="email" required> Email</label>
    <label><input type="radio" name="contact" value="phone"> Phone</label>
  </fieldset>

  <label>
    <input name="terms" type="checkbox" required>
    I accept the terms and conditions
  </label>

  <button type="submit">Create account</button>
</form>

Validation errors should be identified in text, associated with the relevant controls, and announced to assistive technology. Submitted data must also be validated and sanitized on the server.

Differentiate between required, readonly, and disabled form controls with respect to user interaction, validation, focus, and submission.

Explain the semantic elements used to create an accessible HTML data table. Include the roles of <caption>, <thead>, <tbody>, <tfoot>, <th>, and the scope attribute.

An accessible data table uses elements that identify its structure and relationships:

<table> represents tabular data.
<caption> gives the table an accessible title or description.
<thead> groups header rows.
<tbody> groups the main data rows.
<tfoot> groups totals or summary rows.
<tr> represents a row.
<th> represents a row or column header.
<td> represents a data cell.
scope="col" associates a header with its column.
scope="row" associates a header with its row.

Example:

HTML

<table>
  <caption>Quarterly sales in rupees</caption>
  <thead>
    <tr><th scope="col">Product</th><th scope="col">Sales</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Laptop</th><td>250000</td></tr>
    <tr><th scope="row">Tablet</th><td>125000</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total</th><td>375000</td></tr>
  </tfoot>
</table>

These relationships help screen readers announce the relevant headers while users move through data cells.

Distinguish between data tables and layout tables. Why should CSS layout techniques be preferred for page arrangement?

Create a semantic and accessible HTML table for a student's marks in three subjects, including a caption, correct headers, and a total row. Explain the accessibility decisions.

A suitable table is:

HTML

<table>
  <caption>Marks obtained by Anika Sharma</caption>
  <thead>
    <tr>
      <th scope="col">Subject</th>
      <th scope="col">Maximum marks</th>
      <th scope="col">Marks obtained</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">English</th><td>100</td><td>82</td></tr>
    <tr><th scope="row">Mathematics</th><td>100</td><td>91</td></tr>
    <tr><th scope="row">Science</th><td>100</td><td>87</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total</th><td>300</td><td>260</td></tr>
  </tfoot>
</table>

Accessibility decisions:

The <caption> identifies the purpose and owner of the data.
Column headings use <th scope="col">.
Subject names and the total label use <th scope="row">.
<thead>, <tbody>, and <tfoot> communicate structural groups.
The logical source order supports keyboard and screen-reader navigation.
Meaning does not depend only on color or visual borders.

For complex tables with multi-level headers, explicit id and headers associations may be required.

Describe the four principles of the Web Content Accessibility Guidelines (WCAG) and provide one practical HTML-related example for each principle.

Explain the relationship between native semantic HTML and ARIA. State the first rule of ARIA and discuss situations where ARIA may be necessary.

ARIA, or Accessible Rich Internet Applications, adds accessibility roles, states, and properties when native HTML cannot fully express a custom interface.

The first rule of ARIA is: use a native HTML element or attribute with the required semantics and behavior whenever one is available instead of recreating it with ARIA.

For example, this is preferred:

HTML

<button type="button">Save</button>

It is better than using a generic <div role="button"> because a native button already provides focusability, keyboard activation, semantics, and disabled-state support.

ARIA may be necessary for:

Naming multiple navigation regions with aria-label.
Communicating expanded state through aria-expanded.
Associating instructions or errors using aria-describedby.
Implementing custom widgets whose semantics are not available through native HTML.
Announcing dynamic status updates using an appropriate live region.

ARIA changes the accessibility tree but does not automatically add keyboard behavior, visual focus, or functionality. Incorrect ARIA can make an interface less accessible.

What is responsive content structuring? Explain how semantic source order, flexible media, viewport settings, and CSS layout contribute to responsive web pages.

Develop and explain a responsive, semantic content structure for an article page containing primary navigation, an article, related links, an accessible data table, and a newsletter form.

A responsive article page should begin with a meaningful source order and use CSS only to change its visual arrangement.

HTML

<header>
  <h1>Web Standards Journal</h1>
  <nav aria-label="Primary">
    <a href="/">Home</a>
    <a href="/articles">Articles</a>
  </nav>
</header>

<main class="content-layout">
  <article>
    <h2>Browser Usage Report</h2>
    <p>Report introduction and analysis.</p>

    <table>
      <caption>Browser usage by year</caption>
      <thead>
        <tr><th scope="col">Browser</th><th scope="col">Usage</th></tr>
      </thead>
      <tbody>
        <tr><th scope="row">Browser A</th><td>62%</td></tr>
      </tbody>
    </table>
  </article>

  <aside aria-labelledby="related-heading">
    <h2 id="related-heading">Related links</h2>
    <ul><li><a href="/accessibility">Accessibility guide</a></li></ul>
  </aside>
</main>

<section aria-labelledby="newsletter-heading">
  <h2 id="newsletter-heading">Newsletter</h2>
  <form action="/subscribe" method="post">
    <label for="subscriber-email">Email address</label>
    <input id="subscriber-email" name="email" type="email"
           autocomplete="email" required>
    <button type="submit">Subscribe</button>
  </form>
</section>

<footer><p>Copyright 2025 Web Standards Journal</p></footer>

A mobile-first stylesheet can display the article and aside in one column, then introduce columns when sufficient space is available:

CSS

.content-layout {
  display: grid;
  gap: 1.5rem;
}

img {
  max-width: 100%;
  height: auto;
}

.table-wrapper {
  overflow-x: auto;
}

@media (min-width: 50rem) {
  .content-layout {
    grid-template-columns: minmax(0, 3fr) minmax(14rem, 1fr);
  }
}

The article appears before complementary content in the source, headings identify every region, controls have labels, and table headers describe data relationships. The design therefore preserves semantics, keyboard order, and readability across viewport sizes.

Question 1

Define semantic HTML. Explain the purpose of any four semantic HTML elements with suitable examples.

Tap card to reveal answer

Answer 1

Semantic HTML means using HTML elements according to the meaning and role of their content, rather than using generic elements only for visual presentation.

Common semantic elements include:

<header>: Represents introductory content, such as a page title, logo, or navigation links.
<nav>: Contains the major navigation links of a website.
<main>: Identifies the primary content of the document. A page should normally have only one visible <main> element.
<article>: Represents self-contained content that can be distributed independently, such as a blog post or news story.
<section>: Groups related content under a common heading.
<footer>: Contains closing information, such as copyright details or related links.

Example:

HTML

<header><h1>College Portal</h1></header>
<nav><a href="/courses">Courses</a></nav>
<main>
  <article><h2>Admissions</h2><p>Applications are open.</p></article>
</main>
<footer>Copyright 2025</footer>

Semantic elements improve readability, accessibility, search engine optimization, and maintainability.

Tap card to flip back

Question 2

Distinguish between <div> and semantic elements such as <section>, <article>, and <nav>. When is the use of <div> appropriate?

Tap card to reveal answer

Answer 2

A <div> is a generic container with no inherent meaning, whereas semantic elements communicate the purpose of their content to browsers, developers, search engines, and assistive technologies.

<section> groups thematically related content and usually has a heading.
<article> contains independent, reusable, or distributable content.
<nav> identifies a major group of navigation links.
<div> only groups content for styling, scripting, or layout.

A <div> is appropriate when:

No semantic element accurately describes the content.
A wrapper is required for CSS layout or JavaScript behavior.
Several elements need to be grouped without adding document meaning.

Using <div> for every part of a page creates div soup, which makes the document structure less understandable and can reduce accessibility. Developers should therefore select the most meaningful semantic element first and use <div> as a neutral fallback.

Tap card to flip back

Question 3

Describe the semantic page structure of a typical website. Develop an HTML outline containing a header, navigation area, main content, complementary content, and footer.

Tap card to reveal answer

Answer 3

A typical semantic page structure separates content according to its role:

<header> contains introductory information.
<nav> contains primary navigation.
<main> contains the page's unique primary content.
<article> represents independent content within the main area.
<aside> contains related but complementary information.
<footer> contains authorship, copyright, or supporting links.

HTML

<body>
  <header>
    <h1>Technology Journal</h1>
    <nav aria-label="Primary navigation">
      <a href="/">Home</a>
      <a href="/articles">Articles</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Semantic HTML</h2>
      <p>Article content appears here.</p>
    </article>
    <aside>
      <h2>Related Resources</h2>
      <a href="/reference">HTML Reference</a>
    </aside>
  </main>

  <footer>
    <p>Copyright 2025 Technology Journal</p>
  </footer>
</body>

The visual arrangement should be controlled with CSS. Semantic HTML describes the content hierarchy and purpose, not merely its position on the screen.

Tap card to flip back

Question 4

Explain how semantic HTML improves accessibility and search engine optimization.

Tap card to reveal answer

Answer 4

Semantic HTML provides explicit information about the role and organization of content.

Accessibility benefits:

Screen readers can expose landmarks such as navigation, main content, and complementary content.
Users can move directly between headings, regions, links, and form controls.
Native elements provide built-in keyboard behavior and accessibility semantics.
A logical heading structure helps users understand relationships between sections.
Correct elements reduce dependence on unnecessary ARIA attributes.

Search engine optimization benefits:

Search engines can identify important content and understand page hierarchy.
Elements such as <article>, headings, and <nav> clarify the purpose of content.
Better structure can improve indexing and extraction of meaningful information.

Semantic HTML does not automatically guarantee accessibility or a high search ranking. Content must also have meaningful labels, logical order, useful text, and valid markup.

Tap card to flip back

Question 5

Explain the importance of heading hierarchy, landmarks, alternative text, and keyboard accessibility in an accessible web page.

Tap card to reveal answer

Answer 5

These features allow users with different abilities and assistive technologies to understand and operate a page.

Heading hierarchy: Headings should form a logical outline, beginning with an appropriate <h1> and using lower levels for subsections. Heading levels should not be selected merely for their visual size.
Landmarks: Elements such as <header>, <nav>, <main>, <aside>, and <footer> enable screen-reader users to move quickly between major page regions.
Alternative text: Informative images require concise alt text that communicates their purpose. Decorative images should generally use alt="" so they are ignored by screen readers.
Keyboard accessibility: Every interactive control must be reachable and operable using the keyboard. Focus order should follow the logical document order, and a visible focus indicator must be retained.

Together, these practices support perception, navigation, understanding, and operation without depending on a particular device or sense.

Tap card to flip back

Question 6

What is an HTML form? Describe the functions of the <form> element's action, method, enctype, autocomplete, and novalidate attributes.

Tap card to reveal answer

Answer 6

An HTML form collects user input and submits it for processing.

action specifies the URL that receives the submitted data.
method specifies the HTTP submission method. get appends form data to the URL, while post sends it in the request body.
enctype defines how submitted data is encoded. The value multipart/form-data is required when uploading files.
autocomplete indicates whether the browser may suggest or fill previously stored values.
novalidate disables the browser's built-in constraint validation for that form submission.

Example:

HTML

<form action="/register" method="post" autocomplete="on">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Register</button>
</form>

Only successful controls with a name attribute contribute name-value pairs to the submitted form data.

Tap card to flip back

Question 7

Compare the HTTP GET and POST methods in the context of HTML form submission. Give suitable use cases for each.

Tap card to reveal answer

Answer 7

GET submission:

Encodes form data in the URL query string.
Is suitable for safe, read-only operations such as search, filtering, and pagination.
Produces URLs that can usually be bookmarked, copied, and cached.
Has practical URL-length limitations.
Must not be used to hide sensitive information because the data may appear in browser history, logs, and referrer information.

POST submission:

Places form data in the HTTP request body.
Is suitable for operations that create or modify data, such as registration, payment, or updating a profile.
Supports larger payloads and file uploads when used with the correct encoding.
Is not normally represented by a bookmarkable query URL.

Neither method provides encryption by itself. HTTPS is required to protect data in transit. Method selection should primarily follow HTTP semantics: use GET for retrieval and POST for submissions that produce side effects.

Tap card to flip back

Question 8

Describe the major HTML form controls and explain how labels, fieldsets, and legends make a form more usable and accessible.

Tap card to reveal answer

Answer 8

Major form controls include:

<input> for short text, numbers, dates, choices, files, and other specialized values.
<textarea> for multi-line text.
<select> and <option> for choosing from a predefined list.
<button> for submitting, resetting, or triggering an action.
<output> for displaying a calculated result.

Every control should have an accessible name. A visible <label> can be associated explicitly by matching its for attribute with the control's id:

HTML

<label for="phone">Phone number</label>
<input id="phone" name="phone" type="tel">

Related controls, especially radio buttons and checkboxes, should be grouped with <fieldset>. The <legend> provides a common group label:

HTML

<fieldset>
  <legend>Preferred contact method</legend>
  <label><input type="radio" name="contact" value="email"> Email</label>
  <label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>

Placeholders must not replace labels because they disappear during input and may have poor contrast.

Tap card to flip back

Question 9

Explain the purpose and appropriate use of the input types text, email, password, number, date, radio, checkbox, and file.

Tap card to reveal answer

Answer 9

Each input type communicates the expected data and may provide specialized browser behavior:

text: Accepts general single-line text.
email: Accepts an email address and enables basic format validation and an appropriate mobile keyboard.
password: Masks the displayed value but does not encrypt it.
number: Accepts numeric values and supports min, max, and step; it should not be used for identifiers such as telephone numbers.
date: Allows the user to enter or select a calendar date.
radio: Allows one choice from controls sharing the same name.
checkbox: Represents an independent binary choice or permits multiple selections.
file: Allows one or more local files to be selected for upload.

Choosing the correct type improves semantics, validation, mobile input, and user experience. The server must still validate every submitted value.

Tap card to flip back

Question 10

Discuss the purpose of the form-control attributes name, value, placeholder, required, readonly, disabled, min, max, step, minlength, maxlength, and pattern.

Tap card to reveal answer

Answer 10

These attributes control submission, interaction, and validation:

name identifies the key used when the value is submitted.
value provides the current or default control value.
placeholder gives a short input hint but does not replace a label.
required prevents valid submission while the control has no acceptable value.
readonly prevents editing while generally keeping the value focusable and submit-able.
disabled prevents interaction and normally excludes the control from form submission.
min and max define lower and upper limits for supported types.
step defines valid numeric or date increments.
minlength and maxlength constrain text length.
pattern applies a regular-expression constraint to supported textual inputs.

Example:

HTML

<input name="quantity" type="number" min="1" max="20" step="1" required>
<input name="code" type="text" pattern="[A-Z]{3}-[0-9]{4}" placeholder="ABC-1234">

Client-side attributes improve feedback, but equivalent validation must be performed on the server.

Tap card to flip back

Question 11

What is client-side form validation? Explain HTML constraint validation and its limitations.

Tap card to reveal answer

Answer 11

Client-side form validation checks user input in the browser before data is sent to the server. HTML constraint validation uses input types and attributes such as required, type="email", min, max, step, minlength, maxlength, and pattern.

A control may fail validation because of conditions such as:

A required value is missing.
A value does not match the expected input type.
A value is outside an allowed range.
Text does not match the specified pattern.
Text is too short or too long.

CSS pseudo-classes such as :valid and :invalid can visually represent validity. JavaScript can inspect validity, call checkValidity() or reportValidity(), and provide custom messages through setCustomValidity().

Limitations:

Browser behavior and messages may vary.
Validation can be bypassed or requests can be created without the form.
HTML constraints cannot enforce every business rule.
Poorly designed custom messages may be inaccessible.

Therefore, client-side validation improves usability, while server-side validation remains mandatory for correctness and security.

Tap card to flip back

Question 12

Design an accessible registration form that collects a user's name, email address, password, date of birth, preferred contact method, and acceptance of terms. Apply suitable validation attributes.

Tap card to reveal answer

Answer 12

An accessible solution uses visible labels, meaningful input types, logical grouping, clear instructions, and native validation:

HTML

<form action="/register" method="post">
  <p>
    <label for="full-name">Full name</label>
    <input id="full-name" name="fullName" type="text"
           autocomplete="name" minlength="2" required>
  </p>

  <p>
    <label for="email">Email address</label>
    <input id="email" name="email" type="email"
           autocomplete="email" required>
  </p>

  <p>
    <label for="password">Password</label>
    <input id="password" name="password" type="password"
           autocomplete="new-password" minlength="8"
           aria-describedby="password-help" required>
    <span id="password-help">Use at least 8 characters.</span>
  </p>

  <p>
    <label for="birth-date">Date of birth</label>
    <input id="birth-date" name="birthDate" type="date" required>
  </p>

  <fieldset>
    <legend>Preferred contact method</legend>
    <label><input type="radio" name="contact" value="email" required> Email</label>
    <label><input type="radio" name="contact" value="phone"> Phone</label>
  </fieldset>

  <label>
    <input name="terms" type="checkbox" required>
    I accept the terms and conditions
  </label>

  <button type="submit">Create account</button>
</form>

Validation errors should be identified in text, associated with the relevant controls, and announced to assistive technology. Submitted data must also be validated and sanitized on the server.

Tap card to flip back

Question 13

Differentiate between required, readonly, and disabled form controls with respect to user interaction, validation, focus, and submission.

Tap card to reveal answer

Answer 13

The three attributes have different behavior:

required: The user may edit the control, and the form cannot pass native validation until an acceptable value is provided. The control can receive focus, and its value is submitted.
readonly: The user cannot modify the value, but the control is generally focusable. Its value is normally submitted. It is mainly supported by textual controls and does not have the same meaning for controls such as checkboxes.
disabled: The user cannot interact with the control. It is normally removed from sequential keyboard focus, excluded from constraint validation, and not submitted with the form.

A developer should use readonly when a value must be displayed and submitted without being edited. disabled is suitable when a control is currently unavailable. required is appropriate when user input is mandatory. Visual appearance alone should not be used to communicate these states.

Tap card to flip back

Question 14

Explain the semantic elements used to create an accessible HTML data table. Include the roles of <caption>, <thead>, <tbody>, <tfoot>, <th>, and the scope attribute.

Tap card to reveal answer

Answer 14

An accessible data table uses elements that identify its structure and relationships:

<table> represents tabular data.
<caption> gives the table an accessible title or description.
<thead> groups header rows.
<tbody> groups the main data rows.
<tfoot> groups totals or summary rows.
<tr> represents a row.
<th> represents a row or column header.
<td> represents a data cell.
scope="col" associates a header with its column.
scope="row" associates a header with its row.

Example:

HTML

<table>
  <caption>Quarterly sales in rupees</caption>
  <thead>
    <tr><th scope="col">Product</th><th scope="col">Sales</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Laptop</th><td>250000</td></tr>
    <tr><th scope="row">Tablet</th><td>125000</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total</th><td>375000</td></tr>
  </tfoot>
</table>

These relationships help screen readers announce the relevant headers while users move through data cells.

Tap card to flip back

Question 15

Distinguish between data tables and layout tables. Why should CSS layout techniques be preferred for page arrangement?

Tap card to reveal answer

Answer 15

A data table represents information whose meaning depends on relationships between rows and columns, such as a timetable, price list, or examination result. It should use captions and correctly associated row and column headers.

A layout table uses table rows and cells merely to position visual content. This practice should be avoided because:

Screen readers may interpret the arrangement as tabular data.
Source and reading order can become confusing.
Responsive adaptation is difficult.
Markup becomes verbose and hard to maintain.
Visual changes require structural HTML changes.

CSS techniques such as Flexbox and Grid are designed for page layout. They separate presentation from document meaning, provide better responsive behavior, and preserve cleaner semantic HTML. Tables should therefore be used only when the content genuinely has tabular relationships.

Tap card to flip back

Question 16

Create a semantic and accessible HTML table for a student's marks in three subjects, including a caption, correct headers, and a total row. Explain the accessibility decisions.

Tap card to reveal answer

Answer 16

A suitable table is:

HTML

<table>
  <caption>Marks obtained by Anika Sharma</caption>
  <thead>
    <tr>
      <th scope="col">Subject</th>
      <th scope="col">Maximum marks</th>
      <th scope="col">Marks obtained</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">English</th><td>100</td><td>82</td></tr>
    <tr><th scope="row">Mathematics</th><td>100</td><td>91</td></tr>
    <tr><th scope="row">Science</th><td>100</td><td>87</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total</th><td>300</td><td>260</td></tr>
  </tfoot>
</table>

Accessibility decisions:

The <caption> identifies the purpose and owner of the data.
Column headings use <th scope="col">.
Subject names and the total label use <th scope="row">.
<thead>, <tbody>, and <tfoot> communicate structural groups.
The logical source order supports keyboard and screen-reader navigation.
Meaning does not depend only on color or visual borders.

For complex tables with multi-level headers, explicit id and headers associations may be required.

Tap card to flip back

Question 17

Describe the four principles of the Web Content Accessibility Guidelines (WCAG) and provide one practical HTML-related example for each principle.

Tap card to reveal answer

Answer 17

WCAG organizes accessibility around four principles, commonly abbreviated as POUR:

Perceivable: Information must be available in forms users can perceive. Example: provide meaningful alt text for informative images and captions for video.
Operable: Interface controls and navigation must be usable through supported input methods. Example: use native buttons and ensure all functionality works with a keyboard.
Understandable: Content and interactions must be clear and predictable. Example: use explicit form labels and provide specific, consistent validation messages.
Robust: Content must be interpretable by current and future browsers and assistive technologies. Example: use valid semantic HTML and accessible names, roles, and states.

WCAG also defines conformance levels A, AA, and AAA. Level AA is a common organizational and legal target, but compliance should be verified against the specific WCAG version and applicable regulations.

Tap card to flip back

Question 18

Explain the relationship between native semantic HTML and ARIA. State the first rule of ARIA and discuss situations where ARIA may be necessary.

Tap card to reveal answer

Answer 18

ARIA, or Accessible Rich Internet Applications, adds accessibility roles, states, and properties when native HTML cannot fully express a custom interface.

The first rule of ARIA is: use a native HTML element or attribute with the required semantics and behavior whenever one is available instead of recreating it with ARIA.

For example, this is preferred:

HTML

<button type="button">Save</button>

It is better than using a generic <div role="button"> because a native button already provides focusability, keyboard activation, semantics, and disabled-state support.

ARIA may be necessary for:

Naming multiple navigation regions with aria-label.
Communicating expanded state through aria-expanded.
Associating instructions or errors using aria-describedby.
Implementing custom widgets whose semantics are not available through native HTML.
Announcing dynamic status updates using an appropriate live region.

ARIA changes the accessibility tree but does not automatically add keyboard behavior, visual focus, or functionality. Incorrect ARIA can make an interface less accessible.

Tap card to flip back

Question 19

What is responsive content structuring? Explain how semantic source order, flexible media, viewport settings, and CSS layout contribute to responsive web pages.

Tap card to reveal answer

Answer 19

Responsive content structuring organizes content so that it remains understandable and usable across different screen sizes, zoom levels, orientations, and input methods.

Important techniques include:

Semantic source order: HTML should follow a logical reading and focus order independent of the visual layout.
Viewport configuration: <meta name="viewport" content="width=device-width, initial-scale=1"> allows mobile browsers to use the device width correctly.
Flexible layouts: CSS Grid and Flexbox can adapt columns and spacing without changing document meaning.
Flexible media: Rules such as img { max-width: 100%; height: auto; } prevent images from overflowing their containers.
Responsive images: srcset, sizes, and <picture> can provide images suited to different resolutions or compositions.
Content reflow: Users should normally be able to read content without two-dimensional scrolling at narrow widths.
Appropriate controls: Form fields and interactive targets must remain readable, reachable, and large enough to operate.

Responsive design should preserve content priority and accessibility rather than merely shrinking a desktop layout.

Tap card to flip back

Question 20

Develop and explain a responsive, semantic content structure for an article page containing primary navigation, an article, related links, an accessible data table, and a newsletter form.

Tap card to reveal answer

Answer 20

A responsive article page should begin with a meaningful source order and use CSS only to change its visual arrangement.

HTML

<header>
  <h1>Web Standards Journal</h1>
  <nav aria-label="Primary">
    <a href="/">Home</a>
    <a href="/articles">Articles</a>
  </nav>
</header>

<main class="content-layout">
  <article>
    <h2>Browser Usage Report</h2>
    <p>Report introduction and analysis.</p>

    <table>
      <caption>Browser usage by year</caption>
      <thead>
        <tr><th scope="col">Browser</th><th scope="col">Usage</th></tr>
      </thead>
      <tbody>
        <tr><th scope="row">Browser A</th><td>62%</td></tr>
      </tbody>
    </table>
  </article>

  <aside aria-labelledby="related-heading">
    <h2 id="related-heading">Related links</h2>
    <ul><li><a href="/accessibility">Accessibility guide</a></li></ul>
  </aside>
</main>

<section aria-labelledby="newsletter-heading">
  <h2 id="newsletter-heading">Newsletter</h2>
  <form action="/subscribe" method="post">
    <label for="subscriber-email">Email address</label>
    <input id="subscriber-email" name="email" type="email"
           autocomplete="email" required>
    <button type="submit">Subscribe</button>
  </form>
</section>

<footer><p>Copyright 2025 Web Standards Journal</p></footer>

A mobile-first stylesheet can display the article and aside in one column, then introduce columns when sufficient space is available:

CSS

.content-layout {
  display: grid;
  gap: 1.5rem;
}

img {
  max-width: 100%;
  height: auto;
}

.table-wrapper {
  overflow-x: auto;
}

@media (min-width: 50rem) {
  .content-layout {
    grid-template-columns: minmax(0, 3fr) minmax(14rem, 1fr);
  }
}

Tap card to flip back

1 / 20

Unit1 Unit3

Unit 2: Semantic HTML and Forms - Subjective Questions

Did this save you a night before the exam?