Bảng tham chiếu nhanh HTML về cú pháp và các tác vụ thông dụng
Khi làm việc với HTML, sẽ rất tiện nếu có một cách nhanh chóng để ghi nhớ cách dùng các thẻ HTML đúng cách và cách áp dụng chúng. MDN cung cấp cho bạn tài liệu tham chiếu HTML đầy đủ cũng như một bộ hướng dẫn HTML chuyên sâu. Tuy nhiên, trong nhiều trường hợp chúng ta chỉ cần một vài gợi ý nhanh khi làm việc. Đó chính là mục đích của bảng tham chiếu này — cung cấp những đoạn mã sẵn dùng, chính xác và nhanh chóng cho các tình huống phổ biến.
Note: Các thẻ HTML phải được sử dụng theo giá trị ngữ nghĩa của chúng, không phải theo hình thức hiển thị. Bạn hoàn toàn có thể thay đổi giao diện của một thẻ bất kỳ bằng CSS, vì vậy khi sử dụng HTML, hãy tập trung vào ý nghĩa thay vì hình thức.
Phần tử nội tuyến
Một "phần tử" là một thành phần đơn lẻ của trang web. Một số phần tử lớn và chứa các phần tử nhỏ hơn bên trong, giống như các vùng chứa. Một số phần tử nhỏ và được "lồng" bên trong các phần tử lớn hơn. Theo mặc định, "phần tử nội tuyến" xuất hiện cạnh nhau trên một trang web. Chúng chỉ chiếm đúng phần chiều rộng cần thiết và xếp ngang với nhau như các từ trong một câu hoặc những cuốn sách xếp cạnh nhau trên kệ. Tất cả các phần tử nội tuyến đều có thể được đặt bên trong phần tử <body>.
| Cách dùng | Phần tử | Ví dụ |
|---|---|---|
| Một liên kết | <a> |
html |
| Một hình ảnh | <img> |
html |
| Vùng chứa nội tuyến | <span> |
html |
| Nhấn mạnh văn bản | <em> |
html |
| Chữ in nghiêng | <i> |
html |
| Chữ in đậm | <b> |
html |
| Văn bản quan trọng | <strong> |
html |
| Tô sáng văn bản | <mark> |
html |
| Văn bản gạch ngang | <s> |
html |
| Chỉ số dưới | <sub> |
html |
| Chữ nhỏ | <small> |
html |
| Địa chỉ | <address> |
html |
| Trích dẫn văn bản | <cite> |
html |
| Chỉ số trên | <sup> |
html |
| Trích dẫn nội tuyến | <q> |
html |
| Ngắt dòng | <br> |
html |
| Vị trí ngắt dòng tuỳ chọn | <wbr> |
html |
| Ngày giờ | <time> |
html |
| Định dạng mã nguồn | <code> |
html |
| Âm thanh | <audio> |
html |
| Video | <video> |
html |
Phần tử khối
"Phần tử khối", ngược lại, chiếm toàn bộ chiều rộng của trang web. Chúng cũng chiếm trọn một dòng; chúng không xếp cạnh nhau theo chiều ngang. Thay vào đó, chúng xếp chồng lên nhau như các đoạn văn trong một bài luận hoặc các khối đồ chơi trong một tòa tháp.
Note:
Vì bảng tham chiếu này chỉ giới hạn ở một số phần tử đại diện cho các cấu trúc cụ thể hoặc có ngữ nghĩa đặc biệt, phần tử div không được đưa vào một cách có chủ ý — vì phần tử div không đại diện cho bất cứ điều gì và không có ngữ nghĩa đặc biệt nào.
| Cách dùng | Phần tử | Ví dụ |
|---|---|---|
| Một đoạn văn đơn giản | <p> |
html |
| Trích dẫn dài | <blockquote> |
html |
| Thông tin bổ sung | <details> |
html |
| Danh sách không có thứ tự | <ul> |
html |
| Danh sách có thứ tự | <ol> |
html |
| Danh sách định nghĩa | <dl> |
html |
| Đường kẻ ngang | <hr> |
html |
| Tiêu đề văn bản | <h1>-<h6> |
html |