10 วิธีการที่แนะนำใน HTML5 ที่ปรับปรุงประสบการณ์ผู้ใช้อย่างมาก

Douglas Karr พฤหัสบดีกันยายนฮิต, อำนาจลึกลับ

0 อ่าน 2 นาที

เรากำลังช่วยเหลือก SaaS บริษัทในการเพิ่มประสิทธิภาพแพลตฟอร์มสำหรับการค้นหาทั่วไป (SEO)… และเมื่อเราตรวจสอบโค้ดสำหรับเทมเพลตเอาท์พุต เราสังเกตได้ทันทีว่าพวกเขาไม่เคยรวมวิธี HTML5 สำหรับเอาท์พุตเพจเลย

HTML5 เป็นการก้าวกระโดดครั้งสำคัญสำหรับประสบการณ์ผู้ใช้ (UX) ในการพัฒนาเว็บ โดยนำเสนอวิธีการและแท็กใหม่หลายประการที่ปรับปรุงความสามารถของหน้าเว็บ ต่อไปนี้เป็นรายการสัญลักษณ์แสดงหัวข้อย่อยของเมธอดและแท็ก HTML5 หลัก XNUMX รายการพร้อมคำอธิบายและตัวอย่างโค้ด:

องค์ประกอบความหมาย: 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 เหล่านี้ได้ปรับปรุงขีดความสามารถของการพัฒนาเว็บให้ดียิ่งขึ้น โดยมอบเครื่องมือสำหรับนักพัฒนาในการสร้างเว็บไซต์เชิงโต้ตอบและเป็นมิตรกับผู้ใช้มากขึ้น