Các tag (thẻ) trong HTML 5

Trong từ ngữ HTML 5 có khoảng hơn 30 thẻ (tag). Mình sẽ trình bày các thẻ đã học & đọc thêm. Học đến phần nào thì mình sẽ cập nhật thêm phần đó trong nội dung này.

1. Thẻ <htmlvàgt;
– Khái niệm:
Tag <htmlvàgt; là tag cho trình duyệt biết đây là văn bản HTML.
Tag <htmlvàgt; là yếu tố ngoài cùng trong các văn bản HTML & XHTML, các tag html có cách gọi khác là các phần tử gốc.
Tag <htmlvàgt; nằm bên dưới tag !DOCTYPE

– Chẳng hạn:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<headvàgt;
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<titlevàgt;Untitled Documentvàlt;/titlevàgt;
</headvàgt;

<bodyvàgt;
</bodyvàgt;
</htmlvàgt;

2. Thẻ <headvàgt;
– Khái niệm:
Tag head khai báo thông tin cho trang HTML, những thông tin đó bao gồm: Tag <headvàgt; khai báo thông tin cho trang HTML, những thông tin đó bao gồm: <titlevàgt;<meta /><backlink /> &<scriptvàgt;

– Cấu tạo:

<headvàgt;
</headvàgt;

– Chẳng hạn:

<!DOCTYPE htmlvàgt;
<htmlvàgt;
<headvàgt;
<titlevàgt;Tiêu đề websitevàlt;/titlevàgt;
</headvàgt;

<bodyvàgt;
 Bài viết website
</bodyvàgt;

</htmlvàgt;

3. Thẻ <titlevàgt;
– Khái niệm:

  • Tag <titlevàgt; xác nhận tiêu đề cho văn bản HTML.
  • Tag <titlevàgt; bắt buộc trong văn bản HTML & XHTML.
  • Khi dùng, <titlevàgt; sẽ hiện ra trên thanh dụng cụ của trình duyệt, phân phối tiêu đề cho trang khi nó được mang vào mục lục ưa chuộng, hiển thị tiêu đề của trang trong kết quả tìm kiếm.
  • Tag <titlevàgt; được viết bên trong tag <head>

– Cấu tạo:

<titlevàgt;
</titlevàgt;

– Chẳng hạn:

<htmlvàgt;
<headvàgt;
<titlevàgt;Đây là tiêu đề của văn bản HTML.</titlevàgt;
</headvàgt;

<bodyvàgt;
Bài viết văn bản HTML.
</bodyvàgt;

</htmlvàgt;

3. Thẻ <bodyvàgt;
– Khái niệm:
Tag <bodyvàgt; khái niệm phần thân của văn bản HTML.

– Cấu tạo:
Được viết ngay dưới tag <headvàgt;

<htmlvàgt;
<headvàgt;
</headvàgt;

<bodyvàgt;
</bodyvàgt;
</htmlvàgt;

– Chẳng hạn:

<!DOCTYPE htmlvàgt;
<htmlvàgt;
<bodyvàgt;

     Bài viết website

</bodyvàgt;
</htmlvàgt;

4. Thẻ <pvàgt;
– Khái niệm:

  • Tag <pvàgt; khái niệm một đoạn văn bản.
  • Tag <pvàgt; auto tạo một khoảng trắng trước & sau nó, khoảng trắng này tùy trình duyệt sẽ khác nhau.
  • Bên trong tag <pvàgt; có thể chứa các tag thuộc nhóm inline

–  Cấu tạo:

<pvàgt;</pvàgt;

– Chẳng hạn:

<pvàgt;Đây là một đoạn văn bản.</pvàgt;

5. Thẻ <hr/>
– Khái niệm:

  • Tag <hr /> tạo một đường nằm ngang, bên trong trang HTML.
  • Tag <hr /> có thể được sử dụng để tách bài viết bên trong trang HTML.

 

– Cấu tạo:

<hr />

– Chẳng hạn:

(*5*)
<pvàgt;Đây là bài viết đầu tiênvàlt;/pvàgt;
<hr />
<pvàgt;Đây là bài viết thứ haivàlt;/pvàgt;

6. Thẻ <br/>
– Khái niệm:

  • Tag <br /> là tag dùng để xuống hàng trong cùng đoạn văn, giống phím “Enter”.
  • Tag <br /> là tag trống, nó không có thẻ chấm dứt.

 

–  Cầu trúc:

<br />

Cần nhất thiết cần phải có “khoảng trắng” & dấu “/” để chuẩn xác trong toàn bộ các phiên bản HTML.

– Chẳng hạn:

<pvàgt;Dòng text dài cần xuống hàngvàlt;br />Đã xuống hàng.</pvàgt;

7. Thẻ <avàgt;
– Khái niệm:

Xem Thêm  Lấy Giá Trị Của Thẻ Select Trong Html, Đọc Và Gán Giá Trị Cho Phần Tử Html Bằng Jquery

Tag <avàgt; xác nhận một siêu link (hyperlink).
Được dùng để:

  • Backlinks từ trang này tới trang khác.
  • Backlinks anchor (backlink neo) từ địa điểm này tới địa điểm khác.
  • Backlinks để mở (hay download) một file nào đó (file word, excel, pdf, image, …), mở một cửa sổ window hay một object nào đó,…

 

– Cấu tạo:

<a href="#">Đây là backlinkvàlt;/avàgt;

– Chẳng hạn:

  • Tới link khác

(*5*)
<pvàgt;<a href=”index.php”>Link tới trang khácvàlt;/avàgt;</pvàgt;

  • Link mail

<pvàgt;Tin nhắn hộp thư online: <a href="mailto:abc@xyz.com">abc@xyz.comvàlt;/avàgt;</pvàgt;

Khi click vào sẽ hiện ra một thùng thư gửi mail.

  • Backlinks từ địa điểm này tới vi trí khác

<pvàgt;<a href="#content">Link tới id contentvàlt;/avàgt;</pvàgt;
  • Link mở ra cửa sổ khác

<pvàgt;<a href="index.php" target="_blank">Link mở ra cửa sổ khácvàlt;/avàgt;</pvàgt;

8. Thẻ <img/>
– Khái niệm:

  • Tag <img /> dùng để nhúng một image vào văn bản HTML
  • Tag <img /> có 2 tính chất thiết yếu là src & alt, trong đó:
    • src: đường dẫn tham chiếu tới image.
    • alt: được sử dụng như một văn bản thay thế khi image không hiển thị (hoặc không có sẵn). Note là alt không phải dùng để hiển thị khi di chuyển chuột lên image, mong muốn văn bản hiển thị khi di chuyển chuột lên image thì ta dùng tính chất title thay thế.

– Cấu tạo:

<img src="" alt="" />

– Chẳng hạn:

<pvàgt;<img src="images/img_sakura.jpg" alt="Sakura" /></pvàgt;

Image “img_sakura.jpg” được đặt trong folder “images”

 

9.  Thẻ <sub & supvàgt;

– Khái niệm:

<subvàgt;

  • Tag <subvàgt; tạo một ký tự nhỏ bên dưới.
  • Tag <subvàgt; được dùng thông dụng trong mẹo hóa học.

<supvàgt;

  • Tag <supvàgt; tạo một ký tự nhỏ phía bên trên.
  • Tag <supvàgt; được dùng thông dụng trong toán học, trình diễn số mũ.

 

– Cấu tạo:

<subvàgt;</subvàgt;
<supvàgt;</supvàgt;

– Chẳng hạn:

<pvàgt;Hvàlt;subvàgt;2vàlt;/subvàgt;Ovàlt;/pvàgt;
<pvàgt;avàlt;supvàgt;2vàlt;/supvàgt;</pvàgt;

10. Thẻ font style

– Khái niệm:
Các tag <ttvàgt;, <ivàgt;, <bvàgt;, <bigvàgt;, <smallvàgt;, <emvàgt;, <strongvàgt;, <dfnvàgt;, <codevàgt;, <sampvàgt;, <kbdvàgt;, <varvàgt; & <citevàgt; được dùng để định dạng kiểu cho font, dùng thông dụng trong html4, bên cạnh đó lời khuyên sử dụng css để thay thế.

– Cấu tạo:

<ttvàgt;Kiểu chữ văn bản máyvàlt;/ttvàgt;
<ivàgt;Kiểu chữ in nghiêngvàlt;/ivàgt;
<bvàgt;Kiểu chữ đậmvàlt;/bvàgt;
<bigvàgt;Kiểu chữ lớnvàlt;/bigvàgt;
<smallvàgt;Kiểu chữ nhỏvàlt;/smallvàgt;
<emvàgt;Dùng để nhấn mạnh văn bảnvàlt;/emvàgt;
<strongvàgt;Hiển thị hình ảnh mạnh, mục đích đánh dấu chữvàlt;/strongvàgt;
<dfnvàgt;Dùng cho thuật ngữvàlt;/dfnvàgt;
<codevàgt;Kiểu code trong laptopvàlt;/codevàgt;
<sampvàgt;Kiểu sample trong laptopvàlt;/sampvàgt;
<kbdvàgt;Kiểu keyboardvàlt;/kbdvàgt;
<varvàgt;Kiểu biến sốvàlt;/varvàgt;
<citevàgt;Dùng cho văn bản trích dẫnvàlt;/citevàgt;

– Chẳng hạn:

<pvàgt;<ttvàgt;Kiểu chữ văn bản máyvàlt;/ttvàgt;<br />
<ivàgt;Kiểu chữ in nghiêngvàlt;/ivàgt;<br />
<bvàgt;Kiểu chữ đậmvàlt;/bvàgt;<br />
<bigvàgt;Kiểu chữ lớnvàlt;/bigvàgt;<br />
<smallvàgt;Kiểu chữ nhỏvàlt;/smallvàgt;<br />
<emvàgt;Dùng để nhấn mạnh văn bảnvàlt;/emvàgt;<br />
<strongvàgt;Hiển thị hình ảnh mạnh, mục đích đánh dấu chữvàlt;/strongvàgt;<br />
<dfnvàgt;Dùng cho thuật ngữvàlt;/dfnvàgt;<br />
<codevàgt;Kiểu code trong laptopvàlt;/codevàgt;<br />
<sampvàgt;Kiểu sample trong laptopvàlt;/sampvàgt;<br />
<kbdvàgt;Kiểu keyboardvàlt;/kbdvàgt;<br />
<varvàgt;Kiểu biến sốvàlt;/varvàgt;<br />
<citevàgt;Dùng cho văn bản trích dẫnvàlt;/citevàgt;</pvàgt;

11. Thẻ <ulvàgt;
– Khái niệm:

  • Tag <ulvàgt; sử dụng để tạo mục lục không có thứ tự.
  • Tag <ulvàgt; được sử dụng kèm với tag <livàgt;
Xem Thêm  bordertop is the width of the border above the image

– Cấu tạo:

Tag <ulvàgt; được dùng kèm với tag <livàgt;:
<ulvàgt;
<livàgt;</livàgt;
</ulvàgt;

– Chẳng hạn:

<ulvàgt;
<livàgt;Xhtmlvàlt;/livàgt;
<livàgt;Xhtmlvàlt;/livàgt;
</ulvàgt;

12. Thẻ <olvàgt;
– Khái niệm:

  • Tag <olvàgt; sử dụng để tạo mục lục có thứ tự.
  • Danh mục có thứ tự có thể là số hoặc chữ.
  • Tag <olvàgt; được sử dụng kèm với tag <livàgt;

– Cấu tạo:

<olvàgt;
<livàgt;1. Danh mục 1vàlt;/livàgt;
<livàgt;2. Danh mục 2vàlt;/livàgt;
</olvàgt;

– Chẳng hạn:

<olvàgt;
<livàgt;Danh mục 1vàlt;/livàgt;
<livàgt;Danh mục 2vàlt;/livàgt;
</olvàgt;

13. Thẻ <livàgt;
– Khái niệm:

  • Tag <livàgt; khái niệm các mục trong một mục lục.
  • Tag <livàgt; được dùng trong mục lục có thứ tự <olvàgt; (order menu) & không có thứ tự <ulvàgt; (unorder menu).

– Cấu tạo:
Tag <livàgt; được viết bên trong tag <olvàgt; & <ulvàgt;

 

<olvàgt;
<livàgt;Danh mục 1vàlt;/livàgt;
<livàgt;Danh mục 2vàlt;/livàgt;
</olvàgt;

Danh mục không có thứ tự:

<ulvàgt;
<livàgt;Học htmlvàlt;/livàgt;
<livàgt;Học xhtmlvàlt;/livàgt;
</ulvàgt;

– Chẳng hạn:
Danh mục có thứ tự:

<olvàgt;
<livàgt;Danh mục 1vàlt;/livàgt;
<livàgt;Danh mục 2vàlt;/livàgt;
</olvàgt;

Danh mục không có thứ tự:

<ulvàgt;
<livàgt;Học htmlvàlt;/livàgt;
<livàgt;Học xhtmlvàlt;/livàgt;
</ulvàgt;

14. Thẻ <prevàgt;
– Khái niệm:

  • Tag <prevàgt; định một đoạn văn bản đã được định dạng sẵn.
  • Có bao nhiêu khoảng trắng bên trong thành phần <prevàgt; đều hiển thị hết ra ngoài trình duyệt.
  • Text bên trong thành phần <prevàgt; thường được định dạng sẵn font, thường là Courier.
  • Hay được dùng trong văn bản laptop.

– Cấu tạo:

<prevàgt;</prevàgt;

– Chẳng hạn:

(*5*)
<prevàgt;đây là đoạn text
sử dụng tag pre.</prevàgt;

15. Thẻ <tablevàgt;
– Khái niệm:

  • Tag <tablevàgt; được dùng để tạo một bảng HTML.
  • Một tag <tablevàgt; dễ dàng có chứa một hoặc nhiều <trvàgt;<thvàgt; & <tdvàgt;, trong đó:
    • <trvàgt; xác nhận hàng của table.
    • <thvàgt; xác nhận phần tử tiêu đề của table
    • <tdvàgt; xác nhận phần tử bài viết của table
  • Một table cầu kỳ có thể bao gồm nhiều thành phần khác, gồm: <captionvàgt;<colvàgt;<colgroupvàgt;<theadvàgt;,<tfootvàgt;, & <tbodyvàgt;.

–  Cấu tạo:

<tablevàgt;</tablevàgt;

– Chẳng hạn:
phần tử tiêu đề <thvàgt; theo chiều ngang

<tablevàgt;
<trvàgt;
<thvàgt;Avàlt;/thvàgt;
<thvàgt;Bvàlt;/thvàgt;
</trvàgt;
<trvàgt;
<tdvàgt;1vàlt;/tdvàgt;
<tdvàgt;5</tdvàgt;
</trvàgt;
<trvàgt;
<tdvàgt;9vàlt;/tdvàgt;
<tdvàgt;10vàlt;/tdvàgt;
</trvàgt;
</tablevàgt;

phần tử tiêu đề <thvàgt; theo chiều dọc

<tablevàgt;
<trvàgt;
<thvàgt;Avàlt;/thvàgt;
<tdvàgt;1vàlt;/tdvàgt;
<tdvàgt;3vàlt;/tdvàgt;
</trvàgt;

<trvàgt;
<thvàgt;Bvàlt;/thvàgt;
<tdvàgt;2vàlt;/tdvàgt;
<tdvàgt;4vàlt;/tdvàgt;
</trvàgt;
</tablevàgt;

16. Thẻ <trvàgt;
– Khái niệm:

  • Tag <trvàgt; được dùng để tạo một hàng trong bảng HTML.
  • Một tag <trvàgt; được sử dụng bên trong <tablevàgt;, & thường kèm với <thvàgt;, toàn bộ được chứa bên trong <tdvàgt;, trong đó:
    • <thvàgt; xác nhận phần tử tiêu đề của <tablevàgt;
    • <tdvàgt; xác nhận phần tử bài viết của <tablevàgt;
  • Tag <trvàgt; có thể chứa một hoặc nhiều <thvàgt; & <tdvàgt;

– Cấu tạo:

<trvàgt;</trvàgt;

– Chẳng hạn:

<tablevàgt;
<trvàgt;
<thvàgt;Avàlt;/thvàgt;
<thvàgt;Bvàlt;/thvàgt;
</trvàgt;
<trvàgt;
<tdvàgt;1vàlt;/tdvàgt;
<tdvàgt;5</tdvàgt;
</trvàgt;
<trvàgt;
<tdvàgt;9vàlt;/tdvàgt;
<tdvàgt;10vàlt;/tdvàgt;
</trvàgt;
</tablevàgt;

17. Thẻ <tdvàgt;
– Khái niệm:

  • Tag <tdvàgt; được dùng để tạo một phần tử bài viết trong bảng HTML
  • Một tag <tdvàgt; được sử dụng bên trong <trvàgt;, & thường kèm với <thvàgt;, toàn bộ được chứa bên trong <tablevàgt;, trong đó:
    • <trvàgt; xác nhận hàng của <tablevàgt;
    • <thvàgt; xác nhận phần tử tiêu đề của <tablevàgt;
  • Ta có thể sử dụng các tính chất colspan & rowspan để gộp nhiều <tdvàgt; theo chiều dọc hoặc chiều ngang,
Xem Thêm  Top 10 kết quả tìm kiếm các hiệu ứng đẹp trong photoshop mới nhất 2022

– Cấu tạo:

<tdvàgt;</tdvàgt;

– Chẳng hạn:

<tablevàgt;
<trvàgt;
<thvàgt;Avàlt;/thvàgt;
<thvàgt;Bvàlt;/thvàgt;
</trvàgt;
<trvàgt;
<tdvàgt;1vàlt;/tdvàgt;
<tdvàgt;5</tdvàgt;
</trvàgt;
<trvàgt;
<tdvàgt;9vàlt;/tdvàgt;
<tdvàgt;10vàlt;/tdvàgt;
</trvàgt;
</tablevàgt;

18. Thẻ <formvàgt;
– Khái niệm:

  • Tag <formvàgt; được dùng để tạo một “biểu mẫu” HTML cho người dùng.
  • Tag <formvàgt; được dùng để truyền dữ liệu lên máy chủ.
  • Tag <formvàgt; không nên dùng để điều khiển layout.

– Cấu tạo:

Trong <formvàgt; bắt buộc cần phải có tham số action.
<form action=””></formvàgt;

  • Một <formvàgt; có thể chứa thành phần <input /> như trường textcheckboxradio-button, button submit,…
  • Một <formvàgt; cũng có thể chứa thành phần <selectvàgt;<textareavàgt;<fieldsetvàgt;<legendvàgt; & <labelvàgt;.
  • Bên trong form cũng có thể chứa các tag khác.

– Chẳng hạn:

<form action="#">
<ulvàgt;
<livàgt;Họ tên: <input type="text" size="30" /></livàgt;
<livàgt;Tin nhắn hộp thư online: <input type="text" size="30" /></livàgt;
<livàgt;Ngày sinh: <input type="text" size="10" /></livàgt;
</ulvàgt;
<pvàgt;<input type="submit" value="Gửi" /></pvàgt;
</formvàgt;

19. Thẻ <input/>
– Định nghia:

  • Tag <input /> được sử dụng cho người dùng nhập hay chọn thông tin.
  • Dạng của <input /> có thể có nhiều dạng khác nhau, tùy thuộc vào vào tính chất tùy trọn type, có thể là text, một checkbox, một trường password, một button radio, một button, …
  • Khuyên: sử dụng tag <labelvàgt; để tạo nhãn cho các thành phần <input />

– Cấu tạo:

Tag <input /> phải được viết bên trong một tag <formvàgt;

<form action="#">
<input type="" />
</formvàgt;

-Chẳng hạn:

(*5*)
<form action=”#”>
<ulvàgt;
<livàgt;Họ tên: <input type=”text” value=”” size=”30″ /></livàgt;
<livàgt;Tin nhắn hộp thư online: <input type=”text” value=”” size=”30″ /></livàgt;
<livàgt;Ngày sinh: <input type=”text” value=”” size=”10″ /></livàgt;
</ulvàgt;
<pvàgt;<input type=”submit” value=”Gửi” /></pvàgt;
</formvàgt;

20. Thẻ <buttonvàgt;
– Khái niệm:

  • Tag <buttonvàgt; được dùng để tạo nút nhấn.
  • Tag <buttonvàgt; có thể chứa text hay image, đây là điểm nhấn giữa tag này & <input />

– Cấu tạo:

<button type=""></buttonvàgt;

-Chẳng hạn:

(*5*)
<button type=”button”>Click me!</buttonvàgt;

21. Thẻ <selectvàgt;
– Khái niệm:

  • Tag <selectvàgt; được dùng để tạo một mục lục sàng lọc (mục lục thả xuống).
  • Tag <optionvàgt; bên trong thành phần select, khái niệm giá trị tùy chọn trong mục lục.
  • Tag <selectvàgt; & <optionvàgt; được thường được đặt trong <formvàgt; cho người dùng lựa chọn mục lục.

– Cấu tạo:

<selectvàgt;</selectvàgt;

– Chẳng hạn:

(*5*)
<selectvàgt;
<optionvàgt;Danh mục 01vàlt;/optionvàgt;
<optionvàgt;Danh mục 02vàlt;/optionvàgt;
<optionvàgt;Danh mục 03vàlt;/optionvàgt;
<optionvàgt;Danh mục 03vàlt;/optionvàgt;
</selectvàgt;

22. Thẻ <optionvàgt;
– Khái niệm:

  • Tag <optionvàgt; khái niệm một tùy chọn trong mục lục sàng lọc (mục lục thả xuống).
  • Tag <optionvàgt; bên trong thành phần select, khái niệm giá trị tùy chọn trong mục lục.
  • Tag <selectvàgt; & <optionvàgt; được thường được đặt trong <formvàgt; cho người dùng lựa chọn mục lục.

– Cấu tạo:
Tag
được viết bên trong tag.

<selectvàgt;
<optionvàgt;</optionvàgt;
</selectvàgt;

– Chẳng hạn:

<selectvàgt;
<optionvàgt;Danh mục 01vàlt;/optionvàgt;
<optionvàgt;Danh mục 02vàlt;/optionvàgt;
<optionvàgt;Danh mục 03vàlt;/optionvàgt;
<optionvàgt;Danh mục 03vàlt;/optionvàgt;
</selectvàgt;

Nội dung được trích dẫn từ nguồn: http://hocwebchuan.com/, http://w3schools.com

Share this:

Thích bài này:

Thích

Đang tải…

Viết một bình luận