Luôn khai báo Document Type
Luôn khai báo document type ở dòng đầu tiên trong tài liệu của bạn.
Cú pháp khai báo document type như sau:
<!DOCTYPE html>Sử dụng chữ thường cho tên Element
HTML cho phép sử dụng lẫn chữ hoa và chữ thường trong tên element.
Tuy nhiên, chúng tôi khuyên bạn nên sử dụng tên element viết thường, bởi vì:
- Việc trộn giữa tên viết hoa và viết thường trông rất tệ
- Các nhà phát triển thường sử dụng tên viết thường
- Chữ thường trông gọn gàng hơn
- Chữ thường sẽ dễ viết hơn
Nên
<body> <p>Đoạn văn bản.</p> </body>Không nên
<BODY> <P>Đoạn văn bản.</P> </BODY>Đóng tất cả HTML Element
Trong HTML, bạn không phải đóng tất cả các element (ví dụ: phần tử <p>).
Tuy nhiên, chúng tôi thực sự khuyên bạn nên đóng tất cả các HTML element, như sau:
Nên
<section> <p>Đoạn văn bản.</p> <p>Đoạn văn bản.</p> </section>Không nên
<section> <p>Đoạn văn bản <p>Đoạn văn bản. </section>
Dùng chữ thường cho tên Attribute
HTML cho phép sử dụng lẫn chữ hoa và chữ thường trong tên attribute. Tuy nhiên, chúng tôi khuyên bạn nên sử dụng tên attribute chữ thường, bởi vì:
- Việc trộn giữa tên viết hoa và viết thường trông rất tệ
- Các nhà phát triển thường sử dụng tên viết thường
- Chữ thường trông gọn gàng hơn
- Chữ thường sẽ dễ viết hơn
Nên
<a href="https://truonghoclaptrinh.com/html.html">Hướng dẫn HTML</a>Không nên
<a HREF="https://truonghoclaptrinh.com/html.html">Hướng dẫn HTML</a>
Luôn dùng để giá trị Attribute trong dấu ngoặt kép
HTML cho phép các giá trị attribute không có dấu ngoặc kép.
Tuy nhiên, chúng tôi khuyên bạn nên để giá trị attribute trong dấu ngoặt kép, bởi vì:
- Các nhà phát triển thường để giá trị attribute trong dấu ngoặt kép
- Các giá trị được để trong dấu ngoặt kép sẽ dễ đọc hơn
- Bạn PHẢI sử dụng dấu ngoặc kép nếu giá trị chứa khoảng trắng
Nên
<table class="striped">Không nên
<table class=striped>Gây ra lỗi
<table class=table striped>
Luôn chỉ định các attribute alt, width và height cho image
Luôn chỉ định attribute alt cho image. Attribute này rất quan trọng nếu image vì lý do nào đó không thể hiển thị.
Ngoài ra, hãy luôn xác định width và height của image. Điều này làm giảm hiện tượng nhấp nháy, vì trình duyệt có thể dành không gian cho image trước khi tải.
Nên
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Không nên
<img src="html5.gif">
Không nên chừa khoảng trắng trước các phép bằng
HTML cho phép khoảng trắng xung quanh các dấu bằng. Nhưng không gian ít hơn sẽ dễ đọc hơn và nhóm các thực thể lại với nhau tốt hơn.
Nên
<link rel="stylesheet" href="styles.css">Không nên
<link rel = "stylesheet" href = "styles.css">
Tránh các dòng code dài
Khi sử dụng trình soạn thảo HTML, không thuận tiện khi cuộn sang phải và sang trái để đọc code HTML.
Cố gắng tránh các dòng code quá dài.
Dòng trống và thụt lề
Không thêm dòng trống, khoảng trắng hoặc thụt lề mà không có lý do.
Để dễ đọc, hãy thêm các dòng trống để phân tách các khối mã lớn hoặc hợp lý.
Để dễ đọc, hãy thêm hai khoảng cách thụt lề. Không sử dụng phím tab.
Nên
<body> <h1>Thành phố nổi tiếng</h1> <h2>Tokyo</h2> <p>Tokyo là thủ đô của Nhật Bản, trung tâm của Khu vực Đại Tokyo, và là khu vực đô thị đông dân nhất trên thế giới.</p> <h2>Luân Đôn</h2> <p>Luân Đôn là thành phố thủ đô của nước Anh. Đây là thành phố đông dân nhất ở Vương quốc Anh</p> <h2>Paris</h2> <p>Paris là thủ đô của Pháp. Khu vực Paris là một trong những trung tâm dân số lớn nhất ở Châu Âu.</p> </body>
Không nên
<body> <h1>Thành phố nổi tiếng</h1> <h2>Tokyo</h2> <p>Tokyo là thủ đô của Nhật Bản, trung tâm của Khu vực Đại Tokyo, và là khu vực đô thị đông dân nhất trên thế giới.</p> <h2>Luân Đôn</h2> <p>Luân Đôn là thành phố thủ đô của nước Anh. Đây là thành phố đông dân nhất ở Vương quốc Anh</p> <h2>Paris</h2> <p>Paris là thủ đô của Pháp. Khu vực Paris là một trong những trung tâm dân số lớn nhất ở Châu Âu.</p> </body>
Không bỏ qua <title> Element
<title> elemtent là bắt buộc trong HTML. Nội dung của tiêu đề trang rất quan trọng đối với việc tối ưu hóa công cụ tìm kiếm (SEO)! Tiêu đề trang được sử dụng bởi các thuật toán của công cụ tìm kiếm để quyết định thứ tự khi liệt kê các trang trong kết quả tìm kiếm.
<title> element:
- xác định tiêu đề trong thanh công cụ của trình duyệt
- cung cấp tiêu đề cho trang khi nó được thêm vào mục yêu thích
- hiển thị tiêu đề cho trang trong kết quả của công cụ tìm kiếm
Vì vậy, hãy cố gắng đặt tiêu đề chính xác và có ý nghĩa nhất có thể:
<title>HTML Coding Style</title>
Bỏ qua <html> và <body>?
Trang HTML sẽ vẫn hoạt động nếu không có thẻ <html> và <body>:
Ví dụ
<!DOCTYPE html> <head> <title>Tiêu đề trang</title> </head> <h1>Tiêu đề</h1> <p>Đoạn văn bản.</p>Tuy nhiên, chúng tôi thực sự khuyên bạn nên luôn thêm các thẻ <html> và <body>!
Việc bỏ qua <body> có thể tạo ra lỗi trong các trình duyệt cũ hơn.
Việc bỏ qua <html> và <body> cũng có thể làm hỏng phần DOM và XML.
Bỏ qua <head>?
Thẻ HTML <head> cũng có thể được bỏ qua.
Trình duyệt sẽ thêm tất cả các phần tử trước <body>, vào một phần tử <head> mặc định.
Ví dụ
<!DOCTYPE html> <html> <title>Tiêu đề trang</title> <body> <h1>Tiêu đề</h1> <p>Đoạn văn.</p> </body> </html>Tuy nhiên, chúng tôi khuyên bạn nên sử dụng thẻ <head>.
Đóng Empty HTML Elements?
Trong HTML, có thể có hoặc không đóng các empty element.
Ví dụ
<meta charset="utf-8">
Hoặc
<meta charset="utf-8" />Nếu bạn muốn phần mềm XML / XHTML truy cập trang của mình, hãy giữ dấu gạch chéo đóng (/), vì nó bắt buộc phải có trong XML và XHTML.
Thêm lang Attribute
Bạn phải luôn khai báo attribute lang bên trong thẻ <html>, để khai báo ngôn ngữ của trang Web. Điều này có nghĩa là để hỗ trợ các công cụ tìm kiếm và trình duyệt.
Ví dụ
<!DOCTYPE html> <html lang="en-us"> <head> <title>Tiêu đề trang</title> </head> <body> <h1>Tiêu đề</h1> <p>Đoạn văn bản.</p> </body> </html>
Meta Data
Để đảm bảo các thông tin và lập chỉ mục công cụ tìm kiếm chính xác, cả ngôn ngữ và mã hóa ký tự <meta charset = "charset"> phải được xác định càng sớm càng tốt trong tài liệu HTML:
Ví dụ
<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="UTF-8"> <title>Tiêu đề trang</title> </head>
Cài đặt Viewport
Viewport là vùng hiển thị của người dùng trên một trang web. Nó thay đổi theo thiết bị - nó sẽ nhỏ hơn trên điện thoại di động hơn là trên màn hình máy tính.
Bạn nên đưa <meta> element sau vào tất cả các trang web của mình.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Điều này cung cấp cho trình duyệt hướng dẫn về cách kiểm soát kích thước và tỷ lệ của trang.
Phần width = device-width sẽ đặt chiều rộng của trang tuân theo chiều rộng màn hình của thiết bị (sẽ thay đổi tùy theo thiết bị).
Đây là ví dụ về một trang web không có thẻ meta viewport và một trang web có thẻ meta viewport:
HTML Comments
Comment ngắn nên được viết trên một dòng, như thế này:
<!-- Đây là comment trong HTML-->Comment kéo dài nhiều hơn một dòng, nên được viết như thế này:
<!-- Đây là comment dài trong HTML. Đây là comment dài trong HTML. Đây là comment dài trong HTML. Đây là comment dài trong HTML. -->Comment dài sẽ dễ quan sát hơn nếu chúng được thụt vào trong hai khoảng trắng.
Sử dụng Style Sheets
Sử dụng cú pháp đơn giản để link đến các style sheets (type attribute không cần thiết):
<link rel="stylesheet" href="styles.css">Các quy tắc CSS ngắn có thể được viết ngắn gọn, như sau:
p.intro {font-family:Verdana;font-size:16em;}Các quy tắc CSS dài có thể được như sau:
body { background-color: lightgrey; font-family: "Arial Black", Helvetica, sans-serif; font-size: 16em; color: black; }- Đặt dấu ngoặc mở trên cùng dòng với bộ chọn
- Sử dụng một khoảng trắng trước dấu ngoặc mở
- Sử dụng hai dấu cách thụt lề
- Sử dụng dấu chấm phẩy sau mỗi cặp thuộc tính-giá trị, bao gồm cả cặp giá trị cuối cùng
- Chỉ sử dụng dấu ngoặc kép xung quanh giá trị nếu giá trị chứa khoảng trắng
- Đặt dấu ngoặc đóng trên một dòng mới, không có dấu cách ở đầu
Loading JavaScript trong HTML
Sử dụng cú pháp đơn giản để tải các script bên ngoài (type attribute không cần thiết):
<script src="myscript.js">
Truy cập các HTML element bằng JavaScript
Sử dụng mã HTML "không gọn gàng" có thể dẫn đến lỗi JavaScript.
Hai câu lệnh JavaScript này sẽ tạo ra các kết quả khác nhau.
Ví dụ
getElementById("Demo").innerHTML = "Hello"; getElementById("demo").innerHTML = "Hello";Sử dụng chữ thường cho tên File
Một số máy chủ web (Apache, Unix) phân biệt chữ hoa chữ thường về tên file: "london.jpg" cannot be accessed as "London.jpg".
Các máy chủ web khác (Microsoft, IIS) không phân biệt chữ hoa chữ thường: "london.jpg" có thể được truy cập dưới dạng "London.jpg".
Nếu bạn sử dụng kết hợp chữ hoa và chữ thường, bạn phải lưu ý điều này.
Nếu bạn chuyển từ một máy chủ không phân biệt chữ hoa chữ thường sang một máy chủ phân biệt chữ hoa chữ thường, thì ngay cả những lỗi nhỏ cũng sẽ phá vỡ web của bạn!
Để tránh những vấn đề này, hãy luôn sử dụng tên file viết thường!
Đuôi file
File HTML phải có đuôi .html (hoặc .htm).
File CSS phải có phần mở rộng .css.
File JavaScript phải có phần mở rộng .js.
Sự khác biệt giữa .htm và .html?
Không có sự khác biệt giữa đuôi file .htm và .html!
Cả hai sẽ được coi là HTML bởi bất kỳ trình duyệt web và máy chủ web nào.
Tên File mặc định
Khi một URL không chỉ định tên file ở cuối (như "https://www.w3schools.com/"), máy chủ chỉ cần thêm tên file mặc định, chẳng hạn như "index.html", "index.htm", " Mặc định.html "hoặc" DEFAULT.htm ".
Nếu máy chủ của bạn được cấu hình với "index.html" là tên file mặc định, file của bạn phải được đặt tên là "index.html" và không phải "default.html".
Tuy nhiên, các máy chủ có thể được cấu hình với nhiều hơn một tên file mặc định; thông thường bạn có thể thiết lập bao nhiêu tên file mặc định như bạn muốn.