Hôm nay cafedev chia sẻ cho ace chi tiết về Heading vs Paragraphs trong HTML là như thế nào?, Sau đây chúng ta sẽ tìm hiểu về Heading trước.
Tiêu đề trong HTML là tiêu đề hoặc phụ đề mà bạn muốn hiển thị trên trang web.
Nội dung chính
1. Tiêu đề(Headings) trong HTML
Các tiêu đề HTML được xác định bằng các thẻ <h1> đến <h6>.
<h1> xác định tiêu đề quan trọng nhất. <h6> xác định tiêu đề ít quan trọng nhất.
Ví dụ:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6> Lưu ý: Trình duyệt tự động thêm một số khoảng trắng (lề) trước và sau cho tiêu đề.
1.1. Tiêu đề là quan trọng
Các công cụ tìm kiếm sử dụng các tiêu đề để lập chỉ mục cấu trúc và nội dung của các trang web của bạn.
Người dùng thường lướt qua một trang bởi các tiêu đề của nó. Điều quan trọng là sử dụng các tiêu đề để hiển thị cấu trúc tài liệu.
Các tiêu đề <h1> nên được sử dụng cho các tiêu đề chính, tiếp theo là các tiêu đề <h2>, sau đó các tiêu đề <h3> ít quan trọng hơn, v.v.
Lưu ý: Chỉ sử dụng các tiêu đề trong HTML cho các tiêu đề. Đừng sử dụng các tiêu đề để làm cho văn bản LỚN hoặc in đậm, làm cho giao diện toàn cụ không ra gì cả.
1.2. Tiêu đề lớn hơn
Mỗi tiêu đề HTML có kích thước mặc định. Tuy nhiên, bạn có thể chỉ định kích thước cho bất kỳ tiêu đề nào bằng thuộc tính style, sử dụng thuộc tính kích thước font-size:
<h1 style="font-size:60px;">Heading 1</h1>2. Văn bản(Paragraphs)
Một đoạn văn luôn bắt đầu trên một dòng mới và thường là một khối văn bản.
Phần tử <p> HTML định nghĩa một đoạn.
Một đoạn luôn bắt đầu trên một dòng mới và các trình duyệt sẽ tự động thêm một số khoảng trắng (lề) trước và sau một đoạn.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p> 2.1. Hiển thị HTML
Bạn không thể chắc chắn cách HTML sẽ được hiển thị.
Màn hình lớn hoặc nhỏ, và các cửa sổ thay đổi kích thước sẽ tạo ra kết quả khác nhau.
Với HTML, bạn không thể thay đổi hiển thị bằng cách thêm khoảng trắng hoặc dòng bổ sung trong mã HTML của mình.
Trình duyệt sẽ tự động xóa mọi khoảng trắng và dòng thừa khi trang được hiển thị:
p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>2.2. Quy tắc ngang trong HTML
Thẻ <hr> xác định ngắt theo chủ đề trong trang HTML và thường được hiển thị dưới dạng quy tắc ngang.
Phần tử <hr> được sử dụng để phân tách nội dung (hoặc định nghĩa thay đổi) trong trang HTML:
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr> Thẻ <hr> là một thẻ trống, có nghĩa là nó không có thẻ kết thúc.
2.3 Xuống dòng trong HTML
Phần tử HTML <br> xác định ngắt dòng.
Sử dụng <br> nếu bạn muốn ngắt dòng (một dòng mới) mà không bắt đầu một đoạn mới:
<p>This is<br>a paragraph<br>with line breaks.</p> 2.4 Hiển thị một bài thơ trong THML
Phần tử <pre> HTML xác định văn bản được định dạng sẵn.
Văn bản bên trong phần tử <pre> được hiển thị bằng phông chữ có chiều rộng cố định và nó giữ nguyên cả dấu cách và dấu ngắt dòng:
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre> Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
