[Html cơ bản bài 3] Cấu trúc cơ bản của một file HTML

Ngày đăng: 10/12/2023 | Tác giả: bbugtea | 436 lượt xem

Chào mọi người! Trong serise này mình xin viết lại chủ đề về Html cơ bản bài 3: “Cấu trúc cơ bản của một file HTML”. Ở bài trước các bạn đã hiểu hơn về HTML rồi thì chúng ta bắt đầu chinh phục HTML tiếp thôi nào! Tài liệu này được biên soạn từ thực tế của mình và tổng hợp thêm từ nhiều nguồn khác nhau. Trong quá trình soạn bài viết này sẽ có những sai sót mong các bạn đóng góp, phản hổi đề tài liệu này được cập nhật phiên bản tốt hơn.

Thông thường thì bất kỳ một thứ gì cũng có một cái cấu trúc cơ bản mà nó phải tuân theo để đảm bảo việc nó có thể hoạt động được chính xác và ổn định (ví dụ như một bài văn thường có cấu trúc gồm ba phần mở bài – thân bài – kết luận, và nếu chúng ta loại bỏ đi một thành phần nào đó hoặc xáo trộn thứ tự giữa ba thành phần thì nội dung của bài văn sẽ không được trơn tru mạch lạc). Việc viết mã lệnh trong một tập tin HTML cũng tương tự như vậy, nó cần phải tuân thủ theo một cấu trúc cơ bản để đảm bảo trang web được hiển thị như ý muốn, tránh mắc phải những lỗi không đáng xảy ra.

Cấu trúc của một file HTML?

Nội dung của một fileHTML phải được bắt đầu bằng thẻ <html> và kết thúc bởi thẻ </html>.

– Bên trong cặp thẻ <html></html> được chia làm hai thành phần chính:

Phần head được bắt đầu bằng thẻ <head> và kết thúc bởi thẻ </head>, nó dùng để chứa tiêu đề và các thẻ khai báo thông tin cho trang web.
Phần body được bắt đầu bằng thẻ <body> và kết thúc bởi thẻ </body>, nó dùng để chứa những nội dung mà chúng ta muốn hiển thị trên trang web.

– Dưới đây là hình ảnh minh họa về cấu trúc cơ bản của một tập tin HTML:

Khi chạy file này lên trình duyệt sẽ hiển thị kết quả là:

Thẻ <meta charset=”utf-8″> có chức năng tương tự như việc chúng ta chọn kiểu mã hóa UTF-8 khi tạo một tập tin HTML, nó sẽ giúp cho trang web hiển thị ngôn ngữ tiếng Việt được chính xác.

Thẻ <html lang=”en”> là thông báo cho trình duyệt hiểu rằng đây là tài liệu html của ngôn ngữ tiêng anh.

Thẻ <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> là thông báo cho trình duyệt hiểu rằng trang web này có cách kiểm soát kích thước và tỷ lệ của trang (Nó là responsive trong website sau này bạn sẽ học nâng cao kết hợp với css).

Cấu trúc của một file HTML5?

Cái cấu trúc của tập tin HTML mà mình hướng dẫn cho các bạn ở phía trên là cấu trúc của phiên bản HTML đầu tiên. Hiện nay, HTML đã cho ra phiên bản mới nhất là HTML5, phiên bản này hỗ trợ thêm một số thẻ mới cùng với những tính năng vượt trội hơn.

Để sử dụng phiên bản HTML5 thì ta thêm thẻ <!DOCTYPE html> vào vị trí đầu tiên bên trong tập tin.

Kết luận: Qua bài học này bạn đã hiểu hơn về cấu trúc của một file HTML5 rồi đúng không. Chúc các bạn học tập tốt nhé.