10 méthodes introduites dans HTML5 qui ont considérablement amélioré l’expérience utilisateur

Nous aidons un SaaS entreprise dans l’optimisation de sa plateforme de recherche organique (Référencement)… et lorsque nous avons examiné le code de leurs modèles de sortie, nous avons immédiatement remarqué qu’ils n’avaient jamais incorporé de méthodes HTML5 pour leurs sorties de page.

HTML5 a constitué un bond en avant significatif pour l’expérience utilisateur (UX) dans le développement web. Il a introduit plusieurs nouvelles méthodes et balises qui ont amélioré les capacités des pages Web. Voici une liste à puces de dix méthodes et balises HTML5 clés avec des explications et des exemples de code :

• Éléments sémantiques: HTML5 a introduit des éléments sémantiques qui fournissent une structure plus significative au contenu Web, améliorant ainsi l’accessibilité et Référencement.

<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>

• Vidéo et audio: HTML5 introduit <video> et <audio> éléments, facilitant l’intégration de contenu multimédia sans recourir à des plugins tiers.

<video controls>
  <source src="https://martech.zone/html5-user-experience/video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<audio controls>
  <source src="https://martech.zone/html5-user-experience/audio.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

• Toile: Le <canvas> L’élément permet des graphiques et des animations dynamiques via JavaScript, améliorant ainsi les fonctionnalités interactives.

<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>

• Améliorations du formulaire: HTML5 a ajouté de nouveaux types d’entrée (par exemple, e-mail, URL) et les attributs (par exemple, required, pattern) pour une validation de formulaire et une expérience utilisateur améliorées.

<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>

• Géolocalisation: HTML5 permet aux sites Web d’accéder à la localisation géographique de l’utilisateur, ouvrant ainsi la voie aux services basés sur la localisation.

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.
  });
}

• Stockage local: HTML5 introduit localStorage pour le stockage côté client, permettant aux sites Web de stocker des données localement sans recourir aux cookies.

// Storing data in local storage
localStorage.setItem('username', 'JohnDoe');
// Retrieving data from local storage
const username = localStorage.getItem('username');

• Espace archivage sur le Web: Aux côtés de localStorageHTML5 introduit sessionStorage pour stocker les données spécifiques à la session, qui sont effacées à la fin de la session.

// Storing session-specific data
sessionStorage.setItem('theme', 'dark');
// Retrieving session-specific data
const theme = sessionStorage.getItem('theme');

• Glisser déposer: HTML5 fournit une prise en charge native des interactions glisser-déposer, facilitant ainsi la mise en œuvre d’interfaces intuitives.

<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>

• Images réactives: HTML5 a introduit le <picture> élément et le srcset attribut pour fournir des images appropriées en fonction de la taille et de la résolution de l’écran.

<picture>
  <source srcset="https://martech.zone/image-large.jpg" media="(min-width: 1200px)">
  <source srcset="https://martech.zone/image-medium.jpg" media="(min-width: 768px)">
  <img src="https://martech.zone/html5-user-experience/image-small.jpg" alt="Responsive Image">
</picture>

• Détails et résumé: Le <details> et <summary> Les éléments vous permettent de créer des sections de contenu extensibles, améliorant ainsi l’organisation des documents.

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

Ces fonctionnalités HTML5 supplémentaires ont encore amélioré les capacités de développement Web, fournissant aux développeurs des outils pour créer des sites Web plus interactifs et conviviaux.