Definition

Semantic tags are tags that clearly describe their meaning to both the browser and the developer.

Semantic Sectioning Tags

Since HTML5, we have specific tags that act like <div> but carry meaning:

• <section>: Defines a thematic grouping of content, typically with a heading.
• <article>: A self-contained, independent piece of content (blog post, news item).
• <header>: Header of a page or section.
• <footer>: Footer of a page or section.
• <nav>: Contains navigation links.
• <aside>: Sidebar or content tangentially related to the main content.
• <main>: Specifies the main content of the document.
• <figure>: Groups media content like images, diagrams, or illustrations.
• <figcaption>: Provides a caption for a <figure> element.
• <details>: Defines additional details that the user can view or hide.
• <summary>: Visible heading for the <details> element.
• <time>: Represents a specific time or date.
• <mark>: Highlights or marks text for reference.
• <address>: Provides contact information for the author or owner.

Block vs Inline: The Core Concept

Every HTML element has a default display value.

1. Block-level Elements:

• Start on a new line.
• Take up the full width available.
• Examples: <div>, <p>, <h1>-<h6>, <ul>, <li>, <section>.

2. Inline Elements:

• Do NOT start on a new line.
• Take only as much width as necessary.
• Examples: <span>, <a>, <img>, <b>, <strong>.

The <span> Tag

• <span> is the inline equivalent of <div>.
• Used to style a part of a text without breaking the line.
• <p>My <span style="color:red">red</span> text.</p>