Semantic HTML: Elevating Web Development
Understanding HTML Structure
- Elements:
<html>,<head>,<body>,<div> -
Common Bad Habits Overuse of and Elements
Semantics vs. Non-Semantics
- Semantic Elements Elements like
<header>, <nav>, <main>, <article>, <section>, <footer>, etc. - Non-Semantic Elements
<div>and<span>: Non-Semantic Alternatives
Benefits of Semantic HTML
- Accessibility Enhancing Accessibility with Semantic HTML
- SEO SEO Advantages of Semantic Markup
- Maintainability Code Readability and Maintainability
Accessibility
- Semantic Tags and Screen Readers Enhancing User Experience for Accessibility
- ARIA Roles and Attributes Improving Accessibility with ARIA Roles
SEO Optimization
- Semantic HTML and Search Engines Semantic Markup and Search Engine Visibility
- Importance of Heading Tags Using
<h1> to <h6>Tags for SEO
Best Practices
- Use the Right Element Selecting the Appropriate Semantic Element
- Avoid Over-Nesting The Pitfalls of Excessive Nesting
Case Study
- Before and After Example: Non-Semantic vs. Semantic HTML
Title Text
<!DOCTYPE html>
<html>
<head>
<title>Overuse of <div></title>
</head>
<body>
<div id="header">
<div class="logo">
<img src="logo.png" alt="Company Logo">
</div>
<div class="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
</div>
<div id="main-content">
<div class="content">
<h1>Welcome to Our Website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div id="footer">
<div class="footer-content">
<p>© 2023 Company Name</p>
</div>
</div>
</body>
</html>
Title Text
<!DOCTYPE html>
<html>
<head>
<title>Semantic HTML Improvement</title>
</head>
<body>
<header>
<div class="logo">
<img src="logo.png" alt="Company Logo">
</div>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Welcome to Our Website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
</main>
<footer>
<p>© 2023 Company Name</p>
</footer>
</body>
</html>
Common Mistakes
- Avoiding
<div>itis The Pitfall of Overusing<div> - Misusing
<br>and<br />Proper Usage of Line Break Elements
Tools and Resources
- Browser DevTools Using Browser Developer Tools for Inspection
- Online Validators Online Tools for HTML Validation
Conclusion
- Recap Key Takeaways on Semantic HTML
- Emphasise Good Practices for Adopting Semantic HTML in Web Projects
Semantic HTML: Elevating Web Development
By Elise Allen
Semantic HTML: Elevating Web Development
- 73
