Định dạng chữ trong HTML

Trong bài học này, chúng ta sẽ tìm hiểu cách sử dụng các thẻ HTML để định dạng văn bản, làm nổi bật nội dung và thay đổi kiểu chữ. Các thẻ như <b>, <strong>, <i>, <em>, và <u> giúp bạn dễ dàng thay đổi cách hiển thị văn bản trong trang web, từ việc làm đậm, in nghiêng cho đến gạch dưới.

1. Thẻ in đậm: <b> và <strong>

1.1 Thẻ <b> là gì?

Thẻ <b> dùng để in đậm văn bản mà không làm thay đổi ý nghĩa của nội dung. Đây là một thẻ mang tính trực quan và chủ yếu được dùng để làm nổi bật chữ, nhưng không có ảnh hưởng đến ngữ nghĩa của văn bản.

Cấu trúc:

<b>Đây là văn bản in đậm.</b>

Ví dụ:

<p><b>HTML là ngôn ngữ cơ bản để xây dựng web.</b></p>

1.2 Thẻ <strong> là gì?

Thẻ <strong> cũng được sử dụng để làm đậm văn bản, nhưng có thêm ý nghĩa ngữ nghĩa. Khi sử dụng <strong>, trình duyệt sẽ in đậm và cũng thể hiện rằng văn bản này có tầm quan trọng đặc biệt.

Cấu trúc:

<strong>Đây là văn bản quan trọng.</strong>

Ví dụ:

<p><strong>Chúng tôi rất khuyến khích bạn học HTML!</strong></p>

• Lưu ý:
  • Dùng thẻ <strong> khi muốn nhấn mạnh sự quan trọng của văn bản đối với người đọc hoặc cho mục đích SEO.
  • Thẻ <b> chỉ mang tính thẩm mỹ mà không ảnh hưởng đến ngữ nghĩa.

2. Thẻ in nghiêng: <i> và <em>

2.1 Thẻ <i> là gì?

Thẻ <i> dùng để in nghiêng văn bản mà không làm thay đổi ngữ nghĩa của nó. Đây là thẻ dùng để tạo kiểu chữ cho các từ ngữ đặc biệt như tên riêng, từ ngoại ngữ, hoặc chú thích.

Cấu trúc:

<i>Đây là văn bản in nghiêng.</i>

Ví dụ:

<p>Tên của tôi là <i>John Doe</i>.</p>

2.2 Thẻ <em> là gì?

Thẻ <em> cũng dùng để in nghiêng văn bản, nhưng có thêm ngữ nghĩa: dùng để nhấn mạnh một phần nội dung quan trọng. Khi sử dụng <em>, văn bản sẽ được in nghiêng và thể hiện sự nhấn mạnh, tương tự như thẻ <strong> đối với in đậm.

Cấu trúc:

<em>Đây là văn bản nhấn mạnh.</em>

Ví dụ:

<p><em>Học HTML rất thú vị và quan trọng.</em></p>

• Lưu ý:
  • Thẻ <i> chỉ dùng để in nghiêng mà không có ý nghĩa ngữ nghĩa.
  • Thẻ <em> không chỉ làm nghiêng mà còn giúp nhấn mạnh tầm quan trọng của nội dung trong ngữ cảnh.

3. Thẻ gạch dưới: <u>

3.1 Thẻ <u> là gì?

Thẻ <u> dùng để gạch dưới văn bản. Trước đây, thẻ này chủ yếu dùng để chỉ đường dẫn (links), nhưng hiện tại, nó có thể được dùng để chỉ bất kỳ văn bản nào cần nhấn mạnh.

Cấu trúc:

<u>Đây là văn bản gạch dưới.</u>

Ví dụ:

<p><u>HTML là ngôn ngữ xây dựng website.</u></p>

• Lưu ý:
  • Thẻ <u> được sử dụng ít hơn trong HTML5, vì chúng không có ngữ nghĩa đặc biệt, nên chỉ nên dùng để gạch dưới những phần cần làm nổi bật.

Mục tiêu đạt được sau bài học

• Hiểu sự khác biệt giữa các thẻ <b>, <strong>, <i>, <em>, và <u>.
• Biết cách sử dụng các thẻ này để định dạng văn bản, làm nổi bật nội dung trong trang web.

Bài tập thực hành

Bài tập 1:

1. Sử dụng các thẻ <b> và <strong> để làm đậm các phần nội dung quan trọng trong trang web của bạn.
2. Sử dụng thẻ <i> và <em> để nhấn mạnh các từ hoặc câu đặc biệt trong một đoạn văn.
3. Tạo một đoạn văn với thẻ <u> để gạch dưới một số thông tin quan trọng.

Bài tập 2:

• Tạo một trang HTML với các thông tin như tiêu đề, đoạn văn và danh sách. Sử dụng các thẻ <b>, <strong>, <i>, <em>, và <u> để định dạng văn bản trong các phần khác nhau của trang.

Kết luận

Trong bài học này, bạn đã làm quen với các thẻ định dạng văn bản cơ bản trong HTML như <b>, <strong>, <i>, <em>, và <u>. Việc sử dụng đúng các thẻ này giúp bạn làm nổi bật nội dung và tạo sự khác biệt trong cách hiển thị văn bản, từ đó cải thiện trải nghiệm người dùng và hỗ trợ SEO.