Quan trọng

Các thẻ logic ngữ pháp trong HTML

03cd82 2024

Bạn có thể sử dụng css để định dạng và thay đổi hiển thị mọi thứ. Có một số thẻ hướng tới ý nghĩa ngữ pháp của văn bản chứ không thể hiện ở hình thức hiển thị. Vậy nên khi đọc bài viết này bạn không nên lo lắng quá nhiều về hiển thị mà chủ yếu hiểu được ý nghĩa ngữ pháp của thẻ để viết văn bản đúng ngữ nghĩa.

Các thẻ này là thẻ chứa nội dung nên sẽ có thẻ mở và thẻ đóng.

Cú pháp sử dụng chung: <tên_thẻ> .... nội dung ...</tên_thẻ>

Một số thẻ đó bao gồm:

  • Abbreviation tag : <abbr> 
  • Acronym tag: <acronym> (not supported in HTML5)
  • Marked tag: <mark>
  • Strong tag: <strong>
  • Emphasized tag : <em>
  • Definition tag: <dfn>
  • Quoting tag: <blockquote>
  • Short quote tag : <q>
  • Code tag: <code>
  • Keyboard tag: <kbd>
  • Address tag: <address>

Thẻ đánh dấu chữ viết tắt <abbr>

Thường dùng thêm thuộc tính title để hiển thị lời giải thích khi người dùng đưa chuột vào nội dung thẻ.

<p> <abbr title = "HyperText Markup Language">HTML </abbr> là một trong các ngôn ngữ dùng tạo ra trang web</p>

[run_code=html-abbr-tag]

Thẻ đánh dấu nổi bật chữ <mark>

Thẻ này giúp đổ màu nền cho một chuỗi text nào đó làm nổi bật nó trong đoạn văn. Mặc định thì nội dung được hiển thị với màu nền vàng.

<p> <mark title = "HyperText Markup Language">HTML </mark> là một trong các ngôn ngữ dùng tạo ra trang web</p>

Thẻ nhấn mạnh nội dung quan trọng <strong>

Trong đoạn văn nếu có phần nào quan trọng thì bạn nên dùng thẻ <strong> để làm đậm lên, không nên dùng thẻ <b> vì trình duyệt và máy tìm kiếm sẽ không hiểu mức độ quan trọng của nội dung.

<p> <abbr title = "HyperText Markup Language">HTML </abbr> là một trong các ngôn ngữ dùng <strong>tạo ra</strong> trang web</p>

Thẻ đánh dấu nội dung cần chú ý <em>

Với nội dung nào đó cần gây chú ý thì bạn có thể dùng thẻ <em>. Mặc định nội dung sẽ hiển thị chữ nghiêng.

<p> <em>HTML là một trong các ngôn ngữ dùng <strong>tạo ra</strong> trang web </em></p>

Trong ví dụ trên thẻ <em> bao trùm toàn bộ nội dung nên toàn bộ sẽ hiển thị dạng chữ nghiêng.

Thẻ trích dẫn đoạn văn <blockquote> 

Trong bài viết có thể trích dẫn lời nói của một ai đó thì bạn có thể dùng thẻ <blockquote> để đánh dấu nội dung trích dẫn. Đồng thời bạn sử dụng thẻ <cite> để ghi chú tên tác giả của lời trích dẫn.

Nội dung trích dẫn sẽ được tách thành khối văn bản riêng.

<!DOCTYPE html>
<html>
    <head>
          <title>Học HTML tại zezo.dev</title>
          <meta charset="UTF-8">
    </head>
    <body>
<blockquote>Gạo đem vào giã bao đau đớn<br>
Gạo giã xong rồi trắng tựa bông<br>
Ở trên đời người cùng vậy<br>
Gian nan, rèn luyện mới thành công</blockquote>   
 <cite>-Hồ Chí Minh</cite>  
    </body>
</html>

[run_code=html-quote-cite]

Định dạng trích dẫn ngắn với thẻ <q>

Trường hợp bạn cần trích dẫn ngắn trên cùng 1 dòng thì dùng thẻ <q> để đánh dấu. Nội dung trích dẫn sẽ được bao gói hiển thị bằng ký tự nháy kép.

<p>Bác Hồ kính yêu đã nói: <q>Không có gì quý hơn Độc lập - Tự do.</q></p>

Kết quả hiển thị code trên:

Bác Hồ kính yêu đã nói: Không có gì quý hơn Độc lập - Tự do.

 

Đánh dấu mã code hiển thị trên web <code>

Thẻ giúp hiển thị chuỗi mã code theo định dạng font mono giúp người đọc nhận diện rõ ràng hơn,

<p>First Java program</p>  
<p>
   <code>
       class Simple{ public static void main(String args[]){   
       System.out.println("Hello Java"); }}
   </code>  
</p>

Đánh dấu nội dung là địa chỉ liên hệ <address>

<address>
	Số nhà:...<br>
	Đường: Cầu Giấy <br>
	Quận: Cầu Giấy <br>
	TP: Hà Nội
</address>

 

 

 

Nguồn: zezo.dev