Tìm hiểu các thẻ HTML thông dụng

các thẻ HTML
HTML là ngôn ngữ cơ bản để tạo ra các trang web và định dạng nội dung trên trình duyệt. Nó sử dụng các thẻ (tags) để xác định cấu trúc và ý nghĩa của các phần tử trên trang web. Mỗi thẻ đại diện cho một phần tử và có thể chứa nội dung hoặc thuộc tính để tùy chỉnh.
Trong bài viết này, chúng ta sẽ khám phá một số thẻ HTML thông dụng và ý nghĩa của chúng. Chúng bao gồm các thẻ cho tiêu đề, đoạn văn bản, liên kết, hình ảnh, bảng, danh sách, và nhiều thẻ khác. Hiểu và sử dụng đúng các thẻ này sẽ giúp bạn tạo ra những trang web hấp dẫn và tương tác.

Khái niệm cơ bản

Thẻ (tag)

  • Trong HTML, các thẻ được sử dụng để đánh dấu và định nghĩa các phần tử trong tài liệu web.
  • Một thẻ HTML bao gồm một từ khóa được đặt trong cặp ký tự “nhẹ” <>.
  • Thẻ có thể là thẻ đóng (<tag>) hoặc thẻ tự đóng (<tag />).
  • Ví dụ: <p>Đây là một đoạn văn bản</p>, <img src="image.jpg" alt="Hình ảnh">.

Thuộc tính (properties)

  • Thuộc tính là các giá trị được chỉ định cho một thẻ HTML để tùy chỉnh hoặc định nghĩa các đặc tính của phần tử đó.
  • Mỗi thuộc tính được viết sau tên thẻ và trước ký tự >.
  • Mỗi thuộc tính có một tên và một giá trị, được phân tách bằng dấu bằng (=).
  • Ví dụ: <img src="image.jpg" alt="Hình ảnh">, trong đó srcalt là các thuộc tính của thẻ <img>.

Các nhóm thẻ trong HTML

  • Thẻ block-level: Các thẻ block-level tạo thành các khối lớn trên trang và chiếm toàn bộ chiều ngang của phần tử cha. Ví dụ: <div>, <p>, <h1> đến <h6>.
  • Thẻ inline: Các thẻ inline chiếm không gian nhỏ hơn và chỉ chiếm không gian cần thiết xung quanh nội dung của chúng. Ví dụ: <span>, <a>, <strong>, <em>.
  • Thẻ đánh dấu cấp tiêu đề: Các thẻ đánh dấu cấp tiêu đề (<h1> đến <h6>) được sử dụng để định dạng các tiêu đề và chỉ số trang web.
  • Thẻ đánh dấu nội dung: Các thẻ như <p>, <div>, <span> được sử dụng để định dạng và nhóm các đoạn văn bản hoặc phần tử.
  • Thẻ đánh dấu liên kết: Thẻ <a> được sử dụng để tạo liên kết (hyperlink) đến các trang web khác hoặc các phần trong trang.
  • Thẻ đánh dấu hình ảnh: Thẻ <img> được sử dụng để hiển thị hình ảnh trên trang web.
Những khái niệm trên là những khái niệm cơ bản trong HTML, và chúng giúp xây dựng cấu trúc và hiển thị nội dung trên trang web.

Cấu trúc một file html

các thẻ HTML

Một tệp HTML (HTML file) có cấu trúc cơ bản gồm các phần sau:
1. Khai báo doctype (Định dạng HTML):
<!DOCTYPE html>
2. Thẻ <html>:
<html></html>
– Đây là phần tổng quát của tài liệu HTML và bao gồm toàn bộ nội dung trang web.
3. Thẻ <head>:
<head></head>
– Phần này chứa thông tin về tài liệu HTML, như tiêu đề, các định nghĩa meta-data, các liên kết đến các tệp CSS hoặc JavaScript, vv.
4. Thẻ <body>:
<body></body>
– Phần này chứa nội dung hiển thị trên trang web, bao gồm văn bản, hình ảnh, liên kết, bảng, biểu đồ, vv.
Ví dụ, dưới đây là một cấu trúc đơn giản của một tệp HTML:
<!DOCTYPE html><html><head><title>Trang web của tôi</title><meta charset="UTF-8"><link rel="stylesheet" href="styles.css"><script src="script.js"></script></head><body><h1>Xin chào, đây là trang web của tôi!</h1><p>Đây là một đoạn văn bản.</p><img src="image.jpg" alt="Hình ảnh"><a href="https://www.example.com">Liên kết đến trang web khác</a></body></html>
Trong ví dụ trên, chúng ta có phần khai báo doctype, thẻ <html> chứa toàn bộ nội dung trang web, thẻ <head> chứa các định nghĩa và meta-data, và thẻ <body> chứa nội dung hiển thị trên trang web.
Cấu trúc của một file HTML có thể phức tạp hơn tùy thuộc vào nhu cầu và yêu cầu cụ thể của trang web, nhưng các phần cơ bản như trên là những phần quan trọng và thường xuyên xuất hiện trong một tệp HTML.

Đọc thêm  Flatsome là gì? Tại sao website kinh doanh nên sử dụng theme flatsome?

Nhóm thẻ block

Định dạng phân mục: <h1> </h1>, …, <h6> </h6>

Thẻ <p> được sử dụng để định dạng và đánh dấu các đoạn văn bản trong HTML. Đây là thẻ phổ biến để tạo các đoạn văn bản trên trang web
Ví dụ
  1. <p>
  2. Thân em vừa trắng, lại vừa tròn,<br />
  3. Bảy nổi ba chìm với nước non.
  4. </p>
  5. <p>
  6. Rắn nát mặc dù tay kẻ nặn,<br/>
  7. Mà em vẫn giữ tấm lòng son.
  8. </p>
Kết quả
Thân em vừa trắng, lại vừa tròn,
Bảy nổi ba chìm với nước non.
Rắn nát mặc dù tay kẻ nặn,
Mà em vẫn giữ tấm lòng son.

Bộ thẻ định nghĩa danh sách: <dl> </dl>, <dt> </dt>, <dd> </dd>

  • Thẻ <dl> được sử dụng để định nghĩa một danh sách định nghĩa.
  • Thẻ <dt> được sử dụng để định nghĩa mục tiêu trong danh sách định nghĩa.
  • Thẻ <dd> được sử dụng để cung cấp định nghĩa hoặc mô tả cho mục tiêu trong danh sách định nghĩa.

Bộ thẻ định nghĩa danh sách (có thứ tự): <ol> </ol>, <li> </li>

  • Thẻ <ol> được sử dụng để tạo danh sách có thứ tự (ordered list).
  • Thẻ <li> được sử dụng để định nghĩa mục trong danh sách có thứ tự.

Bộ thẻ định nghĩa danh sách (không có thứ tự): <ul> </ul>, <li> </li>

  • Thẻ <ul> được sử dụng để tạo danh sách không có thứ tự (unordered list).
Ví dụ
  1. <ol>
  2.                 <li>Thơ tự tình – Hồ Xuân Hương</li>
  3.                 <li>Lấy chồng chung – Hồ Xuân Hương</li>
  4.                 <li>Đánh đu – Hồ Xuân Hương</li>
  5.                 <li>Bánh trôi nước – Hồ Xuân Hương</li>
  6.                 <li>...</li>
  7. </ol>
* Thuộc tính type được dùng trong thẻ <ol> để định nghĩa kiểu kí tự liệt kê của danh sách, type có các giá trị: 1, a, A, i, I.
Kết quả
  1. Thơ tự tình – Hồ Xuân Hương
  2. Lấy chồng chung – Hồ Xuân Hương
  3. Đánh đu – Hồ Xuân Hương
  4. Bánh trôi nước – Hồ Xuân Hương
  • Thẻ <li> được sử dụng để định nghĩa mục trong danh sách không có thứ tự.
Ví dụ
  1. <ul>
  2.            <li>Thơ tự tình – Hồ Xuân Hương</li>
  3.            <li>Lấy chồng chung – Hồ Xuân Hương</li>
  4.            <li>Đánh đu – Hồ Xuân Hương</li>
  5.            <li>Bánh trôi nước – Hồ Xuân Hương</li>
  6. </ul>
Kết quả
  • Thơ tự tình – Hồ Xuân Hương
  • Lấy chồng chung – Hồ Xuân Hương
  • Đánh đu – Hồ Xuân Hương
  • Bánh trôi nước – Hồ Xuân Hương
Các nhóm thẻ block này giúp tổ chức và định dạng nội dung trên trang web một cách logic và cấu trúc.

Nhóm thẻ Inline

Định nghĩa một đường dẫn: <a> </a>

  • Thẻ <a> được sử dụng để tạo một liên kết (hyperlink) đến một trang web khác, một tài liệu, hoặc một vị trí trên cùng trang.
  • Ví dụ: <a href="https://www.example.com">Đây là một liên kết</a>

Thể hiện hình ảnh: <img />

  • Thẻ <img> được sử dụng để hiển thị hình ảnh trên trang web.
  • Thẻ này là một thẻ tự đóng, nghĩa là không có thẻ đóng tương ứng.
  • Thuộc tính src được sử dụng để chỉ định đường dẫn tới tệp hình ảnh.
  • Ví dụ: <img src="image.jpg" alt="Hình ảnh">

3 định dạng ký tự cơ bản cho chuỗi ký tự: <b> </b>, <i> </i>, <u> </u>

  • Thẻ <b> được sử dụng để làm đậm một phần văn bản.
  • Thẻ <i> được sử dụng để in nghiêng một phần văn bản.
  • Thẻ <u> được sử dụng để gạch chân một phần văn bản.
  • Ví dụ: <b>Đây là văn bản đậm</b>, <i>Đây là văn bản in nghiêng</i>, <u>Đây là văn bản gạch chân</u>
Dưới đây là một ví dụ minh họa về cách sử dụng các thẻ inline trong HTML:
  1. htmlCopy code
  2. <p>Đây là một đoạn văn bản <b>đậm</b>, <i>in nghiêng</i>, và <u>gạch chân</u>.</p><p>Hãy truy cập <a href="https://www.example.com">đây</a> để tìm hiểu thêm.</p><p>Đây là một <img src="image.jpg" alt="Hình ảnh"> trong trang web.</p>
Trong ví dụ trên:
  • Thẻ <b>, <i>, và <u> được sử dụng để định dạng phần văn bản trong thẻ <p>. Kết quả là phần văn bản “đậm” được hiển thị đậm, “in nghiêng” được hiển thị in nghiêng, và “gạch chân” được hiển thị với gạch chân.
  • Thẻ <a> được sử dụng để tạo một liên kết với văn bản “đây”. Khi người dùng nhấp vào liên kết, họ sẽ được chuyển hướng đến trang web được chỉ định trong thuộc tính href.
  • Thẻ <img> được sử dụng để hiển thị một hình ảnh trong trang web. Đường dẫn tới hình ảnh được chỉ định trong thuộc tính src, và thuộc tính alt cung cấp một văn bản mô tả hình ảnh (hiển thị khi hình ảnh không thể tải).
Khi được hiển thị trên trình duyệt, đoạn mã trên sẽ tạo ra một đoạn văn bản có các từ “đậm”, “in nghiêng” và “gạch chân” được định dạng tương ứng, một liên kết “đây” đưa đến trang web khác, và một hình ảnh hiển thị trên trang web.

Danh sách tất cả các thẻ trong HTML

1. <html>: Thẻ mở đầu của trang HTML – none
2. <head> </head>: Thẻ chứa các thẻ trong phần đầu của trang HTML – none
3. <title> </title>: Tiêu đề trang web – none
4. <meta>: Mô tả tổng quát về nội dung trang web – none
5. <link>: Dùng để nhúng một tập tin nào đó vào trang web – none
6. <script> </script>: Dùng để nhúng các tập tin javascript – none
7. <style> </style>: Dùng để bao bọc một nội dung về css – none
8. <body> </body>: Thẻ chứa nội dung chính của website – block level
9. <h1></h1>: Thẻ để hiện tiêu đề của một vấn đề nào đó – block level
10. <div> </div>: Thẻ này thường dùng để chứa nội dung – block level
11. <span> </span>: Thẻ chứa nội dung – inline
12. <p> </p>: Thẻ chứa nội dung (đoạn văn) – block level
13. <center> </center>: Thẻ canh giữa các đối tượng nằm bên trong – block level
14. <a> </a>: Thẻ tạo link – inline
15. <ul> </ul>: Kết hợp với thẻ <li> để mô tả liệt kê theo dạng danh sách – block level
16. <img>: Thẻ dùng để hiển thị một hình ảnh nào đó – inline
17. <form> <input>: Thẻ hiển thị những phần tử trong form nhập liệu – block level
18. <br>: Thẻ xuống hàng – block level
19. <hr>: Thẻ tạo đường kẻ ngang – block level
20. <table> </table>: Tạo bảng – block level
21. <iframe> </iframe>: Tạo frame – block level
22. <b> </b>: Tạo chữ đậm – inline
23. <i> </i>: Tạo chữ nghiêng – inline
24. <u> </u>: Tạo chữ gạch dưới – inline
25. <s> </s>: Tạo chữ gạch cắt ngang – inline
26. <sub> </sub> <sup> </sup>: Tạo kiểu chứ – inline
27. <blockquote>: Mộ tả một phần của trích dẫn – block level
28. <tt> </tt> <code> </code>: Tạo kiểu chữ cho phần mô tả mã nguồn – block level
29. <pre>: Định dạng nội dung – block level

Đọc thêm  Cách dùng câu lệnh if…else trong PHP

Lời kết

Việc sử dụng đúng và hiểu rõ các thẻ block trong HTML sẽ giúp bạn xây dựng cấu trúc và tổ chức nội dung trên trang web một cách hợp lý. Hãy sử dụng các thẻ này để tạo ra trang web chuyên nghiệp và dễ đọc cho người dùng của bạn.

Tags :

Chia sẻ ngay :

0 0 đánh giá
Article Rating
Theo dõi
Thông báo của
guest
0 Comments
Phản hồi nội tuyến
Xem tất cả bình luận

Bài viết liên quan

Bảng Giá Thiết Kế Website Thương Hiệu Cho Doanh Nghiệp
Dịch vụ thiết kế website thương hiệu cho doanh nghiệp tại WEBBOX là một hành trình mang tính chiến lược,...
Set trong Java
Set trong Java là gì? Tất tần tật kiến thức về Set trong Java
Trong lĩnh vực lập trình chắc hẳn các bạn đã từng nghe về Set trong Java, Set là một cấu trúc dữ liệu...
0
Rất thích suy nghĩ của bạn, hãy bình luận.x

Tư vấn giải pháp website tốt nhất cho doanh nghiệp

Chúng tôi luôn sẵn sàng lắng nghe và đưa ra giải pháp phù hợp nhất cho vấn đề của bạn.