Các Thẻ Khi Thiết Kế Web


Cấu trúc (Structure)

Document Root: `<html>` - Bao gồm toàn bộ tài liệu HTML.
Head: `<head>` - Chứa metadata về tài liệu (tiêu đề, mã hóa ký tự).
Body: `<body>` - Chứa nội dung hiển thị của trang web.

Tiêu đề (Headings)

`<h1>` đến `<h6>` - Định nghĩa các tiêu đề với các kích cỡ khác nhau,
`<h1>` là lớn nhất và `<h6>` là nhỏ nhất.

Liên kết (Links)

<a href="url">Text</a> - Tạo một siêu liên kết đến URL cụ thể.
Hình ảnh (Images)
<img src="image.jpg" alt="Mô tả"> - Chèn một hình ảnh với văn
bản mô tả (quan trọng cho tính truy cập).

Danh sách (Lists)

<ul> - Danh sách không thứ tự (các dấu đầu dòng - bullet points).
<ol> - Danh sách có thứ tự (đánh số - numbered).
<li> - Mục trong danh sách.

Bảng (Tables)

<table> - Định nghĩa một bảng. (Defines a table)
<caption> - Chú thích bảng. (Table caption)
<tr> - Hàng của bảng. (Table row)
<th> - Ô tiêu đề của bảng. (Table header cell)
<td> - Ô dữ liệu của bảng. (Table data cell)

Biểu mẫu (Forms)

<form> - Định nghĩa một biểu mẫu cho nhập liệu của người dùng.
(Defines a form for user input)
<input type="text"> - Trường nhập liệu văn bản. (Text input field)
<input type="password"> - Trường nhập mật khẩu.
(Password input field)
<input type="checkbox"> - Hộp kiểm. (Checkbox)
<input type="radio"> - Nút radio. (Radio button)
<textarea> - Trường nhập văn bản nhiều dòng.
(Multi-line text input field)
<select> - Danh sách thả xuống. (Dropdown list)
<button> - Nút bấm (có thể có nhiều chức năng khác nhau).
(Button (can have various functionalities))

Các phần tử nâng cao (Advanced Elements)

<header> - Chứa nội dung giới thiệu. (Container for introductory content)
<footer> - Chứa thông tin về tác giả, bản quyền, v.v., thường ở phía dưới cùng.
(Contains information about the author, copyright, etc., typically at the
bottom)
<nav> - Đại diện cho một phần của các liên kết điều hướng.
(Represents a section of navigational links)
<section> - Định nghĩa một phần nội dung chung. (Defines a generic section of
content)
<article> - Đại diện cho một phần nội dung tự chứa, có thể tái sử dụng (ví dụ:
bài đăng trên blog). (Represents a self-contained, reusable piece of content
(e.g., blog post))
<aside> - Nội dung liên quan gián tiếp đến nội dung chính của tài liệu (ví dụ:
thanh bên). (Content indirectly related to the document's main content (e.g.,
sidebar))
<figure> - Định nghĩa nội dung tự chứa với một chú thích (ví dụ: hình ảnh,
video). (Defines self-contained content with a caption (e.g., image, video))
<iframe> - Nhúng một trang web khác vào trong trang hiện tại. (Embeds
another webpage within the current page)

 Lớp và IDs (Classes and IDs)

class - Được sử dụng để gán một kiểu dáng hoặc hành vi cho một
hoặc nhiều phần tử (thường được sử dụng với CSS).
Ví dụ, <p class="important"> Đây là một đoạn văn quan trọng.</p>
id - Định danh duy nhất một phần tử cho mục đích kiểu dáng
hoặc viết mã cụ thể.
Ví dụ, <h1 id="main-heading">Chào mừng!</h1>

 Comments

- Được sử dụng để thêm ghi chú hoặc hướng dẫn không hiển thị trên trang web nhưng vẫn hiện diện trong mã nguồn. (Used to include notes or instructions that are not displayed on the webpage but are visible in the code)

Khai báo Doctype

<!DOCTYPE html> - Định nghĩa loại tài liệu là HTML.
(Defines the document type as HTML.)

Thực thể (Entities)

- Các ký tự đặc biệt có thể được biểu diễn bằng các thực thể HTML (ví dụ: &copy; cho ký hiệu bản quyền).
(Special characters can be represented using HTML entities (e.g., &copy; for copyright symbol))


Xác thực biểu mẫu (Form Validation)

HTML cung cấp các thuộc tính xác thực biểu mẫu cơ bản (ví dụ:
required, pattern) để đảm bảo người dùng nhập dữ liệu hợp lệ.

Rememeber

Khoảng trắng và Thụt đầu dòng: Mặc dù không bắt buộc, việc
thụt đầu dòng và tạo khoảng trống đúng cách khi viết mã HTML
sẽ làm cho mã của bạn dễ đọc hơn và dễ bảo trì hơn.
Xác thực: Xác thực mã HTML của bạn bằng cách sử dụng các công
cụ trực tuyến hoặc công cụ phát triển của trình duyệt để đảm bảo
rằng nó tuân thủ các thông số kỹ thuật. 



Nhận xét