Lecture
Notes Of Class 13
Semantic HTML
Objective:
Learn
the importance and use of semantic HTML for accessibility and SEO.
Outcome:
Students
will be able to use semantic elements like <header>, <footer>,
<article>, and <section> to structure web content meaningfully.
1. Introduction to Semantic HTML
- Definition: Semantic HTML refers to HTML elements that convey meaning about
their content to both the browser and developers.
- Why Use Semantic HTML?
- Enhances accessibility by
making content more understandable for screen readers and assistive
technologies.
- Improves SEO (Search Engine
Optimization) as search engines better interpret structured content.
- Facilitates maintenance and
collaboration by providing clearer code structure.
2. Common Semantic Elements
- Structural Elements
- <header>: Represents the introductory
content or navigation links.
- <footer>: Represents footer information,
such as copyright or contact details.
- <main>: Contains the main content of a
document, excluding repeated content like sidebars and headers.
- <section>: Defines a thematic grouping of
content, often with a heading.
- <article>: Represents self-contained
content, such as blog posts or news articles.
- <aside>: Contains content related to the
main content, such as sidebars or advertisements.
- <nav>: Represents a section of navigation
links.
- Text-level Semantic Elements
- <strong>: Indicates strong importance,
typically rendered as bold.
- <em>: Indicates emphasis, typically
rendered as italic.
- <mark>: Highlights text, typically
rendered with a yellow background.
- <time>: Represents time or dates.
- <code>: Represents computer code.
Key Semantic HTML Elements
1. <header>
- Purpose: Defines the introductory content or navigational links for a
section or page.
- Usage: Typically contains the logo, site title, navigation links,
and sometimes a search form.
|
<header> <h1>My
Website</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> |
2. <footer>
- Purpose: Defines the footer section of a page or section, usually
containing information about the author, copyright, or contact details.
- Usage: Often includes links to privacy policies, terms of service,
or social media profiles.
|
<footer> <p>©
2024 My Website. All rights reserved.</p> <p><a
href="privacy-policy.html">Privacy Policy</a> | <a
href="contact.html">Contact Us</a></p> </footer> |
3. <article>
- Purpose: Represents a self-contained piece of content that could be
distributed and reused independently, such as a blog post or news article.
- Usage: Contains the content that is intended to be read on its own,
including headings, paragraphs, and media.
|
<article> <h2>Understanding
Semantic HTML</h2> <p>Semantic
HTML helps improve accessibility and SEO...</p> <img
src="semantic-html.png" alt="Semantic HTML Example"> <p>For
more information, visit <a href="more-info.html">this
page</a>.</p> </article> |
4. <section>
- Purpose: Defines a section of related content within a page, typically
including a heading and related content.
- Usage: Useful for grouping related content together within an
<article> or other container.
|
<section> <h2>Benefits
of Semantic HTML</h2> <p>Using
semantic HTML tags improves accessibility...</p> <ul> <li>Improves
search engine ranking</li> <li>Enhances
accessibility for users with disabilities</li> <li>Facilitates
easier code maintenance</li> </ul> </section>
|
3. Benefits of Semantic HTML
1. Accessibility:
o
Semantic elements
improve navigation for users relying on assistive technologies like screen
readers.
o
For example,
<nav> helps users identify navigation menus easily.
2. SEO:
o
Search engines
prioritize content structured with semantic elements.
o
Semantic HTML
helps search engines understand the purpose of different content sections.
3. Code Readability:
o
Makes the HTML
structure more understandable for developers.
o
Simplifies
teamwork by establishing a clear, logical structure.
4. Future-proofing:
o
Semantic HTML
aligns with modern web standards, ensuring compatibility with future
technologies.
4. Practical Examples
Example 1: Basic Semantic Layout
|
<!DOCTYPE
html> <html
lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Semantic HTML Example</title> </head> <body>
<header>
<h1>Welcome to My Website</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>
<main>
<section id="home">
<h2>Home</h2>
<p>This is the homepage content.</p>
</section> <section id="about">
<h2>About</h2>
<article>
<h3>Our History</h3>
<p>We started in 2020 with the goal of making the web more
accessible.</p>
</article>
<article>
<h3>Our Mission</h3>
<p>Our mission is to educate developers about web standards.</p>
</article>
</section> <aside>
<h4>Related Links</h4>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Resources</a></li>
</ul>
</aside> </main>
<footer>
<p>© 2025 My Website</p>
</footer> </body> </html> |
Example 2: Accessibility and SEO
|
<!DOCTYPE html> <html lang="en"> <head> <meta
charset="UTF-8"> <meta
name="description" content="Learn Semantic HTML for better
accessibility and SEO."> <meta
name="keywords" content="HTML, Semantic HTML, Web
Development"> <meta
name="author" content="John Doe"> <title>Learn
Semantic HTML</title> </head> <body> <header>
<h1>Semantic HTML Guide</h1>
<p>Making the web accessible and meaningful.</p> </header> <main>
<section>
<h2>Introduction</h2>
<p>Semantic HTML is the backbone of accessible and optimized
websites.</p>
</section> </main> <footer>
<p>Created by John Doe | Contact: <a
href="mailto:john.doe@example.com">john.doe@example.com</a></p> </footer> </body> </html> |
5. Hands-on Exercise
1. Create a simple webpage using semantic elements:
o
Include a header
with a navigation menu.
o
Add two sections:
one for an introduction and another for contact information.
o
Include an aside
for additional resources.
o
Add a footer with
copyright details.
2. Validate your HTML using W3C
Validator and ensure proper use of semantic elements.
Best Practices for Using Semantic HTML
1. Choose the Right Elements:
o
Use elements that
best describe the content they contain. For example, use <aside> for
content related to the main content but not central to it.
2. Organize Content Logically:
o
Structure content
in a logical order using <header>, <nav>, <main>,
<section>, <article>, and <footer>.
3. Avoid Overusing <div>:
o
Replace
unnecessary <div> elements with appropriate semantic tags to enhance
clarity.
4. Ensure Accessibility:
o
Make sure that all
interactive elements are accessible and that content can be navigated using
keyboard controls and screen readers.
5. Maintain Consistency:
o
Consistently use
semantic elements throughout the site to maintain a clear and logical
structure.
Summary
- Semantic HTML enhances accessibility, SEO, and
code maintainability.
- Use elements like <header>, <footer>,
<main>, <section>, and <article> to provide meaningful
structure.
- Practice creating and validating semantic HTML
pages.