HTML
HTML5
CANVAS
HEADING TAGS
FORM TAGS
LIST TAGS
PARAGRAPH TAGS
COMMON TAGS
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT

Quảng cáo

Phân biệt HTML Elements và HTML Attributes

Trong bài này chúng ta sẽ tìm hiểu attribute trong HTML, cũng như qua đó sẽ giúp bạn phân biệt được các HTML element.

Trong bài HTML là gì mình đã nói rằng 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ì để xuất ra định dạng phù hợp.

Quảng cáo

Vậy attribute trong HTML là gì và element HTML là gì thì chúng ta cùng tìm hiểu ngay nhé.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

1. Element html là gì?

Element html chính là danh sách những thẻ html mà trình duyệt hỗ trợ, và nó cũng nằm trong danh sách các thẻ html mà WWW đã quy định.

Danh sách các thẻ HTML rất là nhiều nên rất khó để liệt kê và hướng dẫn sử dụng. 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ẽ giới thiệu tiếp.

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:

Quảng cáo

<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. Attribute trong HTML

Ta có thể ví mỗi thẻ HTML như là 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:

  • name: Dùng để khai báo tên
  • type: Dùng để thiết lập thể loại
  • id: Dùng để đặt tên khóa cho thẻ
  • value: Dùng để khai báo giá trị cho thẻ
Ví dụ RUN
<input type="text" name="inputname" id="inputid" value=""/>

Chạy lên bạn sẽ thấy xuất hiện một ô textbox, và bạn có thể nhập dữ liệu vào trong ô này.

Quảng cáo

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

Những bạn mới học sẽ 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 bạn sử dụng dấu nháy đơn ' để bao xung quanh value, thì giá trị của value không được chứa dấu nháy đơn. 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ụ RUN
<input type="text" name="inputname" id="inputid" value="Hello 'freetuts.net'"/>

Vì vậy, sau này khi bạn muốn hiển data trong CSDL bằng ngôn ngữ backend như PHP, JSP thì phải chuyển các dấu đó sang một định dạng khác.

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 sẽ kết hợp thuộc tính tự định nghĩa với Javascript để xử lý cho các bài toán. Vấn đề này ta sẽ học ở những bài khác nhé.

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

Demo RUN
<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.

Quảng cáo

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top