Вміст Маркетинг

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

    Douglas Karr

    Douglas Karr є CMO компанії OpenINSIGHTS і засновник Martech Zone. Дуглас допоміг десяткам успішних стартапів MarTech, допоміг у належній перевірці понад 5 мільярдів доларів у придбання та інвестиції Martech, і продовжує допомагати компаніям у впровадженні та автоматизації їхніх продажів і маркетингових стратегій. Дуглас — міжнародно визнаний експерт і спікер з цифрової трансформації та MarTech. Дуглас також є опублікованим автором посібника для чайників і книги про лідерство в бізнесі.

    Статті по темі

    Догори кнопки
    близько

    Виявлено блокування реклами

    Martech Zone може надати вам цей вміст безкоштовно, оскільки ми монетизуємо наш сайт за рахунок доходів від реклами, партнерських посилань і спонсорства. Ми будемо вдячні, якщо ви видалите блокувальник реклами під час перегляду нашого сайту.