Tìm hiểu khái niệm thẻ trong HTML - 02 - Giải pháp website, App & CRM

Tìm hiểu khái niệm thẻ trong HTML – 02

– Thẻ (tag) là một từ khóa được đặt bên trong cặp dấu ngoặc nhọn.

– Mỗi thẻ sẽ có một chức năng riêng, ví dụ:

Thẻ <p> dùng để tạo một đoạn văn bản.
Thẻ <a> dùng để tạo một cái liên kết.
Thẻ <img> dùng để chèn một tấm hình vào trang web.
. . . .

– Thông thường thì thẻ được chia ra làm 2 loại chính, đó là: thẻ block và inline. Hai loại này sinh ra 2 loại còn là thẻ đơn và thẻ kép.

2.1) Thẻ kép

– Thẻ kép là loại thẻ mà khi chúng ta muốn sử dụng nó để tạo một nội dung gì đó cho trang web thì chúng ta cần phải dùng đến cả thẻ mở lẫn thẻ đóng (thẻ đóng có cách viết tương tự như thẻ mở, chỉ khác ở chỗ là phía trước tên của thẻ đóng thì có thêm một dấu gạch chéo).

Dưới đây là cú pháp sử dụng thẻ kép:

<tagname>nội dung hiển thị</tagname>

– Ví dụ: Thẻ <p> thuộc loại thẻ kép, để tạo được một đoạn văn giống như trong trang web nằm ở bên tay trái thì chúng ta viết như sau:

<p>Tài liệu học Lập Trình Web</p>

2.2) Thẻ đơn

– Thẻ đơn là loại thẻ mà khi chúng ta muốn sử dụng nó để tạo một nội dung gì đó cho trang web thì chúng ta chỉ cần dùng mỗi thẻ mở, hay nói cách khác là không có thẻ đóng.

– Ví dụ: Thẻ <img> thuộc loại thẻ đơn, để chèn một tấm hình vào trong trang web giống như minh họa bên phải thì chúng ta viết như sau:

<img src="https://dsmart.vn/wp-content/uploads/2018/05/logo.png">

2.3) Thẻ lồng nhau

– Thẻ lồng nhau thực chất chỉ là một trong những kỹ thuật cơ bản khi viết mã HTML, các thẻ được lồng vào nhau để xây dựng nên những nội dung đa dạng hơn.

– Ví dụ: Tôi đặt thẻ <u> lồng bên trong thẻ <p> để xác định một cụm từ được gạch dưới chân, nó giúp cho nội dung của đoạn văn bản trở nên đa dạng hơn.

– Tuy nhiên có một điều mà các bạn cần phải lưu ý đó chính là các thẻ được phép lồng vào nhau, nhưng tuyệt đối không được chéo nhau.

– Ví dụ: Viết như bên dưới là sai quy tắc.

– Lưu ý: Trong ngôn ngữ HTML, khi chúng ta viết mã sai quy tắc thì trên màn hình không hiện lên bất kỳ một thông báo lỗi nào, chỉ là các nội dung sẽ không được hiển thị chính xác như mong đợi.