Tiêu đề trong HTML

Hồng Anh

Tiêu đề (Heading) trong HTML được xác định bằng thẻ đánh dấu từ <h1> tới <h6>, trong đó <h1> là tiêu đề quan trọng nhất còn <h6> là ít quan trọng nhất.

Ví dụ

<h1>Ví dụ tiêu đề 1</h1>
<h2>Ví dụ tiêu đề 2</h2>
<h3>Ví dụ tiêu đề 3</h3>
<h4>Ví dụ tiêu đề 4</h4>
<h5>Ví dụ tiêu đề 5</h5>
<h6>Ví dụ tiêu đề 6</h6>

Trình duyệt sẽ tự động thêm khoảng trắng (hay chính là lề) trước và sau tiêu đề.

Tiêu đề rất quan trọng

Các bộ tìm kiếm sử dụng tiêu đề để gắn chỉ số cho cấu trúc và nội dung các trang web của bạn. Người dùng cũng đọc lướt qua các tiêu đề để hiểu nội dung nên việc dùng tiêu đề để cho thấy cấu trúc văn bản là rất quan trọng.

Tiêu đề <h1> nên được dùng làm tiêu đề chính, sau đó là <h2> và <h3>...

Lưu ý là nên dùng tiêu đề HTML để hiển thị tiêu đề chứ không nên dùng vì mục đích làm cho văn bản hiện lớn hơn hay đậm hơn.

Tiêu đề lớn hơn

Mỗi tiêu đề trong HTML đều có một kích thước mặc định. Nhưng bạn có thể thay đổi kích thước này bằng thuộc tính style, dùng đặc tính font-size của CSS.

Ví dụ

<h1 style="font-size:200px;">Ví dụ tiêu đề 1</h1>

Dùng thước ngang trong HTML

Thẻ <hr> được dùng để tạo một đường ngang trên trang HTML. Phần tử này dùng để chia nội dung (hoặc cho thấy sự thay đổi) trên một trang HTML.

Ví dụ

<h1> Ví dụ tiêu đề 1</h1>
<p>Nội dung văn bản 1</p> 
<hr>
<h1> Ví dụ tiêu đề 2</h1>
<p>Nội dung văn bản 2</p> 
<hr>

Phần tử <head> trong HTML

Phần tử <head> trong HTML không hề liên quan tới tiêu đề HTML. Nó dùng để chứa siêu dữ liệu (dữ liệu về văn bản HTML). SIêu dữ liệu này sẽ không được hiển thị.

Phần tử <head> được đặt giữa thẻ <html> và thẻ <body>

Ví dụ

<!DOCTYPE html>
<html>

<head>
<title>Văn bản HTML</title> 
<meta charset="UTF-8">
</head>

<body>
…

Lưu ý: Siêu dữ liệu thường xác định tên văn bản, bộ kí tự, kiểu, đường dẫn, kịch bản và nhiều thông tin khác.

Làm sao để xem nguồn HTML?

Nếu nhìn thấy một trang web rất hay ho và tự hỏi không biết nhà phát triển web đã làm thế nào, bạn hoàn toàn có thể xem mã nguồn HTML của trang web.

Xem mã nguồn HTML của website

Click chuột phải vào bất kì vị trí nào trên trang và chọn View Page Source (trên Chrome) hoặc View Source (trên IE) hoặc các lựa chọn tương tự trên những trình duyệt khác. Khi đó một cửa sổ mới sẽ mở ra, hiển thị mã nguồn HTML của trang đó.

Kiểm tra các phần tử HTML

Click chuột phải vào một phần tử (hoặc khu vực trống) trên trang và chọn Inspect hoặc Inspect Element để xem phần tử đó gồm những gì (sẽ có cả HTML và CSS). Bạn có thể chỉnh sửa HTML hoặc CSS nhanh chóng ngay trên bảng Elements và Styles mới mở ra.

Bài trước: Các thuộc tính trong HTML

Bài sau: Đoạn văn trong HTML

Thứ Bảy, 28/04/2018 17:34

4,9 ★ 7 👨 9.143