Hello các bạn, mình là Hoàng, hôm nay mình sẽ chia sẻ với các bạn 1 seri quay về cơ bản với lập trình web nhé. Cũng như thường lệ, chúng ta có cấu trúc các phần như sau
Bắt đầu luôn cho nóng, phần 4 chúng ta đi tìm hiểu về Conventions and Best Practices với cấu trúc tổng quan như sau
<title>
<meta>
alt
với hình ảnh<label>
cho các ô <input>
của bạnCho dù bạn là người mới bắt đầu hay là một chuyên gia về HTML, điều quan trong nhất là phải tuân theo một số thực tiễn tốt nhất để giữ cho trang của bạn nhất quán và có tổ chức. Với rất nhiều yếu tố như phần tử, thuộc tính, giá trị,… và nhiều hơn thế nữa.
Dưới đây là một số cách thực hành tốt nhất về HTML cần nhớ khi thực hiện dự án của bạn.
Các trang web vẫn sẽ hoạt động nếu không có các phần tử như <!DOCTYPE html>
, <html>
, <head>
, <body>
. Tuy nhiên các trang sẽ không được hiển thị đúng với mọi trình , vì vậy điều quan trọng là phải sử dụng cấu trúc tài liệu phù hợp.
Việc sử dụng đầy đủ các phần tử trên giữ cho các trang tuân thủ các tiêu chuẩn và đầy đủ ngữ nghĩa (semantic) cũng như đảm bảo các trang hiển thị tốt nhất trên tất cả các trình duyệt.
<title>
Thẻ <title>
giúp làm cho một trang web có ý nghĩa hơn và thân thiện với công cụ tìm kiếm.
Ví dụ: nội dung bên trong thẻ <title>
sẽ xuất hiện trong trang kết quả của công cụ tìm kiếm Google, cũng như trong thanh và tab trình duyệt web của người dùng.
<meta>
<meta>
thường được sử dụng để chỉ định bộ ký tự, mô tả trang, từ khóa, tác giả của tài liệu và cài đặt chế độ xem.<meta>
mô tả mô tả mục đích cơ bản trang web của bạn (tóm tắt về những gì trang web chứa). Đối với mỗi trang web, bạn nên đặt một bản tóm tắt có liên quan bên trong thẻ mô tả <meta>
.<meta charset="UTF-8">
: Xác định bộ ký tự được sử dụng.<meta name="keywords" content="HTML, CSS, JavaScript">
: Xác định từ khóa cho công cụ tìm kiếm.<meta name="description" content="Free Web tutorials">
: Xác định một mô tả của trang web của bạn.<meta name="author" content="John Doe">
: Xác định tác giả của trang.<meta http-equiv="refresh" content="30">
: Làm mới tài liệu sau 30 giây.<meta name="viewport" content="width=device-width, initial-scale=1.0">
: Cài đặt chế độ xem phù hợp trên tất cả các trình duyệt.Đừng dùng thẻ <div>
ở mọi nơi
<div>
là một yếu tố vô nghĩa nên được sử dụng là một giải pháp cuối cùng, vì khi không có yếu tố nào khác phù hợp.<section>
, <main>
,… giúp các thành phần trong trang của bạn trở nên có nghĩa hơn.Bạn có thể đọc thêm về Semantic tại đây nhé!
<h1>
đến <h6>
.<h1>
nên được sử dụng cho các tiêu đề chính, tiếp theo là các tiêu đề <h2>
, sau đó các tiêu đề <h3>
ít quan trọng hơn, v.v.Trong một số trường hợp, việc bạn không đóng thẻ hay đóng thẻ sai thứ tự sẽ không làm ảnh hưởng đến trang web, nhưng nó sẽ không đảm bảo mọi trình duyệt có thể hiển thị như mong muốn. Vì thế, hãy mở và đóng thẻ theo đúng tiêu chuẩn.
Ví dụ:
<p>Hello World! <span>This is my page</p></span>
Oh no!!! Đừng làm như vậy, hãy coi việc lồng thẻ như những chiếc hộp vậy, hộp ở trong sẽ được đóng trước hộp bên ngoài.
Mặc dù HTML không phân biệt chữ hoa chữ thường, nhưng nếu một trang HTML lộn xộn giữa các thẻ chữ hoa và chữ thường thì chắc chắn sẽ gây khó chịu cho người khác khi đọc code của bạn.
alt
với hình ảnhKhông bắt buộc phải có thuộc tính alt
cho hình ảnh, nhưng nó sẽ giúp ích cho trang web của bạn khi gặp sự cố (ví dụ như đặt sai đường dẫn, sự cố về internet khiến không thể hiển thị hình ảnh,…). Mặt khác nó còn cung cấp ngữ caảnh cho trình đọc màn hình. Do đó, nội dung của thuộc tính alt
là mô tả những gì hình ảnh chứa.
<label>
cho các ô <input>
của bạnBạn hoàn toàn có thể tạo ra nhãn gắn cho các trường nhập bằng nhiều cách khác nhau. Nhưng hãy dùng thẻ <label>
vì nó có thể tạo ra liên kết đến các trường (khi click vào nhãn, con trỏ sẽ được focus vào phần tử liên kết với nó).
Điều này sẽ làm cho biểu mẫu của bạn dễ sử dụng hơn đối với người dùng và cải thiện chất lượng mã của bạn.
inline style
trong HTML. Làm như vậy sẽ tạo ra các trang mất nhiều thời gian hơn để tải, khó bảo trì. Thay vào đó, sử dụng kiểu external style
, sử dụng các class
hoặc id
để nhắm mục tiêu các phần tử và áp dụng các kiểu nếu cần.@hoangpn - Better every day!
Quick Links
Social Media