DAY 7 OF HTML

Today I explored semantic and non-semantic HTML — learning how different elements affect structure, accessibility, readability, and developer experience. I also learned how to combine them with class, id, CSS, and JavaScript for a complete and maintainable layout.

🧱 Non-Semantic HTML Elements

Non-semantic HTML elements don't describe their meaning. They simply act as generic containers. While useful for layout and styling, they give no information about the content they wrap.

🧐 What are they?

<div> – used as a generic block container
<span> – used as a generic inline container
<font> – used in the past for styling text (now obsolete)

📊 Non-Semantic Elements Overview

Tag Name	Description
`<span>`	Defines an inline section in a document
`<div>`	Defines a block-level container in a document
`<font>`	Defines font styles (obsolete in HTML5)

Note: There are many non-semantic tags — but use them wisely.

🏷️ Understanding `class` and `id` Attributes

You can style or target any element using class or id — including both semantic and non-semantic tags. These attributes are essential for applying CSS or JavaScript.

Attribute	Purpose	Example
`class`	Reusable identifier for styling multiple elements	`<div class="container">`
`id`	Unique identifier for a single element	`<div id="header">`

🚨 Reminder:

id must be unique per page.

class can be reused across multiple elements.

📦 Semantic HTML Elements

Semantic elements describe their meaning in both name and behavior — making your code more readable, accessible, and SEO-friendly.

✅ Benefits of Semantic HTML

Makes your code self-documenting
Helps screen readers and assistive tech
Improves SEO and indexing
Encourages clean layout structure

🧾 Semantic Elements Overview

Tag Name	Description	Example
`<header>`	Defines the page or section header	`<header>My Website</header>`
`<nav>`	Defines navigation links	`<nav>...</nav>`
`<article>`	Defines self-contained content	`<article>...</article>`
`<section>`	Defines a document section	`<section>...</section>`
`<footer>`	Defines footer content	`<footer>...</footer>`

🔁 Can You Combine Semantic and Non-Semantic HTML?

Yes! Most real-world websites use a mix of both. You might use a <section> for a content block and wrap smaller layout components inside <div> tags for structure or styling purposes.

<section class="blog-post">
  <article>
    <h2>Blog Title</h2>
    <p>This is the blog content.</p>
  </article>
  <div class="sidebar">
    <p>Related Links</p>
  </div>
</section>