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 ...
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 | |
| <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>
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à
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>
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à
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>
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à
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>
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à
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>
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à
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>
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à
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>
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à
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>
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à
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>
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à
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>
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à
học lập trình web từ A đến Z
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.
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à
