Các thẻ tiêu đề và đoạn văn bản

Các thẻ tiêu đề h1, h2, h3, h4, h5, h6

Tiêu đề là những thành phần rất quan trọng trong các tài liệu HTML.

Chúng ta sử dụng các thẻ <h1>, <h2>, <h3>, <h4>, <h5>, <h6> để định nghĩa các tiêu đề.

Thẻ  <h1> định nghĩ tiêu đề quan trọng nhất (nổi bật nhất, lớn nhất), các thẻ khác sẽ lần lượt được sử dụng các tiêu đề ít quan trọng hơn. Thẻ <h1> định nghĩa tiêu đề nhỏ nhất.

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

Các công cụ tìm kiếm (chẳng hạn như Google, Bing...) sử dụng tiêu đề để đánh chỉ số và nội dung của trang web. Do đó, chúng ta nên sử dụng đúng tiêu đề để giúp cho người dùng dễ tìm thấy trang web của mình hơn.

Ngoài ra, người dùng cũng thường "lướt" qua nội dung trang web khá nhanh, do đó việc sử dụng tiêu đề sẽ giúp chúng ta nhanh chóng thể hiện được ghi được dấu ấn.

Tạo đường kẻ ngang

Nếu muốn phân tách các nội dung của trang web theo chiều ngang, chúng ta có thể sử dụng thẻ  <hr>. Thẻ này sẽ kẻ một đường nằm ngang tài liệu 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ẻ tạo đoạn văn bản: p

Ta dùng thẻ <p>  để định nghĩa một đoạn văn.

Ví dụ:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Chú ý: Các trình duyệt tự động thêm vài khoảng trắng trước và sau một đoạn văn. 


Hiển thị HTML

Bạn không thể chắc chắn về cách mã HTML được hiển thị trên trình duyệt. 

Với các kích thước màn hình khác nhau, mã HTML sẽ được hiển thị khác nhau.

Bạn không thể thay đổi cách hiển thị HTML bằng cách thêm các khoảng trắng hay xuống dòng trong mã HTML. 

Trình duyệt sẽ bỏ tất cả các dòng và khoảng trắng thừa khi hiển thị trang web:


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

Đừng quên thẻ đóng

Hầu hết các trình duyệt sẽ hiển thị chính xác mã HTML dù cho bạn quên thẻ đóng:

<p>This is a paragraph.
<p>This is another paragraph.

Ví dụ trên sẽ hiển thị tốt trên hầu hết trình duyệt, nhưng không nên phụ thuộc vào trình duyệt.

Chú ý: Không dùng thẻ đóng có thể tạo ra những kết quả không mong muốn hoặc gây ra lỗi.

Thẻ xuống dòng

Thẻ <br> định nghĩa xuống dòng.

Dùng <br> nếu bạn muốn xuống dòng mà không tạo ra một đoạn văn mới.

<p>This is<br>a paragraph<br>with line breaks.</p> 

Thẻ <br> là thẻ rỗng, vì vậy nó không cần thẻ đóng. 


Hiển thị một bài thơ

Nếu dùng thẻ <p>, bài thơ sẽ chỉ hiển thị trên một dòng:


<p>
    Bước tới Đèo Ngang, bóng xế tà,
    Cỏ cây chen đá, lá chen hoa.
    Lom khom dưới núi, tiều vài chú,
    Lác đác bên sông, chợ mấy nhà.
    Nhớ nước đau lòng con quốc quốc,
    Thương nhà mỏi miệng cái gia gia.
    Dừng chân đứng lại trời, non, nước,
    Một mảnh tình riêng ta với ta.
</p>

Dùng thẻ <pre> 

Để hiển thị một bài thơ ta có thể dùng thẻ <pre>.

Thẻ <pre> định nghĩa một đoạn văn bản đã được định dạng trước.

Đoạn văn bản bên trong thẻ <pre> </pre> sẽ được hiển thị với font chữ cố định (thường là font Courier) và được giữ lại các khoảng trắng và xuống dòng:

<pre>
  Bước tới Đèo Ngang, bóng xế tà,
  Cỏ cây chen đá, lá chen hoa.
  Lom khom dưới núi, tiều vài chú,
  Lác đác bên sông, chợ mấy nhà.
  Nhớ nước đau lòng con quốc quốc,
  Thương nhà mỏi miệng cái gia gia.
  Dừng chân đứng lại trời, non, nước,
  Một mảnh tình riêng ta với ta.
</pre>