Creating and structuring web pages with semantic HTML in hindi
एचटीएमएल5 में सिमेंटिक टैग से किसी भी मॉडर्न रेस्पॉन्सिव वेब पेज वेबसाइट को डिज़ाइन और डेवलप किया जा सकता है, एचटीएमएल5 में उपलब्ध नए टैग वेब डेवलपर को एक आदर्श, वर्त्तमान इंडस्ट्री, और आर्गेनाइजेशन के अनुसार अट्रैक्टिव वेब पेज लेआउट और स्ट्रक्चर डेवलप करने में सहायक है, जो की वेब डेवलपर की जरूरत के अनुसार कस्टम नई सिमेंटिक टैग वेब डेवलपमेंट फीचर्स प्रदान करते हैं। एचटीएमएल5 में डेवलप मॉडर्न वेब पेज सर्च इंजन में फ़ास्ट रैंकिंग और क्रॉलिंग में आसान होते है।
So, let’s understand the popular tags available in HTML5 and use them properly.
Popular semantic tags in HTML5 and their use.
HTML5 <header> tag.
एचटीएमएल5 वेब पेज में हैडर मेनू, हैडर नेविगेशन, या हैडर इम्पोर्टेन्ट लिंक और टेक्स्ट इनफार्मेशन को डिस्प्ले करते है. वेबपेज वेबसाइट हैडर टैग में वेबसाइट का नाम, वेबसाइट लोगो, हैडर प्राइमरी मेनू, वेबसाइट नेविगेशन मेनू, ड्राप डाउन मेनू, वेबसाइट टाइटल, वेबसाइट नेविगेशन लिंक्स एंड टॉप लिंक्स इनफार्मेशन प्रदर्शित होती है।
HTML5 <nav> tag.
एचटीएमएल5 में नेविगेशनल लिंक इनफार्मेशन को डिस्प्ले करते है, एक वेबसाइट में नेविगेशन लिंक को एक मेनू की तरह सेक्शन की तरह मल्टीप्ल टेक्स्ट इनफार्मेशन को डिस्प्ले कर सकते है। नेविगेशन टैग से आप वेबसाइट के हैडर फुटर या वेब पेज पोस्ट ब्लॉग में पेज नेविगेशन लिंक सेक्शन क्रिएट और मैनेज कर सकते है। नेविगेशन टैग से एक समय में एक से अधिक मेनू, लिंक्स, साइडबार टेक्स्ट इनफार्मेशन को रिप्रेजेंट किया जाता है।
HTML5 <main> tag.
एचटीएमएल5 में मैन टैग बॉडी टैग की तरह वेबसाइट बॉडी पोरशन में क्रिएट और डिस्प्ले सभी वेब पेज इनफार्मेशन को क्लाइंट वेब ब्राउज़र में रिप्रेजेंट करता है। एचटीएमएल5 में डेवलप किसी वेब पेज में एक बॉडी टैग या एक मैन टैग का उपयोग कर डिजायर वेब पेज कंटेंट और इनफार्मेशन को प्रीव्यू किया जाता है, मैन टैग में वेबसाइट हैडर, फुटर, नेविगेशन, वेब पेज लेफ्ट और राइट साइडबार, को छोड़कर सभी वेबसाइट कंटेंट और इनफार्मेशन को डिस्प्ले करता है।
HTML5 <section> tag.
एचटीएमएल5 वेब पेज में सेक्शन टैग का उपयोग वेबसाइट वेब पेज में एक से अधिक वेब पेज पोस्ट ब्लॉक सेक्शन को क्रिएट किया जाता है। एक बड़े ब्लॉग पोस्ट पेज में वेब पेज में कई इनफार्मेशन को छोटे छोटे ब्लॉक सेक्शन में डिवाइड कर डिस्प्ले किया जाता है। जहा मल्टीप्ल सिंगल वेब पेज ब्लॉक सेक्शन किसी पर्टिकुलर वेबसाइट के टोपिकल कंटेंट को एक्सप्लेन किया जाता है।
HTML5 <article> tag.
एचटीएमएल5 वेब पेज में आर्टिकल टैग मौजूदा वेब पोस्ट में सेल्फ-कॉन्टैन टेक्स्ट इनफार्मेशन को रिप्रेजेंट किया जाता है। वेबपेज में आर्टिकल टैग से एक ब्लॉग पोस्ट, न्यूज़ पोस्ट, और कस्टम यूजर टेक्स्ट इनफार्मेशन को आर्टिकल फॉर्मेट में क्रिएट कर रिप्रेजेंट करते है।
HTML5 <aside> tag.
एचटीएमएल5 वेब पेज में aside टैग वेबपेज से रिलेटेड कंटेंट इनफार्मेशन को कनेक्ट कर डिस्प्ले करता है। जहा aside टैग से वेब पेज पुल कोट्स, साइडबार, और अन्य वेबसाइट इनफार्मेशन को रिप्रेजेंट कर सकते है। जहा aside टैग मौजूदा ब्लॉग पोस्ट में रिलेटेड लिंक्स, वेब पेज विज्ञापन, या पूरक जानकारी डिस्प्ले होती है।
HTML5 <footer> tag.
एचटीएमएल5 वेब पेज में वेबसाइट के बॉटम में फुटर टेक्स्ट, स्पेशली सिंबल, या इम्पोर्टेन्ट लिंक इन्फोर्मशन को डिस्प्ले कर सकते है। जैसे, वेबसाइट कॉपीराइट इनफार्मेशन, वेबसाइट कॉन्टैक्ट इनफार्मेशन, वेबसाइट ईमेल इन्फो, वेबसाइट लीगल राइट्स, और अन्य इम्पोर्टेन्ट लिंक और इनफार्मेशन प्रद्रशित की जाती है।
Semantic tags in HTML5, basic structure of an HTML web page example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Popular Html Semantic Tag</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<header>
<h1>HTML5 Semantic Tag</h1>
<nav>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>Pages</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>HTML5 Introduction</h2>
<p>HTML5 Modern Web Development Script </p>
</section>
<section>
<h2>Semantic Tag Explanation</h2>
<article>
<h3>Header Tag</h3>
<p>Header Tag Used To Display Website Header Info.</p>
</article>
<article>
<h3>Footer Tag</h3>
<p>Footer Tag Used To Display Website Footer Info.</p>
</article>
</section>
<aside>
<h2>Webpage Related Info</h2>
<p>This Is The Blog Post Content, Which Is Related To Each Other.</p>
</aside>
</main>
<footer>
<p>© 2024 Vcanhelpsu, All Rights Reserved By Vcanhelpsu.com.</p>
<p><a href=”#”>Contact Us</a> | <a href=”#”>Email</a> | <a href=”#”>Top Links</a>| <a href=”#”>Disclaimers</a></p>
</footer>
</body>
</html>
