Content Marketing

10 metoder introdusert i HTML5 som dramatisk forbedret brukeropplevelsen

Vi bistår en SaaS selskap i å optimalisere sin plattform for organisk søk ​​(SEO)... og da vi gjennomgikk koden for utdatamalene deres, la vi umiddelbart merke til at de aldri inkorporerte HTML5-metoder for sideutgangene sine.

HTML5 var et betydelig sprang fremover for brukeropplevelsen (UX) i webutvikling. Den introduserte flere nye metoder og koder som forbedret funksjonene til nettsider. Her er en punktliste med ti viktige HTML5-metoder og -koder med forklaringer og kodeeksempler:

  • Semantiske elementer: HTML5 introduserte semantiske elementer som gir en mer meningsfull struktur til nettinnhold, forbedrer tilgjengelighet og 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 og Audio: HTML5 introdusert <video> og <audio> elementer, noe som gjør det enklere å bygge inn multimedieinnhold uten å stole på tredjeparts plugins.
<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>
  • Lerret: The <canvas> element muliggjør dynamisk grafikk og animasjoner gjennom JavaScript, og forbedrer interaktive funksjoner.
<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>
    • Skjemaforbedringer: HTML5 la til nye inndatatyper (f.eks. e-post, URL) og attributter (f.eks. required, pattern) for forbedret skjemavalidering og brukeropplevelse.
    <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 gjør det mulig for nettsteder å få tilgang til brukerens geografiske plassering, noe som åpner for muligheter for stedsbaserte tjenester.
    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.
      });
    }
    • Lokal lagring: HTML5 introdusert localStorage for lagring på klientsiden, slik at nettsteder kan lagre data lokalt uten å stole på informasjonskapsler.
    // Storing data in local storage
    localStorage.setItem('username', 'JohnDoe');
    // Retrieving data from local storage
    const username = localStorage.getItem('username');
    • Nettlagring: Ved siden av localStorage, HTML5 introdusert sessionStorage for lagring av øktspesifikke data, som slettes når økten avsluttes.
    // Storing session-specific data
    sessionStorage.setItem('theme', 'dark');
    // Retrieving session-specific data
    const theme = sessionStorage.getItem('theme');
    • Dra og slipp
      : HTML5 gir innebygd støtte for dra-og-slipp-interaksjoner, noe som gjør det enklere å implementere intuitive grensesnitt.
    <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>
    • Responsive Images: HTML5 introduserte <picture> element og srcset attributt for å levere passende bilder basert på skjermstørrelse og oppløsning.
    <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>
    • Detaljer og sammendrag: The <details> og <summary> elementer lar deg lage utvidbare deler av innholdet, og forbedre dokumentorganiseringen.
    <details>
      <summary>Click to expand</summary>
      <p>Additional content goes here...</p>
    </details>

    Disse ekstra HTML5-funksjonene forbedret mulighetene for nettutvikling ytterligere, og ga utviklere verktøy for å lage mer interaktive og brukervennlige nettsteder.

    Douglas Karr

    Douglas Karr er CMO for Åpne INSIGHTS og grunnleggeren av Martech Zone. Douglas har hjulpet dusinvis av vellykkede MarTech-startups, har bistått med due diligence på over 5 milliarder dollar i Martech-oppkjøp og -investeringer, og fortsetter å hjelpe selskaper med å implementere og automatisere salgs- og markedsføringsstrategier. Douglas er en internasjonalt anerkjent digital transformasjons- og MarTech-ekspert og foredragsholder. Douglas er også en publisert forfatter av en Dummies guide og en bok om lederskap for bedrifter.

    Relaterte artikler

    Tilbake til toppen-knappen
    Lukke

    Annonseblokkering oppdaget

    Martech Zone er i stand til å gi deg dette innholdet uten kostnad fordi vi tjener penger på nettstedet vårt gjennom annonseinntekter, tilknyttede lenker og sponsing. Vi vil sette pris på om du vil fjerne annonseblokkeringen når du ser på nettstedet vårt.