HTML là nền tảng cốt lõi của mọi trang web, nhưng không phải ai cũng tận dụng hết các tính năng mạnh mẽ mà nó cung cấp. Nếu bạn chỉ sử dụng HTML để tạo cấu trúc cơ bản mà chưa khám phá hết các mẹo tối ưu, có thể bạn đang bỏ lỡ nhiều cách để cải thiện trải nghiệm người dùng, hiệu suất trang web và khả năng truy cập. Trong bài viết này, VietnamWorks inTECH sẽ chia sẻ 20 mẹo HTML hữu ích giúp bạn làm việc hiệu quả hơn, từ việc tối ưu hóa hình ảnh, quản lý liên kết đến cải thiện tính tương tác và truy cập. 

1. Tạo liên kết liên hệ

Bạn có thể tạo các liên kết có thể nhấp để gửi email, thực hiện cuộc gọi hoặc nhắn tin bằng HTML:

<!-- Email link -->
<a href="mailto:name@example.com"> Send Email </a>

<!-- Phone call link -->
<a href="tel:+1234567890"> Call Us </a>

<!-- SMS link -->
<a href="sms:+1234567890"> Send SMS </a>

2. Tạo nội dung có thể thu gọn

Bạn có thể sử dụng thẻ <details> và <summary> để tạo nội dung có thể thu gọn trên trang web.

  • Thẻ <details>: Tạo một vùng chứa nội dung ẩn.

  • Thẻ <summary>: Hiển thị tiêu đề có thể nhấp để mở rộng hoặc thu gọn nội dung.

Ví dụ:

<details>
  <summary>Click to expand</summary>
  <p>This content can be expanded or collapsed.</p>
</details>

3. Sử dụng các thẻ semantic

Hãy sử dụng thẻ semantic thay vì các thẻ không có ý nghĩa để cải thiện cấu trúc, khả năng truy cập và SEO của trang web.

Ví dụ về các thẻ semantic trong HTML:

  • <header>, <nav>, <section>, <article>, <footer>

  • Thay vì dùng <div> hoặc <span> không có ý nghĩa cụ thể.

HTML semantic and non-semantic elements

 

4. Nhóm các thành phần trong biểu mẫu

Dùng thẻ <fieldset> để nhóm các phần tử liên quan trong biểu mẫu và thẻ <legend> để đặt tiêu đề cho nhóm đó.

Điều này giúp tổ chức biểu mẫu khoa học hơn và cải thiện khả năng truy cập.

Ví dụ:

<form>
   <fieldset>
      <legend>Personal details</legend>
      <label for="firstname">First name:</label>
      <input type="text" id="firstname" name="firstname" />
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" />
      <label for="contact">Contact:</label>
      <input type="text" id="contact" name="contact" />
      <input type="button" value="Submit" />
   </fieldset>
</form>

5. Cải thiện Menu Dropdown

Bạn có thể sử dụng thẻ <optgroup> để nhóm các tùy chọn liên quan bên trong thẻ <select>.

Điều này đặc biệt hữu ích khi làm việc với menu dropdown lớn hoặc danh sách lựa chọn dài, giúp người dùng dễ dàng tìm thấy tùy chọn mong muốn.

Ví dụ:

<select>
   <optgroup label="Fruits">
      <option>Apple</option>
      <option>Banana</option>
      <option>Mango</option>
   </optgroup>
   <optgroup label="Vegetables">
      <option>Tomato</option>
      <option>Broccoli</option>
      <option>Carrot</option>
   </optgroup>
</select>

6. Cải thiện hiển thị video

Thuộc tính poster có thể được sử dụng với thẻ <video> để hiển thị một hình ảnh thay thế cho đến khi người dùng nhấn phát video.

Ví dụ:

<video controls poster="image.png" width="500">
  <source src="video.mp4" type="video/mp4 />
</video>

7. Hỗ trợ chọn nhiều giá trị

Bạn có thể sử dụng thuộc tính multiple với các thẻ <input> và <select> để cho phép người dùng chọn hoặc nhập nhiều giá trị cùng lúc.

<input type="file" multiple />
<select multiple>
    <option value="java">Java</option>
    <option value="javascript">JavaScript</option>
    <option value="typescript">TypeScript</option>
    <option value="rust">Rust</option>
</select>

8. Hiển thị chữ dưới chỉ số (Subscript) và trên chỉ số (Superscript)

Bạn có thể sử dụng các thẻ <sub> và <sup> để hiển thị văn bản dưới chỉ số (subscript) hoặc trên chỉ số (superscript).

Ví dụ về Subscript (<sub>)

Hóa học: H<sub>2</sub>O

Kết quả: H₂O

Ví dụ về Superscript (<sup>)

Toán học: X<sup>2</sup> + Y<sup>2</sup> = Z<sup>2</sup>

 Kết quả: X² + Y² = Z²

9. Tạo liên kết tải xuống

Bạn có thể sử dụng thuộc tính download trong thẻ <a> để yêu cầu trình duyệt tải xuống tệp thay vì điều hướng đến tệp đó khi người dùng nhấp vào liên kết.

<a href="document.pdf" download="document.pdf"> Download PDF </a>

10. Xác định URL cơ sở cho liên kết tương đối

Bạn có thể sử dụng thẻ <base> để xác định URL cơ sở cho tất cả các liên kết tương đối trong trang web. Điều này giúp quản lý các liên kết dễ dàng hơn và đảm bảo tài nguyên được tải đúng cách.

<head>
   <base href="https://shefali.dev" target="_blank" />
</head>
<body>
   <a href="/blog">Blogs</a>
   <a href="/get-in-touch">Contact</a>
</body>

11. Kiểm soát cách trình duyệt tải ảnh

Bạn có thể sử dụng thuộc tính loading trong thẻ <img> để điều khiển cách trình duyệt tải hình ảnh.

  • "lazy": Chỉ tải ảnh khi cần thiết (khi cuộn đến hình ảnh).

  • "eager": Tải ngay lập tức.

  • "auto": Trình duyệt tự quyết định.

Hữu ích để tối ưu tốc độ tải trang, đặc biệt với hình ảnh lớn.

12. Quản lý dịch nội dung

Sử dụng thuộc tính translate để chỉ định liệu nội dung của một phần tử có được dịch bởi trình duyệt hay không.

Hữu ích khi bạn muốn bảo vệ tên thương hiệu hoặc thuật ngữ chuyên ngành.

<p translate="no">
  This text should not be translated.
</p>

13. Giới hạn số ký tự nhập

Bạn có thể dùng thuộc tính maxlength để giới hạn số ký tự tối đa và minlength để đặt số ký tự tối thiểu cho trường nhập liệu.

Giúp kiểm soát dữ liệu nhập vào và cải thiện trải nghiệm người dùng.

<input type="text" maxlength="4">

<input type="text" minlength="3">

14. Cho phép chỉnh sửa nội dung

Thuộc tính contenteditable cho phép người dùng chỉnh sửa nội dung của phần tử trực tiếp trên trang.

Hữu ích cho các trình soạn thảo văn bản trực tuyến.

<div contenteditable="true">
   You can edit this content.
</div>

15. Bật/Tắt kiểm tra chính tả

Sử dụng thuộc tính spellcheck để bật hoặc tắt kiểm tra chính tả trong các trường nhập liệu.

<input type="text" spellcheck="true"/>

Hữu ích khi nhập nội dung không cần kiểm tra chính tả như mã nguồn, mật khẩu.

16. Cải thiện khả năng truy cập với thuộc tính alt

Thuộc tính alt giúp mô tả hình ảnh nếu hình không hiển thị được. Điều này giúp trang web thân thiện hơn với SEO và người dùng khiếm thị.

<img src="picture.jpg" alt="Description for the image">

Bạn nên cung cấp mô tả chi tiết để cải thiện khả năng tiếp cận hơn.

17. Xác định cách liên kết mở ra

Thuộc tính target quy định nơi hiển thị nội dung khi người dùng nhấp vào liên kết.

<!-- Opens in the same frame -->
<a href="https://shefali.dev" target="_self">Open</a>

<!-- Opens in a new window or tab -->
<a href="https://shefali.dev" target="_blank">Open</a>

<!-- Opens in the parent frame -->
<a href="https://shefali.dev" target="_parent">Open</a>

<!-- Opens in the full body of the window -->
<a href="https://shefali.dev" target="_top">Open</a>

<!-- Opens in the named frame -->
<a href="https://shefali.dev" target="framename">Open</a>

Giúp kiểm soát trải nghiệm người dùng khi điều hướng trên trang web.

18. Cung cấp thông tin bổ sung khi di chuột

Thuộc tính title hiển thị mô tả khi người dùng di chuột qua phần tử.

<p title="World Health Organization">WHO</p>

Hữu ích để giải thích các thuật ngữ hoặc nội dung quan trọng.

19. Giới hạn loại tệp được tải lên

Bạn có thể sử dụng thuộc tính accept để giới hạn loại tệp mà người dùng có thể tải lên.

<input type="file" accept="image/png, image/jpeg" />

Hữu ích cho các biểu mẫu yêu cầu tệp ảnh, tài liệu cụ thể.

20. Tối ưu hóa tốc độ tải video

Thuộc tính preload trong thẻ <video> giúp kiểm soát cách trình duyệt tải video để tối ưu hiệu suất.

<video src="video.mp4" preload="auto">
   Your browser does not support the video tag.
</video>

Giúp cải thiện trải nghiệm phát video mượt mà hơn.

Lời kết

Với 20 mẹo HTML trên, bạn không chỉ giúp trang web của mình hoạt động hiệu quả hơn mà còn cải thiện trải nghiệm người dùng và tối ưu SEO. Dù bạn là người mới bắt đầu hay đã có kinh nghiệm, việc áp dụng các mẹo này sẽ giúp bạn viết mã HTML gọn gàng, dễ bảo trì và thân thiện hơn với trình duyệt lẫn người dùng.

VietnamWorks inTECH