HTML Elements

Cập nhật mới nhất ngày 21/06/2020

Trong bài viết này, các bạn sẽ tìm hiểu về các thẻ và các Elemnet của HTML.

Cú pháp phần tử HTML

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

Hầu hết các Element HTML được viết bằng thẻ bắt đầu (hoặc thẻ mở - Start Tag) và thẻ kết thúc (hoặc thẻ đóng - End Tag), với nội dung ở giữa. Các phần tử cũng có thể chứa các thuộc tính (Attributes) xác định 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à:

HTML Element

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

Note

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


Thẻ HTML Và Element

Về mặt kỹ thuật, một phần tử (Element) HTML là tập hợp của thẻ bắt đầu, thuộc tính của nó, thẻ kết thúc và mọi thứ (bao gồm nội dung) ở giữa. Mặt khác, thẻ HTML (mở hoặc đóng) được sử dụng để đánh dấu điểm bắt đầu hoặc kết thúc của một Element, 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, các thuật ngữ thành phần HTML và thẻ HTML có thể hoán đổi cho nhau, tức là thẻ là một Element và Element là một loại thẻ. Để đơn giản hơn thì các thuật ngữ "thẻ" (Tag) và "phần tử" (Element) được sử dụng để có nghĩa tương tự - vì nó sẽ định nghĩa một cái gì đó trên trang web của bạn.


Phân biệt chữ hoa chữ thường trong các 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> điều tương tự trong HTML là một đoạn văn.

This is a paragraph.

This is also a valid paragraph.

Tips

Chúng tôi khuyên bạn nên sử dụng chữ thường cho thẻ và gán tên trong HTML, vì bằng cách này, bạn đã tuân thủ chuẩn HTML và dễ dàng nâng cấp trong tương lai.


Các phần tử HTML rỗng

Các phần tử rỗ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 nội dung - điều đó có nghĩa là, bạn không thể viết <hr> nội dung </hr> hoặc <br>nội dung[/code]</br>[/code].

Một ví dụ điển hình về một phần tử rỗng là thẻ <br> - đại diện cho ngắt một dòng. Một số thẻ phổ biến khác cũng có chức năng tương tự như là <img>, <input>, <link>, <meta>, <hr>...

This paragraph contains
a line break.

Cloudy Sky

Note

Trong HTML, một phần tử tự đóng được viết đơn giản là <br>. Còn trong XHTML, phần tử tự đóng yêu cầu dấu cách và dấu gạch chéo, 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 phần tử nào khác (ngoại trừ các phần tử trống), lần lượt được tạo thành từ các thẻ, thuộc tính và nội dung hoặc các phần tử khác.

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

Here is some bold text.

Here is some emphasized text.

Here is some highlighted text.

Note

Các thẻ HTML phải được lồng theo đúng thứ tự. Chúng phải được đóng theo thứ tự từ trong ra ngoài, điều đó có nghĩa là thẻ cuối cùng được mở phải được đóng trước.

Thẻ này được lòng bên trong.

Thẻ này không được lòng vào bên trong


Phần ghi chú trong HTML

Phần ghi 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. Phần ghi chú không được hiển thị trong trình duyệt.

Một nhận xét HTML bắt đầu bằng <!-- và kết thúc bằng -->, như trong ví dụ dưới đây:



This is a normal piece of text.

Bạn cũng có thể ghi chú comment lại một code HTML của mình để không hiển thị ra ngoài màn hình, như ví dụ dưới đây: