HTML फ़ाइल elements से बनी होती है। ये elements वेब पेज बनाने और उस वेबपेज में सामग्री को परिभाषित करने के लिए जिम्मेदार हैं। HTML में एक element में आमतौर पर एक प्रारंभ टैग <टैग नाम>, निकट टैग और उनके बीच सम्मिलित सामग्री होती है। तकनीकी रूप से, एक element, start tag, attributes, end tag, उनके बीच की सामग्री का एक संग्रह है।
नोट: कुछ elements में अंतिम टैग और सामग्री नहीं होती है, इन elements को empty elements या self-closing elements या void elements कहा जाता है।
जैसे कि:
<!DOCTYPE html>
<html>
<head>
<title>WebPage</title>
</head>
<body>
<h1>This is my first web page</h1>
<h2> How it looks?</h2>
<p>It looks Nice!!!!!</p>
</body>
</html>
अब यह HTML elements का परीक्षण करें
शरीर के तत्वों के बीच लिखी गई सभी सामग्री वेब पेज पर दिखाई देती हैं।
शून्य तत्व: HTML में सभी तत्वों को टैग और समाप्ति टैग शुरू करने की आवश्यकता नहीं होती है, कुछ elements में सामग्री नहीं होती है और अंतिम टैग ऐसे तत्व होते हैं जिन्हें शून्य तत्व या रिक्त तत्व के रूप में जाना जाता है। इन तत्वों को अप्रकाशित टैग भी कहा जाता है।
कुछ Void elements <br> हैं (एक लाइन ब्रेक का प्रतिनिधित्व करता है),<hr>(एक क्षैतिज रेखा का प्रतिनिधित्व करता है), आदि।
नेस्टेड HTML एलिमेंट्स: HTML को नेस्टेड किया जा सकता है, जिसका मतलब है कि एक एलीमेंट में दूसरा एलीमेंट हो सकता है।
Block-level and Inline HTML elements
HTML में डिफ़ॉल्ट प्रदर्शन और स्टाइल के उद्देश्य के लिए, सभी तत्वों को दो श्रेणियों में विभाजित किया गया है:
- Block-level element
- Inline element
Block-level element:
ये elements हैं, जो वेब पेज के मुख्य भाग को एक पृष्ठ को सुसंगत ब्लॉकों में विभाजित करके बनाते हैं।एक ब्लॉक-स्तरीय elements हमेशा नई पंक्ति से शुरू होता है और वेब पेज की पूरी चौड़ाई को बाएं से दाएं लेता है।
इन तत्वों में ब्लॉक-स्तर के साथ-साथ इनलाइन elements भी हो सकते हैं।
HTML में ब्लॉक-स्तरीय तत्व निम्नलिखित हैं।
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.
नोट: ये सभी तत्व बाद के अध्यायों में वर्णित हैं।
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style=”background-color: lightblue”>This is first div</div>
<div style=”background-color: lightgreen”>This is second div</div>
<p style=”background-color: pink”>This is a block level element</p>
</body>
</html>
उपरोक्त उदाहरण में हमने उपयोग किया है
टैग, जो एक वेब पेज में एक अनुभाग को परिभाषित करता है, और पेज की पूरी चौड़ाई लेता है।
हमने शैली विशेषता का उपयोग किया है जो HTML सामग्री को स्टाइल करने के लिए उपयोग किया जाता है, और पृष्ठभूमि का रंग दिखा रहा है कि यह ब्लॉक स्तर का तत्व है।
Inline elements:
इनलाइन elements वे तत्व हैं, जो किसी दिए गए पाठ के भाग को अलग करते हैं और इसे एक विशेष कार्य प्रदान करते हैं। ये elements नई लाइन से शुरू नहीं होते हैं और आवश्यकता के अनुसार चौड़ाई लेते हैं।इनलाइन elements का उपयोग ज्यादातर अन्य elements के साथ किया जाता है।
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href=”https://www.javatpoint.com/html-tutorial”>Click on link</a>
<span style=”background-color: lightblue”>this is inline element</span>
<p>This will take width of text only</p>
</body>
</html>
HTML में उपयोग किए जाने वाले कुछ मुख्य elements की सूची निम्नलिखित है:
| Start tag | Content | End tag | Description |
|---|---|---|---|
| <h1> …… <h6> | ये HTML के शीर्षक हैं | </h1>..</h6> | इन तत्वों का उपयोग पृष्ठ के शीर्षकों को प्रदान करने के लिए किया जाता है। |
| <p> | यह पैराग्राफ है | </p> | इस तत्व का उपयोग पैराग्राफ के रूप में एक सामग्री को प्रदर्शित करने के लिए किया जाता है। |
| <div> | यह div सेक्शन है | </div> | इस तत्व का उपयोग वेब पेज में एक अनुभाग प्रदान करने के लिए किया जाता है। |
| <br> | इस तत्व का उपयोग लाइन ब्रेक प्रदान करने के लिए किया जाता है। (शून्य तत्व) | ||
| <hr> | इस तत्व का उपयोग क्षैतिज रेखा प्रदान करने के लिए किया जाता है। (शून्य तत्व) |
