सामग्री का विपणन

HTML10 में पेश किए गए 5 तरीके जिनसे उपयोगकर्ता अनुभव में नाटकीय रूप से सुधार हुआ

हम सहायता कर रहे हैं सास कंपनी जैविक खोज के लिए अपने मंच को अनुकूलित कर रही है (एसईओ)… और जब हमने उनके आउटपुट टेम्प्लेट के लिए कोड की समीक्षा की, तो हमने तुरंत देखा कि उन्होंने कभी भी अपने पेज आउटपुट के लिए HTML5 तरीकों को शामिल नहीं किया।

HTML5 उपयोगकर्ता अनुभव के लिए एक महत्वपूर्ण छलांग थी (UX) वेब विकास में। इसने कई नए तरीके और टैग पेश किए जिन्होंने वेब पेजों की क्षमताओं को बढ़ाया। यहां स्पष्टीकरण और कोड नमूनों के साथ दस प्रमुख HTML5 विधियों और टैग की एक बुलेटेड सूची दी गई है:

  • शब्दार्थ तत्व: HTML5 ने सिमेंटिक तत्वों को पेश किया जो वेब सामग्री को अधिक सार्थक संरचना प्रदान करते हैं, पहुंच में सुधार करते हैं और एसईओ.
<header>
  <h1>Website Title</h1>
</header>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<article>
  <h2>Article Title</h2>
  <p>Article content goes here...</p>
</article>
<footer>
  <p>&copy; 2023 WebsiteName</p>
</footer>
  • वीडियो और ऑडियो: HTML5 पेश किया गया <video> और <audio> तत्व, तृतीय-पक्ष प्लगइन्स पर भरोसा किए बिना मल्टीमीडिया सामग्री को एम्बेड करना आसान बनाते हैं।
<video controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
  • कैनवास: <canvas> तत्व जावास्क्रिप्ट के माध्यम से गतिशील ग्राफिक्स और एनिमेशन की अनुमति देता है, इंटरैक्टिव सुविधाओं को बढ़ाता है।
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const context = canvas.getContext('2d');
  // Draw shapes and animations here using JavaScript.
</script>
    • प्रपत्र संवर्द्धन: HTML5 ने नए इनपुट प्रकार जोड़े (जैसे, ईमेल, यूआरएल) और विशेषताएँ (जैसे, required, pattern) बेहतर फॉर्म सत्यापन और उपयोगकर्ता अनुभव के लिए।
    <form>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
      <input type="submit" value="Submit">
    </form>
    • जियोलोकेशन: HTML5 वेबसाइटों को उपयोगकर्ता के भौगोलिक स्थान तक पहुंचने में सक्षम बनाता है, जिससे स्थान-आधारित सेवाओं के लिए संभावनाएं खुलती हैं।
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition(function(position) {
        const latitude = position.coords.latitude;
        const longitude = position.coords.longitude;
        // Use latitude and longitude data here.
      });
    }
    • स्थानीय भंडार: HTML5 पेश किया गया localStorage क्लाइंट-साइड स्टोरेज के लिए, वेबसाइटों को कुकीज़ पर भरोसा किए बिना स्थानीय रूप से डेटा स्टोर करने में सक्षम बनाना।
    // Storing data in local storage
    localStorage.setItem('username', 'JohnDoe');
    // Retrieving data from local storage
    const username = localStorage.getItem('username');
    • वेब भंडारण: साथ - साथ localStorage, HTML5 पेश किया गया sessionStorage सत्र-विशिष्ट डेटा संग्रहीत करने के लिए, जिसे सत्र समाप्त होने पर साफ़ कर दिया जाता है।
    // Storing session-specific data
    sessionStorage.setItem('theme', 'dark');
    // Retrieving session-specific data
    const theme = sessionStorage.getItem('theme');
    • खींचें और ड्रॉप
      : HTML5 ड्रैग-एंड-ड्रॉप इंटरैक्शन के लिए मूल समर्थन प्रदान करता है, जिससे सहज ज्ञान युक्त इंटरफेस को लागू करना आसान हो जाता है।
    <div id="dragTarget" draggable="true">Drag me!</div>
    <div id="dropTarget">Drop here!</div>
    <script>
      const dragTarget = document.getElementById('dragTarget');
      const dropTarget = document.getElementById('dropTarget');
    
      dragTarget.addEventListener('dragstart', function(event) {
        event.dataTransfer.setData('text', 'Dragged item');
      });
    
      dropTarget.addEventListener('dragover', function(event) {
        event.preventDefault();
      });
    
      dropTarget.addEventListener('drop', function(event) {
        event.preventDefault();
        const data = event.dataTransfer.getData('text');
        // Handle the dropped item here.
      });
    </script>
    • उत्तरदायी छवियाँ: HTML5 ने प्रस्तुत किया <picture> तत्व और srcset स्क्रीन आकार और रिज़ॉल्यूशन के आधार पर उचित छवियां प्रदान करने की विशेषता।
    <picture>
      <source srcset="image-large.jpg" media="(min-width: 1200px)">
      <source srcset="image-medium.jpg" media="(min-width: 768px)">
      <img src="image-small.jpg" alt="Responsive Image">
    </picture>
    • विवरण और सारांश: <details> और <summary> तत्व आपको दस्तावेज़ संगठन को बढ़ाते हुए, सामग्री के विस्तार योग्य अनुभाग बनाने की अनुमति देते हैं।
    <details>
      <summary>Click to expand</summary>
      <p>Additional content goes here...</p>
    </details>

    इन अतिरिक्त HTML5 सुविधाओं ने वेब विकास की क्षमताओं में और सुधार किया, जिससे डेवलपर्स को अधिक इंटरैक्टिव और उपयोगकर्ता-अनुकूल वेबसाइट बनाने के लिए उपकरण उपलब्ध हुए।

    Douglas Karr

    Douglas Karr के सीएमओ हैं खुली अंतर्दृष्टि और के संस्थापक Martech Zone. डगलस ने दर्जनों सफल मार्टेक स्टार्टअप्स की मदद की है, मार्टेक अधिग्रहणों और निवेशों में $5 बिलियन से अधिक की उचित परिश्रम में सहायता की है, और कंपनियों को उनकी बिक्री और विपणन रणनीतियों को लागू करने और स्वचालित करने में सहायता करना जारी रखा है। डगलस एक अंतरराष्ट्रीय स्तर पर मान्यता प्राप्त डिजिटल परिवर्तन और मार्टेक विशेषज्ञ और वक्ता हैं। डगलस डमी गाइड और बिजनेस लीडरशिप पुस्तक के प्रकाशित लेखक भी हैं।

    संबंधित आलेख

    शीर्ष पर वापस करने के लिए बटन
    समापन

    पता लगाया गया

    Martech Zone आपको यह सामग्री बिना किसी लागत के प्रदान करने में सक्षम है क्योंकि हम विज्ञापन राजस्व, संबद्ध लिंक और प्रायोजन के माध्यम से अपनी साइट से कमाई करते हैं। यदि आप हमारी साइट देखते समय अपना विज्ञापन अवरोधक हटा देंगे तो हम आभारी होंगे।