Table of Contents
What is Semantic Element?
HTML में Semantic Element Semantic Standards और HTML Tag का उपयोग करके एक Web Page के विभिन्न भागों को भूमिका देते हैं। ये Element Website के Structuring और Explanation को समझने में मदद करते हैं, और Search Engine और Readers को Content को समझने में मदद करने के लिए भी उपयोगी होते हैं।
- Semantic Element स्पष्ट रूप से Browser और Developer दोनों के लिए इसका Meaning बताता है।
- Non-semantic Elements के उदाहरण: <div> और <span> – इसकी Content के बारे में कुछ नहीं बताता है।
- Semantic Elements के उदाहरण: <form>, <table>, और <article> – इसकी Content को स्पष्ट रूप से Define करता है।
Explain Semantic Elements
Section Element
- <section> Element एक Document में एक Section को Define करता है।
- Example जहां <section> Element का उपयोग किया जा सकता है:
- Chapters
- Introduction
- News Items
- Contact Information
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
Article Element
- <article> Element Independent, self-contained Content को निर्दिष्ट (Specified) करता है।
- Example जहां <article> Element का Use किया जा सकता है:
- Forum posts
- Blog posts
- User comments
- Product cards
- Newspaper articles
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
Nav Element
- Navigation Link के एक Set को Define करने के लिए HTML <nav> Element का Use किया जाता है।
<nav>
<a href="https://aiyoit.com/">Website</a>
<a href="https://www.facebook.com/aiyoit">Facebook</a>
<a href="https://www.youtube.com/channel/UCiagcH73PZUdTzRySS8Axig">Youtube</a>
<a href="https://www.instagram.com/aiyoitns/">Instagram</a>
</nav>
Header Element
- <header> Element Document के Header को Represent करता है जिसमें Introductory Material या Navigation Link हो सकते हैं।
- एक <header> Element में Generally शामिल होता है:
- One or More Heading
- Logo or Icon
- Authorship Information
- एक HTML Document में कई <header> Element हो सकते हैं।
<header>
<h1>Welcome to AiyoIT</h1>
<nav>
<ul>
<li>Home </li>
<li>About us </li>
<li>Contact us</li>
</ul>
</nav>
</header>
Aside Element
- <aside> Element उस Content को Represent करता है जो Indirect रूप से Page की मुख्य Content की जानकारी देती है।
- इसे अक्सर Sidebar के रूप में Represent किया जाता है।
<!DOCTYPE html>
<html lang="en">
<head>
<title>Aside Element</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<h1>Example Aside </h1>
<p>Lorem ipsum dolor sit amet.</p>
<aside>
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
</aside>
</body>
Main Element
- HTML <main> Element का उपयोग <body> Element की मुख्य Content को Describe के लिए किया जाता है।
- <body> Element के अंदर <main> Element लिखा होता है। इसका Use किसी Page की Primary Content को Accurately Describe करने के लिए किया जाता है।
- Main Element की Content Directly Document के Central Topic से Related होते है।
- HTML <main> एक New Element है और HTML5 में Include किया गया है।
<!DOCTYPE html>
<html lang="en">
<head>
<title>Main Element</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<main>
<h2>Apples</h1>
<p>The apple is a red color pomaceous fruit of the
apple tree. It is a very famous saying about apple.
</br> "An apple in a day, keeps the Doctor away".</p>
<article>
<h3>Red Delicious</h3>
<p>These bright red apples are the most common found in
many supermarkets.</p>
</article>
<article>
<h3>Granny Smith</h3>
<p>These juicy, green apples make a great filling for
apple pies.</p>
</article>
</main>
</body>
</html>
Footer Element
- <footer> Element किसी Document या Section के लिए Footer को Define करता है।
- एक <footer> Element में Generally शामिल होते हैं:
- Authorship Information
- Copyright Information
- Contact Information
- Sitemap
- Back to Top Link
<html lang="en">
<head>
<title>Footer Element</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<h1>Example Of Footer</h1>
<footer>
<p>© Copyright 2023. All rights reserved. </p>
</footer>
</body>
</html>
Detail Element
- HTML <details> Element का उपयोग Web Page पर Extra Details निर्दिष्ट करने के लिए किया जाता है जिसे User Demand पर Show या Hide किया जा सके।
- इसका उपयोग एक Relevant Element के साथ किया जाता है जिसे <summary> के रूप में जाना जाता है। तकनीकी रूप से, Summary Element की कोई आवश्यकता नहीं है, लेकिन यदि आप इसे अनदेखा करते हैं, तो Browser कुछ Default Text का उपयोग करेगा।
- <details> Element उस सभी Content को Enwrap करता है जिसे आप Show या Hide करना चाहते हैं और <summary> Element में Summary और Title का Section होता है।
- HTML <details> एक New Element है और HTML5 में Include किया गया है।
<!DOCTYPE html>
<html lang="en">
<head>
<title>Details Element</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<h1>Example of Details</h1>
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring
exciting attractions, international pavilions, award-winning
fireworks and seasonal special events.</p>
</details>
<details>
<summary>Lorem, ipsum.</summary>
<p> Lorem ipsum dolor sit amet consectetur adipisicing.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</details>
</body>
</html>
Summary Element
- HTML <summary> Element का Use <details> Element के साथ किया जाता है। इसका उपयोग <details> Element की Content के लिए Summary, Caption या Legend के रूप में किया जाता है।
- इसका इस्तेमाल <details> tag के अंदर किया जाता है।
- HTML <summary> एक New Element है और HTML5 में Include किया गया है।
<!DOCTYPE html>
<html lang="en">
<head>
<title>Summary Element</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<h1>Example of Summary</h1>
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring
exciting attractions, international pavilions, award-winning
fireworks and seasonal special events.</p>
</details>
</body>
</html>
What is Non-semantic Element?
- Non-semantic Elements Content के बारे में कुछ नहीं बताते हैं।
Div Element
- HTML <div> Element का उपयोग HTML Element के बड़े हिस्से को एक साथ Grouping करने के लिए किया जाता है।
- <div> Element का कोई Default Meaning या Rendering नहीं है।
<!DOCTYPE html>
<html lang="en">
<head>
<title>Div Element</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<h1>Example of Div</h1>
<div style="border:2px solid blueviolet;padding:15px 10px;">
<h2>Epcot Center</h2>
<p>Epcot is a theme park at Walt Disney World Resort featuring
exciting attractions, international pavilions, award-winning
fireworks and seasonal special events.</p>
</div>
</body>
</html>
Span Element
- HTML <span> Element का उपयोग Inline Elements के Generic Container के रूप में किया जाता है। इसका उपयोग Grouped Inline Elements (Class और Id Attribute या Inline Style का उपयोग करके) को Style करने के Purpose से किया जाता है।
- <span> Element का कोई Default Meaning या Rendering नहीं है।
- <span> Element निम्न Work के लिए Useful होता है:
- Text के एक Part की Language को Change करने के लिए।
- CSS का Use करके Text के एक Part का Color, Font, Background को Change करने के लिए।
- Text के Particular Part में Script को Apply करने के लिए।
<!DOCTYPE html>
<html lang="en">
<head>
<title>Span Element</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<h2>Example of Span</h2>
<p>I have choosen only
<span style="color: red;">red</span>,
<span style="color: blue;">blue</span>, and
<span style="color: green;">green</span>
colors for my painting.
</p>
</body>
</html>
Trending Today
Facebook
Pinterest
LinkedIn
WhatsApp
