Trong bài 4 của loạt bài học về HTML, chúng ta sẽ cùng tìm hiểu về các phần tử cơ bản trong HTML, những "viên gạch" đầu tiên để xây dựng nên một trang web hoàn chỉnh. Các phần tử này bao gồm tiêu đề, đoạn văn, hình ảnh, liên kết và danh sách – những thành phần thiết yếu giúp bạn tạo nên nội dung và bố cục trang web. Bài viết này sẽ hướng dẫn chi tiết cách sử dụng các thẻ HTML cơ bản, rất phù hợp cho người mới bắt đầu làm quen với lập trình web.

1. Phần tử HTML là gì?

Phần tử HTML (HTML Element) là các thành phần cơ bản của HTML dùng để xây dựng nội dung cho trang web. Một phần tử HTML thường bao gồm:

• Thẻ mở: Bắt đầu phần tử, ví dụ: <p>.
• Nội dung: Nằm giữa thẻ mở và thẻ đóng, ví dụ: đoạn văn bản.
• Thẻ đóng: Kết thúc phần tử, ví dụ: </p>.

Ví dụ về phần tử HTML:

<p>Đây là một phần tử đoạn văn.</p>

Trong đó, <p> là thẻ mở, Đây là một phần tử đoạn văn. là nội dung, và </p> là thẻ đóng.

2. Phần tử văn bản

a. Thẻ đoạn văn (<p>)

Thẻ <p> được sử dụng để tạo các đoạn văn bản.

Ví dụ:

<p>Đây là đoạn văn đầu tiên của tôi.</p>
<p>HTML rất đơn giản và dễ hiểu!</p>

b. Thẻ tiêu đề (<h1> đến <h6>)

HTML cung cấp 6 mức độ tiêu đề, từ <h1> đến <h6>, dùng để phân cấp nội dung, với <h1> là tiêu đề quan trọng nhất.

Ví dụ:

<h1>Đây là tiêu đề cấp 1</h1>
<h2>Đây là tiêu đề cấp 2</h2>
<h3>Đây là tiêu đề cấp 3</h3>

c. Thẻ in đậm (<strong>) và in nghiêng (<em>)

Bạn có thể dùng thẻ <strong> để làm chữ in đậm và thẻ <em> để làm chữ in nghiêng, đặc biệt hữu ích khi bạn muốn nhấn mạnh một đoạn văn bản.

Ví dụ:

<p><strong>Chú ý:</strong> Bạn cần thực hiện theo đúng hướng dẫn.</p>
<p>Việc học HTML là rất <em>quan trọng</em> nếu bạn muốn trở thành lập trình viên web.</p>

3. Phần tử liên kết

a. Thẻ đường dẫn (<a>)

Thẻ <a> (anchor) dùng để tạo liên kết tới trang khác hoặc tài liệu khác.

Ví dụ:

<a href="https://codetuthub.com">Truy cập CodeTutHub</a>

• href: Thuộc tính này chứa URL mà liên kết sẽ dẫn đến.

Bạn có thể sử dụng thuộc tính target="_blank" để mở liên kết trong một tab mới:

<a href="https://codetuthub.com" target="_blank">Truy cập CodeTutHub trong tab mới</a>

4. Phần tử hình ảnh

a. Thẻ hình ảnh (<img>)

Thẻ <img> được dùng để chèn hình ảnh vào trang web. Nó là một phần tử không có thẻ đóng, chỉ cần thẻ mở với các thuộc tính.

Ví dụ:

<img src="https://codetuthub.com/logo.png" alt="Logo của CodeTutHub">

• src: Đường dẫn đến tệp hình ảnh.
• alt: Văn bản thay thế, được hiển thị khi hình ảnh không thể tải được hoặc dùng cho mục đích SEO.

5. Phần tử danh sách

a. Thẻ danh sách không thứ tự (<ul>)

Thẻ <ul> được dùng để tạo danh sách không có thứ tự, các mục trong danh sách được đánh dấu bằng dấu chấm tròn.

Ví dụ:

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

b. Thẻ danh sách có thứ tự (<ol>)

Thẻ <ol> tạo danh sách có thứ tự, các mục trong danh sách sẽ được đánh số tự động.

Ví dụ:

<ol>
    <li>Bước 1: Học HTML</li>
    <li>Bước 2: Học CSS</li>
    <li>Bước 3: Học JavaScript</li>
</ol>

6. Phần tử bảng

a. Thẻ bảng (<table>)

HTML cho phép tạo bảng bằng cách sử dụng thẻ <table> cùng với các thẻ con như <tr> (hàng), <th> (ô tiêu đề), và <td> (ô dữ liệu).

Ví dụ:

<table>
    <tr>
        <th>Tên</th>
        <th>Tuổi</th>
    </tr>
    <tr>
        <td>Anh</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Mai</td>
        <td>22</td>
    </tr>
</table>

7. Phần tử biểu mẫu

a. Thẻ biểu mẫu (<form>)

HTML cho phép bạn tạo biểu mẫu để thu thập dữ liệu người dùng. Biểu mẫu có thể chứa các phần tử như ô nhập liệu (<input>), nút gửi (<button>), và nhiều phần tử khác.

Ví dụ về biểu mẫu:

<form action="/submit" method="POST">
    <label for="name">Tên:</label>
    <input type="text" id="name" name="name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <button type="submit">Gửi</button>
</form>

• action: Định rõ nơi mà dữ liệu sẽ được gửi sau khi người dùng nhấn nút "Gửi".
• method: Xác định phương thức gửi dữ liệu, thường là GET hoặc POST.

8. Phần tử khác

a. Thẻ phân chia (<div>)

Thẻ <div> là thẻ container được sử dụng để nhóm các phần tử khác lại với nhau. Nó không có bất kỳ định dạng nào mặc định mà chỉ dùng để bao bọc các phần tử.

Ví dụ:

<div class="container">
    <h2>Tiêu đề chính</h2>
    <p>Đây là đoạn văn bản.</p>
</div>

b. Thẻ nhấn mạnh (<span>)

Thẻ <span> tương tự như <div>, nhưng dùng để bao bọc các phần tử nhỏ hơn, thường là văn bản bên trong các đoạn hoặc tiêu đề. Nó cũng không có định dạng mặc định.

Ví dụ:

<p>Chữ <span style="color: red;">màu đỏ</span> trong đoạn văn này được làm nổi bật.</p>

9. Kết luận

Việc hiểu rõ về các phần tử HTML là rất quan trọng để bạn có thể cấu trúc nội dung trang web một cách hiệu quả. Mỗi phần tử đều có một chức năng cụ thể, từ việc hiển thị văn bản, hình ảnh, đến tạo danh sách, bảng biểu và biểu mẫu.

Khi bạn nắm vững các phần tử cơ bản này, bạn sẽ có khả năng xây dựng các trang web đơn giản nhưng đầy đủ chức năng, tạo nền tảng cho việc phát triển các kỹ năng web nâng cao hơn.

Nếu bạn muốn tìm hiểu thêm về các phần tử và các kỹ thuật phát triển web, hãy theo dõi CodeTutHub để cập nhật những bài viết và hướng dẫn mới nhất nhé!