Bài 1.2: Các thẻ HTML phổ biến
Bài 1.2: Các thẻ HTML phổ biến
Chào mừng trở lại với series Lập trình Web Front-end! Ở bài trước, chúng ta đã biết cấu trúc cơ bản của một file HTML – bộ xương sống của trang web. Hôm nay, hãy cùng mở cánh cửa và khám phá những thẻ HTML phổ biến – những công cụ mạnh mẽ giúp chúng ta định hình và hiển thị nội dung trên trang web. Đây chính là những 'viên gạch' đầu tiên bạn cần nắm vững để xây dựng nên mọi thứ, từ một đoạn văn đơn giản đến những cấu trúc phức tạp hơn.
HTML cung cấp hàng trăm thẻ khác nhau, mỗi thẻ có một chức năng riêng. Tuy nhiên, trên thực tế, bạn sẽ làm việc thường xuyên nhất với một nhóm các thẻ cốt lõi. Nắm vững những thẻ này sẽ giúp bạn tự tin tạo ra hầu hết các loại nội dung cần thiết. Hãy cùng đi sâu vào từng nhóm nhé!
1. Thẻ Tiêu đề (Headings): <h1> đến <h6>
Tiêu đề là cực kỳ quan trọng để cấu trúc nội dung và giúp người đọc (và cả các công cụ tìm kiếm) hiểu được bố cục bài viết của bạn. HTML cung cấp 6 cấp độ tiêu đề, từ <h1> (quan trọng nhất, thường là tiêu đề chính của trang hoặc bài viết) đến <h6> (ít quan trọng nhất, cho các tiêu đề phụ rất nhỏ).
Việc sử dụng đúng cấp độ tiêu đề không chỉ cải thiện khả năng đọc mà còn tốt cho SEO (Search Engine Optimization). Chỉ nên có một thẻ <h1> trên mỗi trang.
Ví dụ:
<h1>Đây là tiêu đề chính của trang</h1>
<p>Nội dung giới thiệu.</p>
<h2>Phần 1: Giới thiệu</h2>
<p>Nội dung của phần giới thiệu.</p>
<h3>Mục nhỏ trong Phần 1</h3>
<p>Nội dung chi tiết hơn.</p>
<h4>Tiêu đề con nữa...</h4>
Giải thích:
<h1>đến<h6>: Định nghĩa các tiêu đề. Số càng nhỏ, cấp độ tiêu đề càng quan trọng.- Trình duyệt mặc định sẽ hiển thị tiêu đề
<h1>lớn nhất và giảm dần kích thước xuống<h6>.
2. Thẻ Đoạn văn (Paragraph): <p>
Đoạn văn là khối nội dung văn bản cơ bản nhất. Thẻ <p> dùng để định nghĩa một đoạn văn. Trình duyệt thường tự động thêm một khoảng trắng trên và dưới mỗi thẻ <p>, giúp các đoạn văn tách biệt rõ ràng.
Ví dụ:
<p>Đây là đoạn văn bản đầu tiên. Nó chứa thông tin về chủ đề chính của bài viết.</p>
<p>Đoạn văn thứ hai. Bạn có thể có nhiều đoạn văn để trình bày ý tưởng một cách mạch lạc.</p>
Giải thích:
<p>: Tạo một đoạn văn mới. Tất cả văn bản nằm giữa thẻ mở<p>và thẻ đóng</p>sẽ được coi là một đoạn.
3. Thẻ Định dạng Văn bản (Text Formatting)
HTML cung cấp nhiều thẻ để thay đổi cách hiển thị hoặc thêm ý nghĩa cho văn bản.
<strong>và<b>: In đậm văn bản.<strong>mang ý nghĩa quan trọng, còn<b>chỉ đơn thuần là định dạng in đậm (nên ưu tiên<strong>khi văn bản thực sự quan trọng).<em>và<i>: In nghiêng văn bản.<em>mang ý nghĩa nhấn mạnh (về ngữ điệu), còn<i>chỉ đơn thuần là định dạng in nghiêng (thường dùng cho thuật ngữ, tên riêng...). Nên ưu tiên<em>khi muốn nhấn mạnh.<mark>: Đánh dấu (highlight) văn bản.<del>: Gạch ngang văn bản (ví dụ: giá cũ).<ins>: Gạch chân văn bản (ví dụ: nội dung mới được thêm).<sub>: Chỉ số dưới (ví dụ: H₂O).<sup>: Chỉ số trên (ví dụ: x²).
Ví dụ:
<p>
Đây là văn bản <strong>quan trọng</strong> và đây là văn bản <b>được in đậm</b>.
</p>
<p>
Đây là văn bản được <em>nhấn mạnh</em> và đây là văn bản <i>được in nghiêng</i>.
</p>
<p>
Đừng quên <mark>ghi chú</mark> điểm này!
</p>
<p>Giá cũ: <del>100.000đ</del> Giá mới: <ins>80.000đ</ins></p>
<p>Công thức nước: H<sub>2</sub>O</p>
<p>Phương trình: x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>
Giải thích:
- Các thẻ này được sử dụng trong các thẻ khối khác như
<p>để định dạng một phần nhỏ của văn bản. <strong>và<em>là các thẻ ngữ nghĩa (semantic), chúng cho biết ý nghĩa của văn bản đó (quan trọng, nhấn mạnh).<b>và<i>ban đầu là các thẻ trình bày (presentational), chỉ nói lên cách hiển thị (in đậm, in nghiêng). Mặc dù HTML5 đã gán thêm một số ý nghĩa cho chúng, nhưng việc sử dụng<strong>và<em>thường được khuyến khích hơn về mặt ngữ nghĩa và khả năng tiếp cận (accessibility).
4. Thẻ Liên kết (Link): <a>
Thẻ <a> (anchor) là một trong những thẻ quan trọng nhất, dùng để tạo các siêu liên kết (hyperlink). Siêu liên kết cho phép người dùng di chuyển giữa các trang web hoặc các phần khác nhau trên cùng một trang.
Thuộc tính href là bắt buộc và xác định địa chỉ đích của liên kết.
Ví dụ:
<p>Truy cập <a href="https://www.google.com">Trang tìm kiếm Google</a>.</p>
<p>Xem <a href="/about.html">Giới thiệu về chúng tôi</a> (liên kết nội bộ).</p>
<p>Tải xuống <a href="/files/document.pdf" download>Tài liệu PDF</a> (liên kết tải xuống).</p>
<p>Gửi email cho chúng tôi: <a href="mailto:support@example.com">support@example.com</a>.</p>
<p>Gọi điện: <a href="tel:+1234567890">+(123) 456-7890</a>.</p>
Giải thích:
<a></a>: Thẻ bao quanh văn bản hoặc phần tử mà bạn muốn biến thành liên kết.href="...": Thuộc tính chỉ định URL hoặc đường dẫn đến trang/tài nguyên muốn liên kết tới.- URL đầy đủ (
https://...) cho liên kết ngoài. - Đường dẫn tương đối (
/about.html) cho liên kết nội bộ. mailto:email@address.comcho liên kết gửi email.tel:phone_numbercho liên kết gọi điện trên thiết bị di động.
- URL đầy đủ (
download: Thuộc tính tùy chọn, gợi ý trình duyệt tải xuống tài nguyên thay vì mở nó.
5. Thẻ Danh sách (Lists): <ul>, <ol>, <li>
Danh sách là cách tuyệt vời để trình bày các mục liên quan một cách có cấu trúc. HTML hỗ trợ hai loại danh sách chính:
<ul>(Unordered List): Danh sách không có thứ tự cụ thể (thường hiển thị bằng dấu chấm, gạch đầu dòng...).<ol>(Ordered List): Danh sách có thứ tự (thường hiển thị bằng số, chữ cái...).<li>(List Item): Mỗi mục trong danh sách (dùng cho cả<ul>và<ol>).
Ví dụ:
<h3>Những thứ cần mua:</h3>
<ul>
<li>Táo</li>
<li>Chuối</li>
<li>Sữa</li>
</ul>
<h3>Các bước thực hiện:</h3>
<ol>
<li>Chuẩn bị nguyên liệu.</li>
<li>Thực hiện theo công thức.</li>
<li>Thưởng thức thành quả.</li>
</ol>
Giải thích:
<ul>và<ol>là các thẻ bao quanh toàn bộ danh sách.<li>là thẻ con trực tiếp, mỗi thẻ<li>đại diện cho một mục riêng biệt trong danh sách.
6. Thẻ Khối và Nội tuyến (Block and Inline): <div>, <span>
Hai thẻ này bản thân không mang nhiều ý nghĩa ngữ nghĩa, nhưng chúng lại cực kỳ quan trọng để tổ chức cấu trúc trang web và là đối tượng chính để áp dụng CSS (chúng ta sẽ học về CSS sau).
<div>(Division): Là một thẻ khối (block-level). Nó tạo ra một khối riêng biệt và mặc định luôn bắt đầu trên một dòng mới, chiếm toàn bộ chiều rộng có thể. Thường dùng để nhóm các phần tử lớn lại với nhau.<span>: Là một thẻ nội tuyến (inline-level). Nó chỉ bao quanh một phần nhỏ nội dung trong một dòng văn bản và chỉ chiếm chiều rộng bằng nội dung của nó. Thường dùng để áp dụng định dạng riêng cho một vài từ hoặc cụm từ.
Ví dụ:
<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 style="color: blue;">cụm từ được định dạng riêng</span> bằng thẻ span.</p>
Giải thích:
<div>tạo ra các khối hộp chữ nhật để phân chia bố cục trang. Rất hữu ích khi bạn cần áp dụng cùng một kiểu CSS cho nhiều phần tử hoặc kiểm soát vị trí của một nhóm nội dung.<span>chỉ tác động đến một phần nhỏ bên trong một dòng. Thường dùng để thay đổi màu sắc, font chữ, hoặc các kiểu nội tuyến khác cho một đoạn văn bản cụ thể mà không làm ảnh hưởng đến cấu trúc dòng.
7. 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ứ. Mặc dù về mặt hiển thị, chúng có thể giống <div>, nhưng về mặt ngữ nghĩa, chúng cung cấp thông tin quan trọng cho trình duyệt, công cụ tìm kiếm và công nghệ hỗ trợ người dùng (như trình đọc màn hình).
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ụ (Cấu trúc đơn giản sử dụng thẻ ngữ nghĩa):
<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>
Giải thích:
- Các thẻ ngữ nghĩa giúp mã nguồn HTML trở nên dễ hiểu và có cấu trúc hơn.
- Chúng giúp các công cụ tự động (như bộ máy tìm kiếm) hiểu rõ hơn về từng phần nội dung.
- Sử dụng thẻ ngữ nghĩa là một phần quan trọng của phát triển web hiện đại và tốt cho khả năng tiếp cận.
8. 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ẻ. Thường dùng để ngắt dòng trong các đoạn văn bản hoặc địa chỉ mà không muốn bắt đầu một đoạn<p>mới.<hr>(Horizontal Rule): Vẽ một đường kẻ ngang, dùng để phân chia nội dung theo chủ đề.
Ví dụ:
<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>
Giải thích:
<br>rất hữu ích khi bạn cần xuống dòng "cứng" bên trong một phần tử nội tuyến hoặc một khối văn bản duy nhất.<hr>tạo ra một ranh giới trực quan giữa các phần nội dung.
Đây chỉ là một vài thẻ trong số rất nhiều thẻ HTML khác, nhưng chúng là những thẻ bạn sẽ dùng thường xuyên nhất khi bắt đầu xây dựng nội dung cho trang web của mình. Nắm vững công dụng và cách sử dụng của chúng là nền tảng vững chắc để bạn tiến xa hơn.
Comments