Content marketing

10 metoda uvedenih u HTML5 koje su dramatično poboljšale korisničko iskustvo

Pomažemo a SaaS tvrtka u optimizaciji svoje platforme za organsko pretraživanje (SEO)… i kada smo pregledali kod za njihove izlazne predloške, odmah smo primijetili da nikad nisu uključili HTML5 metode za svoje izlazne stranice.

HTML5 bio je značajan korak naprijed za korisničko iskustvo (UX) u web razvoju. Uveo je nekoliko novih metoda i oznaka koje su poboljšale mogućnosti web stranica. Evo popisa deset ključnih HTML5 metoda i oznaka s grafičkim oznakama s objašnjenjima i uzorcima koda:

  • Semantički elementi: HTML5 je uveo semantičke elemente koji pružaju smisleniju strukturu web-sadržaju, poboljšavajući pristupačnost 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>
  • Video i audio: uveden HTML5 <video> i <audio> elemenata, što olakšava ugradnju multimedijskog sadržaja bez oslanjanja na dodatke trećih strana.
<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>
  • Platno: <canvas> element omogućuje dinamičku grafiku i animacije putem JavaScripta, poboljšavajući interaktivne značajke.
<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>
    • Poboljšanja obrazaca: HTML5 je dodao nove vrste unosa (npr. e-pošta, URL) i atribute (npr. required, pattern) za poboljšanu provjeru valjanosti obrazaca i korisničko iskustvo.
    <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>
    • Geolokaciju: HTML5 omogućuje web stranicama pristup geografskoj lokaciji korisnika, otvarajući mogućnosti za usluge temeljene na lokaciji.
    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.
      });
    }
    • Lokalna pohrana: uveden HTML5 localStorage za pohranu na strani klijenta, omogućujući web stranicama da pohranjuju podatke lokalno bez oslanjanja na kolačiće.
    // Storing data in local storage
    localStorage.setItem('username', 'JohnDoe');
    // Retrieving data from local storage
    const username = localStorage.getItem('username');
    • Web pohrana: Pored localStorage, predstavljen HTML5 sessionStorage za pohranu podataka specifičnih za sesiju, koji se brišu kada sesija završi.
    // Storing session-specific data
    sessionStorage.setItem('theme', 'dark');
    // Retrieving session-specific data
    const theme = sessionStorage.getItem('theme');
    • Povucite i ispustite
      : HTML5 pruža izvornu podršku za interakcije povuci i ispusti, što olakšava implementaciju intuitivnih sučelja.
    <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>
    • Odgovorne slike: HTML5 je predstavio <picture> element i srcset atribut za isporuku odgovarajućih slika na temelju veličine i rezolucije zaslona.
    <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>
    • Pojedinosti i sažetak: <details> i <summary> elementi vam omogućuju stvaranje proširivih dijelova sadržaja, poboljšavajući organizaciju dokumenata.
    <details>
      <summary>Click to expand</summary>
      <p>Additional content goes here...</p>
    </details>

    Ove dodatne značajke HTML5 dodatno su poboljšale mogućnosti web razvoja, pružajući razvojnim programerima alate za stvaranje interaktivnijih i korisniku prilagođenijih web stranica.

    Douglas Karr

    Douglas Karr je CMO of OpenINSIGHTS i osnivač Martech Zone. Douglas je pomogao desecima uspješnih MarTech startupa, pomogao je u due diligence-u od preko 5 milijardi USD u Martech akvizicijama i ulaganjima te nastavlja pomagati tvrtkama u implementaciji i automatizaciji njihovih prodajnih i marketinških strategija. Douglas je međunarodno priznati stručnjak i govornik za digitalnu transformaciju i MarTech. Douglas je također objavljeni autor Dummie's guide i knjige o poslovnom vodstvu.

    Vezani članci

    Natrag na vrh
    Blizu

    Otkriven je Adblock

    Martech Zone može vam pružiti ovaj sadržaj bez ikakvih troškova jer svoju web stranicu unovčavamo putem prihoda od oglasa, pridruženih veza i sponzorstava. Cijenili bismo kada biste uklonili program za blokiranje oglasa dok pregledavate našu stranicu.