5 Mẹo về HTML mà không ai kể bạn biết

Tất cả các web developer đều phải sử dụng đến HTML một cách thành thạo, mặc cho những ngôn ngữ Backend hoặc Framework nào mà bạn lựa chọn.

Framework và những ngôn ngữ lập trình mới có thể xuất hiện và biến mất nhưng HTML sẽ luôn tồn tại. Mặc cho sử phổ biến rộng rãi ấy, vẫn còn đó những thẻ và thuộc tính mà hầu như các developer đều không biết đến.

Và mặc dù có khá nhiều template engine như Pug, bạn vẫn cần phải có một sự hiểu biết; nắm bắt rõ ràng về HTML cũng như là CSS.

Theo quan điểm cá nhân của tôi, tốt hơn hết là sử dụng những tính năng của HTML bất cứ khi nào có thể thay vì là sử dụng những tính năng tương tự vậy mà cần đến JavaScript mặc dù tôi thừa nhận với bạn rằng việc viết bằng HTML có thể trở nên thật nhàm chán và lặp đi lặp lại.

Mặc dù có nhiều developer sử dụng HTML thường xuyên, họ cũng không hay cố gắng thử phát triển sản phẩm của mình cũng như thực sự khai thác những tính năng hiếm khi được nhắc đến trong HTML.

Dưới đây là 5 thẻ và thuộc tính HTML bạn nên biết:

1. Lazy loading image – “Trì hoãn việc tải ảnh”

Trì hoãn việc tải hình ảnh có thể giúp nâng cao tốc độ xử lý và phản hồi của một trang web.

Tính năng này ngăn chặn việc tải những hình ảnh không thực sự cần thiết lên màn hình hiển thị ngay lập tức. Tuy nhiên, khi bạn lăn chuột xuống gần hơn với hình ảnh đó thì nó sẽ bắt đầu được tải và hiển thị.

Nói một cách khác là hình ảnh sẽ được tải khi mà người dùng lăn chuột đến, nếu không, nó sẽ không được tải.

Điều này có thể đạt được bằng cách sử dụng HTML thuần túy rất dễ dàng.

Tất cả những gì bạn cần làm là thêm thuộc tính loading=”lazy” cho tệp hình ảnh của bạn.

Hình ảnh của bạn sẽ nhìn giống như này sau khi thêm thuộc tính đó vào:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Bạn có thể có được những thông tin chi tiết về dung lượng byte mà bạn đã tiết kiệm được với mẹo này thông qua việc sử dụng công cụ Lighthouse của Google.

2. Input suggestions – “Gợi ý điền”

Việc nhận những gợi ý có ích và có liên quan khi bạn đang cố gắng tìm kiếm thông tin cho một thứ gì đó rất hữu ích.

Gợi ý; đề xuất thông tin nhập vào và tự động điền được biết đến phổ biến trong thời gian gần đây và bạn chắc chắn sẽ nhận ra nó trên những trang web như Google và Facebook đó.

Bạn có thể sử dụng JavaScript để thêm những gợi ý nhập liệu bằng cách thiết lập Event listener lên những vùng nhập liệu và đối chiếu cụm từ tìm kiếm với các đề xuất đã được thiết lập từ trước.

Mặc dù vậy, HTML cho phép bạn thể hiện một tập các đề xuất (đã được xác định từ trước), sử dụng thẻ <datalist>.

Hãy nhớ rằng ID của thẻ này bắt buộc phải được đặt trùng với danh sách các thuộc tính của vùng nhập liệu.

<label for="country">Choose your country from the list:</label>
<input list="countries" name="country" id="country">

<datalist id="countries">
  <option value="UK">
  <option value="Germany">
  <option value="USA">
  <option value="Japan">
  <option value="India">
</datalist>

3. Picture tag – “Thẻ hình ảnh”

Liệu đã bao giờ bạn gặp phải vấn đề về hình ảnh khi nó mở rộng; kéo dãn ra không được đẹp như bạn kỳ vọng hay không? Còn tôi thì chắc chắn đã gặp phải khá nhiều lần rồi đó.

Nó thường xuyên xảy ra khi bạn cố gắng tạo một trang thư viện hình ảnh hoặc sử dụng những ảnh có kích thước lớn và dùng nó làm ảnh thumbnail.

Khi bạn thay đổi chiều rộng khung hình, bạn có thể sẽ nhận ra rằng một vài hình ảnh đang bị kéo dãn hoặc thu hẹp lại không như mong đợi.

May mắn thay, HTML cho phép các developer một cơ hội để sửa chữa khá là đơn giản chỉ bằng cách sử dụng thẻ <pictures> - nó cho phép bạn thêm vào rất nhiều ảnh vừa vặn với nhiều kích thước chiều rộng khác nhau thay vì chỉ 1 tỷ lệ tăng/giảm.

Đoạn code của bạn lúc này trông sẽ giống đoạn dưới dây:

<picture>
  <source media="(min-width:768px)" srcset="med_flag.jpg">
  <source media="(min-width:495px)" srcset="small_flower.jpg">
  <img src="high_flag.jpg" alt="Flags" style="width:auto;">
</picture>

Bạn có thể thấy, chúng ta đã chỉ định một độ rộng tối thiểu mà tại đó hình ảnh chắc chắn sẽ phải được hiển thị.

Thẻ này sẽ được áp dụng tương tự với thẻ <audio> và thẻ <video> nhé.

4. Base URL – “Địa chỉ cơ sở”

Đây là một trong những thẻ mà tôi yêu thích nhất khi mà tạo chỉ mục hoặc sơ đồ của một trang web.

Thẻ này sẽ rất có ích khi mà bạn có nhiều thẻ liên kết chuyển hướng tới một địa chỉ URL được chỉ định và tất cả địa chỉ URL ấy đều bắt đầu chung một địa chỉ cơ sở.

Ví dụ này, nếu bạn muốn chị định địa chỉ URL cho Twitter của Elon Musk và Bill Gates, phần bắt đầu của (miền) URL sẽ giống nhau nhưng những gì ở sau đó sẽ là ID tương ứng của họ.

Thông thường, tôi sẽ phải sao chép và dán 2 lần với cùng một tên miền.

Mặc dù vậy, HTML có thẻ <base> - thứ sẽ cho phép bạn đặt một địa chỉ URL cơ sở như bên dưới:

<head>
  <base href="https://www.twitter.com/" target="_blank">
</head>

<body>
<img src="elonmusk" alt="Elon Musk">
<a href="BillGates">Bill Gate</a>
</body>

Đoạn code bên trên sẽ tạo ra một hình ảnh chuyển hướng đến https://www.twitter.com/elonmusk và một thẻ liên kết chuyển hướng đến trang https://www.twitter.com/billgates.

Thẻ <base> bắt buộc phải có thuộc tính “href” hoặc một thuộc tính đích.

5. Document refresher – “Làm mới văn bản”

Nếu bạn muốn chuyển hướng người dùng đến một trang web khác sau một khoảng thời gian gián đoạn hoặc kể cả là ngay lập tức đi nữa, bạn có thể làm điều đó rất dễ dàng chỉ với việc sử dụng không gì khác ngoài HTML thuần túy.

Bạn cũng có thể nhận thấy tính năng này khi mà mở một số trang web nhất định với dòng chữ “Bạn sẽ được chuyển hướng sau 5 giây” bật lên.

Hành vì này được đưa vào trong HTML và bạn có thể sử dụng nó thông qua thẻ <meta> cùng với việc cài thiệt lập http-equiv= “refresh” lên nó.

<meta http-equiv="refresh" content="4; URL='https://google.com' />

Đây là một thuộc tính content cho phép chỉ định số giây mà sau đó việc chuyển hướng trang web sẽ được xảy ra.

Điều đáng chú ý là mặc dù Google tuyên bố hình thức chuyển hướng này giống như hầu hết các hình thức chuyển hướng khác, nhưng nó sẽ thực sự không khôn ngoan cho lắm nếu phải sử dụng đến nó, trừ khi bạn bắt buộc phải làm như vậy.

Do đó, hãy chỉ sử dụng nó trong một vài trường hợp nhất định như là chuyển hướng một trang sau một khoảng thời gian không hoạt động đáng kể chẳng hạn.

Lời chia sẻ cuối cùng

HTML và CSS đều rất mạnh mẽ và nó giúp bạn có thể hoàn thiện những trang web tuyệt vời chỉ bởi việc sử dụng mỗi chúng.

Tuy nhiên, bất chấp việc sử dụng rất nhiều 2 ngôn ngữ này nhưng nhiều developer không thực sự đào sâu tìm kiếm cũng như tìm thấy niềm vui với chúng.

 Còn đó rất nhiều những mẹo vặt, những thủ thuật hay bên cạnh nhưng điều tôi vừa chia sẻ với các bạn ở trên và chắc chắn rằng, chúng đáng để bạn thử một lần trong dự án của bạn đó.

Học hỏi bất cứ thứ gì và trở nên thật thành thạo đòi hỏi phải có nhiều thời gian, sự đầu tư và thực hành mà trong đó, HTML không phải là một ngoại lệ.

Hy vọng rằng bạn sẽ cảm thấy thích thú với bài viết và những chia sẻ vừa rồi của tôi.

Bài viết được biên dịch từ Java Script in Plain English.