HTML

⌘K
  2. Home
  4. Docs
  6. HTML
  8. Bài 4: HTML Elements và Attributes

Bài 4: HTML Elements và Attributes

HTML bản chất giống XML nên nó được tạo thành từ hai thành phần chính đó là tên thẻ (tagname) và các thuộc tính (attribute)

1. HTML Elements (thẻ HTML)

1.1. Tên thẻ

Tên thẻ HTML phải nằm trong danh sách của riêng nó, ví dụ:

  • html
  • body
  • head
  • title
  • meta
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • p
  • div
  • table
  • tr
  • td
  • …

1.2. Thẻ mở và thẻ đóng

Mỗi thẻ sẽ có thẻ mở (opentag) và thẻ đóng (closetag). Ví dụ với thẻ div thì mình sẽ viết như sau:

<div>Nội dung bên trong</div>

1.3. Khuyết thẻ đóng (quick closetag)

Cũng có một só thẻ sẽ khuyết thẻ đóng, loại này ta gọi là quick closetag, nghĩa là nó chỉ tồn tại thẻ mở thì ta sẽ viết như sau:

<tagname/>

Ví dụ: Các thẻ input, meta, link

<input />
<link />
<meta />

1.4. Thẻ lồng trong thẻ

Các thẻ HTML sẽ được lồng với nhau để tạo thành một bổ cục vững chắc, lúc này thẻ con sẽ nằm trọn trong thẻ cha.

<div>
    <input type="text" classname="Class Name" value=""/>
</div>

Vậy trong quá trình viết mã HTML bạn không được bỏ quên thẻ đóng nhé vì như vậy giao diện sẽ dễ bị vỡ. Trường hợp thẻ khuyết thẻ đóng thì ta sẽ dùng cú pháp quick closetag.

2. HTML Attributes (thuộc tính của thẻ html)

Mỗi thẻ HTML ta có thể ví như một đối tượng, lúc này đối tượng HTML sẽ có các thuộc tính mô tả cho nó. Ví dụ thẻ input thì nó có các thuộc tính như sau:

<input type="text" name="inputname" id="inputid" value=""/>

2.1. Dấu nháy đơn và nháy kép

Vấn đề này những bạn mới học dễ gặp lỗi này nhất. Mỗi thuộc tính trong HTML sẽ có cấu tạo name=”value” hoặc name=’value’. Nếu sử dụng dấu nháy đơn ‘ thì giá trị không được xuất hiện dấu nháy đơn và ngược lại, nếu sử dụng dấu nháy kép ” thì giá trị không được xuất hiện dấu nháy kép.

<input type="text" name="inputname" id="inputid" value="Hello 'cunghocweb.com'"/>

2.2. Thuộc tính mở rộng

Mỗi thẻ HTML chỉ chấp nhận một số thuộc tính nhất định của riêng nó, nhưng nếu bạn muốn định nghĩa thêm một thuộc tính khác thì hoàn toàn được.

Ví dụ: Trong thẻ input không có thuộc tính classname nhưng ta cũng có thể thêm vào được, tuy nhiên lúc chạy lên sẽ không có tác dụng gì.

<input type="text" classname="Class Name" value=""/>

3. Thuộc tính thông dụng

3.1. href

Cú pháp:

<a href="https://cunghocweb.com">Trang chủ Cùng Học Web</a>

3.2. src

Cú pháp:

<img src="img_girl.jpg">

3.3. width và height

Cú pháp:

<img src="img_girl.jpg" width="500" height="600">

Trong đó:

  • width: xác định chiều rộng
  • height: xác định chiều cao

3.4. alt

Cú pháp:

<img src="img_girl.jpg" alt="Ảnh Đại diện">

3.5. style

Cú pháp:

<p style="color: red;">Nội dung đoạn văn.</p>

3.6. lang

Cú pháp:

<!DOCTYPE html>
<html lang="en-US">
  <body>
    ...
  </body>
</html>

Trong đó:

  • lang để xác định ngôn ngữ hiển thị trên website, xem ISO Language Code tại đây

3.7. title

<p title="Title cho đoạn văn">Nội dung đoạn văn.</p>