HTML Thiết kế web Tutorial

Bài 4: Thành phần và thuộc tính

96

Thành phần HTML

Một trang web HTML bao gồm rất nhiều các thành phần như tiêu đề, văn bản, hình ảnh, v.v… Một thành phần thường bao gồm một thẻ bắt đầu (start tag) và một thẻ kết thúc (end tag), với nội dung được đặt giữa cặp thẻ này. Cấu trúc:

<tag>Nội dung</tag>

Thành phần HTML là tất cả mọi thứ từ thẻ bắt đầu đến thẻ kết thúc. Ví dụ một thành phần là đoạn văn:

<p>Nội dung của đoạn văn bản đầu tiên của tôi.</p>

Những thành phần HTML mà không có nội dung thường được gọi là những thành phần rỗng. Các thành phần rỗng này không có thẻ kết thúc, ví dụ thành phần <br> dùng để xác định một dấu ngắc dòng – xuống dòng.

Các thành phần lồng nhau

Các thành phần HTML có thể lồng trong nhau, có nghĩa là một thành phần HTML có thể chứa nhiều thành phần khác. Tất cả các văn bản HTML bao gồm các thành phần lồng nhau. Sau đây là một ví dụ về các thành phần lồng nhau:

<!DOCTYPE html>
<html>
<body>

<h1>Hello World</h1>
<p>Welcome to HTML</p>

</body>
</html>

Trong ví dụ trên, thành phần <html> định nghĩa toàn bộ văn bản html. Nó bắt đầu bởi thẻ <html> và kết thúc với thẻ </html>. Nội dung của nó là các thành phần HTML khác, ví dụ thẻ <body>.

<body>

<h1>Hello World</h1>
<p>Welcome to HTML</p>

</body>

Thành phần <body> định nghĩa phần thân của văn bản html. Nó bắt đầu bởi thẻ <body> và kết thúc với thẻ </body>. Nội dung của nó là 2 thành phần <h1> và <p>. Thẻ <h1> định nghĩa một thành phần là tiêu đề. Thẻ <p> định nghĩa một đoạn văn.

Thuộc tính

Thuộc tính là các thông tin bổ sung thêm cho các thành phần HTML.

  • Tất cả các thành phần HTML đều có thể có thuộc tính.
  • Thuộc tính cung cấp thông tin bổ sung cho thành phần HTML.
  • Các thuộc tính được đặt trong thẻ bắt đầu của thành phần.
  • Các thuộc tính thường đi thành một cặp tên/giá trị: name=”value”

Một số lưu ý đối với thuộc tính của thành phần:

Sử dụng chữ viết thường cho thuộc tính: Trong phiên bản HTML5 không phân biệt hoa thường, tuy nhiên chuẩn W3C khuyên nên sử dụng chữ viết thường cho tất cả các thuộc tính.

Sử dụng dấu nháy cho giá trị của thuộc tính: Các giá trị của thuộc tính nên đặt vào trong cặp dấu nháy đơn hoặc dấu nháy kép. Trong phiên bản HTML5 không yêu cầu phải sử dụng dấu nháy, tuy nhiên trong trường hợp sau đây nên dùng dấu nháy:

<p title=đây là chú thích của đoạn văn>Đây là một đoạn văn</p>

Với đoạn mã trên, trình duyệt sẽ hiểu thuộc tính title có giá trị là “đây” chứ không phải “đây là chú thích của đoạn văn”. Vì vậy đoạn code trên cần phải viết như sau:

<p title="đây là chú thích của đoạn văn">Đây là một đoạn văn</p>

 

Bài viết nên đọc

Related Articles