Các phần tử về cụm từ trong HTML




Các phần tử cụm từ được thiết kế cho những mục đích đặc biệt, mặc dù chúng được trình bày tương tự như các thẻ cơ bản khác như <b>, <i>, <pre>, và <tt>, mà bạn đã theo dõi trong các chương trước. Chương này sẽ giới thiệu cho bạn về các thẻ cụm từ quan trọng.

Nhấn mạnh văn bản trong HTML - Thẻ em trong HTML

Bất cứ nội dung nào trong phần tử <em>...</em> đều được hiển thị ở dạng văn bản được nhấn mạnh.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Nhan manh van ban trong HTML</title>
</head>
<body>
<p>Vi dụ sau su dung the <em>em trong HTML</em>.</p>
</body>
</html>

Kết quả hiển thị:

Vi dụ sau su dung the em trong HTML.

Đánh dấu văn bản trong HTML - The mark trong HTML

Nội dung xuất hiện trong phần tử <mark>...</mark> được hiển thị dưới dạng đánh dấu bằng màu mực vàng.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Danh dau van ban trong HTML</title>
</head>
<body>
<p>Cum tu sau duoc danh dau bang <mark>the mark trong HTML</mark> voi mau vang</p>
</body>
</html>

Kết quả hiển thị:

Cum tu sau duoc danh dau bang the mark trong HTML voi mau vang.

Thẻ strong trong HTML

Nội dung xuất hiện trong phần tử <strong>...</strong> được hiển thị như là văn bản quan trọng. Phần văn bản đó sẽ được in đậm hơn các phần văn bản khác.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du the strong trong HTML</title>
</head>
<body>
<p>Day la <strong>the strong </strong> trong HTML.</p>
</body>
</html>

Kết quả hiển thị là:

Day la the strong trong HTML.

Thẻ tóm tắt văn bản trong HTML - Thẻ abbr trong HTML

Bạn có thể rút gọn một văn bản bằng cách đặt nó vào trong thẻ mở <abbr> và thẻ đóng </abbr>. Sử dụng thẻ này bạn có thể cung cấp thêm thông tin hữu ích cho trình duyệt, hệ thống dịch thuật và tìm kiếm. Thuộc tính title được sử dụng trong thẻ để chỉ ra ý nghĩa đầy đủ của chữ/cụm từ viết tắt khi ta rê chuột qua thẻ này.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>The abbr trong HTML</title>
</head>
<body>
<p>Toi thich hoc <abbr title="Ngon ngu lap trinh Java">Java</abbr>.</p>
</body>
</html>

Nó sẽ tạo ra kết quả sau:

Toi thich hoc Java.

Phần tử lược danh trong HTML - Thẻ acronym trong HTML

Phần tử <acronym> cho phép bạn chỉ rõ rằng văn bản trong thẻ <acronym> và </acronym> là một tên lược danh.

Hiện tại, các trình duyệt lớn không thay đổi sự hiển thị nội dung trong phần tử này.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du the acronym trong HTML</title>
</head>
<body>
<p>Ngoai HTML, ban co the hoc <acronym>XHTML</acronym>.</p>
</body>
</html>

Hình ảnh hiển thị:

Ngoai HTML, ban co the hoc XHTML.

Phương hướng của văn bản trong HTML - Thẻ bdo trong HTML

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

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du the bdo trong HTML</title>
</head>
<body>
<p>Phan van ban se hien thi tu trai sang phai.</p>
<p><bdo dir="rtl">Phan van ban se hien thi tu phai qua trai.</bdo></p>
</body>
</html>

Nó sẽ tạo ra kết quả sau:

Phan van ban se hien thi tu trai sang phai.

Phan van ban se hien thi tu phai qua trai.

Hiển thị các mục đặc biệt - Thẻ dfn trong HTML

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

Thông thường, bạn sử dụng phần tử này khi bạn lần đầu giới thiệu một mục quan trọng. Hầu hết các trình duyệt đều hiển thị nội dung trong phần tử này dưới dạng in nghiêng.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du the dfn trong HTML</title>
</head>
<body>
<p>HTML la mot khai niem <dfn>dac biet</dfn> trong tam tri toi.</p>
</body>
</html>

Nó sẽ tạo ra kết quả sau:

HTML la mot khai niem dac biet trong tam tri toi.

Trích dẫn văn bản trong HTML - Thẻ blockquote trong HTML

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

Văn bản trong phần tử này thường thụt lề phải và lề trái so với văn bản xung quanh, và đôi khi chúng ở dưới dạng in nghiêng.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du the blockquote trong HTML</title>
</head>
<body>
<p>Sau day la khai niem HTML la gi:</p>

<blockquote>HTML là chữ viết tắt của <b>H</b>yper<b>t</b>ext <b>M</b>arkup <b>L</b>anguage, là ngôn ngữ được sử dụng rộng rãi nhất để viết các trang Web.</blockquote>
</body>
</html>

Nó sẽ tạo ra kết quả sau:

Sau day la khai niem HTML la gi:

HTML là chữ viết tắt của Hypertext Markup Language, là ngôn ngữ được sử dụng rộng rãi nhất để viết các trang Web.

Trích dẫn ngắn 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 trong dấu nháy kép vào trong một câu.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du the q trong HTML</title>
</head>
<body>
<p>Ha Noi la thu do cua My, <q>Toi nghi la toi da sai</q>.</p>
</body>
</html>

Nó sẽ tạo ra kết quả là:

Ha Noi la thu do cua My, Toi nghi la toi da sai.

Câu trích dẫn trong HTML - The cite trong HTML

Nếu bạn đang trích dẫn một đoạn nào đó, bạn có thể chỉ rõ nguồn, đặt nó trong thẻ mở <cite> và thẻ đóng </cite>.

Khi bạn in, nội dung trong phần tử này được in nghiêng theo mặc định. Trong HTML 4.01, thẻ này định nghĩa một trích dẫn, còn trong HTML 5, thẻ này xác định tiêu đề một tác phẩm.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du the cite trong HTML</title>
</head>
<body>
<p>Bai huong dan HTML nay duoc dich tu <cite>trang Tutorialspoint</cite>.</p>
</body>
</html>

Kết quả hiển thị của đoạn mã trên là:

Bai huong dan HTML nay duoc dich tu trang Tutorialspoint.

Thẻ code trong HTML

Bất kỳ code chương trình nào xuất hiện trên trang Web đều được đặt trong phần tử <code>...</code>. Thông thường, nội dung trong phần tử này được hiển thị trong font đơn cách.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du the code trong HTML</title>
</head>
<body>
<p>Phan van ban nay duoc hien thi binh thuong. <code>Day la phan code.</code> Phan van ban nay duoc hien thi binh thuong.</p>
</body>
</html>

Nó sẽ tạo ra kết quả sau:

Phan van ban nay duoc hien thi binh thuong. Day la phan code. Phan van ban nay duoc hien thi binh thuong.

Hiển thị văn bản nhập bàn phím 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 cho thiết bị đọc để nhập một vài văn bản, bạn có thể sử dụng phần tử <kbd>...</kbd> để chỉ rõ những gì nên được gõ vào, như trong ví dụ:

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du the kbd trong HTML</title>
</head>
<body>
<p>Van ban binh thuong. <kbd>Van ban ben trong the kbd.</kbd> Van ban binh thuong.</p>
</body>
</html>

Nó sẽ tạo ra kết quả là:

Van ban binh thuong. Van ban ben trong the kbd. Van ban binh thuong.

Hiển thị biến chương trình trong HTML - Thẻ var trong HTML

Phần tử này thường được sử dụng kết hợp với phần tử <pre><code> để chỉ rõ rằng nội dung trong phần tử là một biến.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du the var trong HTML</title>
</head>
<body>
<p><code>document.write("<var>user-name</var>")</code></p>
</body>
</html>

Nó sẽ hiển thị kết quả:

document.write("user-name")

Hiển thị kết quả chương trình trong HTML - Thẻ samp trong HTML

Phần tử <samp>...</samp> chỉ kết quả đầu ra mẫu của một chương trình. Nó hỗ trợ kiểu sample trong máy tính, và được sử dụng chính khi tài liệu lập trình hoặc mã hóa các khái niệm.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du the samp trong HTML</title>
</head>
<body>
<p>Ket qua cua chuong trinh la <samp>Hello World!</samp></p>
</body>
</html>

Kết quả khi chạy đoạn code trên là:

Ket qua cua chuong trinh la Hello World!

Hiển thị địa chỉ trong HTML - Thẻ address trong HTML

Phần tử <address>...</address> dùng để chứa đựng bất cứ địa chỉ nào.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du the address trong HTML</title>
</head>
<body>
<address>So 11, Pho Le Thai To, Thu Do Ha Noi</address>
</body>
</html>

Nó sẽ tạo ra kết quả sau:

So 11, Pho Le Thai To, Thu Do Ha Noi

Loạt bài hướng dẫn học lập trình HTML cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: Tutorialspoint.com

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.