Thẻ cụm từ trong HTML

Các thẻ cụm từ đã được thiết kế cho các mục đích cụ thể, mặc dù chúng được hiển thị theo cách tương tự như các thẻ cơ bản khác như <b>, <i>, <pre><tt> mà bạn đã thấy trong chương trước.

Chương này sẽ trình bày tất cả các thẻ cụm từ quan trọng, chúng ta sẽ lần lượt xem qua từng thẻ cụm từ trong HTML nhé.

Thẻ em trong HTML

Bất cứ điều gì xuất hiện trong phần tử <em> ... </ em> đều được hiển thị dưới dạng văn bản được nhấn mạnh.

Ví dụ sử dụng thẻ em trong HTML:

<!DOCTYPE html>
<html>

   <head>
      <title>Emphasized Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <em>emphasized</em> typeface.</p>
   </body>
	
</html>

Điều này sẽ tạo ra kết quả sau:

Thẻ <em> trong HTML

Thẻ mark trong HTML

Bất cứ điều gì xuất hiện trong phần tử <mark> ... </ mark> sẽ được hiển thị dưới dạng được đánh dấu bằng mực màu vàng.

Ví dụ sử dụng thẻ mark trong HTML:

<!DOCTYPE html>
<html>

   <head>
      <title>Marked Text Example</title>
   </head>
	
   <body>
      <p>The following word has been <mark>marked</mark> with yellow</p>
   </body>
	
</html>

Điều này sẽ tạo ra kết quả sau

Thẻ <mark> trong HTML

Thẻ strong trong HTML

Bất cứ điều gì xuất hiện trong phần tử <strong> ... </ strong> đều được hiển thị dưới dạng văn bản quan trọng.

Ví dụ sử dụng thẻ strong trong HTML:

<!DOCTYPE html>
<html>

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

Điều này sẽ tạo ra kết quả sau

Thẻ strong trong HTML

Thẻ abbr trong HTML

Bạn có thể viết tắt một văn bản bằng cách đặt nó vào trong việc mở các thẻ <abbr> ... </ abbr>. Nếu sử dụng thẻ này, thuộc tính title phải chứa mô tả đầy đủ cho nội dung của thẻ này và không có ngoại lệ.

Ví dụ minh họa sử dụng thẻ abbr trong HTML:

<!DOCTYPE html>
<html>

   <head>
      <title>Text Abbreviation</title>
   </head>
	
   <body>
      <p>My best friend's name is  <abbr title = "Abhishek">Abhy</abbr>.</p>
   </body>
	
</html>

Điều này sẽ tạo ra kết quả sau:

Thẻ abbr trong HTML

Thẻ acronym trong HTML

Phần tử <acronym> cho phép bạn chỉ ra rằng văn bản giữa các thẻ <acronym> ... </ acronym> là từ viết tắt.

Hiện tại, các trình duyệt chính không thay đổi cách hiển thị của nội dung trong phần tử <acronym>.

Ví dụ minh họa sử dụng thẻ acronym trong HTML:

<!DOCTYPE html>
<html>

   <head>
      <title>Acronym Example</title>
   </head>
	
   <body>
      <p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
   </body>
	
</html>

Điều này sẽ tạo ra kết quả sau:

Thẻ acronym trong HTML

Thẻ bdo trong HTML

Phần tử <bdo> ... </ bdo> là viết tắt của Bi-Directional Override và được sử dụng để ghi đè hướng văn bản hiện tại.

Ví dụ minh họa sử dụng thẻ bdo trong HTML:

<!DOCTYPE html>
<html>

   <head>
      <title>Text Direction Example</title>
   </head>

   <body>
      <p>This text will go left to right.</p>
      <p><bdo dir = "rtl">This text will go right to left.</bdo></p>
   </body>

</html>

Điều này sẽ tạo ra kết quả sau

Thẻ bdo trong HTML

Thẻ dfn trong HTML

Phần tử <dfn> ... </ dfn> cho phép bạn chỉ định rằng bạn đang giới thiệu một thuật ngữ đặc biệt. Cách sử dụng của nó tương tự như các từ in nghiêng ở giữa đoạn văn.

Thông thường, bạn sẽ sử dụng phần tử <dfn> trong lần đầu tiên bạn giới thiệu một thuật ngữ chính. Hầu hết các trình duyệt gần đây hiển thị nội dung của phần tử <dfn> bằng phông chữ in nghiêng.

Ví dụ minh họa sử dụng thẻ dfn trong HTML:

<!DOCTYPE html>
<html>

   <head>
      <title>Special Terms Example</title>
   </head>
	
   <body>
      <p>The following word is a <dfn>special</dfn> term.</p>
   </body>
	
</html>

Điều này sẽ tạo ra kết quả sau

Thẻ dfn trong HTML

Thẻ blockquote trong HTML

Khi bạn muốn trích dẫn một đoạn văn từ một nguồn khác, bạn nên đặt nó ở giữa các thẻ <blockquote> ... </ blockquote>.

Văn bản bên trong phần tử <blockquote> thường được thụt vào từ cạnh trái và phải của văn bản xung quanh và đôi khi sử dụng phông chữ in nghiêng.

Ví dụ minh họa sử dụng thẻ blockquote trong HTML:

<!DOCTYPE html>
<html>

   <head>
      <title>Blockquote Example</title>
   </head>
	
   <body>
      <p>The following description of XHTML is taken from the W3C Web site:</p>

      <blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on 
         from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
   </body>
	
</html>

Điều này sẽ tạo ra kết quả sau

Thẻ blockquote trong HTML

Thẻ q trong HTML

Phần tử <q> ... </q> được sử dụng khi bạn muốn thêm một trích dẫn kép trong câu.

Ví dụ minh họa sử dụng thẻ q trong HTML:

<!DOCTYPE html>
<html>

   <head>
      <title>Double Quote Example</title>
   </head>
	
   <body>
      <p>Amit is in Spain, <q>I think I am wrong</q>.</p>
   </body>
	
</html>

Điều này sẽ tạo ra kết quả sau

Thẻ q trong HTML

Thẻ cite trong HTML

Nếu bạn đang trích dẫn một văn bản, bạn có thể chỉ ra nguồn đặt nó giữa phần tử <cite> ... </cite>.

Nội dung của phần tử <cite> được hiển thị trong văn bản in nghiêng theo mặc định.

Ví dụ minh họa sử dụng thẻ cite trong HTML:

<!DOCTYPE html>
<html>
   
   <head>
      <title>Citations Example</title>
   </head>
   
   <body>
      <p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
   </body>
   
</html>

Điều này sẽ tạo ra kết quả sau

Thẻ cite trong HTML

Thẻ code trong HTML

Bất kỳ mã lập trình nào xuất hiện trên trang Web phải được đặt bên trong các thẻ <code> ... </code>. Thông thường nội dung của phần tử <code> được trình bày theo phông chữ đơn cách, giống như mã trong hầu hết các ngôn ngữ lập trình.

Ví dụ minh họa sử dụng thẻ code trong HTML:

<!DOCTYPE html>
<html>
   
   <head>
      <title>Computer Code Example</title>
   </head>
   
   <body>
      <p>Regular text. <code>This is code.</code> Regular text.</p>
   </body>
   
</html>

Điều này sẽ tạo ra kết quả sau

Thẻ code trong HTML

Thẻ kbd trong HTML

Khi bạn đang nói về máy tính, nếu bạn muốn nói với người đọc nhập một số văn bản, bạn có thể sử dụng phần tử <kbd> ... </ kbd> để chỉ ra những gì nên nhập vào, như trong ví dụ này.

Ví dụ minh họa sử dụng thẻ kbd trong HTML:

<!DOCTYPE html>
<html>
   
   <head>
      <title>Keyboard Text Example</title>
   </head>
   
   <body>
      <p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
   </body>
   
</html>

Điều này sẽ tạo ra kết quả sau:

Thẻ kbd trong HTML

Thẻ var trong HTML

Phần tử này thường được sử dụng cùng với các phần tử <pre><code> để chỉ ra rằng nội dung của phần tử đó là một biến.

Ví dụ minh họa sử dụng thẻ var trong HTML:

<!DOCTYPE html>
<html>
   
   <head>
      <title>Variable Text Example</title>
   </head>
   
   <body>
      <p><code>document.write("<var>user-name</var>")</code></p>
   </body>
   
</html>

Điều này sẽ tạo ra kết quả sau

Thẻ var trong HTML

Thẻ samp trong HTML

Phần tử <samp> ... </ samp> biểu thị đầu ra mẫu từ một chương trình và tập lệnh, v.v. Một lần nữa, nó chủ yếu được sử dụng khi ghi lại các khái niệm lập trình hoặc mã hóa.

Ví dụ minh họa sử dụng thẻ samp trong HTML:

<!DOCTYPE html>
<html>
   
   <head>
      <title>Program Output Example</title>
   </head>
   
   <body>
      <p>Result produced by the program is <samp>Hello World!</samp></p>
   </body>
   
</html>

Điều này sẽ tạo ra kết quả sau

Thẻ samp trong HTML

Thẻ address trong HTML

Phần tử <address> ... </ address> được sử dụng để chứa bất kỳ địa chỉ nào.

Ví dụ minh họa sử dụng thẻ address trong HTML:

<!DOCTYPE html>
<html>
   
   <head>
      <title>Address Example</title>
   </head>
   
   <body>
      <address>388A, Road No 22, Jubilee Hills -  Hyderabad</address>
   </body>
   
</html>

Điều này sẽ tạo ra kết quả sau

Thẻ address trong HTML
HTML
Bài Viết Liên Quan:
Thẻ meta trong HTML
Trung Nguyen 14/04/2020
Thẻ meta trong HTML

Thẻ meta trong HTML là gì? Vì sao thẻ meta rất quan trọng khi SEO website? Cách sử dụng thẻ meta trong HTML.

Thẻ định dạng trong HTML
Trung Nguyen 01/04/2020
Thẻ định dạng trong HTML

Bài viết này sẽ hướng dẫn bạn các thẻ định dạng trong HTMl như: b, i, u, strike, tt, pre, sup, sub, div, span, ...

Các thẻ cơ bản, phần tử và thuộc tính trong HTML
Trung Nguyen 01/04/2020
Các thẻ cơ bản, phần tử và thuộc tính trong HTML

Các thẻ cơ bản trong HTML là gì? Thẻ và phần tử trong HTML khác nhau như thế nào? Thuộc tính trong HTML là gì?

Giới Thiệu HTML
Trung Nguyen 01/04/2020
Giới Thiệu HTML

HTML là BẮT BUỘC cho sinh viên và các chuyên gia làm việc làm việc trong lĩnh vực thiết kế web.