NỘI DUNG BÀI VIẾT
Khi bạn xây dựng một trang web mới, điều quan trọng là phải có một nền tảng khởi đầu tốt. Trong bài viết này, tôi sẽ giải thích HTML5 Boilerplate là gì và cách tạo một HTML5 Boilerplate cho dự án bất kỳ của bạn
Boilerplate là gì?
Theo Wikipedia,
boilerplate code or just boilerplate are sections of code that are repeated in multiple places with little to no variation.
Tạm dịch là các đoạn mã được lặp lại ở nhiều nơi với ít hoặc không có sự thay đổi.
Có nghĩa rằng hầu hết các dự án bắt đầu đều có thể sử dụng boiplerplate code này.
Ví dụ HTML5 Boilerplate
Hãy điểm qua 1 ví dụ cơ bản:
<!DOCTYPE html>
<html lang="en">
<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>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="index.js"></script>
</body>
</html>Code language: HTML, XML (xml)doctype trong HTML là gì?
Dòng đầu tiên trong mã HTML của bạn phải là phần khai báo loại tài liệu. Loại tài liệu cho trình duyệt biết phiên bản HTML mà trang được viết.
<!DOCTYPE html>
Code language: HTML, XML (xml)Nếu bạn quên đưa dòng mã này vào tệp của mình, thì một số thẻ HTML 5 như article, footer và header có thể không được trình duyệt hỗ trợ.
Phần tử root HTML là gì?
Thẻ <html> là phần tử cấp cao nhất của tệp HTML. Bạn có thể lồng các thẻ <head> và <body> vào bên trong nó.
<!DOCTYPE html>
<html lang="en">
<head></head>
<body></body>
</html>Code language: HTML, XML (xml)Thuộc tính lang bên trong thẻ html đặt ngôn ngữ cho trang. Sẽ tốt nếu bao gồm nó vì lý do trợ năng, vì trình đọc màn hình sẽ biết cách phát âm đúng văn bản.
Thẻ head trong HTML là gì?
Các thẻ <head> chứa thông tin được xử lý bởi máy móc. Bên trong các thẻ head, bạn có thể lồng metadata là dữ liệu mô tả tài liệu cho máy.
<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>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>Code language: HTML, XML (xml)Mã hóa ký tự UTF-8 là gì?
UTF-8 là kiểu mã hóa ký tự tiêu chuẩn mà bạn nên sử dụng trong các trang web của mình. Đây thường sẽ là thẻ meta đầu tiên được hiển thị trong phần tử head.
<meta charset="UTF-8">
Code language: HTML, XML (xml)Bảng mã dựa trên Unicode như UTF-8 có thể hỗ trợ nhiều ngôn ngữ và có thể chứa các trang và biểu mẫu bằng bất kỳ hỗn hợp nào của các ngôn ngữ đó. Việc sử dụng nó cũng giúp loại bỏ nhu cầu logic phía máy chủ để xác định riêng mã mã hóa ký tự cho mỗi trang được phân phát hoặc mỗi lần gửi form đến.
viewport trong thẻ meta là gì?
Thẻ này hiển thị chiều rộng của trang bằng chiều rộng của kích thước màn hình của thiết bị. Nếu bạn có thiết bị di động rộng 600px, thì cửa sổ trình duyệt cũng sẽ rộng 600px.
Tỷ lệ ban đầu kiểm soát mức thu phóng. Giá trị 1 cho tỷ lệ ban đầu ngăn cản việc thu phóng mặc định của các trình duyệt.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Code language: HTML, XML (xml)X-UA-Compatible là gì?
Thẻ meta này chỉ định chế độ tài liệu cho Internet Explorer. IE = edge là chế độ được hỗ trợ cao nhất.
<meta http-equiv="X-UA-Compatible" content="ie=edge">
Code language: HTML, XML (xml)Thẻ title HTML là gì?
Thẻ title là tiêu đề cho trang web. Văn bản này được hiển thị trên thanh tiêu đề của trình duyệt.
<title>HTML 5 Boilerplate</title>
Code language: HTML, XML (xml)
CSS stylesheet
Đoạn code này sẽ liên kết CSS tùy chỉnh của bạn với trang HTML. rel = ‘stylesheet’ xác định mối quan hệ giữa tệp HTML và bảng định kiểu bên ngoài.
<link rel="stylesheet" href="style.css">
Code language: HTML, XML (xml)Thẻ script trong HTML
Thẻ script sẽ được đặt ngay trước thẻ đóng của body. Đây là nơi bạn có thể liên kết mã JavaScript bên ngoài của mình.
<script src="index.js"></script>Code language: HTML, XML (xml)Kết luận
Bạn nên thêm một số HTML5 Boilerplate trước khi sử dụng chúng vào trang web của mình. Đoạn code này chứa thông tin quan trọng như loại tài liệu, siêu dữ liệu, bảng định kiểu bên ngoài và thẻ tập lệnh,… mình đã giải thích ở trên.
Cảm ơn bạn đã theo dõi bài viết!
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU
KHOÁ HỌC BOOTCAMP JAVA/PHP/.NET TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG
