Danh Sách Thẻ HTML Tối Ưu + Danh Sách Kiểm Tra Miễn Phí

Thẻ

Mô tả

<article>

Hãy coi thẻ này như một container cho một phần nội dung độc lập (ví dụ: bài viết blog hoặc câu chuyện tin tức) mà vẫn có ý nghĩa ngay cả khi nó tách biệt khỏi phần còn lại của trang

<aside>

Chỉ ra nội dung có liên quan gián tiếp đến nội dung xung quanh và thường được hiển thị dưới dạng thanh bên

<figcaption>

Đại diện cho một chú thích hoặc chú giải mô tả nội dung của một phần tử <figure>

<figure>

Chỉ định nội dung tự chứa mà được tham chiếu trong phần chính của tài liệu. Điều này có thể là một hình ảnh, minh họa, sơ đồ, đoạn mã, v.v.

<footer>

Chỉ định chân trang, thường chứa thông tin về tác giả, bản quyền, thông báo pháp lý và các liên kết liên quan

<header>

Chỉ ra nội dung giới thiệu cho một trang hoặc một phần. Nó thường chứa một logo, tiêu đề và có thể có điều hướng.

<main>

Đại diện cho nội dung chính. Mỗi trang chỉ nên có một phần tử <main>.

<nav>

Chứa các liên kết điều hướng. Nó dành cho các phần điều hướng chính.

<section>

Đại diện cho một nhóm nội dung theo chủ đề, thường có một tiêu đề. Đây là một phần tử phân đoạn chung nên được sử dụng khi không có phần tử ngữ nghĩa cụ thể nào khác phù hợp.

Thẻ

Mô tả

<!DOCTYPE>

Khai báo loại tài liệu (ví dụ HTML5) để đảm bảo rằng các trình duyệt web hiện đại hiển thị (tức là hiển thị) trang như mong muốn

<base>

Chỉ định URL cơ sở cho tất cả các URL tương đối trong tài liệu HTML. Thẻ này hữu ích khi nhiều liên kết trên một trang chia sẻ một đường dẫn chung.

<body>

Chứa tất cả nội dung hiển thị trong tài liệu HTML. Điều này bao gồm văn bản, hình ảnh, liên kết và tất cả các phần tử khác mà người dùng sẽ thấy.

<html>

Đại diện cho phần tử gốc của một tài liệu HTML. Nó bao bọc tất cả các nội dung HTML khác trên trang.

<head>

Chứa siêu dữ liệu về tài liệu HTML. Điều này bao gồm tiêu đề của tài liệu, bộ ký tự, liên kết đến các bảng kiểu, và các siêu dữ liệu khác được sử dụng bởi các trình duyệt và công cụ tìm kiếm

<link>

Thiết lập mối quan hệ giữa tài liệu HTML hiện tại và một tài nguyên bên ngoài. Nó thường được sử dụng để liên kết đến các bảng kiểu CSS bên ngoài điều khiển cách trình bày hình ảnh.

<meta>

Cung cấp siêu dữ liệu có cấu trúc về tài liệu HTML, chẳng hạn như một tóm tắt ngắn gọn về nội dung của trang có thể được sử dụng bởi các công cụ tìm kiếm trong các đoạn trích kết quả tìm kiếm

<noscript>

Định nghĩa nội dung sẽ được hiển thị nếu trình duyệt của người dùng không hỗ trợ scripting hoặc nếu scripting bị vô hiệu hóa. Điều này đảm bảo rằng người dùng không có JavaScript rendering vẫn có thể truy cập nội dung cơ bản.

<style>

Chứa các quy tắc CSS được áp dụng trực tiếp vào tài liệu HTML. Liên kết đến các bảng kiểu bên ngoài thường được ưa chuộng cho các dự án lớn hơn và tổ chức tốt hơn.

<script>

Được sử dụng để nhúng hoặc tham chiếu các tập lệnh có thể thực thi như JavaScript. Điều này thêm tính tương tác và hành vi động cho các trang web.

<title>

Xác định tiêu đề của tài liệu HTML. Tiêu đề này xuất hiện trong tab của trình duyệt và có thể hiển thị trên các trang kết quả của công cụ tìm kiếm (SERPs). Đây là một yếu tố xếp hạng cho Google Search.

Thẻ

Mô tả

<a>

Tạo một liên kết đến các trang web khác, tệp, vị trí trong cùng một trang hoặc địa chỉ email. Thuộc tính “href” xác định đích đến của liên kết.

<br>

Chèn một dòng ngắt đơn

<div>

Xác định một phần hoặc mục. Nó thường được sử dụng như một container để nhóm các phần tử HTML khác để định kiểu bằng CSS.

<em>

Đại diện cho văn bản được nhấn mạnh, thường được hiển thị bằng chữ nghiêng

<h1> đến <h6>

Xác định các tiêu đề, với <h1> đại diện cho tiêu đề quan trọng nhất và <h6> là ít quan trọng nhất. Những thẻ này rất quan trọng để tạo ra một hệ thống phân cấp nội dung và báo hiệu tầm quan trọng cho người dùng và các công cụ tìm kiếm.

<hr>

Đại diện cho một sự phân tách chủ đề trong nội dung, thường được hiển thị dưới dạng một đường ngang

<img>

Nhúng một hình ảnh vào tài liệu. Thuộc tính “src” xác định đường dẫn đến hình ảnh, và thuộc tính “alt” cung cấp văn bản thay thế mô tả ngắn gọn về hình ảnh.

<p>

Đại diện cho một đoạn văn bản. Nó được sử dụng để tách các khối văn bản nhằm cải thiện khả năng đọc.

<span>

Một container nội tuyến được sử dụng để đánh dấu một phần của tài liệu HTML. Nó thường được sử dụng để định kiểu các phần cụ thể của văn bản bằng CSS.

<strong>

Tạo văn bản được nhấn mạnh mạnh mẽ, thường được hiển thị bằng chữ đậm

Thẻ

Mô tả

<area>

Xác định một khu vực có thể nhấp trong một bản đồ hình ảnh

<audio>

Được sử dụng để nhúng nội dung âm thanh trong một tài liệu HTML. Nó có thể bao gồm các thuộc tính cho các điều khiển (phát, tạm dừng, âm lượng, v.v.), tự động phát và lặp lại.

<img>

Nhúng một hình ảnh vào tài liệu HTML. Thuộc tính “src” xác định đường dẫn đến hình ảnh, và thuộc tính “alt” cung cấp một mô tả ngắn gọn về hình ảnh.

<map>

Xác định một bản đồ hình ảnh, là một hình ảnh với các khu vực có thể nhấp

<picture>

Cung cấp một container cho nhiều phần tử <source> và một phần tử <img> để cung cấp các phiên bản hình ảnh khác nhau cho các tình huống hiển thị khác nhau (ví dụ: cho các kích thước hoặc độ phân giải màn hình khác nhau)

<source>

Xác định nhiều tài nguyên phương tiện cho các phần tử <audio>, <video> hoặc <picture>. Thẻ này cho phép trình duyệt chọn định dạng đầu tiên mà nó hỗ trợ.

<track>

Xác định các bản theo dõi văn bản theo thời gian (phụ đề, chú thích, mô tả, chương hoặc siêu dữ liệu) cho các phần tử <video> hoặc <audio>

<video>

Nhúng một trình phát video để hiển thị nội dung video. Các thuộc tính có thể kiểm soát phát lại, kích thước và nhiều hơn nữa.

Thẻ

Mô tả

<dd>

Mô tả một thuật ngữ trong một danh sách mô tả (<dl>)

<dl>

Tạo một danh sách mô tả, là danh sách các thuật ngữ và mô tả tương ứng của chúng

<dt>

Xác định một thuật ngữ trong một danh sách mô tả (<dl>)

<li>

Đại diện cho một mục trong danh sách có thứ tự (<ol>) hoặc không có thứ tự (<ul>)

<ol>

Tạo một danh sách có thứ tự (được đánh số)

<ul>

Tạo một danh sách không có thứ tự (được đánh dấu)

Thẻ

Mô tả

<caption>

Xác định một tiêu đề hoặc chú thích cho bảng

<col>

Xác định các thuộc tính cho mỗi cột bảng trong một phần tử <colgroup>. Ví dụ, để làm cho tất cả văn bản trong cột đầu tiên của bảng được in đậm và văn bản trong cột thứ hai căn phải.

<colgroup>

Xác định một nhóm một hoặc nhiều cột trong một bảng để định dạng. Ví dụ, đặt một màu nền cụ thể cho tất cả các ô trong một cột cụ thể của bảng bằng cách sử dụng <col> trong một <colgroup>.

<table>

Tạo một bảng trong tài liệu HTML

<tbody>

Nhóm nội dung thân bảng. Hãy coi <tbody> như phần chính của bảng của bạn, chứa các hàng dữ liệu thực tế.

<td>

Xác định một ô dữ liệu tiêu chuẩn trong một hàng bảng

<tfoot>

Nhóm nội dung chân bảng. Hãy nghĩ về thẻ này như đánh dấu phần dưới cùng của bảng của bạn, thường được sử dụng cho các tóm tắt hoặc tổng số chung.

<th>

Xác định một ô tiêu đề trong một hàng bảng. Thường được sử dụng cho hàng hoặc cột đầu tiên để chỉ ra các tiêu đề.

<thead>

Nhóm nội dung tiêu đề trong một bảng. Hãy tưởng tượng <thead> như phần trên cùng của bảng của bạn, thường chứa các tiêu đề cột.

<tr>

Xác định một hàng trong một bảng

Thẻ

Mô tả

<button>

Định nghĩa một nút có thể nhấp bên trong một biểu mẫu hoặc trang web

<datalist>

Cung cấp danh sách các thẻ <option> như là lựa chọn cho các trường nhập. Điều này thường được sử dụng cho chức năng tự động hoàn thành.

<fieldset>

Tạo một nhóm hình ảnh cho các trường nhập liên quan trong một biểu mẫu

<form>

Tạo một biểu mẫu HTML mà người dùng hoàn thành

<input>

Tạo một vị trí trên biểu mẫu nơi người dùng có thể nhập thông tin hoặc đưa ra lựa chọn. Thẻ "type" của nó cho trình duyệt biết loại đầu vào nào, như hộp văn bản, trường mật khẩu, hoặc nút.

<label>

Liên kết một nhãn với một phần tử nhập. Ví dụ, nhấp vào văn bản "Địa chỉ Email" sẽ tập trung vào trường nhập email tương ứng.

<legend>

Đại diện cho tiêu đề cho nội dung của một phần tử <fieldset>

<meter>

Hiển thị một giá trị trên thang đo, như đồng hồ đo nhiên liệu hoặc mức độ liên quan của một kết quả tìm kiếm

<optgroup>

Tổ chức trực quan các tùy chọn liên quan trong một danh sách thả xuống (<select>). Điều này giúp người dùng dễ dàng điều hướng các danh sách dài, chẳng hạn như danh sách thả xuống để chọn xe với các tiêu đề cho các nhà sản xuất khác nhau.

<option>

Định nghĩa một mục chứa trong một phần tử <select>, <optgroup>, hoặc <datalist>, đại diện cho một tùy chọn có thể chọn

<output>

Một phần tử chứa để hiển thị kết quả của một phép tính hoặc hành động của người dùng

<progress>

Hiển thị một chỉ báo cho thấy tiến độ hoàn thành một nhiệm vụ

<select>

Định nghĩa một danh sách thả xuống cho phép bạn chọn từ một menu các tùy chọn

<textarea>

Tạo một trường biểu mẫu nhiều dòng cho phép người dùng nhập các tin nhắn dài hơn

Thẻ

Mô tả

<abbr>

Đại diện cho một từ viết tắt hoặc chữ viết tắt. Nó thường có thuộc tính title cung cấp dạng đầy đủ.

<address>

Chỉ ra thông tin liên hệ cho một người hoặc tổ chức chịu trách nhiệm cho tài liệu

<blockquote>

Chỉ ra một trích dẫn mở rộng và thường được hiển thị với độ thụt lề

<canvas>

Cung cấp một vùng chứa để vẽ đồ họa và hoạt hình bằng JavaScript

<cite>

Được sử dụng để đánh dấu tiêu đề của một tác phẩm sáng tạo (ví dụ: một cuốn sách, bộ phim hoặc bài hát)

<code>

Hiển thị nội dung của nó như một đoạn mã máy tính ngắn

<del>

Đại diện cho văn bản đã bị xóa khỏi tài liệu

<details>

Tạo một widget tiết lộ nơi thông tin chỉ hiển thị khi được mở

<dialog>

Đại diện cho một hộp thoại hoặc thành phần tương tác khác

<ins>

Đại diện cho văn bản đã được chèn vào tài liệu

<kbd>

Đại diện cho đầu vào của người dùng từ bàn phím, đầu vào giọng nói hoặc thiết bị nhập văn bản khác

<math>

Phần tử cấp cao nhất cho nội dung MathML được sử dụng để hiển thị công thức toán học. MathML là một ngôn ngữ đánh dấu cho phép trình duyệt hiển thị các phương trình và công thức trên các trang web.

<pre>

Đại diện cho văn bản đã được định dạng trước được hiển thị chính xác như đã viết trong tệp HTML để bảo tồn khoảng trắng và ngắt dòng

<q>

Chỉ ra một trích dẫn ngắn trong dòng

<samp>

Được sử dụng để bao quanh văn bản trong dòng đại diện cho đầu ra mẫu từ một chương trình máy tính

<slot>

Một vị trí giữ bên trong một thành phần web mà các nhà phát triển có thể điền bằng HTML của riêng họ. Điều này làm cho thành phần có thể thích ứng và tái sử dụng cao trong các ngữ cảnh khác nhau.

<small>

Đại diện cho các chú thích bên và văn bản nhỏ. Như văn bản bản quyền và pháp lý.

<sub>

Chỉ định văn bản trong dòng nên được hiển thị dưới dạng chỉ số. Bạn có thể sử dụng thẻ <sub> để hiển thị công thức hóa học như "H₂O" hoặc các chỉ số toán học như "2" trong "log₂x".

<summary>

Chỉ định một tóm tắt hoặc tiêu đề cho hộp tiết lộ của phần tử <details>

<sup>

Chỉ định văn bản trong dòng nên được hiển thị dưới dạng chỉ số trên. Sử dụng thẻ <sup> để hiển thị các chỉ số thứ tự như "st" trong "1st", các số mũ như "2" trong "x²", hoặc các tham chiếu chú thích trong văn bản của bạn.

<svg>

Định nghĩa một vùng chứa để nhúng Đồ họa Vector Có thể Tỷ lệ (SVG)—một định dạng hình ảnh vector dựa trên XML cho đồ họa hai chiều—trực tiếp vào tài liệu HTML

<template>

Một cơ chế để giữ HTML không được hiển thị ngay lập tức nhưng có thể được khởi tạo sau bằng JavaScript

<time>

Đại diện cho một khoảng thời gian cụ thể. Bạn sẽ sử dụng thẻ để đánh dấu ngữ nghĩa các ngày và giờ trên trang web của bạn, điều này giúp các công cụ tìm kiếm dễ dàng hiểu chúng hơn

<var>

Đại diện cho văn bản đại diện cho một biến. Như cho các phương trình toán học hoặc trong các ví dụ mã.

<wbr>

Đại diện cho cơ hội ngắt từ cho phép trình duyệt chia một từ dài thành nhiều dòng nếu cần để vừa với vùng chứa của nó