18/08/2018, 10:38

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 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à

Hướng dẫn học lập trình web từ A đến Z
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à

Hướng dẫn học lập trình web từ A đến Z
Hướng dẫn học lập trình web từ A đến Z
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à

Hướng dẫn học lập trình web từ A đến Z
Hướng dẫn học lập trình web từ A đến Z
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à

Hướng dẫn học lập trình web từ A đến Z
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à

Hướng dẫn học lập trình web từ A đến Z
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à

Hướng dẫn học lập trình web từ A đến Z
Hướng dẫn học lập trình web từ A đến Z
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à

Hướng dẫn học lập trình web từ A đến Z
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à

Hướng dẫn học lập trình web từ A đến Z
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à

Hướng dẫn học lập trình web từ A đến Z
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à

web cơ bản hướng dẫn học lập trình web từ A đến Z
web cơ                  bản hướng         dẫn 
          học lập trình     web từ A           đến Z
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à

web cơ bản
Xem ví dụ
0