4.2. Semantic HTML (20 minutes)
Lesson 4: Forms and Semantic HTML
The importance of semantic HTML for accessibility (screen readers) and SEO.
Discuss tags like
<header>, <footer>, <article>, <nav>, and their usage.
· Activity: Students update their previous HTML files, replacing non-semantic <div> and <span> tags with more meaningful semantic tags like <header>, <section>, and <footer>.
4.2. Semantic HTML (20 minutes)
The Importance of Semantic HTML for Accessibility and SEO
Semantic HTML refers to the use of HTML tags that convey the meaning of the content they wrap. Unlike generic tags like <div> and <span>, semantic elements give browsers and search engines more information about the structure of the page, making the content more understandable and accessible.
Accessibility: Semantic HTML is crucial for making web content accessible to users who rely on assistive technologies such as screen readers. For example, screen readers use semantic elements to help visually impaired users navigate a webpage.
Example: <nav> lets screen readers know that the content within it contains site navigation links.
SEO (Search Engine Optimization): Search engines like Google prioritize pages that use semantic HTML because it helps them understand the content and structure of the page, improving search rankings.
Example: Using <article> helps search engines identify the main content of the page.
Key Semantic HTML Tags and Their Usage
<header>: Represents the header of a page or a section. It typically contains introductory content or navigation links, like the logo, website title, or menu.Example:
// HTML Form input
<header>
<h1>Website Title</h1>
<nav>
<ul
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<footer>: Represents the footer of a page or section, often containing copyright information, links to privacy policies, or contact details.
Example:
// HTML footer
<footer>
<p>© 2024 My KSTU ISE Website. All rights reserved.</p>
</footer>
<article>: Represents independent, self-contained content. This could be an article, blog post, or news story that makes sense on its own.Example:
// HTML article
<article>
<h2>Blog Post Title</h2>
<p>This is an example of an article.</p>
</article>
<section>: Represents a thematic grouping of content. This is often used to break up content into meaningful sections within a webpage.
Example:
// HTML section
<section>
<h2>About Our Company</h2>
<p>Our company specializes in web development.</p>
</section>
<nav>: Represents a section of a webpage intended for navigation. It typically contains a list of links to other pages or sections.
Example
// HTML nav
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
These tags help provide context to browsers and search engines, improving the accessibility and usability of the webpage.
Students Activity
Objective:
Students will update their previous HTML files, replacing non-semantic tags like <div> and <span> with more meaningful semantic tags such as <header>, <section>, and <footer> to improve the structure, accessibility, and SEO of their webpage.
Activity Steps:
Open the Existing HTML File:
Ask students to open their existing HTML file (e.g., sementic-HTML-4.2.
html) using their preferred text editor (such as Notepad or Visual Studio Code).The file may currently use non-semantic tags like
<div>and<span>to structure the webpage.
Replace Non-Semantic Tags with Semantic Tags:
Instruct students to replace any
<div>tags used for major sections of their webpage with appropriate semantic tags such as<header>,<footer>,<article>, or<section>.Example of updating non-semantic HTML:
Before (non-semantic):
// HTML div
<div>
<h1>Welcome to My Website</h1>
<p>This is the home page.</p>
</div>
After (semantic):
// HTML header
<header>
<h1>Welcome to My Website</h1>
<p>This is the home page.</p>
</header>
Add a Navigation Section:
If the webpage contains navigation links, ask students to wrap them in a
<nav>tag to improve accessibility.Example:
// HTML nav ul
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>Add a Footer Section:
Ask students to create a footer section using the
<footer>tag, containing copyright information or any relevant links.Example
// HTML footer
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
Save and Preview the Updated Webpage:
After replacing the non-semantic tags, students should save their HTML file and open it in a browser to ensure that the layout remains the same and that the webpage structure has improved.
Encourage students to inspect their updated HTML code and recognize how the new semantic tags organize the content meaningfully.
Discussion and Reflection:
After students have updated their files, lead a brief discussion and ask the following questions:
Why is it important to use semantic HTML tags instead of generic tags like
<div>and<span>?How does using semantic HTML improve both accessibility and SEO for your webpage?
How does using tags like
<header>,<nav>, and<article>help screen readers understand the structure of your webpage?
Encourage students to share their thoughts on the benefits of using semantic HTML and how it impacts the user experience.
Extended Activity (Optional):
For students who finish early or want more practice, suggest the following:
Add Additional Semantic Tags:
Encourage students to explore and use other semantic tags, such as:
<aside>: Used for content that is tangentially related to the main content (e.g., a sidebar).<main>: Represents the main content of the document, excluding headers, footers, and navigation.
Example:
// HTML aside <aside> <h2>Related Links</h2> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </aside>
Research and Discuss SEO and Accessibility:
Ask students to research how search engines like Google use semantic tags to rank web pages and how screen readers interpret these tags for users with disabilities. This can deepen their understanding of the importance of semantic HTML.
HTML Page Layout
// Use Case : W3.CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>Semantic HTML</title>
</head>
<body>
// HTML header
<header class="w3-display-container w3-green" >
<h1>Welcome to My Website</h1>
</header>
<nav class="w3-display-topright">
<ul
<li style="display:inline-flex padding=3px;"><a href="#home">Home</a></li>
<li style="display:inline-flex;padding:3px;"><a href="#about">About</a></li>
<li style="display:inline-flex;padding:3px;"><a href="#contact">Contact</a></li>
</ul>
</nav>
<main class="w3-containerw3-display-container w3-gray">
<article class="w3-display-left w3-hide-small">
<h2>Blog Post Title</h2>
<p>This is an example of an article.</p>
</article>
<!-- // HTML section -->
<section class="w3-display-middle">
<h3>About Our Company</h3>
<p>Our company specializes in web development.</p>
</section>
<!-- // HTML aside -->
<aside class="w3-display-right">
<h2>Related Links</h2>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</aside>
</main>
// HTML footer
<div class="w3-display-bottommiddle w3-teal" style="width:100%">
<footer >
<p>© 2024 My KSTU ISE Website. All rights reserved.</p>
</footer>
</div>
</body>
</html>By the end of this activity, students will have updated their webpages with semantic HTML, improving both accessibility and SEO. They will also gain a deeper understanding of how meaningful tags help create a well-structured, accessible website that performs better in search engine results.
Last updated