A. Mở đầu

Xin chào mọi người, sau bài các mẹo viết tailwind thì hôm nay mình sẽ viết về các mẹo để viết HTML tiện lợi mà có thể bạn chưa biết

B. Các mẹo viết HTML

1. Tối ưu hoá phát video trong html5

<video src="video.mp4" preload="auto">
</video>

Khi thêm preload="auto" vào thẻ video thì video sẽ được tải toàn bộ khi bạn tải trang. Từ đó việc phát lại sẽ được mượt hơn rất nhiều. Tuy nhiên cần sử dụng thẻ này đúng cách, vì khi bạn tải trang, tất cả thẻ video có thuộc tính preload = auto sẽ tự động tải toàn bộ về đấy nhé.

2. Chỉnh sửa nội dung text ngay trên trình duyệt

<p contenteditable="true">This is an editable paragraph.</p>

Trong ví dụ này mình lấy thẻ p, tuy nhiên thì thuộc tính contenteditable có thể áp dụng cho hầu hết các thẻ, chỉ cần thẻ đó bọc một nội dung là kí tự. Khi một thẻ được kích hoạt thuộc tính contenteditable thì các nội dung bên trong nó có thể được người dùng chỉnh sửa ngay khi chạy trên trình duyệt mà không cần phải F12 hoặc mở dev tool.

Bạn có thể sử dụng thuộc tính này cho các project như CV hoặc các project mà người dùng có thể chỉnh sửa nội dung tuỳ thích rồi save lại.

3. Ảnh nền video

<video controls poster="image.png">
</video>

Bạn có thể thiết lập ảnh nền mặc định cho một video bằng thuộc tính poster. Khi này ảnh image.png sẽ là ảnh thu nhỏ của video.

4. Thu gọn/ hiển thị nội dung thông tin

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

Khi sử dụng thẻ details và thẻ summary, bạn có thể tạo dễ dàng ẩn đi hoặc hiển thị nội dung của thẻ p

Cách này không cần css và js gì cả, tuy nhiên nó sẽ không được đẹp mắt bằng việc dùng css và js. Nhưng một số trường hợp nó sẽ có ích, ví dụ như dành cho các bạn mới học, hoặc đơn giản mấy khách hàng Nhật thích vậy =))))

5. Tạo link liên lạc

<a href="mailto:name@example.com"> Send Email </a>
<a href="tel:+12345"> Call Us </a>
<a href="sms:+12345"> Send SMS </a>

Khi bạn thêm các dòng như mailto, tel, sms vào trong nội dung của thuộc tính href. Khi người dùng nhấn vào các link thì nó sẽ tự động nhảy qua các app tương ứng. Những bạn nào đang làm portfolio thì nên lưu lại để dùng

6. Tạo dropdown nâng cao hơn

<select  name="cars" id="cars">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Thẻ optgroup sẽ giúp chúng ta gom các option lại thành từng nhóm, nếu list option của bạn quá dài thì phải phải gom lại để người dùng có thể sử dụng dễ dàng hơn

7. Tắt tính năng dịch ngôn ngữ

<p translate="no">Don't translate this!</p>
<p>This can be translated to any language.</p>

Bạn có thể thêm thuộc tính translate vào element bất kì để thông báo với trình duyện không tự động dịch chúng sang ngôn ngữ khác. Thẻ này rất có ích đối với các website share bài viết về code. Những bạn yếu tiếng anh hay có thói quen dịch cả trang sang tiếng việt, và những đoạn code cũng bị dịch sang luôn làm người đọc không hiểu được. Thuộc tính này sẽ khắc phục những điều đó

8. Độ dài dữ liệu của thẻ input

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

Vậy là bạn không cần sử dụng js để xử lý độ dài kí tự của input rồi. Chỉ cần sử dụng thuộc tính maxlength và minlength thì html sẽ giúp bạn xử lý việc này

9. Thêm phụ đề cho video

<video controls>
    <source type="video/mp4" src="https:abc" />
    <track kind="subtitles" src="https:abc" srclang="en" label="English" />
</video>

Khi bạn thêm thẻ track trong thẻ video, thì trình duyệt sẽ tự thêm tuỳ chọn phụ đề cho bạn

C. Tổng kết

Bên trên là những tips html mà mình đã sưu tầm được, nếu bài viết của mình có sai sót hoặc bạn có những mẹo html hữu ích thì đừng ngại mà bình luận bên dưới để mình cập nhật lại bài viết nhé