HTML10 میں متعارف کرائے گئے 5 طریقے جو ڈرامائی طور پر صارف کے تجربے کو بہتر بناتے ہیں
ہم مدد کر رہے ہیں a ساس نامیاتی تلاش کے لیے اپنے پلیٹ فارم کو بہتر بنانے والی کمپنی (SEO)… اور جب ہم نے ان کے آؤٹ پٹ ٹیمپلیٹس کے لیے کوڈ کا جائزہ لیا، تو ہم نے فوری طور پر دیکھا کہ انھوں نے اپنے صفحہ کے آؤٹ پٹس کے لیے کبھی بھی HTML5 طریقوں کو شامل نہیں کیا۔
HTML5 صارف کے تجربے کے لیے ایک اہم چھلانگ تھی۔UXویب ڈویلپمنٹ میں۔ اس نے کئی نئے طریقے اور ٹیگ متعارف کروائے جنہوں نے ویب پیجز کی صلاحیتوں کو بڑھایا۔ یہاں دس کلیدی HTML5 طریقوں اور وضاحتوں اور کوڈ کے نمونوں کے ساتھ ٹیگز کی فہرست ہے۔
- سیمنٹک عناصر: HTML5 نے معنوی عناصر متعارف کرائے ہیں جو ویب مواد کو زیادہ معنی خیز ڈھانچہ فراہم کرتے ہیں، رسائی کو بہتر بناتے ہیں اور SEO.
<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 نے نئی ان پٹ اقسام شامل کیں (مثال کے طور پر، ای میل، URL) اور صفات (مثال کے طور پر،
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 خصوصیات نے ویب ڈویلپمنٹ کی صلاحیتوں کو مزید بہتر کیا، ڈویلپرز کو مزید انٹرایکٹو اور صارف دوست ویب سائٹس بنانے کے لیے ٹولز فراہم کرتے ہیں۔