HTML10-da foydalanuvchi tajribasini sezilarli darajada yaxshilagan 5 ta usul
Biz yordam beramiz SaaS kompaniya organik qidiruv uchun platformalarini optimallashtirishda (SEO)… va biz ularning chiqish shablonlari uchun kodni ko‘rib chiqqanimizda, ular hech qachon sahifa chiqishlari uchun HTML5 usullarini qo‘shmaganliklarini darhol payqadik.
HTML5 foydalanuvchi tajribasi uchun oldinga sezilarli sakrash edi (UX) veb-ishlab chiqishda. U veb-sahifalarning imkoniyatlarini oshiruvchi bir qancha yangi usullar va teglarni taqdim etdi. Bu erda tushuntirishlar va kod namunalari bilan o'nta asosiy HTML5 usullari va teglarining markirovka qilingan ro'yxati:
- Semantik elementlar: HTML5 semantik elementlarni taqdim etdi, ular veb-kontentga yanada mazmunli tuzilmani ta'minlaydi, foydalanish imkoniyatini va 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>
- Video va Audio: HTML5 joriy etildi
<video>
va<audio>
elementlar, uchinchi tomon plaginlariga tayanmasdan multimedia kontentini joylashtirishni osonlashtiradi.
<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>
- polotno:
<canvas>
element JavaScript orqali dinamik grafiklar va animatsiyalarga imkon beradi, interaktiv xususiyatlarni yaxshilaydi.
<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>
- Shaklni yaxshilash: HTML5 yangi kiritish turlarini qo'shdi (masalan, elektron pochta, URL) va atributlar (masalan,
required
,pattern
) shaklni tekshirish va foydalanuvchi tajribasini yaxshilash uchun.
<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>
- Geolocation: HTML5 veb-saytlarga foydalanuvchining geografik joylashuviga kirish imkonini beradi, bu esa joylashuvga asoslangan xizmatlar uchun imkoniyatlarni ochib beradi.
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.
});
}
- Mahalliy saqlash: HTML5 joriy etildi
localStorage
mijoz tomonida saqlash uchun veb-saytlarga cookie-fayllarga tayanmasdan ma'lumotlarni mahalliy saqlash imkonini beradi.
// Storing data in local storage
localStorage.setItem('username', 'JohnDoe');
// Retrieving data from local storage
const username = localStorage.getItem('username');
- Veb saqlash: Yonida
localStorage
, HTML5 taqdim etildisessionStorage
seansga tegishli ma'lumotlarni saqlash uchun, seans tugashi bilan tozalanadi.
// Storing session-specific data
sessionStorage.setItem('theme', 'dark');
// Retrieving session-specific data
const theme = sessionStorage.getItem('theme');
- Drag va Drop : HTML5 intuitiv interfeyslarni amalga oshirishni osonlashtirib, sudrab va tashlab o'zaro ta'sirlarni mahalliy qo'llab-quvvatlaydi.
<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>
- Responsive Tasvirlar: HTML5 ni taqdim etdi
<picture>
element vasrcset
ekran o'lchami va o'lchamlari asosida tegishli tasvirlarni etkazib berish uchun atribut.
<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>
- Tafsilotlar va Xulosa:
<details>
va<summary>
elementlar kontentning kengaytiriladigan bo'limlarini yaratishga imkon beradi, hujjatlarni tashkil qilishni yaxshilaydi.
<details>
<summary>Click to expand</summary>
<p>Additional content goes here...</p>
</details>
Ushbu qo'shimcha HTML5 xususiyatlari veb-ishlab chiqish imkoniyatlarini yanada yaxshiladi, ishlab chiquvchilarga yanada interaktiv va foydalanuvchilarga qulay veb-saytlar yaratish vositalarini taqdim etdi.