HTML Đề Mục

Thẻ Đề Mục HTML

Trong HTML có tất cả sáu thẻ đề mục từ <h1> cho tới <h6>. Chúng ta thường sử dụng thẻ <h1> đánh dấu các đề mục quan trọng nhất và các thẻ còn lại từ <h2> tới <h6> cho các đề mục ít quan trọng hơn.

<h1>Đề mục số 1</h1>
<h2>Đề mục số 2</h2>
<h3>Đề mục số 3</h3>
<h4>Đề mục số 4</h4>
<h5>Đề mục số 5</h5>
<h6>Đề mục số 6</h6>

Chạy Thử

Trình duyệt sẽ tự động thiết lập kích thước phông chữ và khoảng cách cho từng loại đề mục. Ví dụ trên trình duyệt Chrome, đề mục tạo ra với thẻ <h1> có kích thước phông chữ lớn nhất 37px và thường cách các phần tử phía trước và phía sau 21.44px. Kích thước và khoảng cách trên dưới của đề mục có thể khác nhau với các trình duyệt khác nhau.

Ý Nghĩa Của Đề Mục

Đề mục không chỉ có ý nghĩa giúp người dùng hiểu được nội dung tóm tắt của phần nội dung theo sau mà còn được các công cụ tìm kiếm như Google, Yahoo hay Bing... sử dụng để phân tích nội dung, cấu trúc website cũng như đánh giá và so sánh các trang web khác nhau có nội dung viết về cùng một chủ đề. Do đó việc sử dụng các thẻ đề mục hợp lý là rất quan trọng.

Thông thường thẻ <h1> được sử dụng cho các đề mục lớn và thẻ <h2> cho các đề mục nhỏ, <h3>, <h4>... cho các đề mục nhỏ hơn nữa.

Kích Thước Phông Chữ

Như đã đề cập ở trên, trình duyệt sẽ tự động thiết lập kích thước phông chữ của đề mục. Tuy nhiên để chắc chắn đề mục của trang hiển thị với cùng một kích thước trên các trình duyệt khác nhau thì bạn có thể thiết lập kích phông chữ cho đề mục.

Đề quy định kích thước cho đề mục chúng ta có thể sử dụng thuộc tính style như sau:

<h1 style="font-size:60px;">Đề mục số 1</h1>

Chạy Thử

Thuộc tính style được dùng để quy định kiểu cách hiển thị của phần tử. Giá trị của thuộc tính này được viết theo cú pháp property_name: property_value. Trong đó property_name là tên ứng với một kiểu hiển thị nhất định mà bạn muốn quy định và property_value ứng với giá trị của kiểu hiển thị đó. Một số kiểu hiển thị có thể kể đến như kích thước phông, màu sắc, kiểu in (in đậm, in nghiêng hay in thường)...ứng với property_namefont-size, color, font-style...

Ví dụ:

<h1 style="font-size:60px; font-style: italic; color: blue;">Đề mục số 1</h1>

Chạy Thử

Thông thường tất cả các thẻ đề mục đều được in đậm, tuy nhiên bạn hoàn toàn có thể thay đổi điều này nếu như không muốn đề mục in đậm:

<h1 style="font-style: normal;">Đề mục số 1</h1>

Chạy Thử

Lưu ý: Không sử dụng thẻ đề mục chỉ với mục đích in đậm chữ trong văn bản.

Nếu muốn in dậm chữ trong văn bản bạn có thể sử dụng thẻ <strong> hoặc sử dụng thuộc tính style="font-size: bold;":

<p>Đoạn văn có chứa chữ được <strong>in đậm</strong></p>
<p>Đoạn văn có chứa chữ được <span style="font-size: bold;">in đậm</span></p>

Chạy Thử

Thẻ <span> là loại thẻ được sử dụng cho một phần nội dung trong một đoạn văn bản nằm bên trong thẻ <p> và thường được dùng khi bạn muốn áp dụng một kiểu hiển thị khác biệt cho phần nội dung này.

Bạn cũng lưu ý không nên sử dụng thẻ <p> bên trong một thẻ <p> khác mặc dù điều này không gây ra lỗi khi hiển thị trang web trên trình duyệt, tuy nhiên về mặt ý nghĩa trình bày văn bản thì cách sử dụng này là không hợp lý.

HTML Frontend Thiết Kế Web
Thêm Bình Luận: