एचटीएमएल 5 - सिंटैक्स

HTML 5 भाषा में एक "कस्टम" HTML सिंटैक्स है जो वेब पर प्रकाशित HTML 4 और XHTML1 दस्तावेजों के साथ संगत है, लेकिन HTML 4 की अधिक गूढ़ SGML विशेषताओं के साथ संगत नहीं है।

एचटीएमएल 5 में एक्सएचटीएमएल के समान सिंटैक्स नियम नहीं हैं, जहां हमें कम केस टैग नामों की आवश्यकता होती है, हमारे गुणों को उद्धृत करते हुए, एक विशेषता का एक मूल्य होना चाहिए और सभी खाली तत्वों को बंद करना होगा।

एचटीएमएल 5 बहुत लचीलेपन के साथ आता है और यह निम्नलिखित विशेषताओं का समर्थन करता है -

अपरकेस टैग नाम।
गुण के लिए उद्धरण वैकल्पिक हैं।
गुण मान वैकल्पिक हैं।
खाली तत्वों को बंद करना वैकल्पिक है।

DOCTYPE

HTML के पुराने संस्करणों में DOCTYPEs लंबे थे क्योंकि HTML भाषा SGML आधारित थी और इसलिए DTD के संदर्भ की आवश्यकता थी।

HTML 5 लेखक DOCTYPE को निर्दिष्ट करने के लिए सरल वाक्यविन्यास का उपयोग करेंगे -

<!DOCTYPE html>

उपरोक्त सिंटैक्स केस-असंवेदनशील है।

अक्षरों को सांकेतिक अक्षरों में बदलना

HTML 5 लेखक कैरेक्टर एन्कोडिंग को निर्दिष्ट करने के लिए सरल वाक्यविन्यास का उपयोग कर सकते हैं -

<meta charset = "UTF-8">

उपरोक्त सिंटैक्स केस-असंवेदनशील है।

<स्क्रिप्ट> टैग

निम्न प्रकार से स्क्रिप्ट तत्वों के लिए "टेक्स्ट / जावास्क्रिप्ट" के मान के साथ एक प्रकार की विशेषता जोड़ना सामान्य अभ्यास है -

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML 5 आवश्यक अतिरिक्त जानकारी को हटा देता है और आप सिंटैक्स का उपयोग कर सकते हैं -

<script src = "scriptfile.js"></script>

<लिंक> टैग

अब तक आप <लिंक> इस प्रकार लिख रहे थे -

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML 5 आवश्यक अतिरिक्त जानकारी को हटा देता है और आप बस निम्नलिखित सिंटैक्स का उपयोग कर सकते हैं -

<link rel = "stylesheet" href = "stylefile.css">

एचटीएमएल 5 तत्व

एचटीएमएल 5 तत्वों को प्रारंभ टैग और अंतिम टैग का उपयोग करके चिह्नित किया जाता है। बीच में टैग नाम के साथ कोण कोष्ठक का उपयोग करके टैग को सीमांकित किया गया है।

प्रारंभ टैग और अंतिम टैग के बीच अंतर यह है कि उत्तरार्द्ध में टैग नाम से पहले स्लैश शामिल है।

HTML5 तत्व का उदाहरण निम्नलिखित है -

<p>...</p>

HTML5 टैग नाम केस असंवेदनशील हैं और सभी अपरकेस या मिश्रित मामले में लिखे जा सकते हैं, हालांकि सबसे आम सम्मेलन लोअरकेस के साथ रहना है।

अधिकांश तत्वों में कुछ सामग्री होती है जैसे <p> ... </ p> में एक अनुच्छेद होता है। हालाँकि, कुछ तत्वों को किसी भी सामग्री को शामिल करने से मना किया जाता है और इन्हें शून्य तत्व के रूप में जाना जाता है। उदाहरण के लिए,br, hr, link, meta, आदि।

यहां HTML5 एलिमेंट्स की पूरी लिस्ट दी गई है ।

HTML5 विशेषताएँ

तत्वों में ऐसे गुण हो सकते हैं जिनका उपयोग किसी तत्व के विभिन्न गुणों को सेट करने के लिए किया जाता है।

कुछ विशेषताओं को विश्व स्तर पर परिभाषित किया गया है और किसी भी तत्व पर उपयोग किया जा सकता है, जबकि अन्य केवल विशिष्ट तत्वों के लिए परिभाषित किए गए हैं। सभी विशेषताओं का एक नाम और एक मूल्य है और जैसा कि नीचे उदाहरण में दिखाया गया है।

HTML5 विशेषता का उदाहरण निम्नलिखित है जो दिखाता है कि "उदाहरण" के मान का उपयोग करके वर्ग नाम की विशेषता के साथ एक दिव्य तत्व को कैसे चिह्नित किया जाए -

<div class = "example">...</div>

विशेषताएँ केवल प्रारंभ टैग के भीतर निर्दिष्ट की जा सकती हैं और कभी भी अंतिम टैग में उपयोग नहीं की जानी चाहिए।

HTML5 विशेषताएँ केस असंवेदनशील हैं और सभी अपरकेस या मिश्रित मामले में लिखी जा सकती हैं, हालांकि सबसे आम सम्मेलन लोअरकेस के साथ रहना है।

यहाँ HTML5 विशेषताएँ की एक पूरी सूची है ।

HTML5 दस्तावेज़

बेहतर संरचना के लिए निम्नलिखित टैग पेश किए गए हैं -

section- यह टैग एक सामान्य दस्तावेज़ या एप्लिकेशन अनुभाग का प्रतिनिधित्व करता है। यह दस्तावेज़ संरचना को इंगित करने के लिए h1-h6 के साथ एक साथ उपयोग किया जा सकता है।
article - यह टैग किसी दस्तावेज़ की एक स्वतंत्र सामग्री, जैसे ब्लॉग प्रविष्टि या समाचार पत्र के लेख का प्रतिनिधित्व करता है।
aside - यह टैग उस सामग्री के एक टुकड़े का प्रतिनिधित्व करता है जो केवल शेष पेज से थोड़ा संबंधित है।
header - यह टैग एक सेक्शन के हेडर को दर्शाता है।
footer - यह टैग एक अनुभाग के लिए पाद लेख का प्रतिनिधित्व करता है और इसमें लेखक, कॉपीराइट जानकारी, वगैरह के बारे में जानकारी हो सकती है।
nav - यह टैग नेविगेशन के लिए इच्छित दस्तावेज़ के एक भाग का प्रतिनिधित्व करता है।
dialog - इस टैग का उपयोग बातचीत को चिह्नित करने के लिए किया जा सकता है।
figure - इस टैग का उपयोग किसी एम्बेडेड सामग्री के साथ एक कैप्शन को जोड़ने के लिए किया जा सकता है, जैसे कि ग्राफिक या वीडियो।

HTML 5 डॉक्यूमेंट के लिए मार्कअप निम्न जैसा लगेगा -

<!DOCTYPE html> 

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header>...</header> 
      <nav>...</nav> 
      
      <article> 
         <section> 
            ... 
         </section> 
      </article> 
      <aside>...</aside> 
      
      <footer>...</footer> 
   </body> 
</html>

<!DOCTYPE html>  

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header role = "banner"> 
         <h1>HTML5 Document Structure Example</h1> 
         <p>This page should be tried in safari, chrome or Mozila.</p> 
      </header> 
   
      <nav> 
         <ul> 
            <li><a href = "https://www.tutorialspoint.com/html">HTML Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/css">CSS Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/javascript">
            JavaScript Tutorial</a></li> 
         </ul> 
      </nav> 
   
      <article> 
         <section> 
            <p>Once article can have multiple sections</p>
         </section> 
      </article> 
   
      <aside> 
         <p>This is  aside part of the web page</p> 
      </aside> 
   
      <footer> 
         <p>Created by <a href = "https://tutorialspoint.com/">Tutorials Point</a></p> 
      </footer> 
   
   </body> 
</html>

यह निम्नलिखित परिणाम का उत्पादन करेगा -