HTML – Các thẻ phrase

104
HTML – Các thẻ phrase

Các thẻ phrase được thiết kế cho mục đích cụ thể. Nó được xem là công cụ hỗ trợ tìm kiếm và thu thập dữ liệu trang web.

Emphasized – nhấn mạnh văn bản

Nội dung được nhấn mạnh (emphasized) được chứa trong thẻ <em> … </em>

Ví dụ:

<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><em>This text is emphasized.</em></p>
</body>
</html>

Kết quả:
This text is normal.
This text is emphasized.

Marked – đánh dấu văn bản

Nội dung chứa trong thẻ <mark>…<mark> hiển thị nội dung ấy được đánh dấu (marked) hoặc tô sáng lên (highlighted):

Ví dụ:

<!DOCTYPE html>
<html>
<body>
<p>HTML <mark>Marked</mark> Formatting</p>
</body>
</html>

Kết quả:
HTML - Các thẻ phrase - 01

Strong – in đậm

Thẻ <strong>…</strong> thể hiện phần nội dung strong như nghĩa của nó.

Ví dụ:

<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><strong>This text is strong.</strong></p>
</body>
</html>

Kết quả:
This text is normal.
This text is strong.

Abbreviation – viết tắt văn bản

Bạn có thể viết tắt một văn bản bằng cách đặt nó trong cặp thẻ <abbr>…</abbr>. Thuộc tính title phải ghi đầy đủ thông tin của đoạn viết tắt ấy.

Ví dụ

<!DOCTYPE html>
<html>
<body>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p>Can I get this <abbr title="as soon as possible">ASAP</abbr>?</p>

<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>
</body>
</html>

Kết quả:
The WHO was founded in 1948.

Can I get this ASAP?

The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.

Acronym – viết tắt văn bản

Bạn cũng có thể viết tắt một văn bản bằng cách đặt nó trong cặp thẻ <acronym>…</acronym>. Nhớ điền thuộc tính title bằng thông tin đầy đủ của đoạn viết tắt ấy.

Ví dụ :

<!DOCTYPE html>
<html>
<body>

Can I get this <acronym title="as soon as possible">ASAP</acronym>?

<p><strong>Note:</strong> The acronym element is not supported in HTML5.</p>

</body>
</html>

Kết quả:
Can I get this ASAP?
Note: The acronym element is not supported in HTML5.

Direction – Hướng văn bản

Thẻ <bdo>…</bdo> là viết tắt của Bi-Directional Override và nó được sử dụng để ghi đè hướng văn bản hiện tại. Nó đơn giản chỉ là ghi dòng văn bản theo hướng tùy mình chọn : trái qua phải hoặc phải qua trái

Ví dụ

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Kết quả:
HTML - Các thẻ phrase - 01b

HTML Definition Element – <dfn>

Thẻ <dfn> … </dfn> định nghĩa một thuật ngữ hoặc một từ. 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.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>

</body>
</html>

Kết quả:
HTML is the standard markup language for creating web pages.

Nếu <dfn> có title, thì title ấy sẽ đinh nghĩa thuật ngữ:

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<p><dfn title="HyperText Markup Language">HTML</dfn> is the standard markup language for creating web pages.</p>

</body>
</html>

Kết quả:

HTML - Các thẻ phrase - 02

Nếu thẻ <dfn> chứa thẻ <abbr>, thì chính thẻ <abbr> sẽ định nghĩa thuật ngữ

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> is the standard markup language for creating web pages.</p>

</body>
</html>

Kết quả khi rê chuột vào:
HTML - Các thẻ phrase - 03

Quoting – Trích dẫn <blockquote>

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

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

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<h1>About WWF</h1>
<p>Here is a quote from WWF's website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>

</body>
</html>

Kết quả :
HTML - Các thẻ phrase - 04

Short Quotation – Trích dẫn ngắn <q>

Thẻ <q> … </ q> để trích dẫn ngắn trong HTML, thường được sử dụng khi bạn muốn thêm dấu nháy kép (double quote) trong một câu.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

</body>
</html>

Kết quả:
WWF’s goal is to: Build a future where people live in harmony with nature.  We hope they succeed.

Citation – <cite>

Thẻ <cite> định nghĩa tiêu đề của một tác phẩm (như một cuốn sách, một bài hát, một bộ phim, một chương trình truyền hình, một bức tranh, một tác phẩm điêu khắc…).

Nội dung đặt trong cặp thẻ trên sẽ hiển thị mặc định là chữ in nghiêng.

Ghi chú: Tên của một người không phải là tiêu đề.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

</body>
</html>

Kết quả:
The Scream by Edward Munch. Painted in 1893.

Computer Code – Mã chương trình máy tính <code>

Khi diễn đạt một đoạn code, bạn nên cho chúng vào cặp thẻ <code>…</code>. Nõ sẽ được hiển thị theo font đơn cách (monospaced font).

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<p>This is regular text.<br>
<code>A piece of computer code</code>
</p>

</body>
</html>

Kết quả:

HTML - Các thẻ phrase - 06

Keyboard – Thẻ bàn phím <kbd>

Thẻ <kbd> thể hiện nút trên bàn phím.
Ví dụ:

<!DOCTYPE html>
<html>
<body style="font-size:16px">

<p>Thẻ kbd thể hiện nút trên bàn phím:</p>

<p>Để xuống dòng nhấn <kbd>Enter</kbd>, để viết hoa nhấn <kbd>Shift</kbd></p>

</body>
</html>

Kết quả:
HTML - Các thẻ phrase - 05

Program Output – Kết quả chương trình <samp>

Thẻ <samp> element định nghĩa kiểu computer output:

Ví dụ:

<!DOCTYPE html>
<html>
<body style="font-size:16px">

<p>Thẻ samp sẽ giúp đoạn văn bản hiển thị giống mã máy:</p>

<samp>
Linux version 3.2.0-0.bpo.1-amd64 (Debian 3.2.4-1~bpo60+1)
(gcc version 4.4.5 (Debian 4.4.5-8) ) #1 SMP Sat Feb 11 08:41:32 UTC 2012
</samp>

</body>
</html>

Kết quả:
HTML - Các thẻ phrase - 07

Địa chỉ – Address <address>

Thẻ <address>…</address> được sử dụng để chứa địa chỉ.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<address>
Written by <a href="mailto:[email protected]">Tuan Nguyen</a>.<br>
Visit us at:<br>
tuihoclaptrinh.com<br>
Bình Thạnh, Hồ Chí Minh<br>
Vietnam
</address>

</body>
</html>

Kết quả:
HTML - Các thẻ phrase - 08