Element và Attribute trong HTML

# Series HTML cho người mới bắt đầu

Element và Attribute trong HTML

Nội dung bài viết


Rất vui được gặp lại các bạn trong series "HTML cho người mới bắt đầu". Ở trong bài học trước, chúng ta đã cùng nhau làm quen với ngôn ngữ HTML cũng như cấu trúc của nó trong một trang web. Hôm nay, mình sẽ tiếp tục giới thiệu đến cho các bạn: HTML element và HTML attribute. Đây là hai nền tảng cốt lõi xuyên suốt series này, chính vì vậy mình hi vọng có thể diễn đạt một cách dễ hiểu nhất đến cho các bạn. Nào chúng ta vào bài ngay thôi.

1. HTML element

HTML element dịch sát nghĩa là phần tử HTML, nó đại diện cho mỗi loại thẻ trong HTML.

1.1. Cú pháp

Mỗi phần tử HTML thường bao gồm một thẻ mở và một thẻ đóng với nội dung được chèn ở giữa:

<tagname>Nội dung</tagname>

Chẳng hạn để biểu diễn một đoạn văn. HTML cung cấp cho chúng ta phần tử p với cú pháp như sau:

<p>Đây là đoạn văn bản</p>

Trong đó: 

Thẻ mở Nội dung Thẻ đóng
<p>
Đây là đoạn văn bản
</p>

1.2. Empty HTML element

Những phần tử HTML mà không chứa nội dung được gọi là phần tử HTML trống (Empty HTML element). Những phần tử này không cần dùng đến thẻ đóng:

<tagname/>

Chẳng hạn như thẻ br (biểu diễn xuống một dòng mới trong HTML)

<br/>

Ở phiên bản HTML hiện nay thì không yêu cầu việc đóng các Empty element HTML.

<tagname>

Như ví dụ trên ta có thể viết 

<br>

Điều này không bắt buộc nhưng nếu bạn muốn code của bạn chặt chẽ hơn hoặc có thể đọc được từ các trình phân tích cú pháp XML thì bắt buộc bạn phải đóng các phần tử HTML trống đúng cách.

1.3. Các phần tử HTML lồng nhau

Đây có vẻ là một thuật ngữ khá mới mẻ đối với các bạn, tiếng anh của nó là Nested HTML elements. Có thể hiểu đơn giản là các phần tử HTML có thể chứa những phần tử HTML khác nằm bên trong nó. Bạn có thể quan sát ví dụ bên dưới:

<!DOCTYPE html>
<html>
<body>

<p>Đây là đoạn văn.</p>

</body>
</html>

Thẻ html sẽ định nghĩa toàn bộ tài liệu HTML, có nghĩa là toàn bộ các thẻ HTML sẽ được lồng vào bên trong nó, hay nói cách khác là nó chứa toàn bộ các thẻ HTML có trong tài liệu.

<html>
<body>

<p>Đây là đoạn văn.</p>

</body>
</html>

Vào bên trong thẻ html, ta sẽ thấy thẻ body, thẻ này định nghĩa nội dung tài liệu HTML. Ta có thể nói thẻ body chính là con (child) của thẻ html hoặc thẻ html chính là cha (parent) của thẻ body.

Và bên trong thẻ body có chứa một phần tử p.

<body>

<p>Đây là đoạn văn.</p>

</body>

Cũng tương tự, thẻ body là parent của thẻ p, p là child của thẻ body.

1.4. Đừng bao giờ quên thẻ đóng

Đây là ví dụ về một đoạn code "bốc mùi" trong HTML.

<html>
<body>

<p>Đoạn văn thứ nhất
<p>Đoạn văn thứ hai

</body>
</html>

Dù rằng ở ví dụ trên, trình duyệt vẫn có thể hiển thị nó một cách chính xác, nhưng điều này đi ngược lại với các nguyên tắc về cú pháp trong HTML element. Đồng thời nó cũng sẽ tạo ra những kết quả không mong muốn sau này nếu code của bạn "phình to" ra.

Nhớ rằng, đừng bao giờ quên thẻ đóng trong HTML element.

1.5. Thẻ HTML không phân biệt chữ hoa chữ thường

Điều này có nghĩa cho việc

<P>Nội dung</P>

sẽ giống với

<p>Nội dung</p>

Không một tiêu chuẩn nào yêu cầu bạn sử dụng chỉ chữ hoa, hoặc chỉ chữ thường cho các thẻ HTML. Nhưng theo cá nhân mình sẽ sử dụng cú pháp chữ thường để viết HTML vì:

  • Đỡ mất thời gian khi phải Cap locks, hoặc giữ Shift quá nhiều để viết chữ hoa trong quá trình code
  • Việc sử dụng chữ viết hoa cho thẻ HTML sẽ làm bố cục dòng chữ không đều, khó đọc
  • Theo đa phần những người code HTML khác

Và trong suốt series này mình sẽ sử dụng chữ thường cho toàn bộ các thẻ HTML. Bạn có thể lựa chọn cú pháp riêng của mình nhưng không được theo trường phái "nửa nạc nửa mỡ" như thế này:

<p>Nội dung</P>

hoặc

<P>Nội dung</p>

Điều này thật sự kinh khủng.

2. HTML attribute

HTML attribute, nghĩa là thuộc tính HTML - một thành phần không thể thiếu trong HTML element. Tất cả các thẻ HTML đều có thể có một hoặc nhiều thuộc tính. Các thuộc tính này cung cấp thêm cho chúng ta các thông tin, ngữ cảnh của phần tử HTML.

2.1. Cú pháp

Cú pháp của một thuộc tính được viết trong thẻ mở HTML dưới dạng:

<tagname name="value">

Trong đó:

  • name chính là tên thuộc tính
  • value chính là giá trị của thuộc tính name được trích dẫn trong dấu nháy kép hoặc nháy đơn.
  • Để gán giá trị cho thuộc tính, ta sử dụng dấu =.

2.2. Thuộc tính lang trong HTML

Ngôn ngữ của toàn bộ tài liệu HTML sẽ được khai báo ở thẻ html thông qua thuộc tính lang.

<html lang="vi-VN">

...

</html>

Hai ký tự đầu tiên vi là mã ngôn ngữ, hai ký tự tiếp theo VN là mã quốc gia. Chẳng hạn website bạn là ngôn ngữ tiếng Anh, bạn có thể đổi giá trị của thuộc tính lang thành en-US. Các bạn có thể tham khảo danh sách các mã ngôn ngữ tại đây và danh sách các mã quốc gia tại đây.

Thuộc tính này giúp các công cụ tìm kiếm xác định được ngôn ngữ cũng như quốc gia của toàn bộ website.

2.3. Thuộc tính title trong HTML

Thuộc tính title này giúp ta diễn đạt trọn vẹn ý nghĩa của một phần tử HTML dưới dạng "công cụ chú giải", thuật ngữ gọi là tooltip mỗi khi bạn thực hiện hành động rê chuột vào phần tử HTML trên trang web. Các bạn giúp mình tạo một file tooltip.html với nội dung bên dưới nhé.

<!DOCTYPE html>
<html>
<head>
	<title>Ví dụ thuộc tính title</title>
</head>
<body>
	<p title="Đây là tooltip">Đây là một văn bản</p>
</body>
</html>

Cú pháp để sử dụng một tooltip rất đơn giản, thuộc tính sẽ là title, sau đó thì truyền giá trị muốn hiển thị vào là xong.

<p title="Đây là tooltip">Đây là một văn bản</p>

Ok, lưu lại và chạy file trên trình duyệt, ta sẽ có kết quả như hình bên dưới khi rê vào dòng văn bản.

Kết quả tooltip trong HTML

2.4. Các thuộc tính nên được viết thường

Tiêu chuẩn HTML5 không yêu cầu viết thường các tên thuộc tính. Nó có thể viết hoa hoặc viết thường, chẳng hạn như title có thể viết thành TITLE. Nhưng mình mong muốn các bạn sẽ sử dụng chữ thường cho toàn bộ tên thuộc tính HTML để đồng bộ với các tên thẻ.

2.5. Trích dẫn các giá trị thuộc tính

Tiêu chuẩn HTML không yêu cầu có dấu trích dẫn cho các giá trị của thuộc tính, chẳng hạn:

Code xấu Code tốt
<p title=Hello>Xin chào</p>
<p title="Hello">Xin chào</p>

Nhưng trong một số trường hợp, ta bắt buộc phải sử dụng trích dẫn cho giá trị thuộc tính, nếu không kết quả sẽ không như mong muốn.

Không có trích dẫn giá trị Có trích dẫn giá trị
<p title=Xin chào>Xin chào</p>

Kết quả hiển thị tooltip: Xin

<p title="Xin chào">Xin chào</p>

Kết quả hiển thị tooltip: Xin chào

Vì vậy, mình khuyên các bạn nên trích dẫn các giá trị thuộc tính HTML trong mọi trường hợp.

2.6. Trích dẫn giá trị thuộc tính bằng dấu nháy đơn hay nháy kép?

Thông thường ta hay sử dụng dấu nháy kép để trích dẫn một giá trị thuộc tính trong HTML, nhưng đôi khi dấu nháy đơn vẫn được sử dụng.

Trong một vài trường hợp, các giá trị thuộc tính có chứa dấu nháy kép thì ta phải trích dẫn nó bằng cặp dấu nháy đơn như thế này:

<p title='Anh X "bắn" chị Y'>

Hoặc trong trường hợp giá trị thuộc tính chứa dấu nháy đơn, ta sẽ thực hiện việc trích dẫn bằng dấu nháy kép.

<p title="I'm a coder">

Các bạn cần phải linh hoạt việc trích dẫn thông qua sử dụng nháy đơn hay nháy kép tùy vào từng ngữ cảnh để đạt được kết quả mong muốn.

3. Thẻ meta charset

Trước khi đi sâu vào những bài học kế tiếp, mình sẽ giới thiệu cho các bạn một thẻ HTML giúp ta có thể thiết lập hiển thị ký tự tiếng Việt trên trình duyệt. Một trình duyệt hiện đại có thể tự động hiển thị mà không cần thông qua thẻ meta charset này, như các ví dụ bên trên mình không sử dụng nó nhưng vẫn hiển thị được tiếng Việt. Nhưng chúng ta cần phải khai báo để tuân theo tiêu chuẩn HTML và đảm bảo các công cụ tìm kiếm có thể đọc được nội dung trang web của chúng ta.

Việc khai báo thẻ này rất đơn giản, ta đặt nó ở bất kỳ vị trí nào trong cặp thẻ head.

<meta charset="utf-8"/>

Vì đây là Empty HTML element nên ta có thể đóng thẻ hoặc không. Giá trị thuộc tính utf-8 giúp trang web có thể hiển thị các ký tự tiếng Việt. Và đây cũng cũng coi là một thành phần không thể thiếu trong cấu trúc HTML của một trang web.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Tiêu đề trang web</title>
</head>
<body>
	Nội dung trang web
</body>
</html>

4. Lời kết

Mình xin kết thúc bài viết tại đây. Qua hôm nay, chúng ta đã tìm hiểu kỹ element cũng như attribute có trong ngôn ngữ HTML và một số chú ý về nó. Bắt đầu kể từ các bài sau, chúng ta sẽ tìm hiểu lần lượt các thẻ HTML thông dụng để có thể biểu diễn nội dung theo ý ta muốn. Cảm ơn các bạn đã luôn đồng hành cùng Flipper, chúc thành công và hẹn gặp lại!


Ủng hộ chúng tôi

Bình luận