Semantic HTML and Content Structure

Introduction

Responsive web design begins before CSS. A page must first have a meaningful document structure that browsers, assistive technologies, search engines, and developers can interpret consistently. Semantic HTML provides that structure. It expresses the purpose of content—such as navigation, an article, a heading, or a form—rather than merely describing its visual appearance.

For example, a navigation menu should be marked up with <nav>, not simply a <div> styled to look like navigation. A self-contained news story should use <article>, while related but nonessential material may belong in <aside>. These choices improve accessibility, search-engine understanding, maintainability, and the ability of CSS layouts to adapt across screen sizes.

Semantic structure is therefore a foundation for responsive development. CSS controls presentation, but HTML communicates meaning. When content meaning is explicit, the same document can be presented effectively on a phone, tablet, desktop display, screen reader, voice interface, or future device.

Learning Objectives

By the end of this chapter, you should be able to:

1. Explain the role of semantic HTML in responsive and accessible web development.
2. Construct a standards-compliant HTML document with appropriate metadata.
3. Use landmarks, headings, lists, links, images, tables, and forms correctly.
4. Distinguish structural elements from generic containers.
5. Evaluate document hierarchy using accessibility, SEO, and maintainability criteria.
6. Apply semantic design principles to a realistic web page.
7. Identify common structural errors and improve them systematically.

1. HTML as a Document Language

HTML is a markup language for describing the structure and meaning of web content. It is not primarily a programming language and it is not a visual design language. The browser parses HTML into a document tree, commonly represented as the Document Object Model (DOM). CSS and JavaScript operate on this structure.

An HTML element generally consists of an opening tag, content, and a closing tag:

<p>This is a paragraph.</p>

Some elements are void elements and do not have closing tags:

<img src="campus.jpg" alt="Students walking across campus">
<meta name="description" content="Information about university courses">

An element may also contain attributes that provide additional information:

<a href="/admissions" class="button">Apply for admission</a>

Here, href identifies the destination and class provides a styling hook. The class does not define the meaning of the content; the a element does.

1.1 Structure and presentation

A nonsemantic structure often looks like this:

<div class="top">University Portal</div>
<div class="links">Home | Courses | Contact</div>
<div class="main-title">Responsive Web Design</div>
<div class="text">HTML provides document structure.</div>

The visual result may be acceptable, but the meaning is unclear. A more appropriate structure is:

<header>
  <p>University Portal</p>
  <nav aria-label="Primary navigation">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/courses">Courses</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <h1>Responsive Web Design</h1>
  <p>HTML provides document structure.</p>
</main>

The second version communicates relationships to machines as well as people. CSS can still remove list bullets, place links horizontally, and create any desired visual design.

2. The HTML Document Shell

A modern document normally begins with the following structure:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Responsive Web Design | University Portal</title>
    <meta name="description"
          content="Learn the foundations of responsive web design and semantic HTML.">
    <link rel="stylesheet" href="/css/site.css">
  </head>
  <body>
    <header>
      <h1>University Portal</h1>
    </header>
    <main>
      <h2>Responsive Web Design</h2>
      <p>Course information and learning resources.</p>
    </main>
  </body>
</html>

2.1 The doctype

<!doctype html> tells the browser to use standards mode. It is not an HTML element and does not require a closing tag. Omitting it can cause browsers to enter quirks mode, in which layout behavior may differ from modern standards.

2.2 The root element and language

The html element is the root of the document. Its lang attribute identifies the primary language. Language information supports screen readers, pronunciation systems, translation tools, spell-checking, and search engines.

For a page written in British English, an author may use lang="en-GB"; for American English, lang="en-US". The value should correspond to the actual content, not the developer’s location.

2.3 Character encoding

<meta charset="utf-8"> declares UTF-8 encoding, which supports a broad range of scripts and symbols. It should appear early in the <head> so that the browser determines encoding before interpreting substantial content.

2.4 The viewport metadata

The responsive baseline is:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width makes the layout viewport approximately match the device’s CSS width. initial-scale=1 establishes the initial zoom level. Without this metadata, mobile browsers may render a page in a wider virtual viewport and scale it down, making text and controls difficult to use.

Developers should not normally disable user scaling with user-scalable=no or restrictive maximum-scale settings. Users must be able to zoom, particularly users with low vision.

2.5 The title and description

The title element identifies the document in browser tabs, history, bookmarks, and search results. It should be concise and specific. The meta description is not a direct ranking guarantee, but it can help search engines generate a useful result preview.

Metadata must describe the actual page. Misleading titles, keyword stuffing, and duplicated descriptions reduce trust and may harm search visibility.

3. Semantic Landmarks

Landmarks divide a page into major regions. Assistive-technology users may navigate directly between these regions instead of reading every element in sequence.

3.1 Header and footer

A header may contain a logo, site title, introductory text, or navigation. It is not limited to the top of the page: an article can have its own header.

A footer may contain author information, copyright notices, related links, or contact information. A footer inside an article belongs to that article; a footer outside the article may belong to the entire page.

<article>
  <header>
    <h2>Why semantic HTML matters</h2>
    <p>Published <time datetime="2025-02-14">14 February 2025</time></p>
  </header>
  <p>Semantic markup gives content a reliable structure.</p>
  <footer>Written by the Web Standards Team</footer>
</article>

3.2 Navigation

Use nav for a major navigation block, not for every group of links. A page may contain multiple navigation landmarks, such as primary navigation, a table of contents, and related-content navigation. When there is more than one, provide a distinguishing accessible name:

<nav aria-label="Primary navigation">...</nav>
<nav aria-label="Course contents">...</nav>

The links themselves should describe their destination. “Read more” repeated several times is less useful than “Read the accessibility guide.”

3.3 Main content

A document should generally have one main element representing the unique central content. Repeated site-wide content, such as a global menu or footer, does not belong inside main.

The main element is especially valuable for keyboard users because a “skip to main content” link can move focus beyond repeated navigation:

<a class="skip-link" href="#main-content">Skip to main content</a>
<main id="main-content">...</main>

3.4 Section and article

A section represents a thematic grouping and normally should have a heading. It is not merely a generic wrapper for styling. If a group has no meaningful theme or heading, a div may be more appropriate.

An article is suitable when content could stand alone—for example, a blog post, product review, forum post, news item, or independently syndicated story. Several articles may appear inside a section, such as a page of search results.

3.5 Aside

aside contains content related to the surrounding content but not central to it. Examples include a glossary panel, related readings, an advertisement, or a sidebar containing author information. It should not be used simply because content is visually placed on the side; visual placement is controlled by CSS.

4. Content Hierarchy and Headings

Headings create an outline that allows readers and assistive technologies to understand content hierarchy. A page normally has one descriptive h1, followed by headings such as h2 and h3 according to nesting.

<h1>Full Stack Development</h1>
  <h2>Frontend foundations</h2>
    <h3>Semantic HTML</h3>
    <h3>Responsive CSS</h3>
  <h2>Backend foundations</h2>

Heading levels should reflect hierarchy, not font size. CSS can make an h2 visually larger than an h1, but changing appearance does not change semantic level. Skipping from h2 to h4 can confuse users because an intermediate level appears to be missing.

A heading should describe the content that follows. Do not use headings solely to make text bold. Conversely, do not select a heading because it looks attractive.

4.1 Sections and heading structure

A good test is to read only the headings. The resulting sequence should provide a useful summary of the document. This supports scanning on small screens, where users often navigate by headings rather than reading linearly.

A heading should not be empty, hidden only for decoration, or duplicated unnecessarily. If a visual label is required but should not appear in the document hierarchy, a styled paragraph may be more appropriate.

5. Text, Lists, Links, and Quotations

5.1 Paragraphs and emphasis

Use p for a paragraph. Use strong when content has strong importance and em when emphasis changes meaning or stress. These elements are semantic; they are not merely alternatives to bold and italic styling.

<p><strong>Important:</strong> Back up your project before changing its structure.</p>
<p>The word <em>only</em> changes the meaning of this sentence.</p>

5.2 Lists

Use an unordered list when order is not significant and an ordered list when sequence is significant.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<ol>
  <li>Plan the content.</li>
  <li>Mark up the structure.</li>
  <li>Test with users and tools.</li>
</ol>

Description lists (dl, dt, and dd) are suitable for terms and definitions, metadata, or question-and-answer pairs where the relationship is genuinely descriptive.

5.3 Links and buttons

A link navigates to another resource or location. A button performs an action in the current interface, such as opening a dialog, submitting a form, or toggling a menu.

<a href="/help">Read the help guide</a>
<button type="button">Open filters</button>

Using a div with a click handler instead of a button removes built-in keyboard behavior, focus behavior, and semantics. If an element performs an action, use button unless there is a compelling, documented reason not to.

5.4 Quotations and code

Use blockquote for an extended quotation and q for a short inline quotation. Use code for a fragment of computer code and pre when whitespace and line breaks must be preserved.

<p>Use the <code>main</code> element for unique page content.</p>
<blockquote cite="https://example.edu/standards">
  Clear structure improves communication between people and technology.
</blockquote>

6. Images, Media, and Alternative Text

Images should communicate their purpose through alt text. A useful alternative text is concise and context-dependent.

<img src="team.jpg" alt="Three students reviewing a wireframe together">

Decorative images should use an empty alternative (alt="") so that assistive technologies ignore them. Omitting alt is different: it may cause the file name or URL to be announced.

If an image contains important text or a complex diagram, the surrounding content should provide the information in an accessible form. Alternative text is not a substitute for a detailed explanation when the image contains substantial data.

Use figure and figcaption when media and its caption form a meaningful unit:

<figure>
  <img src="layout-wireframe.svg" alt="Wireframe showing header, navigation, main content, and footer">
  <figcaption>Early structural plan for the course page.</figcaption>
</figure>

For video and audio, provide captions or transcripts as appropriate. Autoplay, especially with sound, can interfere with users, consume bandwidth, and create accessibility problems.

7. Tables and Forms

7.1 Data tables

Tables are for relationships among data, not for page layout. A table should normally include a caption and identify header cells with th.

<table>
  <caption>Assessment schedule</caption>
  <thead>
    <tr>
      <th scope="col">Assessment</th>
      <th scope="col">Due date</th>
      <th scope="col">Weight</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Accessibility audit</th>
      <td><time datetime="2025-03-10">10 March</time></td>
      <td>20%</td>
    </tr>
  </tbody>
</table>

scope helps technologies associate headers and data, especially when tables become more complex. On narrow screens, CSS may allow horizontal scrolling, transform rows into cards, or prioritize columns, but the underlying data relationships must remain understandable.

7.2 Forms

Forms require explicit labels, suitable controls, useful input types, and clear error handling.

<form action="/subscribe" method="post">
  <div>
    <label for="email">Email address</label>
    <input id="email" name="email" type="email" autocomplete="email" required>
  </div>
  <button type="submit">Subscribe</button>
</form>

The for attribute must match the input’s id. Placeholder text is not a replacement for a label because it disappears during entry and may have inadequate contrast. fieldset and legend should group related controls, such as radio buttons.

Error messages should identify the problem in text and be associated with the relevant control. Do not rely only on red borders or icons.

8. Semantic HTML, Accessibility, SEO, and Responsive Design

These goals reinforce one another but are not identical.

Accessibility concerns whether people with diverse abilities can perceive, operate, understand, and interact with the page. Semantic elements provide native keyboard behavior and recognizable roles.

Search-engine optimization concerns discoverability and meaningful interpretation by search systems. Clear titles, headings, text alternatives, link text, structured content, and valid metadata help search engines process a page, although no markup guarantees a ranking.

Responsive design concerns effective use across viewport sizes and input methods. Semantic content permits CSS to rearrange regions without changing meaning. For example, a navigation list can display vertically on a phone and horizontally on a desktop without changing its HTML.

Maintainability concerns the cost and risk of future change. A page with clear elements is easier for another developer to understand, test, refactor, and extend.

Semantic HTML does not automatically make a site accessible. Poor color contrast, inaccessible dialogs, keyboard traps, confusing focus order, missing captions, and inadequate error handling can still produce serious barriers. Semantics are a foundation, not a complete accessibility audit.

9. ARIA: Enhancement, Not Replacement

Accessible Rich Internet Applications (ARIA) provides roles, states, and properties for complex interactive interfaces. It is useful when native HTML cannot express a widget adequately, but it should not replace native elements unnecessarily.

The principle is often summarized as: use native HTML first. For example, use:

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

rather than:

<div role="button" tabindex="0">Save changes</div>

The div version requires developers to recreate keyboard activation, focus behavior, disabled states, and event handling. Incorrect ARIA can make a page less accessible than no ARIA.

ARIA landmarks can occasionally label or supplement native structures, but redundant roles should be avoided when the native element already provides the required semantics. Test dynamic widgets with keyboard navigation and assistive technology rather than assuming that an attribute is sufficient.

10. A Standards-Compliant Page Pattern

The following example combines document metadata, landmarks, hierarchy, navigation, an article, related content, and a footer:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Semantic HTML | Web Foundations</title>
    <meta name="description" content="A practical introduction to semantic HTML and document structure.">
    <link rel="stylesheet" href="/styles/site.css">
  </head>
  <body>
    <a class="skip-link" href="#content">Skip to content</a>

    <header class="site-header">
      <a href="/" aria-label="Web Foundations home">Web Foundations</a>
      <nav aria-label="Primary navigation">
        <ul>
          <li><a href="/lessons">Lessons</a></li>
          <li><a href="/examples">Examples</a></li>
          <li><a href="/about">About</a></li>
        </ul>
      </nav>
    </header>

    <main id="content">
      <article>
        <header>
          <p class="eyebrow">Lesson 2</p>
          <h1>Semantic HTML and Content Structure</h1>
          <p>Published <time datetime="2025-02-14">14 February 2025</time></p>
        </header>

        <p>Semantic HTML expresses the purpose and relationships of web content.</p>

        <section aria-labelledby="principles-heading">
          <h2 id="principles-heading">Core principles</h2>
          <ol>
            <li>Choose elements according to meaning.</li>
            <li>Maintain a logical heading hierarchy.</li>
            <li>Provide text alternatives and explicit labels.</li>
          </ol>
        </section>
      </article>

      <aside aria-labelledby="related-heading">
        <h2 id="related-heading">Related lessons</h2>
        <ul>
          <li><a href="/css-layout">Responsive CSS layout</a></li>
          <li><a href="/accessibility-testing">Accessibility testing</a></li>
        </ul>
      </aside>
    </main>

    <footer>
      <p>&copy; 2025 Web Foundations.</p>
    </footer>
  </body>
</html>

This structure does not prescribe a particular visual layout. CSS may use grid, flexbox, or another technique to arrange the regions at different widths. The HTML remains stable while presentation adapts.

11. Applied Case: Rebuilding a University Course Page

This is an illustrative case.

Background

A university publishes course information through a page built from nested div elements. On desktop, the page has a banner, horizontal menu, two-column content area, and footer. On mobile, the menu becomes difficult to navigate. Screen-reader users hear a long sequence of unlabelled links, and search results display an uninformative title such as “Course Page.”

Problem

An audit identifies four related problems:

• The page has no declared language and uses an outdated viewport configuration.
• Visual headings are paragraphs styled with large fonts.
• Course assessments are presented as layout tables without header relationships.
• Interactive menu items are clickable div elements.

Analysis

The problem is not primarily visual. The document lacks a reliable information model. CSS cannot fully repair missing semantics. The development team first maps the content: site identity, primary navigation, course title, overview, learning outcomes, assessment data, related resources, and institutional footer.

Approach and solution

The team replaces visual containers with semantic landmarks, adds a single descriptive h1, and organizes subsections under h2 headings. The assessment schedule becomes a data table with a caption and scoped headers. Navigation uses lists of links, while menu expansion uses buttons with accurately managed state. Every form control receives a label, and informative images receive context-sensitive alternative text.

The head contains UTF-8 encoding, an accurate title, a useful description, and the responsive viewport declaration. A skip link is added. CSS then creates a single-column layout below a chosen breakpoint and a multi-column layout when sufficient space exists.

Outcome

Keyboard users can bypass repeated navigation and move among landmarks. Screen-reader users can navigate by headings and understand table relationships. Search engines receive clearer page signals. Developers can change the desktop and mobile layouts without rewriting the content structure.

Learning points

1. Responsive behavior should be planned from content structure, not added after visual design.
2. Native elements often provide accessibility features that custom widgets must otherwise recreate.
3. Metadata and headings influence both human orientation and machine interpretation.
4. A semantic refactor should precede complex CSS or JavaScript fixes.
5. Testing must include validators, keyboard-only use, screen readers, mobile widths, and real users where possible.

12. Validation and Professional Workflow

Semantic quality is evaluated through several complementary methods.

1. Conformance checking: Validate syntax and inspect nesting, required attributes, duplicate IDs, and malformed elements.
2. Structural inspection: Read the page with CSS disabled or inspect the accessibility tree. The content should still have a coherent order.
3. Keyboard testing: Tab through controls, activate links and buttons, verify visible focus, and test skip links.
4. Responsive testing: Examine narrow and wide viewports, zoom levels, long words, translated text, and touch targets.
5. Assistive-technology testing: Use at least one screen reader and browser combination where feasible.
6. Content review: Check heading descriptions, link purpose, alternative text, labels, and language declarations.
7. Performance review: Avoid unnecessary media, reduce layout shifts, and ensure images are appropriately sized.

Automated tools can find missing labels, invalid attributes, and some contrast problems, but they cannot reliably judge whether a heading is meaningful or whether alternative text communicates the intended message. Human review remains essential.

13. Common Errors and Their Corrections

14. Contemporary Considerations

Modern web applications frequently update content without loading a new page. Client-side rendering does not remove the need for semantic HTML. The initial document should contain meaningful structure where possible, and dynamically inserted content must preserve logical focus order and announce important state changes appropriately.

Component frameworks can improve consistency, but component names do not automatically create HTML semantics. A component called Card may render a div, article, or another element; the implementation must match the content’s purpose. Design systems should document semantic behavior, keyboard expectations, heading rules, and accessible states alongside visual specifications.

AI-assisted coding can generate plausible markup quickly, but generated code must be reviewed. Common failures include excessive div elements, inappropriate ARIA, missing labels, incorrect heading levels, and decorative images with misleading alternative text. Professional responsibility remains with the developer who ships the interface.

Privacy and governance also matter. Metadata should not expose confidential information. Structured data, if used, must accurately represent visible content and follow search-engine and organizational policies. Accessibility is not merely a technical feature; it is part of equitable participation and, in many jurisdictions, a legal and institutional responsibility.

Best-Practice Checklist

Before publishing a page, ask:

• Is the document language declared correctly?
• Is UTF-8 encoding declared early?
• Is the title unique and descriptive?
• Is the viewport configured without disabling zoom?
• Is there one clear main region?
• Are navigation regions labelled when necessary?
• Does the heading hierarchy reflect content relationships?
• Are links descriptive and buttons used for actions?
• Do images have appropriate alternative text?
• Are tables used only for data and equipped with headers?
• Do all form controls have labels?
• Does the page remain understandable without CSS?
• Can keyboard users reach and operate every control?
• Has the page been tested at mobile widths and with assistive technology?

Chapter Summary

Semantic HTML expresses the meaning and relationships of content rather than its visual appearance. A standards-compliant document begins with a doctype, language declaration, character encoding, responsive viewport metadata, a meaningful title, and appropriate description. Landmarks such as header, nav, main, section, article, aside, and footer give pages navigable regions. Headings create content hierarchy, while lists, links, buttons, images, tables, and forms provide specialized semantics and built-in behavior.

Semantic structure supports, but does not by itself guarantee, accessibility, SEO, responsiveness, or maintainability. Native HTML should be preferred to unnecessary ARIA and custom controls. Responsive CSS can rearrange a well-structured document across screen sizes without changing its meaning. Professional development combines conformance checking, keyboard testing, assistive-technology testing, responsive testing, and human content review. The central design principle is simple: choose each element because it accurately represents the content or interaction it contains.

Key Terms

Semantic HTML: HTML that communicates the meaning and role of content.

Document tree: The hierarchical structure created when a browser parses HTML.

DOM: The Document Object Model representing a document as objects and relationships.

Landmark: A major navigational region identifiable to assistive technologies.

Metadata: Information about a document, usually placed in the head element.

Viewport: The area of a page currently available for display.

Heading hierarchy: The ordered organization of headings from h1 through h6.

Accessible name: The name by which an interface object is identified to assistive technology.

Alternative text: Text that communicates the purpose or content of non-text media.

Data table: A table representing relationships among rows and columns of data.

Form label: Text programmatically associated with a form control to identify its purpose.

Native element: An HTML element with built-in meaning and browser behavior.

ARIA: A specification for expressing roles, states, and properties of dynamic interfaces.

Skip link: A link allowing users to bypass repeated content such as navigation.

Responsive design: An approach in which presentation adapts to viewport and device conditions.

Standards mode: Browser behavior based on current web standards rather than legacy quirks.

Content hierarchy: The organization of information according to conceptual importance and relationships.

Maintainability: The ease with which software or markup can be understood, changed, and tested.

Review Questions

Short Answer Questions

1. What is the primary difference between semantic and nonsemantic HTML?
2. Why is the viewport meta element important for mobile browsers?
3. When is an article more appropriate than a section?
4. Why should a button be used instead of a clickable div for an action?
5. What information should alternative text communicate?

Long Answer Questions

1. Explain how semantic HTML supports accessibility, SEO, responsiveness, and maintainability. Discuss why these benefits are related but not identical.
2. Describe the purpose of header, nav, main, section, article, aside, and footer, including situations in which each might be used.
3. Design a heading and landmark structure for a university course page and justify each major decision.
4. Explain why native HTML should generally be preferred to ARIA and identify circumstances in which ARIA may be appropriate.
5. Discuss a professional workflow for evaluating the semantic quality of a responsive web page.

Analytical / Application Questions

1. A page uses a series of styled paragraphs as headings, a layout table for two-column positioning, and clickable div elements for menu items. Analyze the accessibility and maintainability problems and propose a semantic replacement.
2. A news site displays ten independent stories under the heading “Latest news.” Determine which elements should represent the page, the collection, and each story. Explain how your structure would support mobile presentation.
3. Review the sample course-page case and develop a testing plan involving validation, keyboard navigation, screen-reader review, responsive testing, and human content evaluation. Explain what evidence each method would provide.

Multiple Choice Questions with Answers

Question 1

Which element normally identifies the unique primary content of a document?

A. <main>

B. <aside>

C. <footer>

D. <nav>

Correct Answer: A. <main>

Question 2

What is the principal purpose of the viewport meta element with content="width=device-width, initial-scale=1"?

A. It prevents all user zooming

B. It aligns the layout viewport with the device width and sets initial scale

C. It automatically creates a mobile navigation menu

D. It compresses images for faster loading

Correct Answer: B. It aligns the layout viewport with the device width and sets initial scale

Question 3

Which element is most appropriate for an independent blog post that could be distributed separately?

A. <span>

B. <article>

C. <br>

D. <label>

Correct Answer: B. <article>

Question 4

Which statement about heading levels is correct?

A. They should be selected only according to visual size

B. Every page must contain exactly six headings

C. They should represent the conceptual hierarchy of the content

D. Headings should be replaced by styled paragraphs for flexibility

Correct Answer: C. They should represent the conceptual hierarchy of the content

Question 5

Which control is generally correct for an operation such as opening a menu or saving data?

A. A clickable <div>

B. A <button>

C. A <p> with an onclick attribute

D. An empty <span>

Correct Answer: B. A <button>

Question 6

What should a decorative image normally use for its alt attribute?

A. The image file name

B. A long description unrelated to the page

C. An empty value, alt=""

D. The word “decorative” only in visible text

Correct Answer: C. An empty value, alt=""

Question 7

Which feature most directly helps associate table data with its column headings?

A. The scope attribute on header cells

B. A placeholder attribute

C. The viewport meta element

D. A CSS float declaration

Correct Answer: A. The scope attribute on header cells

Question 8

What is the recommended general relationship between native HTML and ARIA?

A. ARIA should replace all native HTML elements

B. Native HTML should generally be used first, with ARIA added when needed

C. ARIA is required for every paragraph

D. ARIA changes visual color contrast automatically

Correct Answer: B. Native HTML should generally be used first, with ARIA added when needed

Question 9

Which element is intended for a major group of navigation links?

A. <nav>

B. <em>

C. <figure>

D. <time>

Correct Answer: A. <nav>

Question 10

Why is a visible form label preferable to using placeholder text as the only label?

A. Placeholder text always improves color contrast

B. Placeholder text remains visible after the user enters a value

C. A label identifies the control persistently and supports accessibility

D. Labels prevent all invalid input automatically

Correct Answer: C. A label identifies the control persistently and supports accessibility