Semantic Elements in HTML in hindi | HTML5 Semantic Tags

by
Table of Contents hide
1 HTML5 Semantic Tags क्या है
2 HTML Page Layouts
3 HTML5 Semantic Elements की जरुरत क्या है?
4 HTML5 Semantic Elements Lists
4.1 <header> tag
4.2 <footer> tag
4.3 <nav> tag
4.4 <aside> tag
4.5 <main> tag
4.6 <section> tag
4.7 <article> tag
4.8 <figure> tag
5 Conclusion
6 अन्य HTML5 tutorial के सुझाव

HTML5 Semantic Tags क्या है

अर्थपूर्ण शब्दों को semantic कहा जाता है, semantic ऐसे शब्द को दर्शाता है जिसे देखते ही उसका उपयोग समझ आ जाता हो | वैसे ही html में कुछ tags ऐसे हैं जिनका नाम ही बता देता है उसे क्यों प्रयोग किया गया है उदाहरण के तौर पे <table> tag, <form> tag |

वैसे ही कुछ और tags को html5 में introduce किया गया है जिसका नाम ही उसका काम बता देता है और उसे semantic elements कहा जाता है | और इस आर्टिकल में semantic elements in html5 को जानेगें |

पर उससे पहले जानेंगे की html में page layout क्या होता है ?

HTML Page Layouts

HTML layouts web pages को structured और responsive रूप में व्यवस्थित करने का एक तरीका देता है या हम कह सकते हैं कि HTML layouts एक तरीका निर्दिष्ट करता है जिसमें web pages को व्यवस्थित किया जा सकता है।

Web-page layout, html elements की visual arrangement के लिए काम करता है | वेबसाइट बनाते समय webpage layout को ध्यान में रखना सबसे महत्वपूर्ण हिस्सा है ताकि हमारी वेबसाइट शानदार लुक के साथ professional भी दिखाई दे सके।

और हर website का अपना ही खास web layout होता है | पहले web layout के लिए ज्यादातर html <div> tags का उपयोग होता था और इससे header, footer और body section बनाया जाता था |

पर html5 में semantic elements आने के बाद एक अच्छी और responsive page layout बनाना और भी आसान हो गया है |

तो चलिए जानते हैं semantic elements के बारे में | web pages में कोन कोन से semantic elements का उपयोग होता है उसके list के बारे में !

HTML5 Semantic Elements की जरुरत क्या है?

<div>, <span> tags ये सब का उपयोग content को ग्रुप करने के लिए होता है | पर इसमें किस तरह का content है वो नाम से पता नहीं चलता | जब हम उसके अंदर की content को जाकर देखते हैं तब समझ आता है | <div> tag एक container की तरह काम करता है | और इसे सही से identify करने के लिए id या class name दी जाती है |

जैसे की <div id=”header”> या फिर <div id=”footer”> | तो इस तरह से page layout बनाना हो या कोई और container बनाना हो तो पहचान के लिए id या class name दी जाती है | पर ये developer या search engine के लिए उतना helpful नहीं होता है |

इसीलिए html5 में कुछ ऐसे elements को बताया गया है जिससे code लिखना और उसका इस्तेमाल समझना और ज्यादा आसान हो गया है | और ऐसे elements को semantic elements कहा जाता है | semantic elements को देखकर एक developer समझ जाता है की उसके अंदर क्या content होगा और search engine को भी आसानी होती है, वेबसाइट को सही से crawl करने में |

HTML5 Semantic Elements Lists

नए semantic elements जो html5 में बताया गया है वो है:

  1. <header>
  2. <footer>
  3. <article>
  4. <section>
  5. <nav>
  6. <figure>
  7. <figcaption>
  8. <main>
semantic element in html5

<header> tag

किसी भी वेबसाइट की page layout को आप देखे होंगे जिसमे ऊपर वेबसाइट का नाम आ रहा होगा, सबसे निचे copywrite लिखा हुआ आ रहा होगा | और बिच में अलग अलग page के हिसाब से content दिख रही होगी | ऊपर के part को header कहा जाता है |

header part में वेबसाइट का नाम, contact information और login जैसे option होतें हैं | और इन सब चीजों को लिखने के लिए html5 में <header> tag का इस्तेमाल होता है |

<footer> tag

वेबसाइट की footer में copywrite information, लेखक के बारे में जानकारी और कुछ ऐसे reference links रहती है | और ऐसे content को रखने के लिए <footer> tag का इस्तेमाल होता है |

<nav> tag

<nav> tag का इस्तेमाल navigation देने के लिए होता है | वेबपेज में कई links होतें जो user को दुसरे वेबपेज में ले जाने के लिए मदद करते हैं उन्ही links को <nav> tag के अंदर लिखी जाती है |

<aside> tag

<aside> tag से sidebar को दर्शाया जाता है | वेबपेज में जब हम किसी आर्टिकल पढ़ रहे होतें हैं, या फिर कोई चीज को देख रहे होतें हैं, तो उसी category से जुड़े अन्य वेबपेज को भी पढना या देखना चाहते हैं | ऐसे ही एक जैसे links को sidebar में रखी जाती है | और sidebar को <aside> tag से represent किया जाता है |

<main> tag

वेबपेज की मुख्य content को <main> tag के अंदर लिखी जाती है | content के अंदर भी header, footer हो सकता है जो उस content से जुडी हो, तो वहां भी <header> और <footer tag का इस्तेमाल हो सकता है |

<section> tag

related contents को अलग अलग ग्रुप में रखने के लिए हम एक वेबपेज को कई भागो में बाँटतें हैं, और हर एक भाग में एक जैसी content रखतें हैं | ऐसे related content को एक साथ रखने के लिए <section> tag का इस्तेमाल होता है |

उदाहरण के लिए समझे एक न्यूज़ वेबसाइट में एक हिस्से में आजकी ताजा ख़बर होती हैं तो दुसरे हिस्से में अन्य खबरें होतीं हैं | ऐसे ही अलग अलग तरह की न्यूज़ रखने के लिए <section> tag का इस्तेमाल होता है | जिससे पता चले कोनसा section कोनसी ख़बर के लिए है |

<article> tag

एक वेबपेज पे कुछ खास जानकारी देना हो या फिर कोई खास विषय पे content दिखाना हो, तो उसे <article> tag के अंदर लिखी जाती है | जैसे कोई ब्लॉग पोस्ट हो गया या कोई खास न्यूज़ हो गया, इन सब विषयों को <article> tag के अंदर लिखी जाती है |

<figure> tag

photos, diagrams जैसी चीजों को <figure> tag के अंदर रखी जाती है जिससे पता चले की वो element, images से जुडी है | <figcaption> tag का इस्तेमाल <figure> tag को caption देने के लिए होता है |

Conclusion

आप इस आर्टिकल में html5 के मुख्य semantic elements के बारे में पढ़ें | आशा है आपको semantic elements का उपयोग समझ में आया होगा |

अन्य HTML5 tutorial के सुझाव