1

Module 2: HTML and Semantic Markup for Responsive

Design
📌 Course Overview:
This module covers the importance of semantic HTML for accessibility and
responsiveness, emphasizing best practices for structuring content effectively.

🎯 Learning Outcomes:
By the end of this module, students should be able to:

1. Describe the role of semantic HTML in responsive design. (Understand)

2. Analyze different HTML structures for accessibility. (Analyze)
3. Apply semantic HTML elements in webpage development. (Apply)

1. Role of semantic HTML in responsive design.

WHAT IS SEMANTIC HTML?

Semantic HTML refers to the use of HTML elements that convey meaning about their
content and role in a webpage. Unlike non-semantic elements like <div> and <span>,
semantic elements provide structure and context, improving accessibility, readability,
and SEO.

Examples of Semantic HTML Elements:

 Structural Elements: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>.

 Text Content Elements: <h1>-<h6>, <p>, <blockquote>, <cite>.
 Interactive Elements: <button>, <form>, <label>, <table>, <figure>, <figcaption>.

Benefits of Semantic HTML:

✅ Improves Accessibility – Helps screen readers interpret content correctly. ✅

Enhances SEO – Search engines better understand and rank well-structured pages. ✅
Increases Readability – Clear structure makes content easier to maintain. ✅ Better
Styling & Maintainability – Allows efficient CSS targeting and improves code
organization.

1
 2

WHAT IS ARIA?

Accessible Rich Internet Applications (ARIA) is a set of attributes that enhance the
accessibility of web content and applications for users with disabilities. ARIA helps
improve the experience for people who use assistive technologies, such as screen
readers, by providing additional context and roles for dynamic content and interactive
elements.

Key Features of ARIA:

 Roles: Define the purpose of an element (e.g., role="navigation", role="button").

 States and Properties: Provide updates on the state of an element (e.g., aria-
disabled="true", aria-expanded="false").
 Landmarks: Help assistive technologies navigate a webpage efficiently (e.g.,
role="banner", role="main").

When to Use ARIA:

 When native HTML elements do not provide sufficient accessibility.

 For dynamic content that updates without reloading the page.
 To improve keyboard navigation and interactions.

Best Practices:

 Use semantic HTML first before relying on ARIA.

 Avoid unnecessary ARIA roles where native elements already provide
accessibility.
 Test ARIA implementations with screen readers to ensure effectiveness.

By combining Semantic HTML with ARIA, developers can create accessible, well-
structured, and user-friendly web applications.

Semantic HTML plays a crucial role in responsive design by enhancing both the
structure and accessibility of web content. Here’s how it contributes:

2
 3

1. Improved Structure and Readability – Semantic elements (e.g., <header>, <nav>,

<article>, <section>, <footer>) provide meaningful structure to a webpage, making it
easier for developers and browsers to interpret and adjust content dynamically
based on screen sizes.
2. Enhanced Accessibility – Screen readers and assistive technologies rely on
semantic elements to properly navigate and present content to users, ensuring a
better experience across different devices.
3. Better CSS Targeting – Semantic elements allow for more efficient styling and
layout adjustments using CSS media queries. For example, <section> and <aside>
can be easily repositioned or hidden for smaller screens.
4. SEO Optimization – Search engines prioritize well-structured content,
improving search rankings. Proper use of <h1>-<h6> for headings and <nav> for
navigation aids indexing and responsiveness.
5. Consistency Across Devices – Semantic HTML ensures that content remains
meaningful and adaptable regardless of the device, supporting responsive design
techniques like flexbox and grid layouts.

By using semantic HTML in responsive design, developers create web pages that are
more maintainable, user-friendly, and adaptable to different screen sizes and
resolutions.

2. Analysis of different HTML structures for accessibility by

comparing how various HTML structures impact usability for
screen readers and assistive technologies.
Comparing Different HTML Structures for Accessibility
1. Using Non-Semantic vs. Semantic HTML

 Non-Semantic Approach:
 <div class="header">Website Header</div>
 <div class="nav">Navigation Links</div>
 <div class="content">Main Content</div>
 <div class="footer">Footer Information</div>
o🛑 Issues: Screen readers don’t understand the purpose of these <div>
elements.
o 🚫 No clear structure or meaning.
 Semantic Approach:
 <header>Website Header</header>
 <nav>Navigation Links</nav>
 <main>Main Content</main>
 <footer>Footer Information</footer>

3
 4

o ✅ Better for Accessibility: Screen readers can announce elements

correctly.
o ✅ Improved Readability: Developers can understand the document’s
structure at a glance.

2. Forms and Labels

 Without Labels (Bad Practice):

 <input type="text" placeholder="Enter name">
o 🛑 Placeholder text disappears when typing, reducing accessibility.
o 🛑 Screen readers may not associate the input with a label.
 With Proper Labels (Good Practice):
 <label for="name">Enter Name:</label>
 <input type="text" id="name">
o ✅ Screen readers announce the label with the input field.
o ✅ Users with visual impairments can understand input requirements.

3. ARIA for Enhanced Accessibility

Sometimes, semantic HTML alone is not enough, and ARIA attributes help improve
accessibility.

 Example: Making a Custom Button Accessible

 <div role="button" tabindex="0" aria-label="Submit Form">Submit</div>
o ✅ role="button" tells screen readers it behaves like a button.
o ✅ tabindex="0" makes it keyboard-focusable.
o ✅ aria-label="Submit Form" gives meaningful context.

MORE READINGS…………….

1. Semantic HTML vs. Non-Semantic HTML

 Semantic HTML (Recommended): Uses elements like <header>, <nav>, <main>,

<article>, <section>, and <footer> to provide meaningful structure, improving
accessibility for screen readers and assistive technologies.
 Non-Semantic HTML (Avoided): Uses generic <div> and <span> elements
without meaningful labels, making navigation harder for users relying on
assistive technologies.

2. Heading Structures (<h1> - <h6>)

 Proper Hierarchy (Recommended): Headings should follow a logical order (e.g.,

<h1> for main title, followed by <h2>, <h3>, etc.), enabling screen readers to
provide a structured outline of the content.
4
 5

 Skipping Levels (Avoided): Skipping heading levels (e.g., jumping from <h1> to
<h3>) can disrupt the logical flow for assistive technologies.

3. Navigation (<nav> and Landmarks)

 Landmarks (Recommended): <nav> should be used for primary navigation, and

ARIA landmarks (role="navigation") can further enhance accessibility.
 Link Grouping (Recommended): Grouping related links within <ul> elements
ensures logical navigation.
 Unstructured Links (Avoided): Placing links randomly or using plain text for
navigation reduces usability for screen reader users.

4. Forms (<form>, <label>, <fieldset>, <legend>)

 Labeled Inputs (Recommended): Use <label for="id"> to associate labels with form
elements, ensuring screen readers announce the field purpose.
 Fieldset and Legend (Recommended): <fieldset> groups related fields, and
<legend> provides context, improving comprehension.
 Placeholder-only Text (Avoided): Relying on placeholders instead of labels can
cause accessibility issues, as placeholders disappear on typing.

5. Alternative Text for Images (<img> and ARIA)

 Descriptive Alt Text (Recommended): <img src="image.jpg" alt="Description of image">

ensures visually impaired users understand images.
 Decorative Images (Recommended): Use alt="" for purely decorative images to
avoid unnecessary announcements.
 Missing Alt Attributes (Avoided): Omitting alt attributes leaves screen reader
users unaware of the image’s context.

6. Interactive Elements (<button>, <a>, ARIA Roles)

 Buttons vs. Links (Recommended): Use <button> for actions (e.g., form
submissions) and <a> for navigation to ensure expected behavior.
 Keyboard Navigability (Recommended): Ensure interactive elements can be
accessed using the keyboard (e.g., tab key for navigation).
 Div-based Clickable Elements (Avoided): Using <div> or <span> with JavaScript
for interactions without proper ARIA roles hinders accessibility.

7. Tables (<table>, <th>, <caption>, <summary>)

 Accessible Tables (Recommended): Use <th> for headers, <caption> for

descriptions, and scope attributes to define relationships.

5
 6

 Data Tables vs. Layout Tables (Recommended): Data tables should be

structured for accessibility, while layout tables should be replaced with CSS for
responsive design.
 Complex Tables without ARIA (Avoided): Large tables should include aria-
describedby for better navigation.

8. Video and Audio Elements (<video>, <audio>, Captions, Transcripts)

 Captions and Transcripts (Recommended): Use <track kind="captions"> for videos

and provide transcripts for audio content.
 Auto-play Media (Avoided): Auto-playing content without controls can be
disruptive for users with disabilities.

Conclusion

By analyzing different HTML structures, it is clear that semantic HTML, proper

labeling, meaningful navigation, and ARIA enhancements improve accessibility.
Avoiding non-semantic elements, unlabeled controls, and improper heading structures
ensures an inclusive user experience across diverse audiences.

2.3 Application of Semantic HTML elements in

webpage development.
Below is an example of a well-structured webpage using semantic elements:

Example: Webpage Using Semantic HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<!-- Header with navigation -->

<header>
<h1>My Portfolio</h1>
<nav>
<ul>

6
 7

<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<!-- Main Content -->

<main>

<!-- About Section -->

<section id="about">
<h2>About Me</h2>
<p>Hello! I am a web developer specializing in front-end and back-end technologies.</p>
</section>

<!-- Projects Section -->

<section id="projects">
<h2>Projects</h2>
<article>
<h3>Project 1: E-commerce Website</h3>
<p>Developed an online store using HTML, CSS, and JavaScript.</p>
</article>
<article>
<h3>Project 2: Portfolio Website</h3>
<p>Created a responsive portfolio showcasing my work and skills.</p>
</article>
</section>

</main>

<!-- Contact Section -->

<aside id="contact">
<h2>Contact Me</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<button type="submit">Send</button>
</form>
</aside>

<!-- Footer -->

<footer>
<p>&copy; 2025 My Portfolio | Designed with Semantic HTML</p>
</footer>

</body>
</html>

7
 8

Application of Semantic HTML Elements

1. <header> – Defines the header section containing the page title and navigation
menu.
2. <nav> – Wraps the main navigation links to help screen readers and search
engines understand the site structure.
3. <main> – Contains the primary content of the page, improving accessibility.
4. <section> – Organizes content into meaningful sections (About, Projects).
5. <article> – Encapsulates independent pieces of content (each project).
6. <aside> – Contains supplementary content (contact form).
7. <footer> – Includes copyright and additional information.

Benefits of Using Semantic HTML

✅ Enhances Readability – Clearly defines the structure of the webpage.

✅ Improves Accessibility – Helps screen readers interpret content correctly.
✅ SEO Optimization – Search engines better understand content and rank it higher.
✅ Easier Maintenance – Structured code simplifies updates and styling.

By applying semantic HTML elements effectively, developers create structured,

accessible, and user-friendly webpages. 🚀