HTML10-те пайдаланушы тәжірибесін айтарлықтай жақсартатын 5 әдіс

Біз көмектесеміз 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 клиенттік сақтау үшін веб-сайттарға cookie файлдарына сенбей деректерді жергілікті түрде сақтауға мүмкіндік береді.

// 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 мүмкіндіктері веб-әзірлеу мүмкіндіктерін одан әрі жетілдірді, әзірлеушілерге интерактивті және пайдаланушыға ыңғайлы веб-сайттарды жасау құралдарымен қамтамасыз етті.