[Bài 2] Cấu trúc HTML5 đơn giản

[Bài 2] Cấu trúc HTML5 đơn giản
  1. Giới thiệu về HTML5
  2. [Bài 1] Chuẩn bị trước khi học HTML5
  3. [Bài 2] Cấu trúc HTML5 đơn giản
  4. [Bài 3] Định dạng văn bản trong HTML5
  5. [Bài 4] Thuộc tính trong HTML5
  6. [Bài 5] Liên kết trong HTML5
  7. [Bài 6] Hình ảnh trong HTML5
  8. [Bài 7] Bình luận trong HTML5
  9. [Bài 8] Danh sách trong HTML5
  10. [Bài 9] Bảng biểu trong HTML5
  11. [Bài thực hành 1] Viết cấu trúc HTML5 đơn giản
  12. [Bài 10] Iframe trong HTML5
  13. [Bài 11] Video trong HTML5
  14. HTML5 nâng cao

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>

Cấu trúc HTML5 của Google.com
Cấu trúc HTML5 của Google.com

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

Cấu trúc HTML5 đơn giản
Cấu trúc HTML5 đơn giản
5 1 bình chọn
Đánh giá bài viết

Tiền Minh Vy

Xin chào! Tôi là Tiền Minh Vy, là một lập trình viên có nhiều kinh nghiệm với Wordpress, tập trung nhiều với PHP.
Đăng ký
Thông báo cho tôi về
guest
0 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận