Thẻ HTML: thẻ mở, thẻ đóng, thẻ rỗng và lồng thẻ

Thẻ HTML là gì

Thẻ HTML là một cái tên đặt trong dấu ngoặc nhọn, dùng để đánh dấu một phần nội dung. Hầu hết các thẻ đi theo cặp: một thẻ mở như <p> và một thẻ đóng có dấu gạch chéo như </p>. Mọi thứ nằm giữa chúng là nội dung, và cả khối đó gọi là một phần tử (element).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tags</title>
</head>
<body>
  <h1>A heading</h1>
  <p>A paragraph with a <strong>strong</strong> word and a <a href="#end">link</a>.</p>
  <ul>
    <li>A list item</li>
    <li>Another list item</li>
  </ul>
  <p id="end">The browser draws each element in its own way.</p>
</body>
</html>

Đổi <h1> thành <h2> (cả thẻ mở lẫn thẻ đóng) và tiêu đề sẽ nhỏ đi. Chính tên thẻ cho trình duyệt biết nội dung đó là gì.

Cấu tạo: thẻ, thuộc tính và phần tử

<a href="/docs/html/links" class="nav">Links</a>

Thuộc tính luôn nằm trong thẻ mở, không bao giờ nằm trong thẻ đóng. Xem chi tiết ở trang thuộc tính.

Tên thẻ không phân biệt chữ hoa chữ thường: <P> và <p> là một. Hãy viết bằng chữ thường.

Thẻ rỗng: không có thẻ đóng

Một số phần tử không thể chứa gì bên trong, nên chúng chỉ có thẻ mở. Chúng được gọi là phần tử rỗng (void element), nhiều người còn gọi là thẻ tự đóng:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Void tags</title>
</head>
<body>
  <p>Line one<br>Line two after a br</p>
  <hr>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Crect width='120' height='40' rx='6' fill='%232563eb'/%3E%3C/svg%3E" alt="A blue rectangle">
  <p><input type="text" placeholder="An input"></p>
</body>
</html>

Danh sách đầy đủ: area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr.

Bạn có thể viết chúng thành <br /> với dấu gạch chéo. Trong HTML, dấu gạch chéo này không có tác dụng gì; nó được cho phép để code theo kiểu XHTML vẫn chạy được. Dấu gạch chéo trên một thẻ thường, như <div />, cũng bị bỏ qua, nghĩa là div đó vẫn đang mở.

Lồng thẻ

Phần tử có thể nằm bên trong phần tử khác. Quy tắc là: đóng thẻ theo thứ tự ngược với lúc mở. Thẻ mở sau cùng phải được đóng đầu tiên.

<p>This is <strong>very <em>important</em></strong>.</p>   <!-- correct -->
<p>This is <strong>very <em>important</strong></em>.</p>   <!-- wrong -->

Trình duyệt không từ chối code lồng sai. Nó tự sửa, và cách sửa không phải lúc nào cũng đúng ý bạn. Ví dụ này đưa hai đoạn code lồng sai cho bộ phân tích của trình duyệt và in ra cấu trúc mà nó thực sự dựng nên:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nesting</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const snippets = [
      '<p>Bold <b>and <i>italic</b> overlap</i>.</p>',
      '<p>A paragraph <div>with a div inside</div></p>'
    ];
    const box = document.createElement('div');
    document.getElementById('out').textContent = snippets.map((html) => {
      box.innerHTML = html;
      return 'You wrote:     ' + html + '\nBrowser built: ' + box.innerHTML;
    }).join('\n\n');
  </script>
</body>
</html>

Có hai lần sửa xảy ra. Cặp <b> và <i> chồng lên nhau bị tách thành thêm phần tử. Còn <p> không thể chứa <div>, nên trình duyệt đóng đoạn văn trước div và biến thẻ </p> bị thừa thành một đoạn văn mới, rỗng. Khi CSS hay JavaScript chạy khác thường, lồng thẻ sai là một trong những thứ đầu tiên cần kiểm tra.

Phần tử block và inline

Hầu hết các thẻ thuộc một trong hai nhóm hiển thị. Phần tử block (div, p, h1 đến h6, ul, section) bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng. Phần tử inline (span, a, strong, em, code) nằm trong một dòng chữ và chỉ rộng bằng nội dung của nó.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Block and inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div, p { border: 2px solid #2563eb; }
    span, a, strong { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div>div is block</div>
  <p>p is block, with <span>a span</span>, <a href="#">a link</a> and <strong>strong</strong> inline.</p>
</body>
</html>

Các khung màu xanh trải dài hết trang; các khung màu hổ phách chỉ bao quanh phần chữ. CSS có thể thay đổi điều này bằng thuộc tính display, nhưng mỗi thẻ đều bắt đầu với giá trị mặc định của nó. Xem div và span để biết về hai phần tử chứa chung chung này.

Các thẻ HTML thường dùng nhất

Muốn có một danh sách gọn trong một trang để in ra, xem cheat sheet HTML.

Thẻ không tồn tại

Nếu bạn gõ một thẻ mà trình duyệt không biết, nó không báo lỗi. Nó tạo một phần tử không xác định, hiển thị nội dung và coi phần tử đó là inline:

<p>Before <card style="border: 2px solid #16a34a; padding: 2px 6px">an unknown tag</card> after.</p>
<p>A custom element: <user-badge style="background: #e5e7eb; padding: 2px 6px">user-badge</user-badge></p>

Một thẻ không xác định không mang ý nghĩa gì với công cụ tìm kiếm hay trình đọc màn hình, vì vậy hãy ưu tiên dùng thẻ có thật. Nếu bạn tự xây component bằng JavaScript, hãy đặt tên có dấu gạch nối (user-badge): tên có dấu gạch nối được dành riêng cho phần tử tùy chỉnh và không bao giờ trùng với thẻ HTML sau này.

Lỗi thường gặp

• Quên thẻ đóng. Thiếu </a> hay </strong> sẽ biến phần còn lại của trang thành liên kết hoặc chữ đậm. Trình duyệt tự đóng một số thẻ cho bạn (</p>, </li>), nhưng không đóng các thẻ này.
• Đóng một thẻ rỗng. </br> và </img> không hợp lệ. Trình duyệt thậm chí đọc </br> thành một thẻ mở <br>, nên <br></br> cho ra hai lần xuống dòng.
• Thẻ chồng lên nhau. Đóng theo thứ tự ngược: <b><i>x</i></b>, không bao giờ <b><i>x</b></i>.
• Đặt phần tử block trong đoạn văn. Một <div>, danh sách hay tiêu đề nằm trong <p> sẽ kết thúc đoạn văn sớm. Hãy dùng <div> làm phần tử bao ngoài.
• Chọn thẻ vì vẻ ngoài. Dùng <h2> vì đó là tiêu đề, không phải vì nó to. Cỡ chữ và độ đậm thuộc về CSS.