Thẻ HTML là gì? Danh sách các thẻ HTML trong thiết kế web
Bài viết này sẽ tổng hợp tất cả những kiến thức về thông tin và chức năng chi tiết của tất cả các thẻ HTML hiện nay đang được hỗ trợ để lập trình thiết kế web, giúp bạn có cái nhìn tổng quát hơn và hiểu sâu hơn về HTML trong thiết kế web.
Trong bài trước Tổng quan về HTML CSS JAVASCRIPT mình đã nói cho các bạn hình dung chi tiết về thế nào là HTML và bài này mình sẽ cụ thể lại khái niệm Thẻ HTML và mô tả tất cả những thẻ HTML đang có trong thiết kế website.
Thẻ HTML là gì?
Nôm na nó là phần mở đầu và kết thúc của một bộ phận trong website của bạn, và nó có cấu trúc <tenthe>Nội dung bộ phận</tenthe>. Xem ví dụ bên dưới để hình dung rõ hơn nhé.
<!DOCTYPE HTML> <html> <head> <title>Tiêu đề của trang web</title> </head> <body> <h2>Nội dung của phần tử thẻ h2</h2> <div>Nội dung của phần tử DIV</div> </body> </html>
Trong ví dụ trên bạn để ý dòng 2 và dòng 13. Đó là cú pháp mở và đòng thẻ HTML. Đây là thẻ to cơ bản nhất trong 1 trang HTML bạn nhé.
Tiếp đến bạn nhìn dòng 8 và dòng 11 đó là thẻ BODY trong HTML. Thẻ này được chèn bên trong thẻ <HTML> và bên trong nó lại còn được chèn thêm thẻ <h2> và thẻ <div> nữa.
Vậy bạn đã hình dung ra thẻ HTMl là gì chưa? Nó cũng đơn giản và dễ hiểu thôi nhé. Và trong ngôn ngữ HTML hiện nay có rất rất nhiều thẻ bạn nhé. Dưới đây mình sẽ liệt kê ra tất cả các thẻ HTML hiện đang được hỗ trợ và chức năng cụ thể của nó giúp bạn nắm chi tiết thêm nhé.
Danh sách các thẻ HTML trong lập trình thiết kế website
Thẻ HTML cơ bản
Đây là danh sách các thẻ HTMl gọi là cơ bản nhất, kiểu như khung sường của 1 trang web HTML bạn nhé. Chắc chắc bạn sẻ sử dụng đến nó trong lập trình website
<!DOCTYPE>: Thẻ này là thẻ mặc định trong mỗi trang WEB nó được đặt ở đầu trang web của bạn để khai báo cho trình duyệt hiểu rằng đây là 1 trang có nội dung là 1 trang tài liệu để thu thập, bạn có thể kg đặt nó cũng được nhưng để chuẩn seo bạn nên sử dụng nhé
<html>: Thẻ này là thẻ mở đầu của 1 trong HTML và nó là bắt buộc.
<head>: Dịch ra tiếng việt thì nó là phần đầu của trang web đó, nghĩa là phần này đặt những thẻ như CSS, title JS… các thẻ mang tính chó khai báo và định dạng chứ kg có hiển thị ra ngoài trang web đó.
<title>: Thẻ này là quy định tiêu đề của trang web của bạn cái mà nó hiển thị ở trên trình duyệt khi bạn lướt web á.
<body>: Thẻ này là phần nội dung của trang web của bạn nha. Toàn bộ code hiển thị đều nằm trong thẻ này.
<h1> đến <h6>: Đây là bộ thẻ quy định tiêu đề trong phần nội dung của trang web. Cấp độ sắp xếp từ <h1> <h2> <h3> <h4> <h5> <h6> chức năng của nó là để chèn những cái chữ in đậm nổi bật kiểu như đầu đề trong 1 trang word vậy đó.
<p>: Đây là thẻ để bọc văn bản. Mọi đoạn text hay chữ trong HTMl người ta sẽ đặt trong thẻ này nhé.
<br>: Thẻ này giúp bạn tạo một dòng mới, kiểu như một dấu xuống dòng á.
<hr>: Thẻ này giúp bạn tạo một đường kẻ ngang
<!–…–>: Cái thẻ này giúp bạn chèn 1 cái đoạn ghi chú gì đó trong code để người lập trình viên tự ghi chú cho mình sau này có edit code còn biết được.
Oki chưa này bây giờ mình sẽ viết cho các bạn 1 đoạn code HTML mẫu có chứa tất cả các thẻ trên để các bạn hình dung nhé. Nhìn đoạn code bên dưới nè:
<!DOCTYPE>
<html> <!-- Đây là thẻ mở HTML-->
<head>
<title>Tiêu đề của cái trang HTML sử dụng các thẻ cơ bản</title>
</head> <!-- Đóng thẻ HTML lại nè-->
<body>
<h1>Xin chào tôi là Toàn lê</h1>
<h2>Tôi là một người rất đam mê code</h2>
<p>Tôi tự học code trên mạng và chính vì vậy bây giờ rảnh rỗi tôi muốn viết lại những gì tôi đã học được để sau này có ai đó mày mò như tôi sẽ đỡ được phần nào hay phần đó</p>
<br>
<br>
<br>
<!-- Chỗ này cho xuống dòng 3 dòng nhé-->
<hr> <!-- Và đây có một cái dòng kẻ dưới để phân ra nè-->
<p>Tôi hy vọng rằng bạn nào đọc được bài này sẽ thấy hữu ích vì rôi viết nó rất cực khổ và mất rất rất nhiều thời gian đó nhé</p>
</body>
</html>
Và đây là code demo của đoạn code trên được mình viết sẳn trên hosting bạn có thể xem trực tuyến để biết các nó hoạt động: Xem demo online
Thẻ HTML chuyên về giao diện và định dạng
<abbr>: Thẻ này dùng để khai báo tiêu đề cho một danh từ, khái niệm nào đó để khi người ra rê chuột vào từ đó thì tiêu đồ mô tả thêm về từ đó sẽ xuất hiện ví dụ đoạn mã sau:
<span>Anh <abbr title="Người sáng lập ra Isinhvien">Toàn</abbr> là một người đã nghèo lại còn xấu</span>
Thì bạn sẽ có kết quả như sau:
<address>: Thẻ này dùng để bọc phần tử về một thông tin liên hệ hay một địa chỉ nào đó của chủ thể. Nói nôm na khi bạn hiển thị một thông tin về địa chỉ hay thông tin liên lạc gì đó bạn nên đưa vào trong thẻ này. Ví dụ bên dưới:
<address> Công ty cổ phần <a href="https://isinhvien.com">Isinhvien.com</a>.<br> Trụ sở tại: 247 Nguyễn Chí Thanh Đà Nẵng<br> Cẩm Lệ, Việt Nam </address>
<b>: Thẻ này dùng để in đậm 1 chữ nào đó trong văn bản của
<i>: Thẻ này dùng để in nghiên 1 chữ nào đó trong văn bản của bạn.
<u>: Thẻ này dùng để gạch dưới 1 chữ nào đó trong văn bản của bạn.
<bdi>: Thẻ này dùng để cố định 1 chuỗi text ở 1 vị trí nhất định giúp nó không bị trình duyệt hiểu nhầm và tự move vị trí của nó. Mình có viết 1 bài chi tiết về nó bạn click về tên thẻ để xem chi tiết nhé.
<bdo>: Thẻ này dùng để quy định về cách hiện thị, trình tự hiển thị của chuỗi văn bạn ở trình duyệt. Click vào tên thẻ để xem chi tiết.
<blockquote>: Như tên của nó luôn cái này dùng khi bạn muốn chèn một đoạn trích, một lời trích dẫn nào đó vào trang web của bạn.
<cite>: Thẻ này dùng để xác định cho trình duyệt hiểu rằng văn bản đó là một danh từ, một chủ thể chứ không phải là một từ bình thường.
<!-- Ví dụ khi bạn viết mã--> <p>Chiếc là cuối cùng là một tác phẩm vô cùng tuyệt vời của Ohenri</p> <!-- Khi đó trình duyệt sẽ hiều rằng "Chiếc là cuối cùng" đơn giản chỉ là từ chiếc lá cuối cùng mà thôi, còn khi bạn viết:--> <p><cite>Chiếc là cuối cùng</cite> là một tác phẩm vô cùng tuyệt vời của Ohenri</p> <!-- Lúc này trình duyệt sẽ hiểu "Chiếc là cuối cùng" là một tác phẩm gì đó-->
<code>: Tương tự như thẻ CITE. thẻ code này dùng để định danh 1 từ là thuật ngữ về code.
<del> và <ins>: 2 thẻ này dùng song song với nhau. Chức năng của nó là để báo cho trình duyệt hiểu rằng bạn đã văn bản của bạn được chuyển từ cái gì đó sang cái gì đó. Ví dụ cụ thể như thế này:
<!-- Năm 2020 bạn có viết một text kiểu--> <p>Anh Lê Văn Toàn có cân nặng là 54kg.</p> <!-- Tuy nhiên đến năm 2021 anh Toàn tăng thêm 15kg nghĩa là cân nặng bây giờ là 70kg. Và vì một lí do gì đó bạn không thể sửa từ 54kg trực tiếp thành 70kg. Nên bạn sẽ ghi lại là: --> <p>Anh Lê Văn Toàn có cân nặng là <del>54kg.</del> <ins>70kg</ins></p>
Code của bạn lúc này là:
Anh Lê Văn Toàn có cân nặng là 54kg.
Sau khi sửa:Anh Lê Văn Toàn có cân nặng là 54kg. 70kg
<em>: Thẻ này dùng để nhấn mạnh 1 từ trong 1 đoạn văn bản của bạn
<kbd>: Dùng để định danh 1 từ hoặc cụm từ trong văn bản của bạn là một tên của nút và bàn phím máy tính. Ví dụ:
<p>Nhấn <kbd>Ctrl</kbd> + <kbd>C</kbd> để coppy văn bản trên hệ điều hành (Windows).</p> <p>Nhấn <kbd>Cmd</kbd> + <kbd>C</kbd> để coppy văn bản trên hệ điều hành (Mac OS).</p>
<pre>: Thẻ này dùng để xác định văn bản được định dạng đúng như lúc bạn nhập code.
<progress>: Thẻ này dùng để tạo ra 1 thanh trạng thái về tiến trình xử lí được bao nhiêu % rồi.
<q>: Thẻ này dùng để đánh dấu 1 trích dẫn ngắn trong văn bản. Ví dụ:
<p>Anh Toàn đã từng nói <q>Vững niềm tin cứ đi ắt sẽ đến</q></p>
<small>: Thẻ dùng để chèn chữ nhỏ
<strong>: Dùng để vừa in đậm vừa nhấn mạnh
<sub> và <sup>: Dùng để chèn thử chữ nhỏ trên và thẻ chữ nhỏ dưới. Ví dụ:
<p>Đây là ví dụ về <sub>chữ ở dưới</sub> đầu.</p> <p>Đây là ví dụ về <sup>chữ ở trên</sup> đầu.</p>
Đây là ví dụ về chữ ở dưới đầu.
Đây là ví dụ về chữ ở trên đầu.
<time>: Thẻ này liên quan đến thời gian. Dùng khi nói về giờ giấc thời điểm cụ thể để trình duyệt hiểu thêm về sự kiện đó. Có 2 cách sử dụng như bến dưới
<!-- Ví dụ 1: Nói về giờ cụ thể --> <p>Quán ăn này mở cửa từ <time>10:00</time> đến <time>21:00</time> giờ tối hàng ngày</p> <!-- Ví dụ 2: Nói về sự kiện liên quan --> <p>Anh Toàn <time datetime="2017-02-14 20:00">kết hôn</time> lúc vừa tốt nghiệp đại học</p>
<template>: Thẻ này chứa code giao diện dùng để nhắc trình duyệt rằng nó không phải là 1 phần từ cần render ra để hiển thị mà nó là 1 phần từ html trong code thực thi.
Các thẻ HTML head, khai báo trong trang web
<style>: Thẻ này bạn có thể đặt ở bất kì đâu nhưng thường người ta sẽ đặt ở phần head để định nghĩa CSS trong trang đó. Ví dụ như code bên dưới:
<html>
<head>
<style>
.classcssdemo{
color:red;
}
</style>
</head>
<body>
<div class="classcssdemo">Tôi là Nguyễn Văn A</div>
</html>
<meta>: Thẻ khai báo các thông tin tìm nạp của trang khi share lên các mạng xã hội….
<base>: Khai báo tên miền định danh cho website của bạn
<script>: Thẻ khai báo triển khai javascript trong một trang web HTML
<link>: Thẻ liên kế đến 1 file CSS bằng liên kết.
Các thẻ HTML về bố cục và layout
| <div> | Nhóm các phần tử lại với nhau để tiện cho việc định dạng cũng như thiết kế bố cục của trang web |
| <span> | Nhóm các phần tử nội tuyến lại với nhau để tiện cho việc định dạng CSS |
| <header> | Xác định phần đầu của trang web |
| <footer> | Xác định phần chân của trang web |
| <main> | Xác định phần thân của trang web |
| <dialog> | Tạo một hộp thoại |
| <summary> & <details> | Tạo phần tử có dạng: “chỉ hiển thị tiêu đề còn chi tiết bị ẩn, khi bấm vào tiêu đề thì chi tiết mới hiển thị” |
| <section> | Khai báo khu vực của tài liệu |
| <article> | Khai báo nó là một tài liệu kiểu article |
| <aside> | Xác định nội dung ngoài nội dung trang |
Các thẻ HTML về chức năng trong thiết kế website
| <a> | Tạo một liên kết đến một tài liệu nào đó(khi người dùng bấm vào liên kết thì sẽ được chuyển đến tài liệu đó) |
| <nav> | Xác định một tập hợp các liên kết & thường được sử dụng kết hợp với CSS để tạo một thanh menu |
| <ul> | Xác định một danh sách không có thứ tự |
| <ol> | Xác định một danh sách có thứ tự |
| <embed> | Dùng để nhúng một “tài liệu” nào đó vào trang web |
| <object> | Dùng để nhúng một “tài liệu” nào đó vào trang web |
| <table> | Thẻ dùng để tạo 1 bảng trong HTML |
| <iframe> | Nhúng một trang web khác vào trang web hiện tại |
| <audio> | Tạo một “trình phát nhạc” cho trang web |
| <video> | Tạo một trình play video cho web |
| <img> | Nhúng 1 hình ảnh vào trang web |
| <map> & <area> | Tạo một bản đồ ảnh |
Trên đầy là kiến thức tổng quan về các thẻ HTML giúp các bạn nhìn tổng quát về HTML ở những bước đầu học lập trình. Hy vọng giúp được anh chị em phần nào đó trong chặn đường học lập trình của mình.
