Lập trình
Tra cứu thẻ, phần tử, thuộc tính, vùng trang, điều khiển biểu mẫu và nhãn hỗ trợ tiếp cận.
51 mục
Cơ bản
Tag
<header>...</header>Một từ khóa đánh dấu được bao bọc trong dấu ngoặc góc, cho trình duyệt biết loại phần tử nào cần tạo.
Sử dụng tên thẻ khi mục tiêu là một loại phần tử rộng, chẳng hạn như mọi nút hoặc mọi liên kết.
<header>...</header>Thay đổi kiểu (style) của tất cả các thẻ button bên trong phần tiêu đề.
Cơ bản
Element
<button>Menu</button>Một đoạn mã HTML hoàn chỉnh, thường được tạo từ một thẻ bắt đầu, nội dung và một thẻ kết thúc.
Nói "element" khi bạn có nghĩa là một phần hiển thị của trang, chẳng hạn như tiêu đề, thẻ hoặc nút.
<button>Menu</button>Di chuyển phần tử chuyển đổi ngôn ngữ cạnh nút menu.
Cơ bản
Attribute
<a href="/ko">Home</a>Thông tin bổ sung được viết bên trong thẻ mở, chẳng hạn như href, class, id, src hoặc aria-label.
Các thuộc tính hữu ích khi cùng một thẻ xuất hiện nhiều lần nhưng chỉ một thẻ có một lớp, id hoặc nhãn cụ thể.
<a href="/ko">Home</a>Thêm thuộc tính aria-label cho nút menu chỉ có biểu tượng.
Cơ bản
Opening and closing tag
<section>Content</section>Nhiều phần tử bắt đầu bằng thẻ mở và kết thúc bằng thẻ đóng tương ứng.
Điều này giúp giải thích vị trí bắt đầu và kết thúc của một phần trong mã đánh dấu.
Một thẻ đóng bị thiếu có thể khiến trình duyệt coi nội dung sau đó là một phần của phần tử không chính xác.
<section>Content</section>Kiểm tra xem phần thẻ có các thẻ mở và đóng khớp nhau hay không.
Tài liệu
DOCTYPE
<!doctype html>Một khai báo hướng dẫn trình duyệt hiển thị tài liệu dưới dạng HTML hiện đại.
Nó thường được xử lý bởi framework và hiếm khi được chỉnh sửa trong quá trình phát triển thành phần.
<!doctype html>Không thay đổi loại tài liệu; chỉ chỉnh sửa thành phần trang.
Tài liệu
html
<html lang="ko">...</html>Phần tử gốc bao bọc toàn bộ tài liệu HTML.
Phần tử HTML được sử dụng cho các cài đặt trên toàn bộ tài liệu, chẳng hạn như các thuộc tính ngôn ngữ hoặc chủ đề.
<html lang="ko">...</html>Đặt thuộc tính `lang` của HTML chính xác cho từng ngôn ngữ.
Tài liệu
head
<head><title>...</title></head>Khu vực tài liệu cho siêu dữ liệu, tiêu đề, biểu tượng, thẻ SEO và các tập lệnh không phải là nội dung trang hiển thị.
Sử dụng thuật ngữ này khi yêu cầu thay đổi tiêu đề SEO, mô tả, URL chuẩn (canonical URL) hoặc siêu dữ liệu.
<head><title>...</title></head>Cập nhật tiêu đề siêu dữ liệu cho trang các thuật ngữ cấu trúc HTML.
Tài liệu
body
<body>Visible page</body>Khu vực tài liệu chứa nội dung trang hiển thị.
Hầu hết các chỉnh sửa bố cục, tiêu đề, menu và công cụ xảy ra bên trong phần thân.
<body>Visible page</body>Giữ màu nền của phần thân nhất quán ở chế độ sáng và tối.
Tài liệu
title
<title>AI Engineering Tools</title>Tiêu đề trang hiển thị trong tab trình duyệt và thường được sử dụng bởi các công cụ tìm kiếm.
Sử dụng khi tiêu đề H1 hiển thị là tốt, nhưng tiêu đề trình duyệt hoặc SEO cần thay đổi.
<title>AI Engineering Tools</title>Làm cho tiêu đề trình duyệt cụ thể hơn mà không thay đổi tiêu đề trang hiển thị.
Tài liệu
meta
<meta name="description" content="...">Các thẻ siêu dữ liệu mô tả trang, vùng hiển thị, mã hóa hoặc thông tin xem trước trên mạng xã hội.
Meta descriptions affect previews and search snippets, not visible page text. (Mô tả siêu dữ liệu ảnh hưởng đến bản xem trước và đoạn trích tìm kiếm, không phải văn bản hiển thị trên trang.)
<meta name="description" content="...">Cập nhật mô tả meta để đề cập đến các thuật ngữ HTML có thể tìm kiếm.
Vùng trang
header
<header>...</header>Một khu vực ngữ nghĩa dành cho nội dung giới thiệu hoặc điều hướng chính.
Sử dụng `header` khi bạn muốn nhắm mục tiêu đến tiêu đề trang, điều hướng trên cùng, nút chủ đề, nút ngôn ngữ hoặc nút menu.
<header>...</header>Di chuyển phần tử chuyển đổi ngôn ngữ vào các điều khiển tiêu đề cạnh nút menu.
Vùng trang
nav
<nav>...</nav>Một khu vực ngữ nghĩa dành cho các liên kết điều hướng chính.
Sử dụng "nav" khi chỉnh sửa các liên kết danh mục, nhóm menu hoặc điều hướng trang.
<nav>...</nav>Nhóm các liên kết điều hướng bên trong phần "nav" theo Converter, Math và Programming.
Vùng trang
main
<main>...</main>Khu vực nội dung chính của một trang. Một trang thường có một phần tử chính.
Sử dụng "main" để phân biệt nội dung trang với tiêu đề, chân trang hoặc menu.
<main>...</main>Giữ menu nổi phía trên nội dung chính mà không đẩy nó xuống.
Vùng trang
section
<section>...</section>Một nhóm chủ đề các nội dung liên quan, thường có tiêu đề.
Sử dụng "section" khi nhắm mục tiêu một khối trang lớn, chẳng hạn như phần tiêu đề, công cụ hoặc nội dung tham khảo.
<section>...</section>Giảm khoảng đệm dọc của phần công cụ trên thiết bị di động.
Vùng trang
article
<article>...</article>Một mục nội dung độc lập, chẳng hạn như một thẻ, bài đăng, mục tham khảo hoặc kết quả.
Sử dụng thẻ article khi mỗi thẻ lặp lại có tiêu đề và nội dung riêng.
<article>...</article>Làm cho mỗi bài viết thuật ngữ ngắn gọn hơn trên máy tính để bàn.
Vùng trang
aside
<aside>...</aside>Một khu vực hỗ trợ nội dung liên quan đến nội dung chính, thường là một thanh bên hoặc ghi chú.
Sử dụng thẻ aside khi yêu cầu một bảng điều khiển bộ lọc, điều hướng bên hoặc ghi chú hỗ trợ để di chuyển.
<aside>...</aside>Di chuyển phần phụ trợ xuống dưới nội dung chính trên thiết bị di động.
Vùng trang
footer
<footer>...</footer>Một khu vực dưới cùng cho các liên kết pháp lý, điều hướng phụ, thông tin liên hệ hoặc nội dung đóng.
Sử dụng `footer` khi bạn muốn nhắm mục tiêu đến phần dưới cùng của trang thay vì phần dưới cùng của một phần.
<footer>...</footer>Thêm một nhóm liên kết pháp lý nhỏ vào chân trang.
Nội dung
Heading
<h1>Page title</h1>Một thẻ tiêu đề từ `h1` đến `h6` giúp tạo cấu trúc cho nội dung trang.
Sử dụng mức tiêu đề khi bạn muốn thay đổi thứ bậc, không chỉ kích thước hiển thị.
Không chọn h1 hoặc h2 chỉ vì kích thước; hãy sử dụng CSS cho kích thước trực quan và tiêu đề cho cấu trúc tài liệu.
<h1>Page title</h1>Giữ tiêu đề trang là h1 và đặt tiêu đề thẻ là h2 hoặc h3.
Nội dung
p
<p>Description text.</p>Một đoạn văn bản.
Sử dụng "paragraph" khi thay đổi văn bản mô tả hoặc khoảng cách của nó.
<p>Description text.</p>Rút ngắn đoạn văn dưới tiêu đề chính.
Nội dung
a
<a href="/ko/tools/math-prompt">Start</a>Một phần tử liên kết điều hướng đến một trang, tuyến đường, tệp hoặc vị trí khác.
Sử dụng neo hoặc liên kết khi một phần tử di chuyển đến một vị trí khác thay vì thực hiện hành động tại chỗ.
<a href="/ko/tools/math-prompt">Start</a>Thay đổi liên kết "Công cụ" để nó cuộn đến phần công cụ.
Nội dung
List
<ul><li>Item</li></ul>Một nhóm các mục liên quan, có thể không có thứ tự (sử dụng `ul`) hoặc có thứ tự (sử dụng `ol`).
Sử dụng danh sách khi cần thêm, xóa, sắp xếp lại hoặc nhóm các mục văn bản lặp lại.
<ul><li>Item</li></ul>Nhóm các mục menu thành danh sách theo loại.
Nội dung
table
<table><tr><td>Cell</td></tr></table>Một lưới có cấu trúc gồm các hàng và ô để lưu trữ dữ liệu dạng bảng.
Sử dụng bảng khi nội dung là dữ liệu hàng-cột thực tế, không chỉ là một lưới các thẻ trực quan.
<table><tr><td>Cell</td></tr></table>Sử dụng bảng cho dữ liệu bảng chân trị thay vì các khối div đơn giản.
Nội dung
code / pre
<pre><code>npm run build</code></pre>code đánh dấu văn bản mã. pre giữ lại các dòng và khoảng trắng cho mã nhiều dòng.
Sử dụng khối mã khi các lệnh hoặc ví dụ phải giữ đúng khoảng trắng.
<pre><code>npm run build</code></pre>Hiển thị các lệnh terminal trong khối `pre/code`.
Nội dung
strong / em
<strong>Important</strong>Các phần tử nhấn mạnh ngữ nghĩa. strong có nghĩa là quan trọng; em có nghĩa là nhấn mạnh.
Sử dụng chúng để nhấn mạnh ý nghĩa, không chỉ để tạo kiểu in đậm hoặc in nghiêng mang tính trang trí.
<strong>Important</strong>Sử dụng "strong" cho cụm từ cảnh báo bên trong ghi chú.
Media
img
<img src="/hero.png" alt="Tool preview">Một phần tử hiển thị tệp hình ảnh.
Sử dụng `image` khi bạn muốn thay thế, thay đổi kích thước, cắt xén hoặc thêm văn bản thay thế cho nội dung hình ảnh.
<img src="/hero.png" alt="Tool preview">Thêm thuộc tính alt rõ ràng cho hình ảnh chính (hero image).
Media
alt
<img alt="Menu panel open">Văn bản mô tả hình ảnh cho trình đọc màn hình và khi hình ảnh không thể tải.
Sử dụng thuộc tính alt khi yêu cầu cải thiện khả năng truy cập hoặc ý nghĩa của hình ảnh.
Hình ảnh trang trí có thể sử dụng văn bản thay thế trống, nhưng hình ảnh có ý nghĩa cần có mô tả hữu ích.
<img alt="Menu panel open">Thêm văn bản thay thế (alt text) giải thích những gì ảnh chụp màn hình hiển thị.
Media
svg
<svg>...</svg>Một phần tử đồ họa vector thường được sử dụng cho biểu tượng, sơ đồ và hình dạng có thể mở rộng.
Sử dụng SVG khi hình ảnh là một hình dạng đơn giản hoặc biểu tượng cần giữ được độ sắc nét.
<svg>...</svg>Sử dụng biểu tượng SVG cho nút menu nếu không có thư viện biểu tượng nào.
Biểu mẫu và điều khiển
button
<button type="button">Menu</button>Một điều khiển thực hiện một hành động khi được nhấp hoặc chạm vào.
Sử dụng nút khi điều khiển thay đổi trạng thái UI, mở menu, gửi biểu mẫu hoặc thực hiện một hành động.
Đối với điều hướng, một liên kết thường tốt hơn một nút.
<button type="button">Menu</button>Làm cho nút menu đóng menu thả xuống ngôn ngữ trước khi mở menu.
Biểu mẫu và điều khiển
form
<form>...</form>Một nhóm các điều khiển được sử dụng để thu thập và gửi dữ liệu nhập từ người dùng.
Sử dụng `form` khi các đầu vào thuộc về một lần gửi hoặc một quy trình nhập liệu.
<form>...</form>Nhóm các phần nhập liệu tìm kiếm và các điều khiển phân loại vào một khu vực điều khiển giống như biểu mẫu.
Biểu mẫu và điều khiển
label
<label for="search">Search</label>Văn bản đặt tên cho một điều khiển biểu mẫu.
Sử dụng nhãn khi một đầu vào cần có tên hiển thị hoặc thân thiện với trình đọc màn hình.
<label for="search">Search</label>Thêm một nhãn cho trường nhập liệu tìm kiếm mà không làm rối giao diện người dùng (UI).
Biểu mẫu và điều khiển
input
<input type="search" placeholder="Search">Một trường mà người dùng nhập hoặc chọn một giá trị.
Sử dụng `input` khi bạn muốn nhắm mục tiêu đến các trường tìm kiếm, các trường văn bản, số, hộp kiểm hoặc các điều khiển đơn giản khác.
<input type="search" placeholder="Search">Làm cho ô nhập liệu tìm kiếm có chiều rộng bằng toàn bộ màn hình trên thiết bị di động.
Biểu mẫu và điều khiển
select
<select><option>English</option></select>Một điều khiển hộp thả (dropdown) gốc để chọn một tùy chọn từ danh sách.
Sử dụng "select" khi điều khiển là một dropdown biểu mẫu gốc, không phải là một bảng điều khiển menu tùy chỉnh.
<select><option>English</option></select>Áp dụng kiểu dáng cho phần chọn ngôn ngữ để tùy chọn đã chọn hiển thị rõ ràng ở chế độ tối.
Biểu mẫu và điều khiển
textarea
<textarea>Long text</textarea>Một ô nhập văn bản đa dòng.
Sử dụng textarea khi người dùng cần dán hoặc chỉnh sửa văn bản dài hơn.
<textarea>Long text</textarea>Tăng chiều cao của khu vực nhập liệu văn bản để nhập yêu cầu dài.
Thuộc tính
class
<button class="icon-button">...</button>Một thuộc tính được sử dụng để nhóm các phần tử để tạo kiểu hoặc hành vi.
Thuộc tính "class" thường là cách thực tế nhất để nhắm mục tiêu đến một mẫu UI lặp lại.
<button class="icon-button">...</button>Áp dụng cùng một lớp cho tất cả các nút chuyển đổi danh mục menu.
Thuộc tính
id
<section id="tools">...</section>Một định danh duy nhất cho một phần tử trên một trang.
Sử dụng `id` khi một liên kết cần cuộn đến một phần cụ thể hoặc một nhãn phải kết nối với một đầu vào.
Cùng một ID không nên được sử dụng lại cho nhiều phần tử trên một trang.
<section id="tools">...</section>Thêm một id cho phần "công cụ" để liên kết "Duyệt công cụ" có thể cuộn đến đó.
Thuộc tính
href
<a href="/ko/reference/html-structure-terms">HTML</a>URL hoặc đoạn mã đích cho một liên kết.
Sử dụng `href` khi một liên kết trỏ đến trang hoặc phần sai.
<a href="/ko/reference/html-structure-terms">HTML</a>Thay đổi liên kết (href) của mục "Programming" trong menu để trỏ đến trang mới về cấu trúc HTML.
Thuộc tính
src
<img src="/images/example.png" alt="Example">Đường dẫn tệp nguồn cho hình ảnh, tập lệnh, iframe và các phương tiện tương tự.
Sử dụng "src" khi một hình ảnh hoặc tập lệnh bị thiếu, không chính xác hoặc cần được thay thế.
<img src="/images/example.png" alt="Example">Thay thế thuộc tính `src` của hình ảnh bằng đường dẫn mới đến hình ảnh xem trước.
Thuộc tính
data-*
<html data-theme="dark">Các thuộc tính tùy chỉnh được sử dụng để lưu trữ trạng thái hoặc siêu dữ liệu trên một phần tử.
Sử dụng thuộc tính dữ liệu khi kiểu dáng phụ thuộc vào trạng thái như chủ đề, mở, đóng hoặc đã chọn.
<html data-theme="dark">Sử dụng thuộc tính `data-theme` trên phần tử HTML để chuyển đổi màu sắc sang chế độ tối.
Khả năng truy cập
role
<div role="menu">...</div>Một thuộc tính trợ năng mô tả loại đối tượng UI mà một phần tử đại diện.
Sử dụng "role" khi một thành phần tùy chỉnh cần có ngữ nghĩa rõ ràng, chẳng hạn như menu, hộp thoại, tab hoặc cảnh báo.
Các phần tử ngữ nghĩa gốc thường tốt hơn so với việc thêm thuộc tính role vào một phần tử div chung.
<div role="menu">...</div>Đặt một vai trò menu thích hợp cho danh sách ngôn ngữ tùy chỉnh.
Khả năng truy cập
aria-label
<button aria-label="Toggle menu">...</button>Một nhãn văn bản dành cho các công nghệ hỗ trợ khi văn bản hiển thị bị thiếu hoặc không đủ.
Sử dụng thuộc tính aria-label cho các điều khiển chỉ có biểu tượng như nút menu, nút tìm kiếm, nút đóng hoặc nút chủ đề.
<button aria-label="Toggle menu">...</button>Thêm một thuộc tính aria-label để đặt tên rõ ràng cho nút menu "hamburger".
Khả năng truy cập
aria-expanded
<button aria-expanded="false">Menu</button>Một thuộc tính cho biết liệu một bảng điều khiển có đang mở hay đóng.
Sử dụng nó cho các nút thả xuống, accordion và công tắc menu.
<button aria-expanded="false">Menu</button>Cập nhật thuộc tính aria-expanded khi danh mục menu mở hoặc đóng.
Quan hệ
Parent and child
<nav><a>Link</a></nav>Một phần tử cha chứa các phần tử con bên trong nó.
Sử dụng điều này khi mục tiêu phụ thuộc vào vị trí của nó, chẳng hạn như các liên kết bên trong thanh điều hướng hoặc các nút bên trong tiêu đề.
<nav><a>Link</a></nav>Chỉ áp dụng kiểu dáng cho các liên kết là con của thanh điều hướng.
Quan hệ
Sibling
<button /> <button />Các phần tử có cùng cha mẹ là anh chị em.
Sử dụng "sibling" khi khoảng cách hoặc tương tác phụ thuộc vào các mục lân cận.
<button /> <button />Giảm khoảng cách giữa các nút tiêu đề liền kề.
Quan hệ
Nesting
<section><article><h2>Title</h2></article></section>Cấu trúc được tạo khi các phần tử được đặt bên trong các phần tử khác.
Sử dụng "nesting" khi giải thích chính xác phần tử bên trong nào cần thay đổi.
<section><article><h2>Title</h2></article></section>Trong mỗi thẻ, di chuyển ví dụ về yêu cầu xuống dưới các nút thuộc tính.
Quan hệ
Wrapper
<div class="container">...</div>Một phần tử chủ yếu được sử dụng để nhóm, giới hạn hoặc định vị các phần tử khác.
Sử dụng lớp bọc (wrapper) khi bố cục cần một phần tử bao quanh thay vì thay đổi từng phần tử con.
<div class="container">...</div>Thêm một lớp bọc (wrapper) xung quanh các điều khiển tiêu đề để thanh thả xuống có thể căn chỉnh sang phải.
Quan hệ
Container
<div class="container">Page content</div>Một lớp bọc giữ nội dung trang căn chỉnh và bị giới hạn trong một chiều rộng dễ đọc.
Sử dụng container khi thay đổi chiều rộng tổng thể của nội dung hoặc khoảng cách đệm bên.
<div class="container">Page content</div>Làm cho vùng chứa nội dung chính hẹp hơn một chút trên máy tính để bàn.
Quan hệ
Fragment
<>...</>Một lớp bọc (wrapper) được sử dụng trong React để nhóm các phần tử mà không cần thêm một phần tử DOM mới.
Sử dụng `fragment` khi nhóm các phần tử mà không ảnh hưởng đến bố cục hoặc bộ chọn CSS.
<>...</>Sử dụng một đoạn mã thay vì thêm một lớp div không cần thiết.
Khả năng truy cập
Semantic HTML
<main><section><h1>...</h1></section></main>HTML sử dụng các phần tử theo ý nghĩa của chúng, không chỉ dựa trên hình thức trực quan.
Sử dụng HTML ngữ nghĩa khi cải thiện cấu trúc, khả năng truy cập, SEO hoặc khả năng bảo trì.
<main><section><h1>...</h1></section></main>Sử dụng HTML ngữ nghĩa cho các phần trang tham khảo thay vì sử dụng các thẻ div chung ở mọi nơi.
Khả năng truy cập
Landmark
<header> <nav> <main> <footer>Các vùng quan trọng của trang giúp người dùng công nghệ hỗ trợ điều hướng nhanh chóng.
Tiêu đề, điều hướng, nội dung chính, phần phụ và chân trang có thể hoạt động như các điểm tham chiếu.
<header> <nav> <main> <footer>Giữ một điểm tham chiếu chính rõ ràng trên mỗi trang.
Khả năng truy cập
Accessible name
<button aria-label="Open menu">☰</button>Tên mà công nghệ hỗ trợ sử dụng để thông báo về một điều khiển.
Sử dụng tên có thể truy cập khi một điều khiển rõ ràng về mặt trực quan nhưng không được đặt tên cho trình đọc màn hình.
<button aria-label="Open menu">☰</button>Đặt tên rõ ràng và dễ truy cập cho công tắc chủ đề trong mọi ngôn ngữ.
Khả năng truy cập
tabindex
<button tabindex="0">Action</button>Một thuộc tính có thể ảnh hưởng đến thứ tự tập trung của bàn phím.
Sử dụng nó cẩn thận khi các điều khiển tùy chỉnh không thể truy cập bằng bàn phím.
Các giá trị tabindex dương có thể tạo ra thứ tự bàn phím gây nhầm lẫn. Thứ tự tập trung mặc định thường tốt hơn.
<button tabindex="0">Action</button>Tránh sử dụng các giá trị tabindex dương và giữ nguyên thứ tự bàn phím tự nhiên.