Headings và Paragraphs

HTML heading là tiêu đề mà chúng ta muốn hiển thị trên website

Headings HTML

Các tiêu đề được xác định bằng các thẻ từ <h1> tới <h6>

<h1> thường được đặt cho các tiêu đề quan trọng nhất, <h2> thường được sử dụng cho các tiêu đề ít quan trọng nhất

<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 web sẽ tự động thêm một số khoảng trắng (lề) trước và sau một tiêu đề heading.

Tiêu đề quan trọng

Các công cụ tìm kiếm sẽ sử dụng các tiêu đề heading để lập chỉ mục cấu trúc và nội dung cho các trang web của bạn. Điều này có lợi cho việc trang web của bạn có cấu trúc rõ ràng và đáp ứng tiêu chuẩn SEO

Người dùng thường đọc lướt qua một trang web theo các tiêu đề chính của nó. Điều quan trọng là chúng ta sử dụng các tiêu đề để hiển thị cấu trúc tài liệu một cách rõ ràng, gây ấn tượng tốt với người dùng.

Thẻ <h1> nên được sử dụng cho các tiêu đề chính trong một bài viết, tiếp theo là thẻ <h2> cho các tiêu đề kế tiếp, sau đó là các tiêu đề ít quan trọng hơn <h3>, v.v.

Lưu ý

Chỉ sử dụng các thẻ tiêu đề HTML cho các tiêu đề trong một bài viết. Không sử dụng các thẻ tiêu đề để gắn cho các văn bản có chữ LỚN hoặc in đậm .

Tiêu đề có kích thước lớn

Các thẻ heading tiêu đề HTML có quy ước kích thước mặc định. Tuy nhiên, chúng có thể chỉ định kích thước cho bất kỳ tiêu đề nào có thuộc tính style, bằng cách sử dụng thuộc tính CSS font-size.

<h1 style="font-size:60px">Heading 1</h1>

Paragraph HTML

Phần tử <p> được dùng để xác định đoạn văn bản trong HTML

Thẻ đoạn văn bản luôn được bắt đầu trên một dòng mới và các trình duyệt web sẽ tự động thêm một số khoảng trắng (canh lề) trước và sau thẻ văn bản.

<p>Đây là một đoạn văn bản</p>
<p>Đây là một đoạn văn bản khác</p>

Hiển thị văn bản HTML

Chúng ta không thể chắc chắn văn bản HTML sẽ được hiển thị như thế nào. Màn hình lớn hay nhỏ và các cửa sổ được thay đổi kích thước sẽ tạo ra các kết quả khác nhau.

Chúng ta cũng không thể thay đổi cách hiển thị bằng cách thêm khoảng trắng hoặc enter xuống dòng trong mã HTML văn bản của mình. Trình duyệt web sẽ tự động loại bỏ bất kỳ khoảng trắng và xuống dòng không đúng quy tắc nào khi trang được hiển thị trên màn hình trình duyệt

<p>Học lập trình 
web đòi hỏi sự 
tập trung và kiên 
nhẫn.
</p>
<p>Học     lập 
trình    web đòi
 hỏi tập trung
 và   kiên nhẫn.
</p>  

Thẻ gạch ngang xuống dòng <hr/>

Thẻ <hr/> được hiển thị là một đường kẻ ngang và thường được sử dụng để phân tách nội dung (hoặc bắt đầu một nội dung thay đổi) trong trang HTML.

<h1>Tiêu đề heading 1</h1>
<p>Văn bản paragraph.</p>
<hr/>
<h2>Tiêu đề heading 2</h2>
<p>Văn bản paragraph.</p>
<hr/>

Thẻ xuống dòng HTML <br/>

Phần tử HTML <br/> xác định một điểm xuống dòng và bắt đầu một dòng mới mà không cần sử dụng một thẻ đoạn văn bản mới <p>.

<p>Đây là <br/>một đoạn văn bản <br/>ví dụ có thẻ xuống dòng.</p>

Kết quả

Thẻ tạo khối <pre>

Phần tử HTML, thẻ <pre> hiển thị một khối văn bản đã được định dạng trước.

Văn bản bên trong thẻ <pre> được hiển thị bằng phông chữ có chiều rộng cố định (thường là Courier) và nó bảo toàn cả khoảng trắng và ngắt dòng.

Ví dụ: Ta có một đoạn văn bản trong thẻ <p> như sau:

<p>
  Học HTML tại book-code.com.vn

  Học CSS tại book-code.com.vn

  Học PHP tại book-code.com.vn

  Học SQL tại book-code.com.vn
</p>

Kết quả hiển thị là trên cùng một dòng vì trình duyệt sẽ loại bỏ tất cả các ngắt dòng và khoản trắng

Tuy nhiên, nếu chúng ta thay cặp thẻ <p></p> bằng cặp thẻ tạo khối <pre></pre> thì các khoảng trắng và xuống dòng sẽ được giữ nguyên theo cấu trúc khối ban đầu.

<pre>
  Học HTML tại book-code.com.vn

  Học CSS tại book-code.com.vn

  Học PHP tại book-code.com.vn

  Học SQL tại book-code.com.vn
</pre>