[Bài 2] Cấu trúc HTML5 đơn giản – Tiền Minh Vy

Posted on by mtoplistChuyên mục:Top List

Bài này chúng ta sẽ tìm hiểu về cấu trúc HTML5 đơn giản, bao gồm các thành phần và công dụng của từng thành phần nhé

Trước khi đi sâu vào tìm hiểu từng loại thẻ, thuộc tính của các thẻ và công dụng của từng thẻ, bạn cần phải nắm rõ và thật chắc về cấu trúc của HTML5, tuy cấu trúc HTML5 đơn giản nhưng nó là thứ không thể thiếu nếu bạn muốn viết mã HTML5 theo cấu trúc chuẩn W3C.

Và trước tiên, chúng ta sẽ làm quen với cú pháp của HTML5

Cú pháp của HTML5

Một thẻ HTML5 có định dạng như sau:

<h1>Nội dung trong thẻ h1</h1>

Trong đó, thẻ bắt đầu được bao bọc bởi dấu “<” và “>“, riêng thẻ đóng phải được bao bọc bởi “<” và “/” và cuối cùng là “>“. Ngoài ra, một số thẻ đặc biệt như thẻ <br>, <hr> hay <img> không cần phải đóng thẻ, và ngoài các thẻ được ghi nhận sẵn, ta còn có thể tự tạo thẻ của riêng mình. chúng ta sẽ tìm hiểu về những điều này ở các bài viết sau.

Cấu trúc HTML5 đơn giản

Như bài viết giới thiệu mình đã đề cập đến, dưới đây là cấu trúc đơn giản của HTML5:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Đây là tiêu đề trang</title>
</head>
<body>
    <h1>Đây là tiêu đề</h1>
    <p>Đây là nội dung</p>
</body>
</html>

Giờ chúng ta sẽ bắt đầu phân tích từng phần tử thẻ có ở trên.

Khai báo tài liệu HTML5

Từ phần này mình sẽ gọi 1 trang của website là 1 tài liệu HTML5 nhé!

Trong HTML5, việc khai báo cho trình duyệt biết là việc rất quan trọng, việc khai báo được dùng để trình duyệt xác định xem website đang sử dụng HTML phiên bản mấy mà có hỗ trợ cho phù hợp. Do đó, để khai báo cho trình duyệt chúng ta đang sử dụng HTML5 thì chúng ta phải có thẻ sau:

<!DOCTYPE html>

Và thẻ <!DOCTYPE html> là thẻ bắt buộc phải được khai báo, và chỉ được khai báo ở đầu tài liệu HTML5, không khai báo ở đâu khác.

Ngoài ra, trong HTML5 thì bạn không cần phải viết in hoa toàn bộ (gọi là case-sensitive) mà có thể viết in thường, in hoa hoặc vừa in hoa vừa in thường (gọi là case-insensitive). Ví dụ, với việc khai báo HTML5, mình có thể viết như sau:

<!DOCTYPE html>

Hoặc là:

<!doctype html>

Thẻ <html>

Thẻ này được dùng để bao bọc toàn bộ nội dung có liên quan đến HTML5, toàn bộ các thẻ hiện tại (trừ thẻ khai báo ở trên) đều phải được nằm trong thẻ này. Dưới đây là cú pháp của thẻ <html> bên trong cấu trúc HTML5 của một tài liệu đơn giản:

<html></html>

Thẻ <head>

Thẻ này sẽ chứa những thẻ được xem là các thẻ khai báo thông tin của một tài liệu HTML5, một số thẻ rất thường dùng được đặt ở thẻ này như <meta>, thẻ <link> và thẻ <title>. Đây cũng là thẻ quan trọng trong cấu trúc HTML5. Trong đó:

  • Thẻ <meta> được dùng để khai báo các thông tin cần thiết cho một tài liệu HTML5, thường thì sẽ liên quan đến SEO.
  • Thẻ <link> được dùng để liên kết một tài nguyên khác (thường là CSS) đến tài liệu HTML5 hiên tại.
  • Thẻ <title> được dùng để khai báo tiêu đề của một tài liệu HTML5.
<head></head>

Thẻ <body>

Thẻ body này dùng để chứa các thẻ còn lại trong HTML5, ví dụ một số thẻ như thẻ <h1>, thẻ <p>, thẻ <a>,… Tất cả các thẻ (trừ một số thẻ đặc biệt) phải nằm bên trong thẻ này. Cũng là thẻ quan trọng trong cấu trúc HTML5.

<body></body>

Hiện tại, hầu hết các website trên Internet, kể cả Google.com đều theo cấu trúc như mình đã nêu ở phía trên, có nghĩa là có đầy đủ các thẻ khai báo, thẻ <html>, <head> và <body>

Ngoài ra

Ngoài số thẻ trên, còn có rất nhiều thẻ khác trong HTML5. Tuy nhiên, để tránh để các bạn ngán ngẩm khi phải học quá nhiều thẻ HTML5 cùng lúc nên bài viết này mình chỉ giới thiệu và nêu ứng dụng của số thẻ đặc biệt phía trên thôi.

Bạn truy cập liên kết sau để đến bài 3: [Bài 3] Định dạng văn bản trong HTML5

mtoplist