Thẻ html định dạng văn bản

Code: Default | Auth: 03cd82

HTML có các thẻ định dạng văn bản giúp bạn trình bày các đoạn văn và hiển thị các nội dung text thân thiện hơn. Tuy nhiên để định dạng đẹp hơn nữa thì bạn cần sử dụng thêm CSS để định dạng.

Thẻ định dạng có 2 loại

  • Thẻ định dạng thuần: Chỉ có tác dụng định dạng hiển thị
  • Thẻ định dạng kèm vai trò logic: Ngoài tác dụng định dạng hiển thị, thẻ còn có ý nghĩa logic với các vai trò khác nhau.

Dưới đây là một số thẻ dùng định dạng văn bản, các thẻ này đều có thẻ mở và thẻ đóng vì là thẻ có chứa nội dung.

Thẻ Mô tả
<b> Thẻ định dạng thuần chỉ có tác dụng làm chữ in đậm hơn
<strong> Thẻ có vai trò logic, vừa làm chữ đậm vừa báo cho trình duyệt biết nội dung trong thẻ này quan trọng hơn.
<i> Thẻ định dạng thuần chữ nghiêng
<em> Thẻ logic định dạng chữ nghiêng và thể hiện nội dung cần chú ý
<mark> Thẻ dùng đánh dấu nội dung và đổi màu nền cho chữ, làm nổi bật nội dung
<u> Thẻ tạo gạch chân cho chữ
<sup> Thẻ hiển thị nội dung cao hơn dòng, dùng làm chỉ số trên
<sub> Thẻ hiển thị nội dung thấp hơn dòng, dùng làm chỉ số dưới
<del> Thẻ dùng đánh dấu xóa nội dung, hiển thị gạch ngang chữ
<ins> Thẻ logic hiển thị nội dung trong tình huống bổ sung thêm nội dung vào trang web, chữ sẽ gạch chân
<big> Thẻ hiển thị chữ to hơn bình thường
<small> Thẻ hiển thị chữ bé hơn bình thường


Hiển thị chữ đậm

Bạn có thể dùng thẻ <b> hoặc thẻ <strong>

Cú pháp: <b>... nội dung... </b>  hoặc <strong>... nội dung...</strong>

<p> 
   Nội dung chữ thường. <b>Đây là chữ đậm b</b>, và đây là <strong>chữ đậm strong</strong>		
</p>

Chạy thử code

 

Hiển thị chữ nghiêng

Bạn có thể dùng thẻ <i>, <em>

Cú pháp: <i>... nội dung .. </i>  hoặc <em> ... nội dung ... </em> 

<p>
	Nội dung chữ thường. <i>Đây là chữ nghiêng i</i>, đây là <em>chữ nghiêng em</em>
</p>

Chạy thử code

Đánh dấu nổi bật nội dung với thẻ <mark>

Cú pháp: <mark> ... nội dung cần làm nổi bật ...</mark>

<h2>Website zezo.dev cập nhật kiến thức cho <mark>người mới bắt đầu</mark>. </h2>

Chạy thử code

Gạch chân cho chữ bằng thẻ <u>

Cú pháp: <u>... nội dung cần gạch chân ... </u>

Bạn cũng có thể sử dụng thẻ <ins> để đánh dấu nội dung được gạch chân.

Chạy thử code

Gạch ngang chữ

Bạn có thể dùng thẻ <strike> hoặc <del>

<!DOCTYPE html>
<html>
    <head>
          <title>Học HTML tại zezo.dev</title>
          <meta charset="UTF-8">
    </head>
    <body>
		Nội dung <strike>đã bị xóa bỏ</strike>. <br>
		Nội dung <del>xóa bởi thẻ del</del>.
    </body>
</html>

Chạy thử code

Tạo chữ là chỉ số trên và chỉ số dưới

- Định dạng chỉ số trên bạn dùng thẻ <sup>

- Định dạng chỉ số dưới bạn dùng thẻ <sub>

<!DOCTYPE html>
<html>
    <head>
          <title>Học HTML tại zezo.dev</title>
          <meta charset="UTF-8">
    </head>
    <body>
		Thẻ sup dùng định dạng chỉ số trên (định dạng số 2):  3x<sup>2</sup> + 5x = 0 <br>
		Thẻ sub dùng định dạng chỉ số dưới  (định dạng số 2): H<sub>2</sub>O
    </body>
</html>

Chạy thử code

Tạo chữ to, bé hơn bình thường

- Sử dụng thẻ <big> để tạo chữ to hơn bình thường

- Sử dụng thẻ <small> để tạo chữ bé hơn bình thường

<!DOCTYPE html>
<html>
    <head>
          <title>Học HTML tại zezo.dev</title>
          <meta charset="UTF-8">
    </head>
    <body>
		Sử dụng thẻ big tạo <big>chữ to hơn</big> bình thường. <br>
		Sử dụng thẻ small tạo <small>chữ bé hơn</small> bình thường.
	</body>
</html>

Chạy thử code

 

Trên đây là một số ví dụ định dạng theo mặc định hiển thị của các thẻ. Sau này bạn có thể sử dụng CSS để làm thay đổi toàn bộ hiển thị của 1 thẻ theo mục đích riêng của bạn.