Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
n tài liệu tổng hợp và chi tiết về cách sử dụng HTML5, cấu trúc, các thành phần quan trọng và khi nào nên áp dụng chúng trong quá trình viết code web.
TÀI LIỆU HƯỚNG DẪN SỬ DỤNG HTML5 CHI TIẾT
1. HTML5 là gì và Dùng khi nào? HTML (Hyper Text Markup Language) là ngôn ngữ đánh dấu tiêu chuẩn dùng để tạo và cấu trúc các trang web. HTML5 là phiên bản mới nhất, giúp cấu trúc trang web trở nên rõ ràng hơn, hỗ trợ tốt đa phương tiện mà không cần plugin (như Flash), và thân thiện với thiết bị di động.
- Khi nào dùng: Bất cứ khi nào bạn muốn xây dựng một giao diện website. Nó là “bộ xương” của mọi trang web, dùng để khai báo văn bản, hình ảnh, liên kết, video, và form.
- Khi nào không nên dùng: HTML5 không phải là ngôn ngữ lập trình nên nó không thể tính toán hay xử lý logic (đó là việc của JavaScript), và nó cũng không làm cho web đẹp lên (đó là nhiệm vụ của CSS).
2. Cấu trúc chuẩn của một trang HTML5 Mọi trang web HTML5 đều phải bắt đầu bằng khai báo <!DOCTYPE html> để giúp trình duyệt hiển thị nội dung chính xác.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tài liệu HTML5</title>
</head>
<body>
Nội dung hiển thị của trang web nằm ở đây...
</body>
</html>
- <head>: Chứa các “siêu dữ liệu” (metadata) không hiển thị trực tiếp trên trang, bao gồm
<title>(tiêu đề trang cho SEO),<style>(viết CSS),<link>(liên kết file CSS bên ngoài), và<script>(nhúng JavaScript). - <body>: Là vùng chứa tất cả các nội dung hiển thị cho người dùng xem như đoạn văn, hình ảnh, bảng biểu….
- <meta name=”viewport”>: Đây là thẻ bắt buộc để làm Responsive Web Design, giúp trang web hiển thị tốt trên cả điện thoại và máy tính.
3. Các thẻ Semantic (Ngữ nghĩa) – Điểm sáng của HTML5 Trước đây lập trình viên thường dùng thẻ <div> để nhóm mọi thứ. HTML5 giới thiệu các thẻ Semantic có ý nghĩa rõ ràng, giúp trình duyệt, các thiết bị đọc màn hình và công cụ tìm kiếm (SEO) hiểu chính xác nội dung đang trình bày.
- <header>: Định nghĩa phần đầu của một trang hoặc một khu vực (thường chứa logo, thanh điều hướng).
- <nav>: Vùng chứa các liên kết điều hướng chính (Menu).
- <main>: Chứa nội dung trọng tâm của trang web.
- <section>: Phân chia trang web thành các phần (section) có chủ đề riêng biệt, thường đi kèm một thẻ tiêu đề.
- <article>: Định nghĩa một nội dung độc lập, có thể đọc riêng lẻ (ví dụ: một bài báo, một bài blog, một bình luận).
- <aside>: Chứa nội dung phụ, nội dung bên lề (sidebar) thường liên quan gián tiếp đến nội dung chính.
- <footer>: Phần chân trang, thường chứa thông tin bản quyền, thông tin liên hệ.
4. Block và Inline Elements (Phần tử Khối và Cùng dòng) Để bố cục web tốt, bạn cần hiểu hai kiểu phần tử này:
- Phần tử Khối (Block-level): Luôn bắt đầu ở một dòng mới và chiếm toàn bộ chiều rộng có thể. Ví dụ:
<div>(dùng làm hộp chứa),<p>(đoạn văn),<h1>đến<h6>(tiêu đề),<section>. - Phần tử Cùng dòng (Inline): Chỉ chiếm không gian vừa đủ và không tự xuống dòng. Ví dụ:
<span>(dùng để bọc đoạn text nhỏ để CSS),<a>(liên kết),<img>(hình ảnh). Lưu ý: Phần tử inline không thể chứa phần tử block.
5. Định dạng văn bản cơ bản
- Tiêu đề: Dùng từ
<h1>đến<h6>. Trong đó<h1>là tiêu đề chính quan trọng nhất (chỉ nên có 1 thẻ H1 trên một trang), và<h6>là bé nhất. - Đoạn văn: Dùng thẻ
<p>. - Định dạng chữ:
<strong>(chữ in đậm, mang tính nhấn mạnh quan trọng),<em>(chữ in nghiêng, nhấn mạnh giọng điệu),<mark>(đánh dấu/highlight chữ),<del>(chữ gạch ngang đại diện cho nội dung bị xóa),<ins>(chữ gạch chân).
6. Liên kết (Links) và Hình ảnh (Images)
- Liên kết: Dùng thẻ
<a>kèm thuộc tínhhrefđể chỉ định đích đến. Nếu muốn mở liên kết ở một tab mới, dùngtarget="_blank". - Hình ảnh: Dùng thẻ
<img>(đây là thẻ rỗng, không có thẻ đóng). Bắt buộc phải có thuộc tínhsrc(đường dẫn ảnh) vàalt(văn bản thay thế nếu ảnh bị lỗi hoặc cho người khiếm thị đọc). Để ảnh responsive tự co giãn, bạn có thể dùng CSSmax-width: 100%;.
7. Biểu mẫu (Forms) – Tương tác với người dùng Để thu thập dữ liệu (đăng nhập, đăng ký, tìm kiếm), ta đặt mọi thứ trong thẻ <form>.
- <input>: Thẻ nhập liệu phổ biến nhất. HTML5 cung cấp rất nhiều loại
typehữu ích:type="text"(chữ thường),type="password"(ẩn mật khẩu bằng dấu sao),type="email"(tự động xác thực định dạng email),type="date",type="number",type="radio"(chọn 1 trong nhiều),type="checkbox"(chọn nhiều). - Thuộc tính input quan trọng:
placeholder(chữ gợi ý mờ),required(bắt buộc nhập),value(giá trị mặc định),readonly(chỉ đọc). - <select> và <option>: Tạo menu xổ xuống (Drop-down list).
- <textarea>: Khung nhập liệu văn bản nhiều dòng.
- <button>: Tạo nút bấm. Nên có
type="submit"để gửi dữ liệu form đi.
8. Đa phương tiện (Audio, Video, Iframe) & Đồ họa
- Video và Âm thanh: HTML5 hỗ trợ phát trực tiếp thông qua thẻ
<video>và<audio>. Thêm thuộc tínhcontrolsđể hiển thị nút play/pause/âm lượng. - Iframe: Dùng
<iframe src="URL"></iframe>để nhúng một trang web khác, bản đồ Google Maps hoặc video YouTube vào trang của bạn. - Đồ họa: HTML5 hỗ trợ
<svg>để nhúng hình ảnh vector (phóng to không vỡ nét) và<canvas>để vẽ đồ họa 2D thông qua JavaScript.
9. Phân biệt thuộc tính ID và Class
- id: Là định danh độc nhất cho một phần tử trên một trang. Dùng để nhắm mục tiêu bằng JavaScript, liên kết bookmark (nhảy đến vùng cụ thể), hoặc CSS. Không bao giờ dùng trùng ID trên một trang.
- class: Một tên lớp có thể dùng chung cho nhiều phần tử khác nhau, chủ yếu dùng để gọi định dạng CSS.
10. Quy ước viết code (Style Guide) để code sạch và chuyên nghiệp
- Luôn dùng chữ thường: Mặc dù HTML5 không phân biệt hoa thường, bạn nên viết tên thẻ và tên thuộc tính bằng chữ thường (vd:
<p>thay vì<P>) để code dễ đọc, dễ gõ. - Luôn dùng dấu ngoặc kép: Bao quanh các giá trị của thuộc tính (vd:
class="container"). - Đóng tất cả các thẻ: Mặc dù trình duyệt đôi khi bỏ qua lỗi quên thẻ đóng, việc không đóng thẻ (vd: quên
</p>) có thể làm hỏng bố cục. Hãy luôn đóng thẻ đúng cách. - Khoảng trắng và lùi lề: Thêm các dòng trống giữa các khối logic lớn và lùi lề (indent) 2 khoảng trắng hoặc dùng Tab để code cấu trúc lồng nhau được rõ ràng.
- Bình luận (Comments): Dùng
<!-- Ghi chú ở đây -->để giải thích code cho chính bạn sau này hoặc ẩn tạm thời một đoạn code.
