Scribd
Upload
5 views2 pages

Essential HTML Tags for Web Development

The document discusses additional common HTML tags, focusing on semantic, structural, and formatting tags. Semantic tags enhance SEO and accessibility, while structural tags help organize content, and formatting tags emphasize text. The conclusion highlights the importance of these tags in making web pages organized, meaningful, and user-friendly.

Uploaded by

bhattrohit2636
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views2 pages

Essential HTML Tags for Web Development

The document discusses additional common HTML tags, focusing on semantic, structural, and formatting tags. Semantic tags enhance SEO and accessibility, while structural tags help organize content, and formatting tags emphasize text. The conclusion highlights the importance of these tags in making web pages organized, meaningful, and user-friendly.

Uploaded by

bhattrohit2636
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Day 5 – Full Stack Web Development Study Notes

Topic: Additional Common HTML Tags (Semantics, Structure &


Formatting)

1. Semantic Tags
Semantic tags ka matlab hai ki wo apne naam se hi meaning batate hain. Ye SEO aur accessibility
ke liye useful hote hain.
<header> → Page ya section ka starting part (logo, nav, title)
<footer> → Page ka ending part (copyright, links)
<nav> → Navigation menus ke liye
<section> → Content ko divide karne ke liye
<article> → Independent content (like blogs, news articles)
<aside> → Side content (ads, sidebars)
<main> → Page ka main content
<figure> + <figcaption> → Images with caption

<header>
<h1>My Website</h1>
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
</header>

<main>
<article>
<h2>Blog Title</h2>
<p>This is my first blog post.</p>
</article>
</main>

<footer>
<p>&copy; 2025 My Website</p>
</footer>

2. Structural Tags
Ye tags content ko organize karne ke liye hote hain.
<div> → Generic container (non-semantic)
<span> → Inline container (non-semantic)
<br> → Line break
<hr> → Horizontal line (content separator)

<div>
<h2>About Me</h2>
<p>Hello! My name is Rohit.</p>
<hr>
<span style="color:red;">This is inline text</span>
</div>

3. Formatting Tags
Formatting tags ka use text ko highlight karne, bold/italic banane, ya special meaning dikhane ke
liye hota hai.
<b> → Bold text (visual only)
<strong> → Important text (SEO + bold)
<i> → Italic (visual only)
<em> → Emphasized text (SEO + italic)
<u> → Underlined text
<mark> → Highlighted text
<small> → Small text
<sub> → Subscript (x■)
<sup> → Superscript (x²)
<code> → Code snippets
<pre> → Preformatted text (same spacing & line breaks)
<blockquote> → Quoted text

<p>This is <b>bold</b> and <strong>important</strong>.</p>


<p>This is <i>italic</i> and <em>emphasized</em>.</p>
<p>This is <u>underlined</u> and <mark>highlighted</mark>.</p>
<p>Water formula: H<sub>2</sub>O</p>
<p>Square: x<sup>2</sup></p>
<pre>
function hello() {
[Link]("Hello World");
}
</pre>
<blockquote>"This is a quotation."</blockquote>

Conclusion: Tumne seekha ki HTML me sirf headings aur paragraphs hi nahi hote, balki semantic,
structural, aur formatting tags bhi important hote hain jo webpage ko organized, meaningful aur
user-friendly banate hain.

You might also like