Xin chào các bạn quay lại blog của mình. Trong bài này mình sẽ giới thiệu các bạn những thẻ HTML cơ bản để từ đó phát triển nội dung và giúp người giúp trải nghiệm web mộ cách tốt hơn.
Title Tag HTML
Tiêu đề (Title) theo mình hiểu là những từ ngắn gọn giúp khái quát ý nghĩa mà mình muốn nói đến. Khi người dùng đọc tiêu đề thì họ có thể hiểu được mình sẽ nói về nội dung gì. Các máy chủ tìm kiếm như Google thì nó sẽ dùng thuật toán để tìm kiếm, theo mình biết thì nó cũng đánh giá mức độ liên quan của tiêu đề trang web với những tìm kiếm mà người dùng nhập vào.Trong HTML cung cấp cho mình 6 loại tiêu đề đi từ lớn tới nhỏ theo bảng dưới đây:
| Mã code HTML | Hiện Thị trên Web |
|---|---|
| <h1> Nội Dung Trang Web </h1> | Nội Dung Trang Web |
| <h2> Nội Dung Trang Web </h2> | Nội Dung Trang Web |
| <h3> Nội Dung Trang Web </h3> | Nội Dung Trang Web |
| <h4> Nội Dung Trang Web </h4> | Nội Dung Trang Web |
| <h5> Nội Dung Trang Web </h5> | Nội Dung Trang Web |
| <h6> Nội Dung Trang Web </h6> | Nội Dung Trang Web |
Như các bạn thấy thì khi mình viết thì tiêu đề sẽ được in đậm và kích thước nhỏ dần từ thẻ <h1> đến <h6>. Khi sử dụng thì các bạn cần xem mức độ bao quát của tiêu đề mà sử dụng phù hợp nhé!
Thẻ p(Paragraph) HTML
Trong HTML thì mình sẽ sử dụng thẻ <p> </p> để xác định đó là một đoạn văn. Nếu các bạn để ý thì thông thường tên của một thẻ HTML thì sẽ là từ viết tắt liên quan đến chức năng của nó. Ví dụ như là thẻ <p> là viết tắt của từ paragraph. Khi ta dùng thẻ này thì nó sẽ tự động xuống dòng.
<p>Nội dung đoạn văn</p>
Ví dụ về một đoạn văn (paragraph) trong web:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML bài 3</title>
</head>
<body>
<p>Quê hương là hai tiếng gọi thân thương nhất đối với mỗi một con người. Bởi đó là nơi chúng kiến ta sinh ra, lớn lên và trưởng thành.
Đối với em cũng vậy, quê hương em thật đẹp và mỗi lần nhắc gọi quê hương em thấy trong lòng trào dâng bao cảm xúc khó tả. </p>
</body>
</html>
Các bạn có thể xem kết quả ở phía dưới đây:
See the Pen Thẻ <p> HTML by haycuoilennao19 (@haycuoilennao19) on CodePen.
Các Thẻ Styling Text HTML
Thông thường một đoạn văn hay chữ thì HTML cung cấp cho chúng ta những thẻ giúp định dạng một cách nhanh hơn. Bây giờ chúng ta hãy tìm hiểu một vài thẻ cơ bản này nhé:
Thẻ br và hr
Hai thẻ này không có thẻ đóng, cái này mình sẽ nói rõ khi chúng ta học thẻ <img> sau. Nó giúp định dạng đoạn văn một cách tốt hơn và thường được sử dụng với đoạn văn. Các bạn hãy xem đoạn code của mình để nắm rõ hơn nhé:
Mã Code HTML
<p>Quê hương là hai tiếng gọi thân thương nhất <br/> đối với mỗi một con người. Bởi đó là nơi chúng kiến ta sinh ra, lớn lên và trưởng thành. Đối với em cũng vậy, quê hương em thật đẹp và mỗi lần nhắc gọi quê hương em thấy trong lòng trào dâng bao cảm xúc khó tả.<p>
<hr/>
<p>Quê hương là hai tiếng gọi thân thương nhất <br/> đối với mỗi một con người. Bởi đó là nơi chúng kiến ta sinh ra, lớn lên và trưởng thành. Đối với em cũng vậy, quê hương em thật đẹp và mỗi lần nhắc gọi quê hương em thấy trong lòng trào dâng bao cảm xúc khó tả.<p>
Hiển thị trên Web
Quê hương là hai tiếng gọi thân thương nhất
đối với mỗi một con người. Bởi đó là nơi chúng kiến ta sinh ra, lớn lên và trưởng thành. Đối với em cũng vậy, quê hương em thật đẹp và mỗi lần nhắc gọi quê hương em thấy trong lòng trào dâng bao cảm xúc khó tả.
Quê hương là hai tiếng gọi thân thương nhất
đối với mỗi một con người. Bởi đó là nơi chúng kiến ta sinh ra, lớn lên và trưởng thành. Đối với em cũng vậy, quê hương em thật đẹp và mỗi lần nhắc gọi quê hương em thấy trong lòng trào dâng bao cảm xúc khó tả.
Xem ví dụ chắc các bạn cũng đã hiểu phần nào tác dụng của hai thẻ này. Để mình làm rõ thêm là thẻ <br/> có tác giúp giúp chúng ta xuống dòng ở những nơi mà mình đặt thẻ này. Còn thẻ <hr/> giúp ngăn cách những đoạn văn bản bằng đường gạch ngang làm cho nội dung hiển thị rõ ràng và dễ đọc hơn.
