Tìm hiểu về HTML Element và Attribute (Học HTML)

1. Các thuật ngữ

HTML Element: Là một thẻ (HTML Tag) được trình duyệt đọc và xử lí.

Empty Tag: Còn gọi là thẻ rỗng. Có thể gọi là Empty HTML.

Element Content: Ám chỉ nội dung bên trong mỗi thẻ.

Attribute: Thuộc tính của một HTML Element.

2. Giới thiệu

Về mặt hình thức, thẻ giúp chúng ta đánh dấu tài liệu văn bản. Tuy nhiên, đối với các phần mềm đọc tài liệu html như trình duyệt sẽ có một ngôn ngữ riêng dành cho nó, được gọi là HTML Element.

3. Tìm hiểu HTML Element

Một HTMl Element, hay ta gọi là phần tử HTML sẽ được bắt đầu từ một thẻ mở (opening tag) và kết thúc là thẻ đóng (closing tag) cùng với content bên trong nó.

Vậy 1 thẻ (HTML Tag) sẽ tương ứng là một HTML Element

Empty HTML Element

Có một số thẻ đặc biệt không có content (nội dung) bên trong nó, được gọi là thẻ rỗng (empty tag). Ví dụ như sau:

<br> hoặc <hr>

Các bạn thấy rằng chỉ có thẻ mở (opening tag) ở trên.

Tuy nhiên, bạn có thể viết như sau:

<br/> hoặc <hr/>

Cách viết này theo cú pháp của XHTML, để đảm bảo tất cả các thẻ đều có thẻ mở và đóng, vì các empty tag không có content nên sẽ sử dụng cú pháp gộp chung này.

Với HTML 5, các bạn hoàn toàn có thể sử dụng theo cả 2 cú pháp này. Tuy nhiên, khi các bạn muốn tuân theo quy tắc khắt khe, đã là thẻ thì phải có thẻ mở và thẻ đóng thì hãy sử dụng theo cú pháp thứ 2. Nó sẽ giúp cho tài liệu html của bạn có thể được đọc bởi bộ phận tích cú pháp bằng ngôn ngữ đánh dấu khác như XML.

Và dĩ nhiên những thẻ rỗng này cũng được xem là một HTML Element, nó có tên là Empty HTML Element.

Cấu trúc cây HTML

Như vậy, nhìn tổng thể tài liệu html theo dạng HTML Element thì ta sẽ thấy được cấu trúc của một trang tài liệu như sau

<html>
<head>
 <title> Website Blog CuongLog.com</title>
</head>
<body>
Chào mừng bạn đến với blog của mình
</body>
</html>

Một HTML Element có thể được lồng trong một HTML Element khác, tạo nên các cấp cha-con, anh-em. Và nếu tinh ý, thì các bạn sẽ thấy cấu trúc này giống như hình cây, và có gốc là thẻ html.

Thuộc tính

Có 1 thành phần nữa rất quan trọng và hay thường sử dụng, đó chính là attribute, còn gọi là thuộc tính của thẻ hay phần tử.

Chắc năng của Attribute

Chúng ta biết rằng, tên thẻ giúp cho trình duyệt nhận biết để hiển thị. Content là nội dung bên trong của thẻ sẽ được hiển thị, thường là văn bản.

Nhiều khi, ta muốn thêm một sô thông tin bổ sung cho thẻ để giải quyết những vấn đề đặc trưng nào đó

Ví dụ:

<html>
<head>
<title>Blog CuongLog.com</title>
</head>
<body>
Xin chào các bạn
</body>
</html>

Bây giờ muốn biết được nội dung văn bản của trang tài liệu html là tiếng Việt hay tiếng Anh. Và bạn thêm 1 thành phần vào thẻ mở của html như sau:

<html lang="en">

Với câu lệnh trên chỉ ra rằng, ngôn ngữ cho toàn bộ nội dung trang web này chính là tiếng Anh. Bạn thêm một thành phần có tên là lang, viết tắt là language, nghĩa là ngôn ngữ, tiếp theo là 1 chuỗi có giá trị là ngôn ngữ tiếng Anh. Khi ta đổi ngôn ngữ thì chỉ cần thay đổi như thế này:

<html lang="vi">

Nghĩa là chuyển đổi nó qua tiếng Việt. Và cách giải quyết như vậy được gọi là thêm một attribute cho thẻ. Như vậy attribute sẽ giúp bổ sung thêm thông tin cho thẻ để giải quyết những vẫn đề đặc trưng nào đó.

Cấu tạo của Attribute

Như vậy một attribute được cấu tạo bởi 2 thành phần, gồm name và value.

Và nó có cú pháp như sau:

name="value"

Name chính là tên của Attribute. Các Name này đa số là chúng ta sẽ sử dụng theo chuẩn của W3C, nghĩa là mỗi thẻ đã có sẵn danh sách các tên thuộc tính, mỗi thuộc tính sẽ có ý nghĩa và chức năng riêng.

Tuy nhiên, ta có thể tự định nghĩa attribute mà ta muốn để phục vụ nhu cầu lập trình, dĩ nhiên là browser hay các software phổ biến sẽ không hiểu được attribute do ta tự định nghĩa, nó chỉ hiểu những attribute chuẩn do W3C định nghĩa mà thôi.

Phần cuối là giá trị (value), giá trị được bao quanh bởi cặp dấu ngoặc kép. Với mỗi thuộc tính, ta sẽ có một miền giá trị khác nhau cho thuộc tính ấy.

Một số attribute thông dụng

Các bạn còn nhớ khi mình giới thiệu thẻ head, có đề cập tới chức năng của thẻ này sẽ cung cấp thông tin 1 trang web đang sử dụng bảng mã ký tự nào đó trình duyệt hiển thị cho chính xác không? Vâng, để làm được điều đó ta sẽ sử dụng thẻ meta với cú pháp như sau:

<head>
<title>
Blog CuongLog.com
</title>
<meta charset="utf-8"/>
</head>

Với giá trị “UTF-8”, thì ta đã chỉ định trang web sử dụng bảng mã ký tự là unicode rất thông dụng hiện nay. Vì nó chứa tất cả những ký tự của các ngôn ngữ trên thế giới.

Trường hợp các bạn muốn chỉ định những từ khóa trong trang web để hỗ trợ các search engine hoặc dịch vụ khác tìm kiếm thì ta sẽ sử dụng cú pháp sau:

<meta name="keywords" charset="utf-8" content="Web development, HTML, CSS">

Ví dụ, trường hợp bạn muốn mô tả chắc năng của website thì ta sẽ có đoạn mã như sau:

<meta name="description" content="Blog chia sẻ kinh nghiệm và những trải nghiệm cuộc sống">

Hay cho biết thông tin tác giả của trang web thì ta sẽ thực hiện cú pháp như sau:

<meta name="author" content="Duy Cường">

Kết

Bài viết trên mình đã chia sẻ cho các bạn về html element là gì? Cấu trúc của HTML, Tìm hiểu thuộc tính Attribute. Cảm ơn các bạn đã chịu khó ngồi đọc đến phần kết của mình, mọi ý kiến hãy comment ở bên dưới nhé!

Bài tiếp theo (Tìm hiểu về Heading và Paragraph)

Bài viết trước (Làm quen với HTML)

Để lại bình luận của bạn

avatar