Bạn đang xem : quy ước về tên thẻ html

HTML

Hướng dẫn tạo kiểu

Mã HTML nhất quán, rõ ràng và gọn gàng giúp người khác đọc và hiểu mã của bạn dễ dàng hơn.

Dưới đây là một số nguyên tắc và mẹo để tạo mã HTML tốt.

Luôn khai báo loại tài liệu

Luôn khai báo loại tài liệu là dòng đầu tiên trong tài liệu của bạn.

Loại tài liệu chính xác cho HTML là:

& lt;! html DOCTYPE & gt;

Sử dụng Tên phần tử viết thường

HTML cho phép trộn chữ hoa và chữ thường trong tên phần tử.

Tuy nhiên, chúng tôi khuyên bạn nên sử dụng tên phần tử viết thường vì:

  • Việc trộn lẫn 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 dễ viết hơn

Tốt:

& lt; body & gt;
& lt; p & gt; Đây là một đoạn văn. & lt; / p & gt;
& lt; / body & gt;

Xấu:

& lt; CƠ THỂ & gt;
& lt; p & gt; Đây là một đoạn văn. & lt; / p & gt;
& lt; / BODY & gt;

Đóng tất cả các phần tử HTML

Trong HTML, bạn không phải đóng tất cả các phần tử (ví dụ: phần tử & lt; p & gt; ).

Tuy nhiên, chúng tôi thực sự khuyên bạn nên đóng tất cả các phần tử HTML, như sau:

Tốt:

& lt; section & gt;
& lt; p & gt; Đây là một đoạn văn. & lt; / p & gt;
& lt; p & gt; Đây là một đoạn văn. & lt; / p & gt;
& lt; / section & gt;

Kém:

& lt; section & gt;
& lt; p & gt; Đây là một đoạn văn.
& lt; p & gt; Đây là một đoạn văn.
& lt; / phần & gt;

Sử dụng Tên thuộc tính chữ thường

HTML cho phép trộn chữ hoa và chữ thường trong tên thuộc tính.

Tuy nhiên, chúng tôi khuyên bạn nên sử dụng tên thuộc tính chữ thường, vì:

  • Việc trộn lẫn 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 dễ viết hơn

Tốt:

& lt; a href = “https://www.w3schools.com/html/” & gt; Truy cập hướng dẫn HTML của chúng tôi & lt; / a & gt;

Kém:

& lt; a HREF = “https://www.w3schools.com/html/” & gt; Truy cập hướng dẫn HTML của chúng tôi & lt; / a & gt;

Luôn trích dẫn các giá trị thuộc tính

HTML cho phép các giá trị thuộc tính không có dấu ngoặc kép.

Tuy nhiên, chúng tôi khuyên bạn nên trích dẫn các giá trị thuộc tính vì:

  • Các nhà phát triển thường trích dẫn các giá trị thuộc tính
  • Các giá trị được trích dẫn 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

Tốt:

& lt; bảng
class = “sọc” & gt;

Xấu:

& lt; table class = sọc & gt;

Rất tệ:

Điều này sẽ không hoạt động vì giá trị chứa khoảng trắng:

& lt; table class = table sọc & gt;

Luôn chỉ định thay thế, chiều rộng và chiều cao cho Hình ảnh

Luôn chỉ định thuộc tính alt cho hình ảnh. Thuộc tính này quan trọng nếu hình ảnh
vì một số lý do không thể hiển thị.

Ngoài ra, hãy luôn xác định width
chiều cao
của hình ảnh. Đ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 dung lượng cho
hình ảnh trước khi tải.

Tốt:

& lt; img
src = “html5.gif” alt = “HTML5” style = “width: 128px; height: 128px” & gt;

Kém:

& lt; img
src = “html5.gif” & gt;

Dấu cách và Dấu 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.

Tốt:

& lt; link rel = “stylesheet” href = “styles.css” & gt;

Lỗi:

liên kết & lt;
rel = “stylesheet” href = “styles.css” & gt;

Tránh các dòng mã dài

Khi sử dụng trình chỉnh sửa HTML, không thuận tiện khi cuộn sang phải và sang trái để đọc mã HTML.

Cố gắng tránh các dòng mã 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 dấu cách thụt lề. Không sử dụng phím tab.

Tốt:

& lt; body & gt;

& lt; h1 & gt; Các Thành phố Nổi tiếng & lt; / h1 & gt;

& lt; h2 & gt; Tokyo & lt; / h2 & gt;
& lt; p & gt; Tokyo là thủ đô của Nhật Bản,
trung tâm của Khu vực Đại Tokyo, và hầu hết
khu vực đô thị đông dân trên thế giới. & lt; / p & gt;

Xem Thêm  Hướng dẫn C ++ - cách tạo một lớp trong c ++

& lt; h2 & gt; London & lt; / h2 & gt;
& lt; p & gt; London là thủ đô của nước Anh. Nó là thành phố đông dân nhất
ở Vương quốc Anh. & lt; / p & gt;

& lt; h2 & gt; Paris & lt; / h2 & gt;
& lt; p & gt; 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. & lt; / p & gt;

& lt; / body & gt;

Xấu:

& lt; body & gt;
& lt; h1 & gt; Các Thành phố Nổi tiếng & lt; / h1 & gt;
& lt; h2 & gt; Tokyo & lt; / h2 & gt; & lt; p & gt; Tokyo là thủ đô của Nhật Bản,
trung tâm của Khu vực Đại Tokyo, và hầu hết
khu vực đô thị đông dân trên thế giới. & lt; / p & gt;
& lt; h2 & gt; London & lt; / h2 & gt; & lt; p & gt; London
là thành phố thủ đô của nước Anh. Đây là thành phố đông dân nhất ở Hoa Kỳ
Vương quốc. & Lt; / p & gt;
& lt; h2 & gt; Paris & lt; / h2 & gt; & lt; p & gt; 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. & Lt; / p & gt;
& lt; / body & gt;

Ví dụ về bảng tốt:

& lt; bảng & gt;
& lt; tr & gt;
& lt; th & gt; Tên & lt; / th & gt;
& lt; th & gt; Mô tả & lt; / th & gt;

& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; A & lt; / td & gt;
& lt; td & gt; Mô tả về A & lt; / td & gt;

& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; B & lt; / td & gt;
& lt; td & gt; Mô tả về B & lt; / td & gt;
& lt; / tr & gt;
& lt; / table & gt;

Ví dụ về danh sách tốt:

& lt; ul & gt;
& lt; li & gt; London & lt; / li & gt;
& lt; li & gt; Paris & lt; / li & gt;

& lt; li & gt; Tokyo & lt; / li & gt;
& lt; / ul & gt;

Không bao giờ Bỏ qua & lt; title & gt; Phần tử

Phần tử & lt; title & gt; 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.

Phần tử & lt; title & gt; :

  • 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ể:

& lt; title & gt; HTML
Hướng dẫn Kiểu và Quy ước Mã hóa & lt; / title & gt;

Bỏ qua & lt; html & gt; và & lt; body & gt ;?

Trang HTML sẽ xác thực mà không có & lt; html & gt;
Thẻ & lt; body & gt; :

Ví dụ

& lt;! DOCTYPE html & gt;
& lt; head & gt;
& lt; title & gt; Tiêu đề Trang & lt; / title & gt;
& lt; / head & gt;

& lt; h1 & gt; Đây là tiêu đề & lt; / h1 & gt;
& lt; p & gt; Đây là một đoạn văn. & lt; / p & gt;

Hãy tự mình thử »

Tuy nhiên, chúng tôi thực sự khuyên bạn nên luôn thêm & lt; html & gt;
Thẻ & lt; body & gt; !

Việc bỏ qua & lt; body & gt; có thể gây ra lỗi trong các trình duyệt cũ hơn.

Bỏ qua & lt; html & gt; & lt; body & gt;
cũng có thể làm hỏng phần mềm DOM và XML.

Bỏ qua & lt; head & gt ;?

HTML & lt; head & gt; thẻ cũng có thể
được bỏ qua.

Trình duyệt sẽ thêm tất cả các phần tử trước & lt; body & gt; , vào & lt; head & gt; mặc định
phần tử.

Ví dụ

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; title & gt; Tiêu đề Trang & lt; / title & gt;
& lt; body & gt;

Xem Thêm  Cách tạo Mô-đun Python, hướng dẫn đầy đủ - cách tạo một mô-đun trong python

& lt; h1 & gt; Đây là tiêu đề & lt; / h1 & gt;
& lt; p & gt; Đây là một đoạn văn. & lt; / p & gt;

& lt; / body & gt;
& lt; / html & gt;

Hãy tự mình thử »

Tuy nhiên, chúng tôi khuyên bạn nên sử dụng thẻ & lt; head & gt; .

Đóng các phần tử HTML trống?

Trong HTML, tùy chọn đóng các phần tử trống.

Được phép:

& lt; meta
charset = “utf-8” & gt;

Cũng được phép:

& lt; meta charset = “utf-8” / & gt;

Nếu bạn muốn phần mềm XML / XHTML truy cập vào trang của mình, hãy giữ
dấu gạch chéo đóng (/), vì nó là bắt buộc trong XML và XHTML.

Thêm thuộc tính lang

Bạn phải luôn bao gồm thuộc tính lang
bên trong & lt; html & gt;thẻ , để 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ụ

& lt;! DOCTYPE html & gt;
& lt; html lang = “en-us” & gt;
& lt; head & gt;
& lt; title & gt; Tiêu đề Trang & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;

& lt; h1 & gt; Đây là
tiêu đề & lt; / h1 & gt;
& lt; p & gt; Đây là một đoạn văn. & lt; / p & gt;

& lt; / body & gt;
& lt; / html & gt;

Hãy tự mình thử »

Dữ liệu meta

Để đảm bảo diễn giải thích hợp 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ự & lt; meta charset = "charset" & gt; phải được xác định càng sớm càng tốt trong tài liệu HTML:

& lt;! DOCTYPE html & gt;
& lt; html
lang = “en-us” & gt;
& lt; head & gt;
& lt; meta charset = “UTF-8” & gt;

& lt; title & gt; Tiêu đề Trang & lt; / title & gt;
& lt; / head & gt;

Đặt chế độ xem

Chế độ xem 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 so với trên màn hình máy tính.

Bạn nên bao gồm phần tử & lt; meta & gt; sau trong tất cả các trang web của mình:

& lt; meta name = “viewport” content = “width = device-width, initial-scale = 1.0” & gt;

Đ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 đặt chiều rộng của trang theo chiều rộng màn hình của thiết bị (sẽ thay đổi tùy theo thiết bị). < / p>

Phần initial-scale = 1.0 đặt mức thu phóng ban đầu khi trang được tải lần đầu tiên bởi trình duyệt.

Đây là ví dụ về trang web không có thẻ meta chế độ xem và cùng một trang web có thẻ meta chế độ xem:

Mẹo: Nếu bạn đang duyệt trang này bằng điện thoại hoặc máy tính bảng, bạn có thể nhấp vào hai liên kết bên dưới để xem sự khác biệt.

Nhận xét HTML

Các nhận xét ngắn nên được viết trên một dòng, như thế này:

& lt;! – Đây là một nhận xét – & gt;

Các nhận xét kéo dài nhiều hơn một dòng, nên được viết như thế này:

& lt;! –
Đây là một ví dụ về nhận xét dài. Đây là
một ví dụ về nhận xét dài.
Đây là một
ví dụ bình luận dài. Đây là một ví dụ về nhận xét dài.
– & gt;

Các nhận xét dài sẽ dễ quan sát hơn nếu chúng được thụt lề với hai khoảng trắng.

Sử dụng Bảng định kiểu

Sử dụng cú pháp đơn giản để liên kết đến các biểu định kiểu (
thuộc tính type
là không cần thiết):

& lt; link rel = “stylesheet” href = “styles.css” & gt;

Các quy tắc CSS ngắn có thể được viết dưới dạng nén, như sau:

p.intro {font-family: Verdana; font-size: 16em;}

Các quy tắc CSS dài phải được viết trên nhiều dòng:

nội dung {
background-color: lightgrey;
font-family: “Arial
Màu đen “, Helvetica, sans-serif;
font-size: 16em;
color:
màu đen;
}

  • Đặt dấu ngoặc mở trên cùng dòng với bộ chọn
  • Sử dụng một dấu cách 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ả dấu chấm 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
Xem Thêm  Cách chèn ngày vào bảng cơ sở dữ liệu MySQL - cách viết ngày tháng trong câu lệnh insert trong sql

Đang tải JavaScript trong HTML

Sử dụng cú pháp đơn giản để tải các tập lệnh bên ngoài (
thuộc tính type
là không cần thiết):

& lt; script src = “myscript.js” & gt;

Truy cập các phần tử HTML 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:

Truy cập Hướng dẫn về kiểu JavaScript .

Sử dụng tên tệp chữ thường

Một số máy chủ web (Apache, Unix) phân biệt chữ hoa chữ thường đối với tên tệp: không thể truy cập “london.jpg” bằng
“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 bằng
“London.jpg”.

Nếu 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, dù nhỏ
lỗi 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 tệp viết thường!

Phần mở rộng Tệp

Các tệp HTML phải có phần mở rộng .html (cho phép .htm ).

Các tệp CSS phải có phần mở rộng .css .

Các tệp 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 phần mở rộng tệp .htm và .html!

Cả hai sẽ
được mọi trình duyệt web và máy chủ web coi là HTML.

Tên tệp mặc định

Khi URL không chỉ định tên tệp ở cuối (như “https://www.w3schools.com/”),
máy chủ chỉ thêm tên tệp mặc định, chẳng hạn như “index.html”,
“index.htm”, “default.html” hoặc “default.htm”.

Nếu máy chủ của bạn chỉ được định cấu hình với “index.html” làm tên tệp mặc định,
tệp phải được đặt tên là “index.html” chứ không phải “default.html”.

Tuy nhiên, máy chủ có thể được định cấu hình với nhiều tên tệp mặc định;
thông thường, bạn có thể thiết lập bao nhiêu tên tệp mặc định tùy thích.


Xem thêm những thông tin liên quan đến chủ đề quy ước tên thẻ html

how to create cards design using html and css

  • Tác giả: CoadWithAR
  • Ngày đăng: 2022-06-22
  • Đánh giá: 4 ⭐ ( 1907 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: how to create cards design using html and css

    html
    css
    CssCards

Quy ước và phong cách viết HTML5

  • Tác giả: tedu.com.vn
  • Đánh giá: 3 ⭐ ( 1626 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu về phong cách viết code phù hợp với các chuẩn HTML5. Giúp mã nguồn của bạn gọn gàng, sạch sẽ và đúng định dạng.

Chuẩn viết code HTML và HTML5

  • Tác giả: hocjavascript.net
  • Đánh giá: 5 ⭐ ( 8763 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Là một lập trình viên có bao giờ bạn đặt ra câu hỏi liệu cách thức viết code cũng như cú pháp mà mình sử dụng liệu đã theo đúng chuẩn HTML?

10 QUY ƯỚC ĐẶT TÊN TRONG JAVASCRIPT

  • Tác giả: niithanoi.edu.vn
  • Đánh giá: 3 ⭐ ( 6276 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 10 Quy ước đặt tên trong JavaScript này cho bạn một hướng dẫn chung khi đặt tên biến, tên hàm, tên lớp hoặc tên các component trong JavaScript.

Phần 6: Các Thẻ Input trong HTML — HTML Cheat Sheet

  • Tác giả: www.stdio.vn
  • Đánh giá: 5 ⭐ ( 3819 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các loại thẻ hỗ trợ nhập liệu chuỗi, số, mật khẩu, … trong HTML.

Định dạng chuẩn và quy ước viết code trong HTML5

  • Tác giả: devmaster.edu.vn
  • Đánh giá: 4 ⭐ ( 5674 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các nhà lập trình web thường không thống nhất kiểu viết code và cú pháp khi sử dụng HTML. Vào thời gian từ năm 2000 đến 2010, nhiều lập trình viên đã chuyển cách viết từ HTML sang XHTML – ngôn ngữ đòi hỏi cú pháp được viết một cách đúng chuẩn nghiêm ngặt (well-formed)., Đào tạo lập trình viên chuyên nghiệp – php – .net – java – android – ios – c – C++,C#, Tư vấn thiết kế và xậy dựng phần mềm, thiết kế website

Quy ước đặt tên tiêu chuẩn cho id và các lớp html / css là gì?

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 6389 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Không có cái nào cả. Tôi sử dụng dấu gạch dưới mọi lúc, do dấu gạch…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php