Hướng dẫn HTML - Style Guide: Hướng dẫn cơ bản về mã hóa sạch và nhất quán
Xin chào các bạn đang học lập trình web! Chào mừng các bạn đến với hành trình vào thế giới của các hướng dẫn style guide HTML. Là người đã dạy HTML hơn một thập kỷ, tôi không thể nhấn mạnh quá mức tầm quan trọng của việc bắt đầu với thói quen mã hóa tốt. Hãy nghĩ về điều này như việc học chơi một nhạc cụ - bạn muốn làm đúng từ những bước đầu tiên!
Style Guide là gì trong HTML?
Hãy tưởng tượng bạn đang viết một cuốn sách cùng một nhóm bạn. Nếu không có một số quy tắc thỏa thuận trước, nó có thể nhanh chóng trở nên hỗn loạn, phải không? Đó là lúc style guide xuất hiện. Trong HTML, một style guide là một bộ quy tắc và thực hành tốt giúp giữ cho mã của bạn sạch sẽ, nhất quán và dễ đọc.
Bắt đầu với HTML5 Doctype
Hãy bắt đầu với dòng đầu tiên của tài liệu HTML của bạn:
<!DOCTYPE html>Dòng nhỏ này告诉浏览器, "Nào, chúng ta đang sử dụng HTML5 ở đây!" Nó giống như thông báo với bạn bè của bạn, "Chúng ta đang chơi theo quy tắc mới nhất của trò chơi!"
Xác định ngôn ngữ tài liệu
Tiếp theo, chúng ta cần thông báo cho trình duyệt ngôn ngữ của nội dung của chúng ta là gì. Chúng ta làm điều này trong thẻ <html> mở:
<html lang="en">Điều này giúp các trình đọc màn hình và công cụ tìm kiếm hiểu nội dung của bạn tốt hơn. Nó giống như đặt một biển báo "English spoken here" trên trang web của bạn!
Định nghĩa charset
Bây giờ, hãy thiết lập mã hóa ký tự:
<meta charset="UTF-8">Dòng này nằm trong phần <head> của bạn. Nó giống như告诉 máy tính của bạn, "Chúng ta đang sử dụng bộ ký tự đầy đủ ở đây, bao gồm cả các biểu tượng cảm xúc! ?"
Sử dụng chữ cái thường cho các phần tử và thuộc tính
Dưới đây là một quy tắc tốt để theo:
<section id="main-content" class="container">
<h1>Welcome to my website!</h1>
</section>Chú ý rằng tất cả đều viết thường? Nó dễ đọc hơn và ít bị lỗi hơn. Hãy nghĩ về điều này như là "giọng nói trong phòng" của lập trình!
Đặt giá trị thuộc tính trong dấu ngoặc kép
Luôn đặt các giá trị thuộc tính trong dấu ngoặc kép:
<img src="puppy.jpg" alt="A cute puppy">Điều này ngăn chặn bất kỳ vấn đề tiềm ẩn nào và làm cho mã của bạn nhất quán hơn. Nó giống như đặt hàng rào xung quanh lời của bạn để giữ chúng an toàn!
Sử dụng thẻ đóng
Luôn đóng thẻ của bạn:
<p>This is a paragraph.</p>
<div>This is a div element.</div>Thẻ mở không đóng có thể dẫn đến kết quả không mong muốn. Nó giống như đảm bảo bạn đóng cửa sau mình - nó giữ cho mọi thứ ngăn nắp!
Sử dụng indentation đúng cách
Indentation làm cho mã của bạn dễ đọc hơn:
<article>
<h2>Article Title</h2>
<p>This is the first paragraph.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</article>Indentation tốt giống như sắp xếp phòng của bạn - nó giúp bạn dễ dàng tìm thấy thứ bạn cần!
Đặt viewport
Đối với thiết kế responsive, hãy luôn bao gồm điều này trong <head> của bạn:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Điều này đảm bảo trang web của bạn trông tốt trên các thiết bị di động. Nó giống như đảm bảo trang web của bạn có một bộ trang phục đẹp cho mọi dịp!
Thêm bình luận
Bình luận là những ghi chú cho chính bạn và các nhà phát triển khác:
<!-- Navigation menu -->
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>Bình luận giống như để lại các note dán trên mã của bạn - chúng giúp giải thích những gì đang diễn ra!
Bây giờ, hãy tóm tắt tất cả các phương pháp này trong một bảng tiện lợi:
| Phương pháp | Mô tả | Ví dụ |
|---|---|---|
| HTML5 Doctype | Khai báo phiên bản HTML | <!DOCTYPE html> |
| Xác định ngôn ngữ | Xác định ngôn ngữ tài liệu | <html lang="en"> |
| Định nghĩa charset | Định nghĩa mã hóa ký tự | <meta charset="UTF-8"> |
| Sử dụng chữ cái thường | Sử dụng chữ cái thường cho phần tử và thuộc tính | <section id="main"> |
| Đặt giá trị thuộc tính | Luôn đặt giá trị thuộc tính trong dấu ngoặc kép | <img src="image.jpg" alt="Description"> |
| Sử dụng thẻ đóng | Luôn sử dụng thẻ đóng | <p>Text</p> |
| Indentation đúng cách | Định dạng các phần tử lồng nhau | Xem ví dụ indentation ở trên |
| Đặt viewport | Đặt viewport cho responsive | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| Thêm bình luận | Sử dụng bình luận để giải thích mã | <!-- Navigation menu --> |
Nhớ rằng, việc tuân theo các hướng dẫn này sẽ làm cho mã của bạn sạch sẽ hơn, dễ đọc hơn và dễ bảo trì hơn. Nó giống như giữ cho không gian lập trình của bạn ngăn nắp - nó làm cho mọi thứ mượt mà và thú vị hơn!
Khi chúng ta kết thúc, tôi nhớ lại một học sinh đã từng nói với tôi, "Học HTML giống như xây dựng bằng LEGO. Ban đầu, nó có thể quá tải với tất cả các mảnh ghép, nhưng một khi bạn học cách chúng phù hợp với nhau, bạn có thể xây dựng bất kỳ thứ gì!" Vậy hãy tiếp tục thực hành, tiếp tục xây dựng, và quan trọng nhất, hãy vui vẻ với nó!
Chúc các bạn may mắn trong việc lập trình, các pháp sư web tương lai! ?♂️?
Credits: Image by storyset