close

Giới thiệu về cấu trúc HTML: Các phần tử và cấu trúc cơ bản

Cấu trúc HTML đóng vai trò quan trọng trong xây dựng các trang web. Nó giúp định nghĩa cách tổ chức và hiển thị nội dung trên trang. Dưới đây là một giới thiệu về cấu trúc HTML căn bản:

1. Doctype

Doctype (Document Type Declaration) định nghĩa phiên bản HTML mà trang web sử dụng. Nó cần được đặt ở đầu tệp tin HTML.

2. Thẻ html

Thẻ html là thẻ gốc của mọi tệp tin HTML. Nó bao gồm toàn bộ nội dung của trang web.

3. Thẻ head

Thẻ head chứa thông tin về trang web mà không hiển thị trực tiếp trên trình duyệt. Đây là nơi để định nghĩa tiêu đề trang (title), các thẻ meta, liên kết tới các tệp tin CSS và JavaScript, và nhiều phần tử khác.

4. Thẻ body

Thẻ body chứa toàn bộ nội dung hiển thị trên trang web. Đây là nơi để định nghĩa các phần tử như văn bản, hình ảnh, video, liên kết và các thành phần giao diện người dùng khác.

5. Các thẻ phân cấp

HTML sử dụng cấu trúc phân cấp với các thẻ mở và đóng. Các thẻ con được đặt bên trong các thẻ cha. Ví dụ: thẻ p (đoạn văn bản) có thể chứa thẻ span (đoạn văn bản nhỏ), thẻ strong (văn bản in đậm), và nhiều thẻ khác.

6. Các thẻ phổ biến

HTML cung cấp một loạt các thẻ để định dạng và hiển thị nội dung. Ví dụ: thẻ h1-h6 (tiêu đề), thẻ p (đoạn văn bản), thẻ img (hình ảnh), thẻ a (liên kết), và nhiều thẻ khác.

 

Dưới đây là một ví dụ về cấu trúc đầy đủ của một trang HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Webpage</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>
<body>
    <header>
        <h1>Welcome to My Webpage</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>About Me</h2>
            <p>I am a web developer passionate about creating amazing websites.</p>
        </section>
        <section>
            <h2>My Projects</h2>
            <ul>
                <li><a href="#">Project 1</a></li>
                <li><a href="#">Project 2</a></li>
                <li><a href="#">Project 3</a></li>
            </ul>
        </section>
    </main>
    <footer>
        <p>&copy; 2022 My Webpage. All rights reserved.</p>
    </footer>
</body>
</html>

Trong ví dụ trên, chúng ta có một trang HTML hoàn chỉnh với các phần tử chính như doctype, html tag, head tag và body tag. Trong phần head, chúng ta định nghĩa tiêu đề trang, các tệp tin CSS và JavaScript cần sử dụng. Phần body chứa các phần tử như header (đầu trang), main (nội dung chính), và footer (chân trang) để hiển thị nội dung của trang web.

 

Qua việc sử dụng cấu trúc HTML đúng, bạn có thể xây dựng các trang web có tổ chức, dễ đọc và tương tác.