Semantic Elements:

Semantic elements are HTML tags that clearly describe their meaning both to the browser and to developers. These elements make the structure of a webpage more understandable and accessible.

Examples:

• <header>: Defines a header for a section or the whole page.
• <article>: Represents a self-contained piece of content, like a blog post or news article.
• <footer>: Defines a footer for a section or page, usually containing copyright or contact information.
• <section>: Represents a section of content, typically with a header.
• <nav>: Represents navigation links.
• <aside>: Defines content that is tangentially related to the content around it, like a sidebar.

Non Semantic Elements:

Non-semantic elements are HTML tags that do not provide any meaningful description of their content. They are used for structuring the page, but they don’t indicate the content type

Examples:

• <div>: A generic container used for grouping content or styling.
• <span>: A generic inline container for styling text or other inline content.
• <b>: Bold text (non-semantic; <strong> is preferred for meaning).
• <i>: Italic text (non-semantic; <em> is preferred for emphasis).