Marketing treści

10 metod wprowadzonych w HTML5, które radykalnie poprawiły doświadczenie użytkownika

Pomagamy A SaaS firmie w optymalizacji platformy pod kątem wyszukiwania organicznego (SEO)… a kiedy przejrzeliśmy kod ich szablonów wyjściowych, od razu zauważyliśmy, że nigdy nie stosowali metod HTML5 w wynikach swoich stron.

HTML5 był znaczącym krokiem naprzód w zakresie doświadczenia użytkownika (UX) w tworzeniu stron internetowych. Wprowadzono kilka nowych metod i znaczników, które zwiększyły możliwości stron internetowych. Oto wypunktowana lista dziesięciu kluczowych metod i tagów HTML5 z objaśnieniami i przykładami kodu:

  • Elementy semantyczne: W HTML5 wprowadzono elementy semantyczne, które zapewniają bardziej znaczącą strukturę treści internetowych, poprawiając dostępność i 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>
  • Audio Video: Wprowadzono HTML5 <video> i <audio> elementów, co ułatwia osadzanie treści multimedialnych bez konieczności korzystania z wtyczek innych firm.
<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>
  • Brezentowy: the <canvas> element pozwala na dynamiczną grafikę i animacje poprzez JavaScript, ulepszając funkcje interaktywne.
<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>
    • Udoskonalenia formularza: HTML5 dodał nowe typy danych wejściowych (np. e-mail, URL) i atrybuty (np. required, pattern) w celu poprawy sprawdzania poprawności formularzy i komfortu użytkownika.
    <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>
    • Geolokalizacja: HTML5 umożliwia stronom internetowym dostęp do lokalizacji geograficznej użytkownika, otwierając możliwości dla usług opartych na lokalizacji.
    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.
      });
    }
    • Przechowywanie lokalne: Wprowadzono HTML5 localStorage do przechowywania po stronie klienta, umożliwiając stronom internetowym przechowywanie danych lokalnie bez polegania na plikach cookie.
    // Storing data in local storage
    localStorage.setItem('username', 'JohnDoe');
    // Retrieving data from local storage
    const username = localStorage.getItem('username');
    • Pamięć sieciowa: Wzdłuż localStorage, wprowadzono HTML5 sessionStorage do przechowywania danych specyficznych dla sesji, które są usuwane po zakończeniu sesji.
    // Storing session-specific data
    sessionStorage.setItem('theme', 'dark');
    // Retrieving session-specific data
    const theme = sessionStorage.getItem('theme');
    • Przeciągnij i upuść
      : HTML5 zapewnia natywną obsługę interakcji typu „przeciągnij i upuść”, ułatwiając wdrażanie intuicyjnych interfejsów.
    <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>
    • Responsywne obrazy: HTML5 wprowadził <picture> element i srcset atrybut umożliwiający dostarczanie odpowiednich obrazów w zależności od rozmiaru i rozdzielczości ekranu.
    <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>
    • Szczegóły i podsumowanie: the <details> i <summary> elementy umożliwiają tworzenie rozszerzalnych sekcji treści, poprawiając organizację dokumentów.
    <details>
      <summary>Click to expand</summary>
      <p>Additional content goes here...</p>
    </details>

    Te dodatkowe funkcje HTML5 jeszcze bardziej poprawiły możliwości tworzenia stron internetowych, zapewniając programistom narzędzia do tworzenia bardziej interaktywnych i przyjaznych dla użytkownika witryn internetowych.

    Douglas Karr

    Douglas Karr jest dyrektorem ds. marketingu OtwórzWglądy i założycielem Martech Zone. Douglas pomógł dziesiątkom odnoszących sukcesy start-upów MarTech, pomagał w due diligence ponad 5 miliardów dolarów w przejęciach i inwestycjach Martech i nadal pomaga firmom we wdrażaniu i automatyzacji ich strategii sprzedaży i marketingu. Douglas to uznany na całym świecie ekspert ds. transformacji cyfrowej oraz MarTech i mówca. Douglas jest także autorem przewodnika dla manekinów i książki o przywództwie biznesowym.

    Powiązane artykuły

    Powrót do góry przycisk
    Zamknij

    Wykryto Adblock

    Martech Zone jest w stanie udostępnić Ci te treści bez żadnych kosztów, ponieważ zarabiamy na naszej witrynie poprzez przychody z reklam, linki partnerskie i sponsoring. Będziemy wdzięczni za usunięcie blokady reklam podczas przeglądania naszej witryny.