HTML Boilerplate Là Gì?
Trong bài viết hôm nay chúng ta sẽ đi vào tìm hiểu HTML Boilerplate là gì và cách áp dụng nó vào trong việc tạo trang web nhé!
HTML Boilerplate là gì?
HTML boilerplate là một tập hợp các đoạn mã HTML cơ bản và cần thiết khi bạn bắt đầu vào việc tạo trang web.
Ví dụ bạn muốn soạn một lá thư thì trong một lá thư thì thường sẽ phần địa chỉ người nhận, lời chào, nội dung, kết thư, ký tên… Đối với một trang web thì cũng như vậy. Nó cũng bắt buộc các thành phần mà một website tiêu chuẩn cần có. Do đó HTML boilerplate ra đời để giúp bạn có thể nhanh chóng thiết lập các thông tin này một cách dễ dàng.
Các tính năng chính là:
- Giúp trình duyệt hiểu rõ hơn về trang web của bạn, đảm bảo hiển thị chính xác trên mọi trình duyệt và thiết bị.
- Giúp các công cụ tìm kiếm để hiểu rõ hơn nội dung trang web của bạn.
- Giúp bạn và người khác dễ dàng đọc, hiểu và chỉnh sửa mã nguồn sau này.
Cấu trúc cơ bản của trang HTML
Đây là cấu trúc HTML tối thiểu mà bạn nên sử dụng cho mọi trang web:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tiêu đề trang web của bạn</title>
</head>
<body>
<!-- Nội dung trang web của bạn sẽ nằm ở đây -->
</body>
</html>Lưu ý khi viết code HTML thì bạn nên thụt lề một cách chính xác cho từng loại thẻ và nội dung bên trong nó.
Ví dụ thẻ <head> và <body> phải được thụt lề so với thẻ <html> để cho thấy chúng nằm bên trong thẻ <html>. Tương tự, nội dung bên trong thẻ <head> và <body> cũng phải được thụt lề so với các thẻ này.
1. <!DOCTYPE html>
Khai báo phiên bản HTML mà trang web của chúng ta đang sử dụng và luônđược đặt ở đầu trang HTML.
Ví dụ:
<!DOCTYPE html>2. <html>
Đây là thẻ “gốc” của tài liệu HTML. Điều này có nghĩa là mọi thành phần khác, dù là <h1>, <img>, hay <a>, đều phải nằm bên trong cặp thẻ mở và đóng của thẻ <html>.
Cách sử dụng:
- Mở đầu bằng thẻ <html> và kết thúc bằng thẻ </html>.
- Tất cả các thẻ khác phải nằm bên trong thẻ <html> ngoại trừ thẻ <!DOCTYPE html>.
Ví dụ:
<html lang="vi"> <!-- Nội dung trang web --> </html>Thuộc tính lang chỉ định ngôn ngữ chính mà bạn sẽ sử dụng trong văn bản của trang HTML. Ví dụ: nếu bạn viết một trang web dành cho người Việt Nam thì bạn sẽ cần đặt lang thành “vi” (viết tắt của Vietnamese).
3. <head>
Chứa các thông tin “metadata” của trang web. Các thông tin này bạn sẽ không thấy hiển thị trong trang web nhưng nó rất quan trọng cho trình duyệt, công cụ tìm kiếm hiểu về trang web của chúng ta hơn.
Cách sử dụng:
- Nằm bên trong thẻ <html>.
- Chứa các thẻ như <meta>, <title>, <link>, <style>,<script>.
Ví dụ:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trang chủ - Ẩm thực Việt Nam</title>
</head>- <meta charset=”UTF-8″>: Theo quy ước, chúng ta thường sử dụng bộ mã ký tự “UTF-8” trong HTML Boilerplate, vì nó là một trong những bộ mã ký tự phổ biến nhất.
- <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>: Cấu hình viewport cho các thiết bị di động, đảm bảo trang web hiển thị tốt trên mọi kích thước màn hình.
- <title>Trang chủ – Ẩm thực Việt Nam</title>: Xác định tiêu đề của trang web. Tiêu đề này thường được hiển thị trên thanh tab của trình duyệt.
Các Thẻ Quan Trọng Khác Trong <head>
<meta>:
Cung cấp thông tin về trang web, chẳng hạn như mô tả, từ khóa, tác giả.
Ví dụ:
<meta name="description" content="Khám phá những món ăn đặc sắc của ẩm thực Việt Nam, từ phở bò truyền thống đến bánh xèo giòn rụm."> <meta name="keywords" content="ẩm thực Việt Nam, món ăn Việt Nam, phở bò, bánh xèo, công thức nấu ăn"> <meta name="author" content="Nguyễn Văn A"><link>:
Liên kết đến các tài nguyên bên ngoài, chẳng hạn như file CSS (định dạng kiểu dáng) hoặc favicon (biểu tượng trang web).
Ví dụ:
<link rel="stylesheet" href="style.css"> <link rel="icon" href="favicon.ico" type="image/x-icon"><style>:
Chứa mã CSS để định dạng thiết kế cho trang web.
Ví dụ:
<style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; } </style><script>:
Chứa mã JavaScript để thêm tính năng và tương tác cho trang web.
Ví dụ:
<script src="script.js"></script>4. <body>
Chứa toàn bộ nội dung hiển thị của trang web, bao gồm văn bản, hình ảnh, video, form, và các thành phần khác… Giống nhưcơ thể của chúng ta thì sau phần đầu (head) sẽ đến phần thân (body). Thẻ <body> sẽ là nơi chúng ta sẽ dành phần lớn thời gian để tạo và viết trang web của mình.
Văn bản, tiêu đề, hình ảnh, liên kết, mọi thứ bạn có thể làm với HTML để tạo nội dung và cấu trúc đều sẽ nằm giữa thẻ mở và thẻ đóng của thẻ <body>.
Cách sử dụng:
- Nằm bên trong thẻ <html>, sau thẻ <head>.
- Tất cả các thẻ hiển thị nội dung (ví dụ: <h1>, <p>, <img>, <div>) phải nằm bên trong thẻ <body>.
Ví dụ:
<body>
<h1>Chào mừng đến với trang web ẩm thực Việt Nam!</h1>
<p>Chúng tôi sẽ giới thiệu đến bạn những món ăn ngon và độc đáo nhất của Việt Nam.</p>
<img src="pho-bo.jpg" alt="Phở bò">
</body>Ví Dụ Thực Tế:
Chúng ta sẽ xây dựng một trang web đơn giản giới thiệu món phở bò, áp dụng cấu trúc HTML đã học:
See the Pen
Ví dụ HTML Boilerplate. by haycuoilennao19 (@haycuoilennao19)
on CodePen.
Chúng ta đã thêm các thẻ <header>, <nav>, <main>, <section>, <footer> để cấu trúc nội dung trang web một cách rõ ràng hơn. Đây là các thẻ HTML5 semantic, giúp trình duyệt và công cụ tìm kiếm hiểu rõ hơn về ý nghĩa của từng phần trên trang web.
Chúng ta đã liên kết đến một file CSS bên ngoài (style.css) để định dạng kiểu dáng cho trang web.
Chúng ta đã sử dụng các thẻ <h1>, <h2>, <p>, <img>, <ul>, <li> để hiển thị nội dung.
Tạo HTML Boilerplate Bằng Emmet Trong Visual Studio Code
Visual Studio Code có một công cụ gọi là Emmet giúp chúng ta tạo nhanh cấu trúc HTML cơ bản. Chỉ cần gõ ! và nhấn Tab, Emmet sẽ tự động tạo ra cấu trúc HTML boilerplate cho bạn:
Và dưới đây là kết quả mà mình sử dụng tính năng này nhé!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>Bạn có thể tùy chỉnh ngôn ngữ sang tiếng Việt bằng cách thay đổi lang="en" thành lang="vi".
Lưu ý là tính năng này chỉ hoạt động khi bạn đã tạo một tệp có đuôi .html. Vì vậy, khi bạn tạo một tệp mới trong VS Code, hãy nhớ lưu nó với đuôi .html để nó hoạt động nhé.
Tổng Kết
Cấu trúc HTML cơ bản là nền tảng của mọi trang web. Việc hiểu và sử dụng đúng cấu trúc này sẽ giúp bạn xây dựng các trang web chất lượng, dễ bảo trì và thân thiện với SEO. Mong bài viết sẽ này giúp bạn trong quá trình phát triển web. Chúc bạn thành công nhé!
