एचटीएमएल ट्यूटोरियल

एचटीएमएल होम एचटीएमएल परिचय एचटीएमएल संपादक एचटीएमएल बेसिक एचटीएमएल तत्व एचटीएमएल गुण एचटीएमएल शीर्षक एचटीएमएल पैराग्राफ एचटीएमएल शैलियाँ एचटीएमएल स्वरूपण एचटीएमएल कोटेशन एचटीएमएल टिप्पणियाँ एचटीएमएल रंग एचटीएमएल सीएसएस एचटीएमएल लिंक एचटीएमएल छवियाँ एचटीएमएल फ़ेविकॉन एचटीएमएल टेबल्स एचटीएमएल सूचियां एचटीएमएल ब्लॉक और इनलाइन एचटीएमएल क्लासेस एचटीएमएल आईडी एचटीएमएल इफ्रेम्स एचटीएमएल जावास्क्रिप्ट HTML फ़ाइल पथ एचटीएमएल हेड एचटीएमएल लेआउट एचटीएमएल उत्तरदायी एचटीएमएल कंप्यूटर कोड HTML शब्दार्थ एचटीएमएल स्टाइल गाइड एचटीएमएल इकाइयां एचटीएमएल प्रतीक एचटीएमएल इमोजी एचटीएमएल वर्णसेट एचटीएमएल यूआरएल एनकोड एचटीएमएल बनाम एक्सएचटीएमएल

एचटीएमएल फॉर्म

एचटीएमएल फॉर्म एचटीएमएल फॉर्म गुण एचटीएमएल फॉर्म एलिमेंट्स एचटीएमएल इनपुट प्रकार एचटीएमएल इनपुट गुण HTML इनपुट फॉर्म विशेषताएँ

एचटीएमएल ग्राफिक्स

एचटीएमएल कैनवास एचटीएमएल एसवीजी

एचटीएमएल मीडिया

एचटीएमएल मीडिया एचटीएमएल वीडियो एचटीएमएल ऑडियो एचटीएमएल प्लग-इन एचटीएमएल यूट्यूब

एचटीएमएल एपीआई

एचटीएमएल जियोलोकेशन एचटीएमएल ड्रैग/ड्रॉप एचटीएमएल वेब स्टोरेज एचटीएमएल वेब वर्कर्स एचटीएमएल एसएसई

एचटीएमएल उदाहरण

एचटीएमएल उदाहरण एचटीएमएल प्रश्नोत्तरी एचटीएमएल व्यायाम एचटीएमएल प्रमाणपत्र एचटीएमएल सारांश एचटीएमएल अभिगम्यता

एचटीएमएल संदर्भ

एचटीएमएल टैग सूची एचटीएमएल गुण HTML वैश्विक गुण एचटीएमएल ब्राउज़र समर्थन एचटीएमएल घटनाक्रम एचटीएमएल रंग एचटीएमएल कैनवास एचटीएमएल ऑडियो/वीडियो एचटीएमएल सिद्धांत एचटीएमएल कैरेक्टर सेट एचटीएमएल यूआरएल एनकोड एचटीएमएल लैंग कोड HTTP संदेश HTTP तरीके पीएक्स से ईएम कन्वर्टर कुंजीपटल अल्प मार्ग

HTML सिमेंटिक एलिमेंट्स


शब्दार्थ तत्व = अर्थ वाले तत्व।


शब्दार्थ तत्व क्या हैं?

सिमेंटिक तत्व स्पष्ट रूप से ब्राउज़र और डेवलपर दोनों के लिए इसका अर्थ बताता है।

गैर-अर्थपूर्ण तत्वों के उदाहरण : <div>और <span>- इसकी सामग्री के बारे में कुछ नहीं बताता है।

सिमेंटिक तत्वों के उदाहरण : <form>, <table>, और <article>- इसकी सामग्री को स्पष्ट रूप से परिभाषित करता है।


HTML में सिमेंटिक एलिमेंट्स

कई वेब साइटों में HTML कोड होते हैं जैसे: <div id="nav"> <div class="header"> <div id="footer"> नेविगेशन, हेडर और फुटर को इंगित करने के लिए।

HTML में कुछ सिमेंटिक तत्व होते हैं जिनका उपयोग वेब पेज के विभिन्न भागों को परिभाषित करने के लिए किया जा सकता है:  

  • <लेख>
  • <एक तरफ>
  • <विवरण>
  • <अंजीर>
  • <आंकड़ा>
  • <पाद>
  • <हेडर>
  • <मुख्य>
  • <चिह्न>
  • <एनएवी>
  • <अनुभाग>
  • <सारांश>
  • <समय>
HTML सिमेंटिक एलिमेंट्स


एचटीएमएल <अनुभाग> तत्व

<section>तत्व एक दस्तावेज़ में एक अनुभाग को परिभाषित करता है

W3C के HTML दस्तावेज़ीकरण के अनुसार: "एक अनुभाग सामग्री का एक विषयगत समूह है, आमतौर पर एक शीर्षक के साथ।"

उदाहरण जहां एक <section>तत्व का उपयोग किया जा सकता है:

  • अध्याय
  • परिचय
  • समाचार आइटम
  • संपर्क जानकारी

एक वेब पेज को आम तौर पर परिचय, सामग्री और संपर्क जानकारी के लिए अनुभागों में विभाजित किया जा सकता है।

उदाहरण

एक दस्तावेज़ में दो खंड:

<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>तत्व स्वतंत्र, स्व-निहित सामग्री निर्दिष्ट करता है

एक लेख को अपने आप समझ में आना चाहिए, और इसे बाकी वेब साइट से स्वतंत्र रूप से वितरित करना संभव होना चाहिए।

उदाहरण जहां <article>तत्व का उपयोग किया जा सकता है:

  • फोरम पोस्ट
  • वेबदैनिकी डाक
  • उपयोगकर्ता टिप्पणियाँ
  • उत्पाद कार्ड
  • अखबारों में लेख

उदाहरण

स्वतंत्र, स्व-निहित सामग्री वाले तीन लेख:

<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>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>

उदाहरण 2

<लेख> तत्व को स्टाइल करने के लिए CSS का उपयोग करें:

<html>
<head>
<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}

.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}

.browser {
  background: white;
}

.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>

<article class="all-browsers">
  <h1>Most Popular Browsers</h1>
  <article class="browser">
    <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 class="browser">
    <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>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</article>

</body>
</html>

नेस्टिंग <लेख> <अनुभाग> में या इसके विपरीत?

<article> तत्व स्वतंत्र, स्व-निहित सामग्री निर्दिष्ट करता है

<section>तत्व किसी दस्तावेज़ में अनुभाग को परिभाषित करता है

क्या हम यह तय करने के लिए परिभाषाओं का उपयोग कर सकते हैं कि उन तत्वों को कैसे घोंसला बनाया जाए? नहीं हम नहीं कर सकते!

<section>तो, आपको तत्वों वाले <article>तत्वों और <article>तत्वों वाले तत्वों वाले HTML पृष्ठ मिलेंगे <section>


एचटीएमएल <हेडर> एलिमेंट

<header>तत्व परिचयात्मक सामग्री या नेविगेशनल लिंक के एक सेट के लिए एक कंटेनर का प्रतिनिधित्व करता है

एक <header>तत्व में आम तौर पर शामिल होते हैं:

  • एक या अधिक शीर्षक तत्व (<h1> - <h6>)
  • लोगो या आइकन
  • लेखक की जानकारी

नोट:<header> आपके पास एक HTML दस्तावेज़ में कई तत्व हो सकते हैं । हालाँकि, a , या किसी अन्य तत्व <header>के भीतर नहीं रखा जा सकता है।<footer><address><header>

उदाहरण

<लेख> के लिए हेडर: 

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

HTML <पाद लेख> तत्व

<footer>तत्व किसी दस्तावेज़ या अनुभाग के लिए एक पाद लेख को परिभाषित करता है

एक <footer>तत्व में आम तौर पर शामिल होते हैं:

  • लेखक की जानकारी
  • कॉपीराइट संबंधी जानकारी
  • संपर्क जानकारी
  • साइट मैप
  • शीर्ष लिंक पर वापस जाएं
  • संबंधित दस्तावेज

<footer>आपके पास एक दस्तावेज़ में कई तत्व हो सकते हैं ।

उदाहरण

दस्तावेज़ में एक पाद लेख अनुभाग:

<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>

एचटीएमएल <एनएवी> तत्व

<nav>तत्व नेविगेशन लिंक के एक सेट को परिभाषित करता है

ध्यान दें कि किसी दस्तावेज़ के सभी लिंक एक <nav>तत्व के अंदर नहीं होने चाहिए। <nav>तत्व केवल नेविगेशन लिंक के प्रमुख ब्लॉक के लिए अभिप्रेत है

अक्षम उपयोगकर्ताओं के लिए स्क्रीन रीडर जैसे ब्राउज़र इस तत्व का उपयोग यह निर्धारित करने के लिए कर सकते हैं कि इस सामग्री के प्रारंभिक प्रतिपादन को छोड़ना है या नहीं।

उदाहरण

नेविगेशन लिंक का एक सेट:

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

एचटीएमएल <एक तरफ> तत्व

तत्व कुछ सामग्री को उस <aside>सामग्री से अलग परिभाषित करता है जिसमें इसे रखा गया है (जैसे साइडबार)।

सामग्री अप्रत्यक्ष रूप से आसपास की <aside>सामग्री से संबंधित होनी चाहिए।

उदाहरण

इसमें रखी गई सामग्री के अलावा कुछ सामग्री प्रदर्शित करें:

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

उदाहरण 2

<एक तरफ> तत्व को स्टाइल करने के लिए CSS का उपयोग करें:

<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

</body>
</html>

HTML <figure> और <figcaption> Elements

टैग स्व-निहित सामग्री को <figure>निर्दिष्ट करता है, जैसे चित्र, आरेख, फ़ोटो, कोड सूची, आदि।

टैग किसी तत्व <figcaption>के लिए कैप्शन को परिभाषित करता है <figure>तत्व को किसी <figcaption>तत्व के पहले या अंतिम बच्चे के रूप में रखा जा सकता है <figure>

<img>तत्व वास्तविक छवि/चित्रण को परिभाषित करता है 

उदाहरण

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

शब्दार्थ तत्व क्यों?

W3C के अनुसार: "एक सिमेंटिक वेब डेटा को अनुप्रयोगों, उद्यमों और समुदायों में साझा और पुन: उपयोग करने की अनुमति देता है।"


HTML में सिमेंटिक एलिमेंट्स

नीचे HTML में कुछ सिमेंटिक तत्वों की सूची दी गई है।

Tag Description
<article> Defines independent, self-contained content
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time

सभी उपलब्ध HTML टैग्स की पूरी सूची के लिए, हमारे HTML टैग संदर्भ पर जाएं ।