Tóm Tắt
Các thẻ định dạng văn bản quan trọng trong HTML
Dưới đây là danh sách các thẻ định dạng văn bản mà chúng ta phải thường hay sử dụng:
Tên thẻ
Ý nghĩa
Ví dụ
<u>
Tạo chữ có dấu gạch dưới
web cơ bản
<b>, <strong>
Tạo chữ tô đậm
web cơ bản
<i>, <em>
Tạo chữ in nghiêng
web cơ bản
<big>
Tạo chữ có kích thước to hơn các chữ bình thường
web cơ bản
<small>
Tạo chữ có kích thước nhỏ hơn các chữ bình thường
web cơ bản
<del>, <strike>
Tạo chữ có dấu gạch ngang qua
web cơ bản
<sup>
Tạo chữ là chỉ số ở nằm trên
web cơ bản
<sub>
Tạo chữ là chỉ số ở nằm dưới
web cơ bản
<mark>
Tạo chữ được đánh dấu màu nổi bật
web cơ bản
<pre>
Giữ định dạng giống như phần soạn thảo
web cơ bản hướng dẫn
học lập trình web từ A đến Z
Tạo chữ có dấu gạch dưới
Để tạo chữ có dấu gạch dưới ta sử dụng cặp thẻ <u></u>
Ví dụ:
Khi thực thi đoạn mã:
<p>Hướng dẫn học <u>lập trình web</u> từ A đến Z</p>Màn hình của trình duyệt sẽ hiển thị là
Xem ví dụ
Tạo chữ tô đậm
Để tạo chữ tô đậm, ta có thể sử dụng cặp thẻ <b></b> hoặc <strong></strong>
Ví dụ:
Khi thực thi đoạn mã:
<p>Hướng dẫn học <b>lập trình web</b> từ A đến Z</p>
<p><strong>Hướng dẫn học</strong> lập trình web từ A đến Z</p>Màn hình của trình duyệt sẽ hiển thị là
Xem ví dụ
Lưu ý: Về mặt hiển thị, thẻ <b> và <strong> hoàn toàn giống nhau. Nhưng về mặt làm SEO thì thẻ <strong> tốt hơn, do đó khuyến khích bạn tập thói quen sử dụng thẻ <strong>
Tạo chữ in nghiêng
Để tạo chữ in nghiêng, ta có thể sử dụng cặp thẻ <i></i> hoặc <em></em>
Ví dụ:
Khi thực thi đoạn mã:
<p>Hướng dẫn học <i>lập trình web</i> từ A đến Z</p>
<p><em>Hướng dẫn học</em> lập trình web từ A đến Z</p>Màn hình của trình duyệt sẽ hiển thị là
Xem ví dụ
Lưu ý: Về mặt hiển thị, thẻ <i> và <em> hoàn toàn giống nhau. Nhưng về mặt làm SEO thì thẻ <em> tốt hơn, do đó khuyến khích bạn tập thói quen sử dụng thẻ <em>
Tạo chữ to
Để tạo chữ có kích thước to hơn các chữ bình thường, ta sử dụng cặp thẻ <big></big>
Ví dụ:
Khi thực thi đoạn mã:
<p>Hướng dẫn học <big>lập trình web</big> từ A đến Z</p>Màn hình của trình duyệt sẽ hiển thị là
Xem ví dụ
Tạo chữ nhỏ
Để tạo chữ có kích thước nhỏ hơn các chữ bình thường, ta sử dụng cặp thẻ <small></small>
Ví dụ:
Khi thực thi đoạn mã:
<p>Hướng dẫn học <small>lập trình web</small> từ A đến Z</p>Màn hình của trình duyệt sẽ hiển thị là
Xem ví dụ
Tạo chữ có dấu gạch ngang qua
Để tạo chữ có dấu gạch ngang qua, ta có thể sử dụng cặp thẻ <del></del> hoặc <strike></strike>
Ví dụ:
Khi thực thi đoạn mã:
<p>Hướng dẫn học <del>lập trình web</del> từ A đến Z</p>
<p><strike>Hướng dẫn học</strike> lập trình web từ A đến Z</p>Màn hình của trình duyệt sẽ hiển thị là
Xem ví dụ
Tạo chữ là chỉ số nằm ở trên
Để tạo chữ là chỉ số nằm ở trên, ta sử dụng cặp thẻ <sup></sup>
Ví dụ:
Khi thực thi đoạn mã:
<p>Hướng dẫn học lập trình web <sup>từ A đến Z</sup></p>Màn hình của trình duyệt sẽ hiển thị là
Xem ví dụ
Tạo chữ là chỉ số nằm ở dưới
Để tạo chữ là chỉ số nằm ở dưới, ta sử dụng cặp thẻ <sub></sub>
Ví dụ:
Khi thực thi đoạn mã:
<p>Hướng dẫn học lập trình web <sub>từ A đến Z</sub></p>Màn hình của trình duyệt sẽ hiển thị là
Xem ví dụ
Tạo chữ được đánh dấu màu nổi bật
Để tạo chữ được đánh dấu màu nổi bật, ta sử dụng cặp thẻ <mark></mark>
Ví dụ:
Khi thực thi đoạn mã:
<p>Hướng dẫn học <mark>lập trình web</mark> từ A đến Z</p>Màn hình của trình duyệt sẽ hiển thị là
Xem ví dụ
Giữ định dạng giống như phần soạn thảo
Thông thường, trong quá trình soạn thảo mã HTML, các ký tự xuống dòng và các khoảng trắng dư thừa sẽ bị bỏ qua.
Do đó, để giữ định dạng giống như trong phần soạn thảo, ta sử dụng cặp thẻ <pre></pre>
Ví dụ:
Khi thực thi đoạn mã:
<p>web cơ bản hướng dẫn
học lập trình web từ A đến Z</p>
<pre>web cơ bản hướng dẫn
học lập trình web từ A đến Z</pre>Màn hình của trình duyệt sẽ hiển thị là
Xem ví dụ
Phối hợp các thẻ định dạng
Bạn có thể phối hợp nhiều kiểu định dạng cho một phần tử HTML bằng cách lồng các cặp thẻ vào nhau.
Ví dụ:
Khi thực thi đoạn mã:
<mark><u><b>web cơ bản</b></u></mark>Màn hình của trình duyệt sẽ hiển thị là
Xem ví dụ
