Хэрэглэгчийн туршлагыг эрс сайжруулсан HTML10-д нэвтрүүлсэн 5 арга
Бид тусалж байна SaaS компани нь органик хайлтын платформоо оновчтой болгох (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>
элемент нь JavaScript-ээр дамжуулан динамик график, хөдөлгөөнт дүрс хийх боломжийг олгож, интерактив функцуудыг сайжруулдаг.
<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');
- Drag болон Drop : 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 функцууд нь вэб хөгжүүлэлтийн чадавхийг улам сайжруулж, хөгжүүлэгчдэд илүү интерактив, хэрэглэгчдэд ээлтэй вэбсайт үүсгэх хэрэгслээр хангасан.