Cấu trúc các thẻ trong html cơ bản dành cho người mới học lập trình web

Tài liệu html gồm các thẻ html có quan hệ với nhau tạo thành. Sau đây chúng ta sẽ tìm hiểu cấu trúc chung của các thẻ html. Xét về cấu trúc, thẻ html gồm 2 loại là thẻ đầy đủ và không đầy đủ.

Cấu trúc thẻ html không đầy đủ

<tag_name attribute='value' attribute='value' />

Trong đó:

• tag_name : Là tên của các thẻ html có sẵn hoặc thẻ do người dùng tự định nghĩa. Tên thẻ không phân biệt hoa / thường, chỉ gồm các ký tự trong bảng chữ latin, không chứa ký tự khoảng trắng.  
• attribute: Tên thuộc tính dùng để bổ sung thêm thông tin cho thẻ hiện tại. Ứng với mỗi thẻ khác nhau, có thể cần và có những thuộc tính đi kèm khác nhau.
• value: Giá trị ứng với thuộc tính.

Ví dụ:

• <br /> : Tên thẻ -> br

• ---

  <hr /> : Tên thẻ -> hr

• ---

  <hr class='horizontal' /> : Tên thẻ -> hr, tên thuộc tính -> class, giá trị thuộc tính class là horizontal, ta có thể nói gọn là class -> horizontal

Lưu ý:

• Tên thẻ phải viết ngay sau dấu '<', tức là không có ký tự chen giữa, kể cả khoảng trắng cũng không được chấp nhận.
• Có thể không có, hoặc có 1 hay nhiều cặp thuộc_tính='giá_trị' ngăn cách nhau bởi ký tự khoảng trắng (space), và ngăn cách với tên thẻ bởi ký tự khoảng trắng.
• Có dấu '/' trước dấu '>' để đánh dấu thẻ không đầy đủ. Tuy nhiên, với vài thẻ như br, hr thì ta có thể không cần dấu /.

Cấu trúc thẻ html đầy đủ

<tagname attribute='value'>
    nội dung
</tagname>

Trong đó: 

• Tên thẻ, thuộc tính, giá trị: Giống với thẻ không đầy đủ
• Nội dung: Có thể gồm chữ hoặc các thẻ khác
• Tên thẻ đóng phải giống với tên thẻ mở

Ví dụ: 

<p class='para'>
    Đây là nội dung của thẻ p
</p>

Thuộc tính bắt buộc trong các thẻ html

Thông thường sẽ có những thẻ cần phải có một hoặc nhiều thuộc tính đi kèm để diễn giải được đầy đủ ý nghĩa. Dưới đây là các thẻ cần có thuộc tính đi kèm.

<a href='https://tutrithuc.com' title='Truy cập trang chủ cộng đồng chia sẻ tri thức'>cộng đồng chia sẻ tri thức</a>

<img src='https://tutrithuc.com/assets/img/system/favico.png' alt='logo cộng đồng chia sẻ tri thức'/>

Bên trên là lý thuyết về cấu trúc từng thẻ html. Ở những bài tiếp theo, chúng ta sẽ học danh sách các thẻ html và cách kết nối các thẻ html đơn lẻ thành một file html hoàn chỉnh.