Bắt đầu từ bài này chúng ta bắt đầu đi vào tìm hiểu các thẻ HTML cơ bản và chúng ta sẽ làm việc chủ yếu trong cặp thẻ <body> để trình duyệt hiển thị nội dung cho người dùng.
Trong bài viết này mình sẽ tập trung giới thiệu với các bạn các thẻ định dạng văn bản trong HTML để giúp các bạn có thể định dạng được văn bản, chữ viết theo ý mình giống như trong Word với các định dạng như chữ in nghiêng, in đậm, xuống dòng,….
Các thẻ định dạng văn bản trong HTML cơ bản
Thẻ h – Thẻ định dạng tiêu đề văn bản
Với chữ viết trong HTML chúng ta có thể chia ra là 2 đó là tiêu đề và đoạn văn bản. Như vậy với tiêu đề để định dạng nó chúng ta sẽ sử dụng thẻ h trong đó sẽ có các thẻ từ h1 đến h6 chúng ta có thể sử dụng để phân cấp tiêu đề từ lớn đến nhỏ.
Để dễ hiểu hơn chúng ta có ví dụ với đoạn code sau:
<h1>Tiêu đề 1 sử dụng h1</h1> <h2>Tiêu đề 2 sử dụng h2</h2> <h3>Tiêu đề 3 sử dụng h3</h3> <h4>Tiêu đề 4 sử dụng h4</h4> <h5>Tiêu đề 5 sử dụng h5</h5> <h6>Tiêu đề 6 sử dụng h6</h6>
Nhìn vào đoạn code trên bạn sẽ thấy thẻ h1 sẽ có cỡ chữ lớn nhất và thẻ h6 sẽ có cỡ chữ nhỏ nhất vì vậy bạn có thể tùy chọn định dạng tiêu đề cho phù hợp. Và bạn cũng lưu ý là trong SEO thì thẻ h1 được đánh giá mức độ quan trọng nhiều nhất rồi đến thẻ h6.
Thẻ p – Thẻ phân đoạn văn bản
Thẻ <p> được viết tắt từ chữ cái đầu của từ paragraph có nghĩa là đoạn văn bản và trong HTML thẻ p dùng để định dạng đoạn văn bản. Thẻ này chỉ chứa các nhóm thẻ inline như chữ, hình ảnh, link,…
Ví dụ:
<p>Đoạn văn bản số 1</p><p>Đoạn văn bản số 2</p>
Khi chạy đoạn code trên lên bạn sẽ thấy đoạn code trên sẽ phân thành 2 đoạn văn bản khác nhau mặc dù trên code chúng ta viết chúng thành 1 dòng.
Thẻ br – Thẻ ngắt dòng
Thẻ <br/> tương tự như khi soạn thảo trên Word chúng ta ấn Enter. Nó sẽ giúp ngắt dòng/xuống dòng tại bất cứ vị trí nào bạn đặt thẻ <br/> . Thẻ này là thẻ khuyết không có thẻ đóng.
Ví dụ:
<p>
Chào mừng bạn đến với khóa học HTML tại <br/> nguyenhung.net
</p>Thẻ hr – Thẻ chèn 1 đường nằm ngang
Thẻ <hr/> thường được dùng để chèn 1 đường nằm ngang để phân chia nội dung bên trong trang HTML. Thẻ này là thẻ khuyết không có thẻ đóng được viết dưới dạng <hr/>.
Ví dụ:
<p>Đây là nội dung thứ nhất</p> <hr /> <p>Đây là nội dung thứ hai</p>
Thẻ b – Thẻ bôi đậm chữ
Thẻ <b> là thẻ dùng để tô đậm chữ, đoạn văn bản.
Ví dụ:
<p>
Bạn đang học HTML trên <b>NguyenHung.Net</b>
</p>Thẻ strong – Thẻ dùng để nhấn mạnh
Thẻ <strong> nếu chỉ nhìn đơn thuần thì nó cũng là bôi đậm tương tự thẻ <b> nhưng cú pháp của nó là để nhấn mạnh nội dung văn bản bên trong thẻ <strong>. Nó cũng có tác dụng trong SEO bằng “gây chú ý” cho bot tìm kiếm.
Ví dụ:
<p>
Bạn đang học HTML trên <strong>NguyenHung.Net</strong>
</p>Thẻ small – Thẻ tạo chữ nhỏ
Thẻ <small> là thẻ để làm cho chữ nhỏ hơn so với bình thường.
Ví dụ:
<p>
Bạn đang học HTML trên <small>NguyenHung.Net</small>
</p>Thẻ i – Thẻ in nghiêng
Thẻ <i> là viết tắt của từ italic, có tác dụng in nghiêng chữ, đoạn văn bản.
Ví dụ:
<p>
Bạn đang học HTML trên <i>NguyenHung.Net</i>
</p>Thẻ u – Thẻ gạch chân
Thẻ <u> là thẻ gạch chân cho chữ trong HTML.
Ví dụ:
<p>
Bạn đang học HTML trên <u>NguyenHung.Net</u>
</p>Thẻ mark – Thẻ làm nổi bật
Thẻ <mark> dùng để tô nền cho chữ, giúp làm nổi bật một đoạn văn bản.
Ví dụ:
<p>
Bạn đang học HTML trên <mark>NguyenHung.Net</mark>
</p>Thẻ del – Thẻ gạch giữa chữ
Thẻ <del> dùng để tạo chữ bị gạch giữa.
Ví dụ:
<p>
Bạn đang học HTML trên <del>NguyenHung.Net</del>
</p>Thẻ sup – Thẻ tạo chỉ số trên (số mũ)
Thẻ <sup> giúp đưa văn bản lên thành chỉ số mũ ở trên.
Ví dụ:
<p> H<sup>2</sup> </p>
Thẻ sub – Thẻ tạo chỉ số dưới
Thẻ <sub> giúp đưa văn bản lên thành chỉ số dưới.
Ví dụ:
<p> H<sub>2</sub>O </p>
Như vậy với các thẻ NguyenHung.Net giới thiệu ở trên hi vọng các bạn đã biết cách sử dụng chúng để định dạng cho chữ, đoạn văn bản trong web HTML của mình. Bài tiếp theo trong series học HTML cơ bản mình sẽ giới thiệu cho các bạn các thẻ tạo danh sách các bạn nhớ chú ý theo dõi để học tiếp nhé. Chúc các bạn thành công!
