html heading html paragraph

Tìm hiểu về Heading và Paragraph (Học HTML)

Xin chào các bạn! Bài viết trước chúng ta đã làm quen với Tag, HTML Element và Attribute. Bây giờ, chúng ta sẽ tìm hiểu sâu hơn về cách sử dụng để đáp ứng nhu cầu hiển thị của chúng ta trên website. Khi bắt đầu xây dựng một trang web, phần đầu tiên không thể thiếu đó là nội dung mà ta hiển thị ra ngoài website. Nội dung đó đa số là văn bản.

1. Thẻ tiêu đề (heading)

Trong HTML, những tiêu đề lớn, nhỏ sẽ được gọi là Heading. Chức năng của heading là giúp nội dung tài liệu được phân chia một cách rõ ràng. Ví dụ các tiêu đề sau:

<h1>Tiêu đề 1</h1>
<h2>Tiêu đề 2</h2>
<h3>Tiêu đề 3</h3>
<h4>Tiêu đề 4</h4>
<h5>Tiêu đề 5</h5>
<h6>Tiêu đề 6</h6>

Như vậy, có 6 mức tiêu đề và thể hiện bằng các thẻ: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Thẻ Heading có đầy đủ các cú pháp của một thẻ bình thường gồm: thẻ mở, thẻ đóng và content. H1 chính là thẻ có cấp cao nhất, các thẻ tiếp theo sẽ giảm dần theo cấp độ. Content là nội dung mà trình duyệt sẽ hiển thị.

Một điều hết sức lưu ý, đó chính là các bạn đừng bao giờ dùng thẻ heading để làm chức năng in đậm chữ, hoặc từ nào đó trong đoạn văn. Vì ta đã nói rõ chức năng của heading, chính là tạo một tiêu đề cho nội dung tài liệu. Đối với html, ngoài việc người dùng đọc hiểu nội dung thì máy tính cũng có khả năng đọc nội dung tài liệu này. Vì thế, thẻ heading giúp các software khác nhận biết cấu trúc tài liệu. Đặc biệt là các Search Engine như Google, nó sẽ dựa vào những thẻ này để lập chỉ mục, tạo cơ sở cho website bạn có mặt trong kết quả tìm kiếm.

2. Thẻ Paragraph

Nhóm thẻ tiếp theo, chúng ta cùng tìm hiểu đó là Paragraph. Một Paragraph tương ứng với một đoạn văn trong phần nội dung và trong html, chúng ta sẽ sử dụng thẻ <p> để tạo một paragraph. Nó sẽ có nội dung (content), content  của thẻ p chính là nội dung đoạn văn.

Ngoài ra, chúng ta sẽ có những đoạn văn được gọi là paragraph. Dĩ nhiên, trong các paragraph này chúng ta sẽ có những việc như in đậm chữ, in nghiêng hoặc gạch chân, canh lề…những việc này ta sẽ gọi là Formatting, tức là định dạng văn bản.

3. Thẻ danh sách

Cuối cùng là những hoa thị hay các đầu mục được đánh số thứ tự, nhằm giúp ta liệt kê những nội dung gì đó và ở trong tài liệu HTML ta sẽ gọi đó là List. Ví dụ một list như sau:

Danh Sách

A. Danh sách 1

B. Danh sách 2

Tất cả  những thành phần trên, chúng ta đã quen thuộc khi làm việc với các phần mềm văn bản như MS Word, Pages,…Với mục tiêu giúp cho người xem dễ dàng đọc hiểu được nội dung.

Ở trong tài liệu HTML cũng vậy, ngoài việc giúp người đọc nhanh chóng hiểu nội dung mà bằng việc sử dụng các thẻ đánh dấu tài liệu, chúng ta đã giúp cho các phần mềm khác, nôm na là máy tính có thể đọc hiểu được tài liệu của mình.

4. Ký tự thay thế

Các bạn nên nhớ HTML là một loại tài liệu đặc biệt, nó khác với tài liệu văn bản thông thường. Vì thế, chúng ta có danh sách các ký tự đặc biệt mà khi ta muốn nó được hiển thị ở trình duyệt thì sẽ sử dụng các mã ký tự thay thế. Ví dụ những ký tự sau không có trên bàn phím nhưng ta vẫn thể hiện được bằng HTML:

c, r tm

Có thể tham khảo ký tự thay thế ở trang web này: http://dev.w3.org

5. Kiểm tra tài liệu HTML có đúng chuẩn W3C.

Các trình duyệt hiện nay rất thông minh. Chúng ta có thể sử dụng những ký tự hiện có trong bàn phím khi soạn thảo, và trình duyệt vẫn hiển thị bình thường. Ví dụ như các ký tự nháy kép (“), angle bracket (< và >)…

Tuy nhiên, các bạn cần đặc biệt lưu ý khi sử dụng angle bracket bởi vì với html thì nó được xem là tag. Giả sử ta có nội dung tài liệu html như sau:

6 <> 9 ?

Nội dung đơn giản là 6 có khác 9 không? Ta sử dụng angle bracket để mô tả toán tử khác, một loại toán tử rất hay sử dụng ở một số ngôn ngữ lập trình. Các bạn có thể kiểm tra tài liệu html của mình đã đúng chuẩn của W3C chưa thông qua website sau: http://validator.w3.org/

6. Kết

Qua bài viết của mình, bạn đã có được cái nhìn tổng quan về cấu trúc của một trang tài liệu HTML với một số thẻ đơn giản như thẻ tiêu đề (heading), thẻ paragraph, thẻ danh sách.

Cảm ơn các bạn đã đọc bài viết của mình!

Bài tiếp theo (Định dạng cho các Paragraph)

Bài viết trước (Tìm hiểu về HTML Element và Attribute)

1
Để lại bình luận của bạn

avatar
newest oldest most voted