Trong bài giới thiệu về HTML là gì mà các bạn đã đọc thì bạn cũng đã biết HTML được cấu thành từ 2 thành phần chính đó là thẻ (tag) và các thuộc tính (attribute) để mô tả cho thẻ. Bạn cần sử dụng đúng các thẻ được quy định trong HTML để cho trình duyệt có thể hiểu được và phiên dịch trang web cho người dùng. Vậy cấu trúc của các thẻ và thuộc tính trong HTML như nào thì bài viết này mình sẽ cho các bạn thấy rõ hơn.
Cấu trúc của thẻ (tag) trong HTML
Về cơ bản trong HTML có cả trăm thẻ nên ở đây mình sẽ không liệt kê tất cả các thẻ. Mình chỉ giới thiệu một số thẻ cơ bản thường xuyên được sử dụng và các bài viết tiếp theo trong series học HTML cơ bản mình sẽ cùng các bạn tìm hiểu chi tiết về các thẻ này.
Danh sách các thẻ thường xuyên được sử dụng:
- html
- head
- title
- body
- h1, h2, h3, h4, h5, h6
- div
- p
- a
- table
- li
- …..
Tham khảo thêm cách sử dụng tất cả các thẻ trong HTML chi tiết ở đây
Thẻ mở (opentag) và thẻ đóng (closetag)
Các phần tử trong HTML sẽ được khai báo bằng các cặp thẻ gồm thẻ mở và thẻ đóng. Cú pháp khai báo phần tử trong HTML sẽ có dạng như sau:
<tagname>Nội dung bên trong thẻ</tagname>
Trong đó:
<tagname> được gọi là thẻ mở và </tagename> gọi là thẻ đóng. Thẻ đóng chỉ khác thẻ mở là có thêm dấu / ở trước tên thẻ.
tagname là tên thẻ HTML bạn muốn sử dụng.
Thẻ không cần thẻ đóng (quick closetag)
Trong HTML có 1 số thẻ sẽ không có thẻ đóng, thẻ này được gọi là quick closetag. Nghĩa là nó chỉ có thẻ mở được viết với cấu trúc như sau:
<tagname/>
Ví dụ có 1 số thẻ không có thẻ đóng như: <link />, <meta />,<br/>,..
Phân cấp thẻ trong HTML
Một web HTML sẽ được cấu thành bởi nhiều cặp thẻ HTML chính vì thế các cặp thẻ này sẽ được lồng vào với nhau để tạo ra bố cục web liên kết vững chắc. Lúc này cấu trúc HTML sẽ được phân cấp cha con, thẻ con sẽ nằm bên trong thẻ cha.
Ví dụ:
<div>
<p>Nội dung bên trong thẻ</p>
<p>
<a href=https://nguyenhung.net>Nguyễn Hùng</a>
</p>
</div>Thuộc tính của thẻ HTML (HTML Attributes)
Mỗi thẻ HTML sẽ có chứa các thuộc tính nhất định để mô tả cho nó. Ví dụ ở đây mình sẽ có thẻ <a> với các thuộc tính như sau:
<a href="https://nguyenhung.net" target="_blank" title="Học HTML cơ bản">NguyenHung.Net</a>
Các thuộc tính đều nằm trong thẻ mở <opentag> và có cấu trúc là thuoctinh=”giatri” hoặc thuoctinh=’giatri’
Cách sử dụng dấu nháy trong thuộc tính
Như ở trên bạn thấy chúng ta có thể sử dụng 2 kiểu với 2 loại dấu nháy đơn (‘) và dấu nháy kép (“). Ở đây các bạn cần chú ý để tránh nhầm lẫn. Khi bạn dùng cấu trúc với dấu nháy đơn thuoctinh=’giatri’ thì giá trị bên trong không được chứa dấu nháy đơn, ngược lại khi bạn sử dụng cấu trúc dấu nháy kép thuoctinh=”giatri” thì giá trị bên trong không được chứa dấu nháy kép.
Ví dụ:
Cấu trúc không đúng trong thuộc tính title:
<a href="https://nguyenhung.net" title=""Học HTML cơ bản"">NguyenHung.Net</a>
Cấu trúc đúng trong thuộc tính title:
<a href="https://nguyenhung.net" title="'Học HTML cơ bản'">NguyenHung.Net</a>
Cách sử dụng thuộc tính trong thẻ
Mỗi thẻ HTML sẽ có 1 số những thuộc tính nhất định để mô tả cho nó và sẽ có những thuộc tính chỉ dành riêng cho 1 thẻ nào đó nhưng bạn vẫn có thể dùng thuộc tính đó cho 1 thẻ khác nhưng trình duyệt sẽ không hiểu được các thuộc tính đó.
Ví dụ trong thẻ <p> thuộc tính href sẽ không có tác dụng gì nhưng ta vẫn có thể thêm vào như sau:
<p href=”https://nguyenhung.net”>NguyenHung.Net</p> tuy nhiên khi chạy đoạn code đó lên thuộc tính href sẽ không có tác dụng gì.
Lời kết
Như vậy trong bài này Nguyễn Hùng đã giới thiệu với các bạn cấu trúc của các thẻ và các viết thuộc tính cho thẻ HTML. Các bạn cần nắm vững các quy tắc này thì những bài viết tiếp theo các bạn mới có thể dễ dàng làm việc được.
