5. Các Thành Phần Của HTML

HTML bao gồm nhiều loại thành phần khác nhau để xây dựng nội dung và cấu trúc của trang web. Dưới đây là một số thành phần quan trọng trong HTML:

Thẻ (Tags): Là các phần tử cơ bản của HTML, được sử dụng để đánh dấu và xác định cấu trúc của trang web. Mỗi thẻ bắt đầu bằng dấu < và kết thúc bằng dấu >. Ví dụ: <h1>, <p>, <a>, <img>, <div>, <span>,…
Thẻ mở và thẻ đóng: Các thẻ HTML thường xuất hiện dưới dạng cặp thẻ mở và thẻ đóng, ví dụ <tag>...</tag>. Thẻ mở bắt đầu một phần tử và thẻ đóng kết thúc phần tử đó. Ví dụ: <p>Đây là đoạn văn bản.</p>.
Văn bản: Được đánh dấu bằng các thẻ như <p>, <h1>, <h2>, <h3>,… để định dạng và hiển thị tiêu đề và đoạn văn bản.
Liên kết (Links): Được tạo bằng thẻ <a> để tạo ra các liên kết tới các trang web khác hoặc tài liệu nội bộ.
Hình ảnh (Images): Được chèn vào trang bằng thẻ <img>, cho phép hiển thị hình ảnh trên trang web.
Danh sách (Lists): Có hai loại danh sách chính trong HTML: danh sách có thứ tự (<ol>) và danh sách không có thứ tự (<ul>). Các mục trong danh sách được đánh dấu bằng thẻ <li>.
Bảng (Tables): Được tạo bằng thẻ <table> và các thành phần liên quan như <tr> (dòng), <th> (đầu dòng) và <td> (ô dữ liệu).
Biểu đồ (Forms): Được tạo bằng thẻ <form>, cho phép người dùng nhập dữ liệu và gửi tới máy chủ. Các phần tử như <input>, <textarea>, <select>, và <button> được sử dụng để tạo các trường và nút điều khiển trong biểu đồ.
Phần tử tạo nên cấu trúc (Structural Elements): Các phần tử như <header>, <footer>, <nav>, và <main> được sử dụng để xác định các phần quan trọng của trang web, giúp trình duyệt hiểu cấu trúc trang.
Phần tử tạo nên ngữ cảnh (Semantic Elements): Các phần tử như <article>, <section>, <aside>, và <figure> được sử dụng để chỉ rõ ngữ cảnh và ý nghĩa của các phần trên trang web.
Thẻ chú thích (Comments): Sử dụng  để thêm chú thích trong mã HTML, không được hiển thị trên trang web.
Thuộc tính (Attributes): Được thêm vào các thẻ để cung cấp thông tin bổ sung về các phần tử, chẳng hạn như class, id, src, href, v.v.

Các thành phần này tạo nên khung xương của trang web và cho phép bạn xây dựng nội dung và giao diện tương tác một cách linh hoạt.

Dưới đây là một ví dụ đơn giản về cách sử dụng các thành phần HTML khác nhau để xây dựng một trang web đơn giản:

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ví dụ HTML</title>
    <style>
        .highlight {
            color: red;
        }
    </style>
</head>
<body>
    <header>
        <h1>Tiêu đề chính</h1>
        <nav>
            <ul>
                <li><a href="#">Trang chủ</a></li>
                <li><a href="#">Dịch vụ</a></li>
                <li><a href="#">Liên hệ</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2 class="highlight">Tiêu đề phần</h2>
            <p>Đây là một đoạn văn bản trong phần.</p>
            <img src="example.jpg" alt="Hình ảnh minh họa">
        </section>

        <section>
            <h2>Tiêu đề khác</h2>
            <p>Đây là một phần khác với danh sách:</p>
            <ul>
                <li>Mục 1</li>
                <li>Mục 2</li>
                <li>Mục 3</li>
            </ul>
        </section>
    </main>

    <footer>
        <p>Bản quyền © 2023. ABC Company.</p>
    </footer>
</body>
</html>

Trong ví dụ này:

Đã sử dụng các thẻ <header>, <nav>, <main>, <section>, và <footer> để tạo cấu trúc chính của trang.
Các thẻ <h1>, <h2>, <p>, <ul>, và <li> được sử dụng để định dạng văn bản và tạo danh sách.
Thẻ <a> được sử dụng để tạo liên kết.
Thẻ <img> được sử dụng để chèn hình ảnh vào trang.
Một ví dụ về việc sử dụng thuộc tính class để áp dụng kiểu CSS đã được thêm vào.
Các phần tử như <meta> và <style> được sử dụng trong thẻ <head> để cung cấp thông tin bổ sung và kiểu CSS cho trang.

Vui lòng lưu ý rằng trong ví dụ này, tôi sử dụng một tấm hình ảnh example.jpg như một ví dụ, vì vậy bạn cần phải thay thế nó bằng một tấm hình ảnh thực tế. Trên đây là giới thiệu về Các thành phần của HTML.

Leave a Comment Cancel Reply