Tag HTML là gì? Hướng dẫn toàn tập về thẻ HTML cho người mới

Nếu bạn đang bắt đầu hành trình lập trình web, câu hỏi tag HTML là gì chắc chắn là một trong những thắc mắc đầu tiên. Giống như những viên gạch xây nên một ngôi nhà, thẻ HTML chính là nền tảng cốt lõi tạo ra cấu trúc cho mọi trang web bạn thấy hàng ngày. Trong bài viết này, Việt Thắng sẽ cùng bạn tìm hiểu từ A-Z về thế giới thẻ HTML, từ khái niệm cơ bản nhất đến cách sử dụng chúng một cách hiệu quả.

Tag HTML là gì?

Hãy tưởng tượng bạn đang viết một tài liệu Word. Bạn dùng các công cụ để tạo tiêu đề, in đậm chữ, hay tạo danh sách. Trên một trang web, tag HTML (hay thẻ HTML) cũng làm một nhiệm vụ tương tự. Chúng là những mã lệnh, những chỉ dẫn được đặt trong dấu ngoặc nhọn (ví dụ: <p>) để ra lệnh cho trình duyệt web.

Nhiệm vụ của tag HTML là đánh dấu và định dạng nội dung. Chúng cho trình duyệt biết đâu là một đoạn văn, đâu là một tiêu đề lớn, đâu là một hình ảnh, hay đâu là một đường link. Nhờ những chỉ dẫn này, trình duyệt có thể hiển thị nội dung một cách có cấu trúc và dễ đọc cho người dùng.

Ví dụ, thẻ <p> báo hiệu cho trình duyệt rằng: “Nội dung nằm giữa tôi là một đoạn văn”. Thẻ <h1> thì lại nói rằng: “Hãy hiển thị nội dung này thật to và nổi bật, vì nó là tiêu đề chính!”.

Nói một cách đơn giản, nếu không có các tag HTML, trang web của bạn sẽ chỉ là một văn bản dài vô tận, không có tiêu đề, không có hình ảnh, không có bố cục. Chúng chính là bộ khung xương thiết yếu của mọi website.

Phân biệt sự khác nhau giữa Thẻ (Tag) và Phần tử (Element)

Khi mới học HTML cho người mới bắt đầu, nhiều bạn thường nhầm lẫn giữa hai khái niệm: Thẻ (Tag) và Phần tử (Element). Việc phân biệt rõ ràng sẽ giúp bạn hiểu sâu hơn về bản chất của HTML.

• Thẻ (Tag): Là một chỉ thị đơn lẻ, bắt đầu bằng dấu < và kết thúc bằng dấu >. Chúng ta có thẻ mở (ví dụ: <p>) và thẻ đóng (ví dụ: </p>). Vai trò của thẻ là đánh dấu điểm bắt đầu và điểm kết thúc của một nội dung.
• Phần tử (Element): Là toàn bộ cấu trúc hoàn chỉnh. Nó bao gồm thẻ mở, nội dung ở giữa, và thẻ đóng.

Để dễ hình dung hơn, hãy xem ví dụ sau:

<p>Đây là một đoạn văn bản.</p>

Trong ví dụ trên:

• <p> là thẻ mở.
• </p> là thẻ đóng.
• Đây là một đoạn văn bản. là nội dung.
• Toàn bộ dòng <p>Đây là một đoạn văn bản.</p> được gọi là một phần tử HTML (cụ thể là phần tử đoạn văn).

Bạn có thể coi thẻ là những cái ngoặc đơn, còn phần tử là toàn bộ biểu thức nằm trong và bao gồm cả cặp ngoặc đó. Hiểu được điều này là bạn đã nắm vững một khái niệm cốt lõi rồi đấy!

Cấu trúc và Cú pháp chuẩn của một thẻ HTML

Để trình duyệt có thể hiểu đúng, bạn cần viết các thẻ HTML theo một cú pháp chuẩn. Cấu trúc thẻ HTML không hề phức tạp. Việt Thắng sẽ chia nhỏ thành từng phần để bạn dễ theo dõi nhé.

Cấu trúc thẻ mở và thẻ đóng

Hầu hết các thẻ HTML đều đi theo cặp, bao gồm thẻ mở và thẻ đóng trong HTML. Cú pháp của chúng rất đơn giản:

• Thẻ mở (Opening Tag): Có dạng <tên_thẻ>. Ví dụ: <h1>, <p>, <div>.
• Thẻ đóng (Closing Tag): Gần giống thẻ mở nhưng có thêm dấu gạch chéo / ở phía trước tên thẻ. Ví dụ: </h1>, </p>, </div>.

Nội dung bạn muốn hiển thị sẽ được đặt ở giữa cặp thẻ này. Ví dụ, để tạo một tiêu đề, bạn viết:

<h1>Đây là tiêu đề chính</h1>

Dấu / trong thẻ đóng rất quan trọng. Nó báo hiệu cho trình duyệt rằng phần tử này đã kết thúc tại đây.

Thẻ rỗng (Void Elements) không có thẻ đóng

Bên cạnh các thẻ có cặp, HTML cũng có một số thẻ đặc biệt gọi là thẻ rỗng (Void Elements). Các thẻ này không chứa nội dung bên trong nên chúng không cần thẻ đóng. Chúng tự nó đã là một chỉ thị hoàn chỉnh.

Một vài thẻ rỗng phổ biến là:

• <br>: Dùng để ngắt dòng.
• <img>: Dùng để chèn hình ảnh.
• <hr>: Dùng để tạo một đường kẻ ngang.
• <input>: Dùng để tạo các ô nhập liệu trong form.

Ví dụ về cách dùng thẻ <img>:

<img src="/hinh-anh-meo.jpg" alt="Một chú mèo dễ thương">

Bạn thấy không? Thẻ <img> đứng một mình mà không cần </img>.

Cách sử dụng Thuộc tính (Attributes) bên trong thẻ

Thuộc tính trong HTML (Attributes) là những thông tin bổ sung mà bạn cung cấp cho một thẻ. Chúng giúp tùy chỉnh hành vi hoặc cung cấp thêm ngữ cảnh cho phần tử đó. Thuộc tính luôn được đặt bên trong thẻ mở và có cấu trúc tên=”giá_trị”.

Hãy xem vài ví dụ thực tế:

1. Thuộc tính href trong thẻ <a> (liên kết):
   Thuộc tính href chỉ định đường dẫn (URL) mà người dùng sẽ được chuyển đến khi nhấp vào liên kết.

   <a href="https://wiweb.vn">Ghé thăm trang chủ Việt Thắng</a>
   

2. Thuộc tính src và alt trong thẻ <img> (hình ảnh):
   • src (source): Chỉ định đường dẫn đến file hình ảnh.
   • alt (alternative text): Cung cấp một đoạn văn bản mô tả hình ảnh. Văn bản này rất quan trọng cho SEO và cho người dùng khiếm thị.
     html
<img src="/logo.png" alt="Logo của Việt Thắng">


Thuộc tính chính là sức mạnh của HTML. Chúng biến những thẻ đơn giản thành các phần tử có chức năng phong phú và đa dạng.

Phân loại thẻ HTML theo hành vi hiển thị

Các phần tử HTML có hai cách hiển thị mặc định chính trên trang: dạng khối (block) và nội dòng (inline). Hiểu rõ sự khác biệt này sẽ giúp bạn kiểm soát bố cục trang web dễ dàng hơn rất nhiều.

Block-level elements

Block-level elements có những đặc điểm sau:

• Luôn bắt đầu trên một dòng mới.
• Chiếm toàn bộ chiều rộng của phần tử chứa nó (phần tử cha).
• Bạn có thể thiết lập chiều cao (height) và chiều rộng (width) cho chúng.

Hãy nghĩ về chúng như những chiếc hộp xếp chồng lên nhau. Mỗi hộp là một dòng riêng biệt.

• Các thẻ block-level phổ biến: <div>, <h1> – <h6>, <p>, <ul>, <ol>, <li>, <table>, <form>.

Inline elements

Ngược lại với block, Inline elements lại có đặc điểm:

• Không bắt đầu trên một dòng mới.
• Chỉ chiếm đúng chiều rộng cần thiết cho nội dung bên trong nó.
• Thường không thể thiết lập chiều cao và chiều rộng trực tiếp.

Chúng giống như các từ trong một câu văn, nằm liền mạch với nhau trên cùng một dòng.

• Các thẻ inline phổ biến: <span>, <a>, <img>, <strong>, <em>, <input>.

Để thấy sự khác biệt, hãy xem ví dụ này:

<div style="border: 1px solid black;">
  Đây là một phần tử div (block). 
  <span style="border: 1px solid red;">Đây là một phần tử span (inline) nằm bên trong.</span>
  Nó không xuống dòng.
</div>
<p style="border: 1px solid blue;">Đây là một phần tử p (block), nó sẽ nằm ở dòng mới.</p>

Khi chạy đoạn mã trên, bạn sẽ thấy <div> và <p> nằm trên hai dòng riêng biệt, trong khi <span> nằm gọn bên trong dòng chữ của <div>.

Tổng hợp các nhóm thẻ HTML thông dụng nhất

Dưới đây là tổng hợp các thẻ HTML cơ bản và thông dụng nhất mà bất kỳ ai học lập trình web cũng cần phải nắm vững. Việt Thắng đã phân loại chúng thành các nhóm chức năng để bạn tiện tra cứu.

Nhóm thẻ cấu trúc trang

Đây là bộ khung xương của mọi tài liệu HTML.

• <html>: Thẻ gốc, bao bọc toàn bộ nội dung trang web.
• <head>: Chứa các thông tin meta, tiêu đề trang, link đến file CSS, JavaScript. Nội dung trong thẻ này không hiển thị trực tiếp trên trang.
• <body>: Chứa toàn bộ nội dung sẽ hiển thị cho người dùng (văn bản, hình ảnh, video…).

Thẻ Meta và vai trò quan trọng trong SEO

Thẻ meta trong HTML nằm trong thẻ <head>, cung cấp siêu dữ liệu về trang web cho trình duyệt và các công cụ tìm kiếm.

• <title>: Đặt tiêu đề cho trang, hiển thị trên tab của trình duyệt và kết quả tìm kiếm Google.
• <meta charset="UTF-8">: Khai báo bộ ký tự của trang, giúp hiển thị tiếng Việt không bị lỗi font.
• <meta name="description" content="...">: Cung cấp mô tả ngắn gọn về trang, thường được Google sử dụng làm đoạn snippet.
• <meta name="viewport" content="width=device-width, initial-scale=1.0">: Giúp trang web hiển thị tốt trên các thiết bị di động (responsive).

Nhóm thẻ định dạng văn bản

• <h1> đến <h6>: Định nghĩa các cấp tiêu đề, từ quan trọng nhất (h1) đến ít quan trọng nhất (h6).
• <p>: Định nghĩa một đoạn văn.
• <span>: Dùng để nhóm các phần tử inline hoặc một phần văn bản để định dạng bằng CSS.
• <strong> và <b>: In đậm văn bản ( nhấn mạnh về mặt ngữ nghĩa).
• <em> và <i>: In nghiêng văn bản ( nhấn mạnh về mặt ngữ nghĩa).

Nhóm thẻ liên kết và đa phương tiện

• <a>: Tạo một siêu liên kết (hyperlink).
• <img>: Chèn một hình ảnh.
• <audio>: Chèn nội dung âm thanh.
• <video>: Chèn nội dung video.

Nhóm thẻ tạo danh sách và bảng

• <ul>: Tạo một danh sách không có thứ tự (dấu chấm tròn).
• <ol>: Tạo một danh sách có thứ tự (1, 2, 3…).
• <li>: Định nghĩa một mục trong danh sách (list item).
• <table>: Tạo một bảng dữ liệu.
• <tr>: Định nghĩa một hàng trong bảng (table row).
• <th>: Định nghĩa một ô tiêu đề của bảng (table header).
• <td>: Định nghĩa một ô dữ liệu trong bảng (table data).

Nhóm thẻ Form và các loại Input

• <form>: Tạo một biểu mẫu để thu thập thông tin người dùng.
• <input>: Thẻ đa năng nhất, dùng để tạo ô nhập liệu (type="text"), checkbox (type="checkbox"), nút radio (type="radio"), nút gửi đi (type="submit").
• <textarea>: Tạo một vùng nhập văn bản lớn, nhiều dòng.
• <button>: Tạo một nút có thể nhấp.

Cập nhật các thẻ Semantic trong HTML5

HTML5 giới thiệu các thẻ ngữ nghĩa (Semantic tags) giúp cấu trúc trang web rõ ràng hơn cho cả lập trình viên và công cụ tìm kiếm.

• <header>: Định nghĩa phần đầu của một trang hoặc một section.
• <footer>: Định nghĩa phần chân trang.
• <nav>: Chứa các liên kết điều hướng chính.
• <main>: Chứa nội dung chính, độc nhất của trang.
• <article>: Định nghĩa một nội dung độc lập, trọn vẹn (như một bài blog).
• <section>: Định nghĩa một khu vực, một phần trong tài liệu.

Cấu trúc DOM và mối quan hệ giữa các thẻ

Khi bạn lồng các thẻ HTML vào nhau, bạn đang tạo ra một cấu trúc phân cấp. Trình duyệt sẽ đọc cấu trúc này và xây dựng nên một thứ gọi là DOM (Document Object Model). Hãy coi DOM như một cây gia phả của các thẻ HTML, nơi chúng có mối quan hệ với nhau.

Hiểu về các mối quan hệ này rất quan trọng khi bạn bắt đầu học CSS (để chọn phần tử cần tạo kiểu) và JavaScript (để thao tác với phần tử).

Quan hệ cha – con

Khi một phần tử nằm trực tiếp bên trong một phần tử khác, chúng có quan hệ cha – con.

• Phần tử bao bọc bên ngoài là cha (Parent).
• Phần tử nằm bên trong là con (Child).

Ví dụ:

<div>
  <p>Chào bạn!</p>
</div>

Trong ví dụ này, <div> là cha của <p>, và <p> là con của <div>.

Quan hệ anh em

Khi nhiều phần tử cùng là con của một phần tử cha và nằm ngang hàng nhau, chúng được gọi là anh em (Siblings).

Ví dụ:

<div>
  <h1>Tiêu đề</h1>
  <p>Đoạn văn đầu tiên.</p>
  <p>Đoạn văn thứ hai.</p>
</div>

Ở đây, <h1>, <p> đầu tiên và <p> thứ hai đều là con của <div>. Do đó, chúng là anh em của nhau.

Ví dụ thực tế về một trang web HTML hoàn chỉnh

Lý thuyết sẽ trở nên dễ hiểu hơn rất nhiều khi có ví dụ thực tế. Dưới đây là cấu trúc của một trang web HTML đơn giản, áp dụng nhiều thẻ mà chúng ta đã tìm hiểu.

Bạn có thể sao chép đoạn mã này, dán vào một file có đuôi .html (ví dụ: index.html) và mở bằng trình duyệt để xem kết quả.

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Trang Web HTML Đầu Tiên Của Tôi</title>
</head>
<body>

  <header>
    <h1>Chào mừng đến với Việt Thắng!</h1>
    <nav>
      <a href="#">Trang chủ</a>
      <a href="#">Giới thiệu</a>
      <a href="#">Liên hệ</a>
    </nav>
  </header>

  <main>
    <section>
      <h2>Về Chúng Tôi</h2>
      <p>Việt Thắng là một đội ngũ chuyên gia về thiết kế và phát triển website. Chúng tôi giúp bạn xây dựng sự hiện diện trực tuyến mạnh mẽ.</p>
      <img src="https://via.placeholder.com/400x200" alt="Hình ảnh minh họa dịch vụ của Việt Thắng">
    </section>

    <section>
      <h2>Dịch vụ của chúng tôi</h2>
      <ul>
        <li>Thiết kế Website chuyên nghiệp</li>
        <li>Tối ưu hóa SEO</li>
        <li>Phát triển ứng dụng web</li>
      </ul>
    </section>
  </main>

  <footer>
    <p>&copy; 2024 Bản quyền thuộc về Việt Thắng.vn</p>
  </footer>

</body>
</html>

Ví dụ này đã thể hiện rõ cấu trúc <html>, <head>, <body>, cách sử dụng thẻ ngữ nghĩa như <header>, <main>, <footer> và các thẻ định dạng nội dung quen thuộc.

Lời kết

Qua bài viết này, Việt Thắng hy vọng bạn đã có một cái nhìn tổng quan và rõ ràng cho câu hỏi tag HTML là gì. Chúng chính là những viên gạch nền móng, là ngôn ngữ giao tiếp cơ bản nhất giữa bạn và trình duyệt web. Việc nắm vững cú pháp, cách sử dụng và vai trò của các thẻ HTML thông dụng là bước đi đầu tiên không thể thiếu trên con đường trở thành một nhà phát triển web chuyên nghiệp.

Sau khi đã tự tin với HTML, lộ trình tiếp theo của bạn nên là:

1. Học CSS: Để “trang điểm” và tạo phong cách cho các phần tử HTML, giúp trang web trở nên đẹp mắt và hấp dẫn hơn.
2. Học JavaScript: Để thêm tính tương tác và các chức năng động cho trang web của bạn.

Bạn còn thắc mắc nào về các thẻ HTML hay muốn Việt Thắng làm rõ hơn về phần nào không? Hãy để lại bình luận bên dưới nhé!

Nếu bạn cần thiết kế web chuyên nghiệp để phát triển thương hiệu, Việt Thắng luôn sẵn sàng tư vấn. Liên hệ với chúng tôi ngay hôm nay!