Мы помогаем 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=" type="video/mp4">
  Your browser does not support the video tag.
</video>

<audio controls>
  <source src=" 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>

• Геолокация: 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=" media="(min-width: 1200px)">
  <source srcset=" media="(min-width: 768px)">
  <img src=" alt="Responsive Image">
</picture>

• Подробности и резюме: <details> и <summary> элементы позволяют создавать расширяемые разделы контента, улучшая организацию документа.

<details>
  <summary>Click to expand</summary>
  <p>Additional content goes here...</p>
</details>

Эти дополнительные функции HTML5 еще больше расширили возможности веб-разработки, предоставив разработчикам инструменты для создания более интерактивных и удобных для пользователя веб-сайтов.