Định dạng văn bản trong HTML5

Trong hướng dẫn này, bạn sẽ học cách định dạng văn bản trong trang web bằng các thẻ HTML5.

Định dạng văn bản bằng HTML

HTML cung cấp một số thẻ mà bạn có thể sử dụng để làm cho một số văn bản trên các trang web của mình xuất hiện khác với văn bản bình thường, ví dụ: bạn có thể sử dụng thẻ <b> để làm cho văn bản được in đậm, thẻ <i> để làm văn bản nghiêng, thẻ <mark> để làm nổi bật văn bản, thẻ <code> để hiển thị một đoạn mã máy tính, thẻ <ins> và <del> để đánh dấu chèn gách chân và gạch ngang, và nhiều hơn nữa.

Ví dụ sau minh họa các thẻ định dạng được sử dụng phổ biến nhất trong thực tế. Bây giờ, chúng ta hãy thử điều này để hiểu về cơ bản các thẻ này hoạt động như thế nào:

<p>This is <b>bold text</b>.</p>
<p>This is <strong>strongly important text</strong>.</p>
<p>This is <i>italic text</i>.</p>
<p>This is <em>emphasized text</em>.</p>
<p>This is <mark>highlighted text</mark>.</p>
<p>This is <code>computer code</code>.</p>
<p>This is <small>smaller text</small>.</p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup> text.</p>
<p>This is <del>deleted text</del>.</p>
<p>This is <ins>inserted text</ins>.</p>

Theo mặc định, thẻ <strong> thường được hiển thị trong trình duyệt như thẻ <b>, trong khi thẻ <em> được hiển thị tương tự như thẻ <i>. Tuy nhiên, có sự khác biệt về ý nghĩa của các thẻ này.

Sự khác biệt giữa thẻ <strong> và <b>

Cả hai thẻ <strong> và đều <b> hiển thị văn bản kèm theo ở dạng chữ đậm theo mặc định, nhưng thẻ <strong> chỉ ra rằng nội dung của nó có tầm quan trọng mạnh mẽ, trong khi thẻ <b> chỉ được sử dụng để thu hút sự chú ý của người đọc mà không truyền tải bất kỳ tầm quan trọng đặc biệt nào.

<p><strong>WARNING!</strong> Please proceed with caution.</p>
<p>The concert will be held at <b>Hyde Park</b> in London.</p>

Sự khác biệt giữa thẻ <em> và <i>

Tương tự, cả hai thẻ <em> và đều <i> hiển thị văn bản kiểu in nghiêng theo mặc định, nhưng thẻ <em> cho biết rằng nội dung của nó được nhấn mạnh hơn so với văn bản xung quanh, trong khi thẻ <i> được sử dụng để đánh dấu văn bản được đặt ra khỏi văn bản bình thường vì lý do dễ đọc , chẳng hạn như một thuật ngữ chuyên môn, một cụm từ thành ngữ từ một ngôn ngữ khác, một ý nghĩ, v.v.

<p>Cats are <em>cute</em> animals.</p>
<p>The <i>Royal Cruise</i> sailed last night.</p>

Lưu ý: Sử dụng các thẻ <em> và <strong> khi nội dung trang của bạn yêu cầu các từ hoặc cụm từ nhất định phải có mức độ nhấn mạnh hoặc tầm quan trọng. Ngoài ra, trong HTML5 các thẻ <b> và <i> đã được định nghĩa lại, trước đó chúng không có ý nghĩa ngữ nghĩa.

Định dạng trích dẫn

Bạn có thể dễ dàng định dạng các khối trích dẫn từ các nguồn khác bằng thẻ <blockquote> trong HTML .

Các dấu ngoặc kép thường được hiển thị với các lề trái và phải được thụt vào, cùng với một chút không gian thừa được thêm vào bên trên và bên dưới. Hãy thử một ví dụ để xem nó hoạt động như thế nào:

<blockquote>
    <p>Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.</p>
    <cite>— Albert Einstein</cite>
</blockquote>

Mẹo: Thẻ cite được sử dụng để thêm thông tin mô tả cho khối trích dẫn. Nó có thể là tiêu đề của tác phẩm đó hoặc tên của tác giả (người hoặc tổ chức) hoặc tham chiếu URL.

Đối với các trích dẫn nội dòng ngắn, bạn có thể sử dụng thẻ <q> trong HTML. Hầu hết các trình duyệt hiển thị trích dẫn nội dòng bằng cách đặt văn bản trong cặp dấu nháy kép. Đây là một ví dụ:

<p>According to the World Health Organization (WHO): <q>Health is a state of complete physical, mental, and social well-being.</q></p>

Hiển thị các từ viết tắt

Viết tắt là một dạng rút gọn của từ, cụm từ hoặc tên.

Bạn có thể sử dụng thẻ <abbr> để biểu thị một chữ viết tắt. Các thuộc tính title được sử dụng bên trong thẻ này để cung cấp sự mở rộng đầy đủ các chữ viết tắt, mà sẽ được hiển thị bởi các trình duyệt như một tooltip khi con trỏ chuột được quét qua phần tử. Hãy thử một ví dụ:

<p>The <abbr title="World Wide Web Consortium">W3C</abbr> is the main international standards organization for the <abbr title="World Wide Web">WWW or W3</abbr>. It was was founded by Tim Berners-Lee.</p>

Đánh dấu địa chỉ liên hệ

Các trang web thường bao gồm đường phố hoặc địa chỉ bưu điện. HTML cung cấp thẻ <address> đặc biệt để đại diện cho thông tin liên hệ (vật lý và / hoặc kỹ thuật số) cho một người hoặc tổ chức.

Thẻ này lý tưởng nên được sử dụng để hiển thị thông tin liên hệ liên quan đến chính tài liệu, chẳng hạn như tác giả của bài báo. Hầu hết các trình duyệt hiển thị một khối địa chỉ ở dạng nghiêng. Đây là một ví dụ:

<address>
Mozilla Foundation<br>
331 E. Evelyn Avenue<br>
Mountain View, CA 94041, USA
</address>

HTML • HTML5