Bài 02: HTML Elements và Attributes - Học HTML căn bản & nâng cao

Ở bài HTML là gì mình có nói 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). Đối với XML thì tên thẻ ta có thể tự định nghĩa nhưng với HTML thì bạn phải sử dụng tên thẻ có trong danh sách HTML Elements, nếu không trình duyệt sẽ không hiểu thẻ mà bạn đang sử dụng là gì.

1. HTML Elements (thẻ HTML)

Danh sách các thẻ HTML rất là nhiều nên rất khó mà liệt kê và hướng dẫn sử dụng được, vì vậy mình chỉ liệt kê một số thẻ thôi và trong các bài tiếp theo mình sẽ tìm hiểu.

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
• ...

Mình không thể liệt kê hết được mà sẽ trình bày dần trong các bài tiếp theo.

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>

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 />

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.

Ví dụ:

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

XEM DEMO

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

Chạy lên bạn sẽ thấy xuất hiện một ô nhập dữ liệu.

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.

Ví dụ: XEM DEMO

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

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. Tuy nhiên trình duyệt sẽ không hiểu các thuộc tính đó nên sẽ không có tác dụng gì, vì vậy thông thường ta kết hợp thuộc tính tự định nghĩa với Javascript đẻ xử lý cho từng bài toán ( sẽ học sau).

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ì.

XEM DEMO

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

3. Lời kết

Như vậy trong bài này mình đã giới thiệu với bạn cách đặt tên thẻ HTML và các thuộc tính riêng của nó. Bài này vẫn chưa đi sâu vào các thẻ thông dụng nên vẫn còn hơi chán chút xíu nhưng bạn phải hiểu các quy tắc trên thì ở các bài tiếp theo bạn mới dễ học.

Bài tiếp theo chúng ta sẽ tìm hiểu các thẻ HTML thông dụng thường hay được sử dụng khi chuyển từ file PSD sang HTML.