1.Tạo liên kết liên hệ
Tạo liên kết có thể nhấp chuột để gửi email, thực hiện cuộc gọi điện thoại và gửi tin nhắn SMS bằng HTML:
<!-- Email link -->
<a href="mailto:[email protected]"> 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 các thẻ <details> và <summary> khi bạn muốn bao gồm nội dung có thể thu gọn trên trang web của bạn.Thẻ <details> tạo một khối chứa cho nội dung ẩn, trong khi thẻ <summary> cung cấp một nhãn có thể nhấp chuột để chuyển đổi hiển thị của nội dung đó.
<details>
<summary>Click to expand</summary>
<p>This content can be expanded or collapsed.</p>
</details>
3.Sử dụng các phần tử ngữ nghĩa
Hãy chọn các phần tử ngữ nghĩa thay vì các phần tử không ngữ nghĩa cho trang web của bạn. Chúng làm cho mã của bạn có ý nghĩa và cải thiện cấu trúc, khả dụng và SEO.
4.Nhóm các phần tử biểu mẫu
Sử dụng thẻ <fieldset> để nhóm các phần tử liên quan trong một biểu mẫu và thẻ <legend> cùng với <fieldset> để xác định tiêu đề cho thẻ <fieldset>.Điều này rất hữu ích để tạo ra các biểu mẫu hiệu quả hơn và dễ truy cập hơn.
<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.Nâng cao tính năng của menu thả xuống
Bạn có thể sử dụng thẻ <optgroup> để nhóm các tùy chọn liên quan trong thẻ <select> HTML.Điều này có thể được sử dụng khi bạn làm việc với menu thả xuống lớn hoặc một danh sách dài các tùy chọn.
<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 trình chiếu video
Thuộc tính poster có thể được sử dụng với phần tử <video> để hiển thị một hình ảnh cho đến khi người dùng chạy video.
<video controls poster="image.png" width="500">
<source src="video.mp4" type="video/mp4 />
</video>
7.Hỗ trợ chọn nhiều lựa chọn
Bạn có thể sử dụng thuộc tính multiple với các phần tử <input> và <select> để cho phép người dùng chọn/điền nhiều giá trị cùng một 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ị văn bản dưới dạng chữ nhỏ và chữ lớn
Các phần tử <sub> và <sup> có thể được sử dụng để hiển thị văn bản dưới dạng chữ nhỏ (subscript) và chữ lớn (superscript) tương ứng.
9.Tạo liên kết tải xuống
Bạn có thể sử dụng thuộc tính download với phần tử <a> để chỉ định khi người dùng nhấp vào liên kết, nguồn tài nguyên liên kết sẽ được tải xuống thay vì điều hướng đến nó.
<a href="document.pdf" download="document.pdf"> Download PDF </a>
10.Xác định URL cơ sở cho các 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 đường dẫn tương đối trong một trang web.
Điều này rất hữu ích khi bạn muốn tạo một điểm bắt đầu chung cho tất cả các đường dẫn tương đối trên một trang web, giúp dễ dàng điều hướng và tải các tài nguyên.
<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 việc tải ảnh
Thuộc tính loading với phần tử <img> có thể được sử dụng để kiểm soát cách trình duyệt tải ảnh. Nó có ba giá trị: 'eager', 'lazy' và 'auto'.
<img src="picture.jpg" loading="lazy">
12.Quản lý tính năng dịch
Bạn có thể sử dụng thuộc tính translate để xác định liệu nội dung của một phần tử có nên được dịch bởi tính năng dịch của trình duyệt hay không.
<p translate="no">
This text should not be translated.
</p>
13.Thiết lập độ dài tối đa của đầu vào
Bằng cách sử dụng thuộc tính maxlength, bạn có thể đặt số ký tự tối đa mà người dùng có thể nhập vào một trường nhập liệu.
<input type="text" maxlength="4">
14.Thiết lập độ dài tối thiểu của đầu vào
Bằng cách sử dụng thuộc tính minlength, bạn có thể đặt số ký tự tối thiểu mà người dùng có thể nhập vào một trường nhập liệu.
<input type="text" minlength="3">
15.Cho phép chỉnh sửa nội dung
Sử dụng thuộc tính contenteditable để xác định xem nội dung của phần tử có thể chỉnh sửa hay không.Nó cho phép người dùng chỉnh sửa nội dung bên trong phần tử.
<div contenteditable="true">
You can edit this content.
</div>
16.Kiểm soát việc kiểm tra chính tả
Bạn có thể sử dụng thuộc tính spellcheck với các phần tử <input>, các phần tử có khả năng chỉnh sửa nội dung và các phần tử <textarea> để bật hoặc tắt chức năng kiểm tra chính tả của trình duyệt.
<input type="text" spellcheck="true"/>
17.Đảm bảo khả năng truy cập
Thuộc tính alt chỉ định một văn bản thay thế cho một hình ảnh nếu hình ảnh không thể hiển thị.Luôn luôn bao gồm các thuộc tính alt mô tả cho hình ảnh để cải thiện khả năng truy cập và tối ưu hóa công cụ tìm kiếm (SEO).
<img src="picture.jpg" alt="Description for the image">
18.Xác định hành vi mục tiêu cho các liên kết
Bạn có thể sử dụng thuộc tính target để chỉ định nơi một tài nguyên liên kết sẽ được hiển thị khi nhấp vào.
<!-- 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>
19.Cung cấp thông tin bổ sung
Thuộc tính title có thể được sử dụng để cung cấp thông tin bổ sung về một phần tử khi người dùng di chuột qua phần tử đó.
<p title="World Health Organization">WHO</p>
20.Chấp nhận các loại tệp tin cụ thể
Bạn có thể sử dụng thuộc tính accept để chỉ định các loại tệp tin được chấp nhận bởi máy chủ (chỉ dành cho loại tệp tin). Điều này được sử dụng với phần tử <input>.
<input type="file" accept="image/png, image/jpeg" />
21.Tối ưu hóa việc tải video
Bạn có thể làm cho tệp video tải nhanh hơn để phát trực tiếp mượt mà bằng cách sử dụng thuộc tính preload với phần tử <video>.
<video src="video.mp4" preload="auto">
Your browser does not support the video tag.
</video>
