Refactor to semantic HTML: replace divs with header, nav, main, artic…

[Ananthu-tp]

Refactor: Replace Div Soup with Semantic HTML Elements

Summary

This PR refactors the DivSoupPage component in exercise-1 by replacing generic <div> elements with appropriate semantic HTML5 elements, improving accessibility and document structure.

Changes

• Header Section: Replaced <div> with <header> for the top navigation bar
• Navigation: Wrapped menu items in <nav> with proper <ul>/<li> structure and ARIA labels
• Main Content: Used <main> to wrap primary content area
• Article Structure:
  • Wrapped article content in <article>
  • Used <header> for article metadata
  • Replaced text blocks with semantic <p> tags
  • Used <h1> for main title
  • Added <time> elements with dateTime attributes for dates
• Sidebar: Replaced secondary content div with <aside> and proper <section> structure
• Related Articles: Used <article> elements for each related article with proper heading hierarchy (<h2>, <h3>)
• Footer: Replaced bottom bar div with semantic <footer> and <nav> for links
• Accessibility: Added ARIA labels, proper heading hierarchy, and semantic time elements

Benefits

• Better SEO and search engine understanding
• Improved screen reader navigation
• Clearer document structure for developers
• Enhanced accessibility compliance
• More meaningful HTML that describes content purpose