Bài 3: Tìm hiểu về cấu trúc thẻ và thuộc tính trong HTML

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ởthẻ đóng. Cú pháp khai báo phần tử trong HTML sẽ có dạng như sau:

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:

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ụ:

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:

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:

Cấu trúc đúng trong thuộc tính title:

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://nguyenhungplus.com">NguyenHungPlus.Com</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.

Bài 3: Tìm hiểu về cấu trúc thẻ và thuộc tính trong HTML
5 4 votes

Tìm bài viết bằng cú pháp: nguyenhung + từ khóa

  • hiểu dc thuộc tính

Để lại ý kiến của bạn

Hãy trở thành người đầu tiên bình luận!

avatar
wpDiscuz
Hello! Tôi là Nguyễn Hùng, blog này tôi xây dựng nhằm mục đích chia sẻ miễn phí các kiến thức về máy tính và làm web Wordpress, SEO, SEM, MMO,... mà tôi biết cho tất cả mọi người. Cảm ơn bạn đã ghé qua và đọc blog, nếu thấy bài viết hay hãy chia sẻ nó thay cho lời cảm ơn nhé. → Xem tiếp"

ĐĂNG KÝ NHẬN TIN QUA EMAIL

Nhận thông tin bổ ích về WordPress, SEO, Thủ thuật máy tính, Word, Excel....và các phần quà hấp dẫn qua email.

Cảm ơn bạn đã đăng ký

Có lỗi gì đó rồi kìa