10 методів, представлених у HTML5, які значно покращили взаємодію з користувачем

Ми допомагаємо а 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>&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> дозволяє створювати динамічну графіку та анімацію через 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>

• Geolocation: 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 для зберігання на стороні клієнта, що дозволяє веб-сайтам зберігати дані локально, не покладаючись на файли cookie.

// 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 ще більше покращили можливості веб-розробки, надаючи розробникам інструменти для створення більш інтерактивних і зручних веб-сайтів.