What are semantic elements in HTML and what are they used for?

These are HTML tags that describe the meaning of the content, not just its appearance.

For example:

• <article>: An independent, self-contained piece of content (e.g., a blog post, a forum message).
• <aside>: Content indirectly related to the main content of the page (e.g., a sidebar, a quote inset).
• <nav>: Navigation links.
• <header>: Introductory part of a section or page (e.g., a header, logo).
• <footer>: Ending part of a section or page (e.g., author information, links to related documents).
• <main>: The main content of the document.
• <section>: A section of the document, grouped by topic.

Advantages of using semantic elements:

• Search Engine Optimization (SEO): Search engines better understand the structure and content of the page, which helps improve ranking in search results.
• Accessibility: Screen readers and other assistive technologies can correctly interpret the page structure for people with disabilities.
• Improved code readability: The code becomes more understandable for other developers.
• Scalability: Structured code is easier to maintain and develop.

Example of a non-semantic approach:

<div>
  <div>Article Title</div>
  <div>Author</div>
  <div>Article text...</div>
</div>

Example of a semantic approach:

<article>
  <header>
    <h1>Article Title</h1>
    <p>Author</p>
  </header>
  <p>Article text...</p>
</article>