Bài 3: Cấu trúc trang HTML

3263

Chào các bạn,

Qua hai bài học trước chúng ta đã nắm được HTML là gì cũng như các khái niệm thường gặp trong HTML. Bây giờ các bạn đã sẵn sàng để học những dòng code đầu tiên với HTML chưa. Cùng bắt đầu nào!

I. Cấu trúc tài liệu HTML

Dưới đây là cấu trúc của một tài liệu HTML hoàn chỉnh, bạn hãy bỏ ra 15 giây để “ngắm nhìn” nó trước khi đọc phần phân tích của mình phía dưới nhé.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>Hello, world!</h1>
        <p>Đây là một tài liệu HTML hoàn chỉnh</p>
    </body>
</html>

Cấu trúc chuẩn của một tài liệu HTML

1. Bắt đầu bằng thẻ <!DOCTYPE html>: <!DOCTYPE html> là thẻ khai báo rằng tài liệu của bạn là một tài liệu HTML5.

2. Có phần tử gốc là<html>…</html>: Tất cả các thẻ khác của tài liệu HTML, đều phải nằm trong cặp thẻ gốc <html>...</html>.

3. Một tài liệu HTML luôn có 2 phần là head và body:

  • Phần head: Nằm trong cặp thẻ <head>...</head>, chứa phần tử mô tả về tài liệu, điển hình nhất là phần tử <title>...</title> được sử dụng để khai báo tên tài liệu.
  • Phần body: Nằm trong cặp thẻ <body>...</body>, chứa các phần tử sẽ được hiển thị lên trang web, đây cũng là phần mà chúng ta thường xuyên phải làm việc.

Toàn bộ cấu trúc một tài liệu HTML đơn giản có thể hình dung như sau:

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>Đây là một tài liệu HTML hoàn chỉnh</p>
</body>
</html>

Một số lưu ý về cấu trúc tài liệu HTML

Hiện tại các trình duyệt như Google Chrome và các trình duyệt phổ biến khác rất thông minh, cho dù bạn có viết sai cấu trúc của tài liệu HTML thì nó vẫn hiển thị chính xác lên màn hình. Vì vậy để đảm bảo bạn làm đúng theo cấu trúc thì có cách là bạn phải làm cẩn thận, chứ bạn có làm sai trình duyệt cũng không báo lỗi cho bạn biết đâu.

II. Tổng kết

Bài viết này của mình chỉ ngắn gọn vậy thôi. Cốt là các bạn phải nhớ được cấu trúc của một tài liệu HTML để khi tạo một trang web mới thì biết cách bắt đầu sao cho chuẩn.

Chúc các bạn học tập hiệu quả.

RELATED ARTICLESMORE FROM AUTHOR