Thẻ định dạng trong HTML

Trung Nguyen
01/04/2020
7 min read

Nội dung chính của bài viết

Nếu bạn đã từng sử dụng ứng dụng Word, bạn phải làm quen với các thao tác để in đậm, in nghiêng, hay gạch chân; đó là 3 trong số 10 tùy chọn có sẵn để chỉ cách mà văn bản xuất hiện trong HTML và XHTML.

In đậm trong HTML

Bất cứ nội dung gì mà xuất hiện trong phần tử ... đều được in đậm.

<!DOCTYPE html>
<html>

   <head>
      <title>Bold Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <b>bold</b> typeface.</p>
   </body>
	
</html>

Đây là kết quả:

In nghiêng trong HTML

Bất cứ nội dung gì xuất hiện trong phần tử ... đều được in nghiêng:

<!DOCTYPE html>
<html>

   <head>
      <title>Italic Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <i>italicized</i> typeface.</p>
   </body>
	
</html>

Đây là kết quả:

Gạch chân trong HTML

Bất cứ nội dung gì xuất hiện trong phần tử ... đều được gạch chân:

Live Demo
<!DOCTYPE html>
<html>

   <head>
      <title>Underlined Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <u>underlined</u> typeface.</p>
   </body>
	
</html>

Đây là kết quả:

Gạch ngang trong HTML

Bất cứ nội dung nào xuất hiện trong phần tử <strike>...</strike> đều được gạch ngang:

<!DOCTYPE html>
<html>

   <head>
      <title>Strike Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
   </body>
	
</html>

Đây là kết quả:

Font chữ đơn cách trong HTML

Nội dung trong phần tử <tt>...</tt> được viết dưới dạng font chữ đơn cách. Hầu hết các font chữ đều được biết như là các font chữ rộng bởi vì các ký tự khác nhau có độ rộng khác nhau (ví dụ như ký tự 'm' rộng hơn ký tự 'i'). Tuy nhiên trong font chữ đơn cách, các ký tự có độ rộng giống nhau.

<!DOCTYPE html>
<html>

   <head>
      <title>Monospaced Font Example</title>
   </head>
	
   <body>
      <p>The following word uses a <tt>monospaced</tt> typeface.</p>
   </body>
	
</html>

Đây là kết quả:

Chỉ số trên trong HTML

Nội dung trong phần tử ... được viết dưới dạng chỉ số trên, kích cỡ của nó bằng kích cỡ của các ký tự quanh nó nhưng độ cao của nó bằng một nửa các ký tự khác.

<!DOCTYPE html>
<html>

   <head>
      <title>Superscript Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sup>superscript</sup> typeface.</p>
   </body>
	
</html>

Đây là kết quả:

Chỉ số dưới trong HTML

Nội dung trong phần tử ... được viết ở dạng chỉ số dưới, kích cỡ của nó bằng kích cỡ các ký tự xung quanh nhưng chiều cao bằng một nửa.

<!DOCTYPE html>
<html>

   <head>
      <title>Subscript Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sub>subscript</sub> typeface.</p>
   </body>
	
</html>

Đây là kết quả:

Chèn văn bản trong HTML

Bất cứ nội dung xuất hiện trong phần tử <ins>...</ins> được hiển thị như ở dạng văn bản được chèn.

<!DOCTYPE html>
<html>

   <head>
      <title>Inserted Text Example</title>
   </head>
	
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
	
</html>

Đây là kết quả:

Xóa văn bản trong HTML

<!DOCTYPE html>
<html>

   <head>
      <title>Deleted Text Example</title>
   </head>
	
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
	
</html>

Đây là kết quả:

Văn bản lớn hơn trong HTML

Nội dung trong phần tử <big>...</big> được hiển thị ở một kích cỡ lớn hơn phần còn lại xung quanh nó.

<!DOCTYPE html>
<html>

   <head>
      <title>Larger Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <big>big</big> typeface.</p>
   </body>
	
</html>

Đây là kết quả:

Văn bản nhỏ hơn trong HTML

Nội dung xuất hiện trong phần tử ... được hiển thị ở một kích cỡ nhỏ hơn phần còn lại xung quanh nó.

<!DOCTYPE html>
<html>

   <head>
      <title>Smaller Text Example</title>
   </head>

   <body>
      <p>The following word uses a <small>small</small> typeface.</p>
   </body>

</html>

Đây là kết quả:

Nhóm nội dung trong HTML

Phần tử <div> và  cho phép bạn tạo các phần tử thành nhóm nội dung để tạo ra các khu vực hoặc các tiểu khu của một trang.

Ví dụ, bạn muốn đặt tất cả các lời chú thích ở cuối trang và đặt tất cả chúng trong một phần tử <div> để chỉ rằng tất cả các phần tử trong phần tử <div> nào đó. Bạn cũng có thể đính kèm một style cho phần tử này.

<!DOCTYPE html>
<html>

   <head>
      <title>Div Tag Example</title>
   </head>
	
   <body>
      <div id="menu" align="middle" >
         <a href="/index.htm">HOME</a> | 
         <a href="/about/contact_us.htm">CONTACT</a> | 
         <a href="/about/index.htm">ABOUT</a>
      </div>

      <div id="content" align="left" bgcolor="white">
         <h5>Content Articles</h5>
         <p>Actual content goes here.....</p>
      </div>
   </body>
	
</html>

Đây là kết quả:

Bên cạnh đó, phần tử có thể sử dụng để tạo nhóm chỉ cho các phần tử trong một dòng.

Vì thế, nếu bạn có một phần của câu hay đoạn văn mà bạn muốn phân nhóm chúng, bạn có thể sử dụng phần tử như ví dụ dưới đây.

<!DOCTYPE html>
<html>

   <head>
      <title>Span Tag Example</title>
   </head>
	
   <body>
      <p>This is the example of <span style = "color:green">span tag</span>
         and the <span style = "color:red">div tag</span> alongwith CSS</p>
   </body>
	
</html>

Đây là kết quả: