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