html symentric tags and use of <span>

🔹 What is ?

is a non-semantic inline tag.
It is mainly used to style or manipulate a small part of text using CSS or JavaScript.

🔹 Main Uses of
1️⃣ Style specific words or letters
<p>Hello <span style="color:red;">World</span></p>

👉 Only World becomes red.
**
2️⃣ Apply CSS class to part of text**
<style>
.highlight {
background-color: yellow;
}
</style>

<p>This is <span class="highlight">important</span> text</p>

3️⃣ JavaScript DOM manipulation
`

Hello mapla

<br> document.getElementById(&quot;name&quot;).innerText = &quot;Deva&quot;;<br> `

4️⃣ Group inline elements (without line break)
<span>HTML</span>
<span>CSS</span>
<span>JS</span>

🔷 What are HTML Semantic Tags?

Semantic tags na
👉 Tag name paathale adhu enna work pannum nu puriyum

Browser-kum, developer-kum, SEO-kum clear meaning kudukkum tags.

🔹 Common HTML Semantic Tags
1️⃣

Website / section-oda top part

Logo, title, navbar irukkum

<header>
<h1>My Website</h1>
</header>

2️⃣

Navigation links irukkura area

<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>

3️⃣

Page-oda main content

<main>
<p>Main content here</p>
</main>
**
4️⃣ **

Related content-a group panna

<section>
<h2>About Us</h2>
<p>Company details</p>
</section>
**
5️⃣ **

Independent content
(blog, post, news)

<article>
<h2>Blog Title</h2>
<p>Blog content</p>
</article>
**
6️⃣ **

Side content
(ads, related links)

<aside>
<p>Related posts</p>
</aside>

7️⃣

Page-oda bottom part

Copyright, links

<footer>
<p>© 2026 My Website</p>
</footer>