Content Marketing

10 метода, въведени в HTML5, които драстично подобриха потребителското изживяване

Ние помагаме на a 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>
    • Геолокация: 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 за съхранение от страна на клиента, което позволява на уебсайтовете да съхраняват данни локално, без да разчитат на бисквитки.
    // 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 е в състояние да ви предостави това съдържание безплатно, тъй като осигуряваме приходи от нашия сайт чрез приходи от реклами, партньорски връзки и спонсорство. Ще сме благодарни, ако премахнете блокера си за реклами, докато разглеждате нашия сайт.