HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản được sử dụng để định dạng và hiển thị nội dung trên các trang web. Các thẻ HTML được sử dụng để xác định các thành phần của một trang web, chẳng hạn như tiêu đề, đoạn văn, hình ảnh, bảng, v.v. Trong bài viết này, Boomco sẽ chia sẻ cho các bạn về 5 nhóm thẻ HTML cơ bản đầu tiên.
Các nhóm thẻ cơ bản trong HTML
Các thẻ HTML cơ bản có thể được chia thành các nhóm sau:
- Thẻ cấu trúc (HTML Structure): Các thẻ này xác định cấu trúc của một trang web, chẳng hạn như tiêu đề, đoạn văn, danh sách, v.v.
- Thẻ định dạng (HTML Formatting): Các thẻ này định dạng văn bản, chẳng hạn như thay đổi màu sắc, kích thước, định dạng, v.v.
- Thẻ liên kết (HTML Links): Các thẻ này tạo ra các liên kết đến các trang web khác.
- Thẻ danh sách (HTML List): Các thẻ này giúp hiển thị dữ liệu dạng danh sách trên trang web.
- Thẻ bảng (HTML Table): Các thẻ này giúp hiển thị dữ liệu dạng bảng trên trang web.
- Các thẻ khác
Thẻ cấu trúc (HTML Structure)
Các thẻ cấu trúc cơ bản bao gồm:
<!DOCTYPE>: Khai báo loại tài liệu (doctype) để trình duyệt hiểu phiên bản HTML nào đang được sử dụng, thường là HTML5.<html>: Thẻ gốc của mọi tài liệu HTML, bao quát toàn bộ nội dung của một trang web.<head>: Chứa các siêu dữ liệu (metadata) và thông tin của tài liệu như tiêu đề trang, liên kết đến các tệp CSS, scripts JavaScript và các meta tags khác như charset, description, và keywords.<title>: Xác định tiêu đề của tài liệu, được hiển thị trên thanh tiêu đề của trình duyệt và là tiêu đề của trang khi nó được thêm vào bookmark hoặc kết quả tìm kiếm.<body>: Xác định phần thân của tài liệu, nơi chứa toàn bộ nội dung mà người dùng có thể xem bao gồm văn bản, hình ảnh, video, games, trình chơi nhạc, v.v.<h1>đến<h6>: Xác định các tiêu đề từ cấp độ 1 đến cấp độ 6.<h1>là tiêu đề quan trọng nhất và thường là tiêu đề lớn nhất, trong khi<h6>là tiêu đề quan trọng ít nhất và có kích thước nhỏ nhất.<p>: Xác định một đoạn văn bản.<br>: Chèn một ngắt dòng trong nội dung, thường được dùng để tạo khoảng cách giữa các dòng văn bản mà không cần bắt đầu một đoạn văn mới.<hr>: Tạo một đường phân cách ngang, thường được dùng để định nghĩa sự thay đổi nội dung hoặc phân chia các phần của tài liệu.<!--...-->: Định nghĩa một bình luận trong mã HTML, không hiển thị cho người dùng và thường được dùng để ghi chú trong mã nguồn.
Thẻ định dạng (HTML Formatting)
Các thẻ định dạng cơ bản bao gồm:
<b>hoặc<strong>: Định dạng chữ đậm để nhấn mạnh tầm quan trọng.<i>hoặc<em>: Định dạng chữ nghiêng để nhấn mạnh, hoặc chỉ ra một thái độ hoặc tâm trạng.<u>: Gạch chân văn bản, thường để chỉ ra liên kết văn bản.<s>: Gạch ngang văn bản, thường dùng để biểu thị thông tin không còn chính xác hoặc đã bị loại bỏ.<small>: Làm nhỏ kích thước văn bản, thường để chỉ ra thông tin phụ hoặc nhỏ hơn.<sub>: Tạo văn bản dưới dạng chỉ số dưới, thường được sử dụng trong công thức hóa học hoặc ghi chú.<sup>: Tạo văn bản dưới dạng chỉ số trên, thường dùng trong biểu thức toán học hoặc làm chú thích.<mark>: Tô sáng văn bản để chỉ sự quan trọng hoặc làm nổi bật.<pre>: Hiển thị văn bản với định dạng cố định và khoảng trắng được bảo toàn, thường dùng cho mã nguồn.<blockquote>: Định dạng một khối trích dẫn dài, thường có thụt lề hai bên.<q>: Định dạng trích dẫn ngắn bên trong một đoạn văn.<abbr>: Xác định một viết tắt hoặc từ viết tắt, thường có thông tin tiêu đề khi di chuột qua.<cite>: Định dạng tiêu đề của tác phẩm sáng tạo như sách, bài hát, hoặc bài báo.<dfn>: Xác định một thuật ngữ đang được định nghĩa, thường được in nghiêng.<address>: Định dạng thông tin liên lạc của tác giả hoặc chủ sở hữu của tài liệu.
Thẻ liên kết (HTML Links)
Các thẻ liên kết cơ bản bao gồm:
<a>: Thẻ liên kết (anchor), được sử dụng để tạo liên kết đến một trang khác, một file, một địa chỉ email, hoặc một vị trí khác trên cùng trang.<link>: Thẻ được sử dụng để liên kết tài liệu HTML với một tài nguyên bên ngoài như tệp CSS. Được đặt trong thẻ<head>của tài liệu.<base>: Thẻ chỉ định URL cơ sở cho tất cả các liên kết tương đối trong một tài liệu. Chỉ có thể có một thẻ<base>trong một tài liệu và nó phải nằm trong thẻ<head>.
Thẻ danh sách (HTML List)
Các thẻ danh sách cơ bản bao gồm:
-
<ul>: Thẻ cho danh sách không sắp xếp (unordered list), được sử dụng để tạo danh sách các mục mà không cần theo một trật tự cụ thể. -
<ol>: Thẻ cho danh sách sắp xếp (ordered list), được sử dụng để tạo danh sách các mục theo một trật tự nhất định. -
<li>: Thẻ mục danh sách (list item), được sử dụng bên trong<ul>hoặc<ol>để đại diện cho từng mục trong danh sách. -
<dl>: Thẻ danh sách định nghĩa (definition list). -
\<dt>: Thẻ này được sử dụng trong một danh sách định nghĩa (\<dl>) để chỉ ra thuật ngữ (term) mà bạn muốn định nghĩa. -
\<dd>: Thẻ này cung cấp thông tin chi tiết hoặc định nghĩa cho thuật ngữ được đặt trong\<dt>.
Thẻ bảng (HTML Table)
Các thẻ bảng cơ bản bao gồm:
\<table>: Dùng để tạo một bảng, là container chính chứa các hàng (\<tr>) và các ô (\<td>hoặc\<th>).\<tr>: Dùng để định nghĩa một hàng trong bảng, là container chứa các ô (\<td>hoặc\<th>).\<th>: Dùng để định nghĩa một tiêu đề cột hoặc hàng, thường được định dạng in đậm và căn giữa để nổi bật.\<td>: Dùng để định nghĩa một ô trong bảng, chứa dữ liệu hoặc thông tin cụ thể.
Kết luận
Ngoài các thẻ cơ bản đã nêu trên, còn có nhiều thẻ HTML khác được sử dụng để tạo các thành phần khác nhau trên trang web, chẳng hạn như hình ảnh, style, biểu mẫu, lập trình, v.v. Bạn có thể tìm hiểu thêm về các thẻ tại W3schools.
Để tìm hiểu thêm về các thẻ HTML, bạn có thể theo dõi Blog Boomco để theo dõi phần 2.
