Các thẻ và phần tử trong HTML5

Trong hướng dẫn này, bạn sẽ tìm hiểu về các thẻ và phần tử HTML.

Cú pháp phần tử HTML

Phần tử HTML là một thành phần riêng lẻ của tài liệu HTML. Nó đại diện cho ngữ nghĩa, hoặc ý nghĩa. Ví dụ, phần tử title đại diện cho tiêu đề của tài liệu.

Hầu hết các phần tử HTML được viết bằng thẻ bắt đầu (hoặc thẻ mở) và thẻ kết thúc (hoặc thẻ đóng), có nội dung ở giữa. Các phần tử cũng có thể chứa các thuộc tính định nghĩa các thuộc tính bổ sung của nó. Ví dụ, một đoạn văn, được đại diện bởi phần tử p, sẽ được viết là:

Chúng ta sẽ tìm hiểu về các thuộc tính HTML trong chương tiếp theo.

Lưu ý: Tất cả các phần tử không yêu cầu phải có thẻ đóng. Chúng được gọi là phần tử trống, phần tử tự đóng hoặc phần tử rỗng.

Thẻ HTML so với Phần tử HTML

Về mặt kỹ thuật, một phần tử HTML là tập hợp của thẻ bắt đầu, các thuộc tính của nó, thẻ kết thúc và mọi thứ ở giữa. Mặt khác, thẻ HTML (mở hoặc đóng) được sử dụng để đánh dấu phần bắt đầu hoặc kết thúc của một phần tử, như bạn có thể thấy trong hình minh họa ở trên.

Tuy nhiên, trong cách sử dụng phổ biến, thuật ngữ phần tử HTML và thẻ HTML có thể hoán đổi cho nhau, tức là thẻ là phần tử hoặc phần tử là thẻ. Vì lợi ích đơn giản của trang web này, các thuật ngữ “thẻ” và “phần tử” được sử dụng có nghĩa giống nhau – vì nó sẽ xác định một cái gì đó trên trang web của bạn.

Phân biệt chữ hoa chữ thường trong thẻ và thuộc tính HTML

Trong HTML, tên thẻ và thuộc tính không phân biệt chữ hoa chữ thường (nhưng hầu hết các giá trị thuộc tính đều phân biệt chữ hoa chữ thường). Nó có nghĩa là thẻ <P> và thẻ <p> đều chỉ định một đoạn văn bản trong HTML.

Nhưng trong XHTML chúng phân biệt chữ hoa chữ thường và thẻ <P> khác với thẻ <p>.

<p>This is a paragraph.</p>
<P>This is also a valid paragraph.</P>

Mẹo: Chúng tôi khuyên bạn nên sử dụng chữ thường cho tên thẻ và thuộc tính trong HTML. Bằng cách làm này, bạn có thể làm cho tài liệu của mình đúng chuẩn hơn để nâng cấp trong tương lai.

Phần tử HTML trống

Phần tử trống (còn được gọi là phần tử tự đóng hoặc phần tử rỗng) không phải là thẻ chứa – điều đó có nghĩa là, bạn không thể viết <hr>some content</hr> hoặc <br>some content</br>.

Một ví dụ điển hình của một phần tử trống, là phần tử <br>, đại diện cho một dấu ngắt dòng. Một số phần tử trống phổ biến khác là <img>, <input>, <link>, <meta>, <hr>, .v.v.

<p>This paragraph contains <br> a line break.</p>
<img src="images/sky.jpg" alt="Cloudy Sky">
<input type="text" name="username">

Lưu ý: Trong HTML, một phần tử trống được viết đơn giản là <br>. Trong XHTML, phần tử trống yêu cầu khoảng trắng và dấu gạch chéo ở cuối, chẳng hạn như <br />.

Các phần tử HTML lồng nhau

Hầu hết các phần tử HTML có thể chứa bất kỳ số lượng các phần tử khác (ngoại trừ các phần tử trống).

Ví dụ sau đây cho thấy một số phần tử được lồng bên trong phần tử <p>.

<p>Here is some <b>bold</b> text.</p>
<p>Here is some <em>emphasized</em> text.</p>
<p>Here is some <mark>highlighted</mark> text.</p>

Mẹo: Việc đặt một phần tử bên trong phần tử khác được gọi là lồng nhau. Một phần tử lồng nhau, còn được gọi là một phần tử con, cũng có thể là một phần tử cha nếu các phần tử khác được lồng trong nó.

Các thẻ HTML phải được lồng vào nhau theo đúng thứ tự. Chúng phải được đóng theo thứ tự ngược lại với cách chúng được xác định, điều đó có nghĩa là thẻ cuối cùng được mở phải được đóng trước.

<p><strong>These tags are nested properly.</strong></p>
<p><strong>These tags are not nested properly.</p></strong>

Viết chú thích bằng HTML

Các chú thích thường được thêm vào với mục đích làm cho mã nguồn dễ hiểu hơn. Nó có thể giúp nhà phát triển khác (hoặc bạn trong tương lai khi bạn chỉnh sửa mã nguồn) hiểu những gì bạn đang cố gắng thực hiện với HTML. Ghi chú không được hiển thị trong trình duyệt.

Một ghi chú HTML bắt đầu bằng <!-- và kết thúc bằng -->, như được hiển thị trong ví dụ dưới đây:

<!-- This is an HTML comment -->
<!-- This is a multi-line HTML comment 
     that spans across more than one line -->
<p>This is a normal piece of text.</p>

Bạn cũng có thể ghi chú một phần mã HTML của mình cho mục đích gỡ lỗi, như được trình bày dưới đây:

<!-- Hiding this image for testing
<img src="images/smiley.png" alt="Smiley">
-->

Các loại phần tử HTML

Các phần tử có thể được đặt trong hai nhóm riêng biệt: phần tử block level và phần tử inline level. Các phần tử thuộc block level tạo nên cấu trúc của tài liệu, trong khi các phần tử thuộc inline level chỉnh sửa nội dung của một khối.

Ngoài ra, một phần tử block level chiếm 100% chiều rộng có sẵn và nó được hiển thị với dấu ngắt dòng trước và sau. Trong khi đó, một phần tử inline level sẽ chỉ chiếm nhiều dung lượng khi nó cần.

Các phần tử block level thường được sử dụng nhất là <div>, <p>, <h1> tới <h6>, <form>, <ol>, <ul>, <li> .v.v. Trong khi đó, các phần tử inline level thường được sử dụng là <img>, <a>, <span>, <strong>, <b>, <em>, <i>, <code>, <input>, <button> .v.v.

Bạn sẽ tìm hiểu chi tiết về các phần tử này trong các chương sắp tới.

Lưu ý: Không nên đặt các phần tử block level trong các phần tử inline level. Ví dụ, phần tử <p> không nên được đặt bên trong phần tử <b>.