Các thẻ định dạng văn bản trong HTML

Table of Contents

Trong HTML, các thẻ định dạng văn bản giúp điều chỉnh cách hiển thị nội dung trên trang web, làm cho văn bản trở nên rõ ràng và hấp dẫn hơn. Một số thẻ phổ biến bao gồm  (in đậm),  (in nghiêng),  (gạch chân),  (tô sáng),  (chữ nhỏ),  (nhấn mạnh),  (nhấn mạnh nội dung theo nghĩa ngữ cảnh). Ngoài ra, các thẻ như <h1> đến <h6> dùng để tạo tiêu đề, trong khi  giúp tạo đoạn văn bản. Việc sử dụng đúng các thẻ này sẽ giúp cải thiện trải nghiệm người đọc và tối ưu hóa SEO cho website.

Các thẻ định dạng văn bản trong HTML

– Dưới đây là danh sách những thẻ thường được sử dụng để định dạng cho văn bản.

(các bạn vui lòng tấm vào hình để tìm hiểu chi tiết chức năng và cách sử dụng của từng thẻ)

<b>	– Định dạng chữ in đậm cho văn bản.
<i>	– Định dạng chữ in nghiêng cho văn bản.
<u>	– Tạo một cái đường kẻ ngang nằm dưới chân văn bản.
<s>	– Tạo một cái đường kẻ ngang nằm giữa văn bản.
<big>	– Định dạng chữ to hơn so với văn bản bình thường.
<small>	– Định dạng chữ nhỏ hơn so với văn bản bình thường.
<sup>	– Định dạng chữ nhỏ & nằm ở khoảng nửa trên so với văn bản bình thường.
<sub>	– Định dạng chữ nhỏ & nằm ở khoảng nửa dưới so với văn bản bình thường.
<mark>	– Đánh dấu màu nền nổi bật cho văn bản.
<pre>	– Giữ nguyên định dạng cho văn bản (giống như lúc soạn thảo)
<hr>	– Tạo một cái đường kẻ ngang ngăn cách nội dung phía trên và nội dung phía dưới.
<br>	– Tạo một dấu ngắt xuống dòng.
<bdo>	– Đảo ngược thứ tự xuất hiện của các ký tự.

– Thẻ dùng để định dạng chữ in đậm cho văn bản.

<!DOCTYPE html>
<html>
<head>
	<title>Tiêu đề của trang web</title>
	<meta charset="utf-8">
</head>
<body>
	<p>Học <b>Lập Trình Web</b> miễn phí</p>
</body>
</html>

– Lưu ý: Thẻ cũng có chức năng & cách sử dụng tương tự.

– Thẻ dùng để định dạng chữ in nghiêng cho văn bản.

<!DOCTYPE html>
<html>
<head>
	<title>Tiêu đề của trang web</title>
	<meta charset="utf-8">
</head>
<body>
	<p>Học <i>Lập Trình Web</i> miễn phí</p>
</body>
</html>

– Lưu ý: Thẻ cũng có chức năng & cách sử dụng tương tự.

– Thẻ dùng để tạo một cái đường kẻ ngang nằm dưới chân văn bản.

<!DOCTYPE html>
<html>
<head>
	<title>Tiêu đề của trang web</title>
	<meta charset="utf-8">
</head>
<body>
	<p>Học <u>Lập Trình Web</u> miễn phí</p>
</body>
</html>

– Lưu ý: Thẻ <ins> cũng có chức năng & cách sử dụng tương tự.

– Thẻ <s> dùng để tạo một cái đường kẻ ngang nằm giữa văn bản.

<!DOCTYPE html>
<html>
<head>
	<title>Tiêu đề của trang web</title>
	<meta charset="utf-8">
</head>
<body>
	<p>Học <s>Lập Trình Web</s> miễn phí</p>
</body>
</html>

– Lưu ý: Thẻ <del> cũng có chức năng & cách sử dụng tương tự.

– Thẻ <big> dùng để định dạng chữ to hơn so với văn bản bình thường.

<!DOCTYPE html>
<html>
<head>
	<title>Tiêu đề của trang web</title>
	<meta charset="utf-8">
</head>
<body>
	<p>Học <big>Lập Trình Web</big> miễn phí</p>
</body>
</html>

– Thẻ dùng để định dạng chữ nhỏ hơn so với văn bản bình thường.

<!DOCTYPE html>
<html>
<head>
	<title>Tiêu đề của trang web</title>
	<meta charset="utf-8">
</head>
<body>
	<p>Học <small>Lập Trình Web</small> miễn phí</p>
</body>
</html>

– Thẻ dùng để định dạng chữ nhỏ & nằm ở khoảng nửa trên so với văn bản bình thường.

<!DOCTYPE html>
<html>
<head>
	<title>Tiêu đề của trang web</title>
	<meta charset="utf-8">
</head>
<body>
	<p>25<sup>2</sup> + 2<sup>3</sup> = 633</p>
</body>
</html>

– Thẻ dùng để định dạng chữ nhỏ & nằm ở khoảng nửa dưới so với văn bản bình thường.

<!DOCTYPE html>
<html>
<head>
	<title>Tiêu đề của trang web</title>
	<meta charset="utf-8">
</head>
<body>
	<p>CO<sub>2</sub> + H<sub>2</sub>O = H<sub>2</sub>CO<sub>3</sub></p>
</body>
</html>

– Thẻ dùng để đánh dấu màu nền nổi bật cho văn bản.

<!DOCTYPE html>
<html>
<head>
	<title>Tiêu đề của trang web</title>
	<meta charset="utf-8">
</head>
<body>
	<p>Học <mark>Lập Trình Web</mark> miễn phí</p>
</body>
</html>

– Lưu ý: Những ký tự nằm bên trong cặp thẻ sẽ mặc định có nền màu vàng.

– Thẻ <pre> dùng để giữ nguyên định dạng cho văn bản (giống như lúc soạn thảo)

<!DOCTYPE html>
<html>
<head>
	<title>Tiêu đề của trang web</title>
	<meta charset="utf-8">
</head>
<body>
	<pre>Hãy tham gia      diễn đàn HỎI
      ĐÁP LẬP 
      TRÌNH WEB trên Facebook của chúng tôi

      Để được hỗ   trợ giải đáp những    câu hỏi về 

      lĩnh vực    lập trình web 
      một cách nhanh        nhất và tốt 
   nhất</pre>
</body>
</html>

– Thẻ <hr> dùng để tạo một cái đường kẻ ngang ngăn cách nội dung phía trên và nội dung phía dưới.

<!DOCTYPE html>
<html>
<head>
	<title>Tiêu đề của trang web</title>
	<meta charset="utf-8">
</head>
<body>
	<p>Tài liệu học HTML</p>
	<hr>
	<p>Tài liệu học CSS</p>
	<hr>
</body>
</html>

– Thẻ dùng để tạo một dấu ngắt xuống dòng.

<!DOCTYPE html>
<html>
<head>
	<title>Tiêu đề của trang web</title>
	<meta charset="utf-8">
</head>
<body>
	<p>Lập<br>Trình<br><br><br>Web</p>
</body>
</html>

– Thẻ <bdo> dùng để đảo ngược thứ tự xuất hiện của các ký tự.

<!DOCTYPE html>
<html>
<head>
	<title>Tiêu đề của trang web</title>
	<meta charset="utf-8">
</head>
<body>
	<p>12345 được đảo ngược thành <bdo dir="rtl">12345</bdo></p>
</body>
</html>

Các thẻ định dạng văn bản trong HTML

Related Posts