Thẻ Danh sách (Lists): <ul>, <ol>, <li>
HTML hỗ trợ hai loại danh sách chính:
- <ul> (Unordered List): Danh sách không có thứ tự cụ thể.
- <ol> (Ordered List): Danh sách có thứ tự.
- <li> (List Item): Mỗi mục trong danh sách (dùng cho cả <ul> và <ol>).
Ví dụ:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Tiêu đề trang web</title>
</head>
<body>
<h3>Dụng cụ để vẽ:</h3>
<ul>
<li>Giấy</li>
<li>Màu</li>
<li>Giá đỡ</li>
</ul>
<h3>Các bước thực hiện:</h3>
<ol>
<li>Lên ý tưởng.</li>
<li>Thực hiện ý tưởng.</li>
<li>Thưởng thức thành quả.</li>
</ol>
</body>
</html>Hiển thị trên web:
Thẻ <div>, <span>
- <div> (Division): Là một thẻ khối (block-level).
- <span>: Là một thẻ nội tuyến (inline-level).
Ví dụ:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Tiêu đề trang web</title>
</head>
<body>
<div>
<h3>Tiêu đề trong Div</h3>
<p>
Đoạn văn này và tiêu đề trên được nhóm lại trong một thẻ div.
Mỗi div sẽ đứng trên một dòng riêng.
</p>
</div>
<div>
<p>Đây là div thứ hai, nó cũng bắt đầu trên một dòng mới.</p>
</div>
<p>
Đây là một đoạn văn bản chứa một
<span><b>cụm từ được định dạng riêng</b></span> bằng thẻ span.
</p>
</body>
</html>Hiển thị trên web:
Các Thẻ Ngữ nghĩa của HTML5 (Semantic Tags)
- HTML5 giới thiệu nhiều thẻ mới giúp chúng ta mô tả ý nghĩa của nội dung một cách rõ ràng hơn thay vì chỉ dùng <div> cho mọi thứ. (giúp cho SEO tốt)
Một số thẻ ngữ nghĩa phổ biến:
- <header>: Phần đầu của trang hoặc một phần tử (như bài viết), thường chứa tiêu đề, logo, điều hướng.
- <nav>: Chứa các liên kết điều hướng chính của trang web.
- <main>: Chứa nội dung chính, độc lập và duy nhất của tài liệu. Chỉ nên có một thẻ <main> trên mỗi trang.
- <article>: Chứa một phần nội dung độc lập và có ý nghĩa riêng (ví dụ: một bài blog, một mục tin tức, một bình luận).
- <section>: Định nghĩa một phần (section) trong tài liệu, thường có tiêu đề riêng.
- <aside>: Chứa nội dung liên quan đến nội dung chính nhưng có thể độc lập (ví dụ: sidebar, hộp thông tin liên quan).
- <footer>: Phần chân trang của tài liệu hoặc một phần tử, thường chứa thông tin bản quyền, liên hệ, liên kết phụ.
Ví dụ:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Tiêu đề trang web</title>
</head>
<body>
<header>
<h1>Tên Trang Web / Logo</h1>
<nav>
<a href="/">Trang chủ</a>
<a href="/blog">Blog</a>
<a href="/contact">Liên hệ</a>
</nav>
</header>
<main>
<article>
<h2>Tiêu đề Bài Viết A</h2>
<p>Nội dung chính của bài viết A...</p>
<section>
<h3>Bình luận</h3>
<p>Một bình luận...</p>
</section>
</article>
<aside>
<h3>Bài viết liên quan</h3>
<ul>
<li><a href="#">Bài viết B</a></li>
<li><a href="#">Bài viết C</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2023 Tên của bạn.</p>
</footer>
</body>
</html>Hiển thị trên web:
Thẻ Ngắt dòng và Đường kẻ ngang (<br>, <hr>)
- Hai thẻ này là những thẻ “tự đóng” (không có thẻ đóng </br> hay </hr>).
- <br> (Break Rule): Tạo một dòng mới ngay tại vị trí của thẻ.
- <hr> (Horizontal Rule): Vẽ một đường kẻ ngang, dùng để phân chia nội dung theo chủ đề.
Ví dụ:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Tiêu đề trang web</title>
</head>
<body>
<p>
Địa chỉ của tôi:<br />
Số 123, Đường ABC,<br />
Quận XYZ, Thành phố HCM.
</p>
<p>Phần đầu của nội dung.</p>
<hr />
<p>Phần tiếp theo của nội dung, được phân cách bằng đường kẻ.</p>
</body>
</html>Hiển thị trên web:
