Cơ bản HTML
1〜2 tuần Nhập mônTiêu đề, đoạn văn, danh sách, liên kết. Học từng thẻ một cách cẩn thận.
Tổng quan
HTML là ngôn ngữ tạo khung cho trang web. Bạn dùng các thẻ (như <h1>) để nói với trình duyệt "đây là tiêu đề", "đây là đoạn văn".
Không có HTML, bạn không thể tạo trang web. Đây là nền tảng của mọi thứ trên Web.
- Cách dùng tiêu đề (h1-h6)
- Cách viết đoạn văn (p)
- Cấu trúc danh sách (ul, ol, li)
- Liên kết (a) và hình ảnh (img)
- Sử dụng strong, em, div, span
Chi tiết
Cấu trúc cơ bản của thẻ HTML
HTML dùng "thẻ" để bao bọc nội dung. Có thẻ mở <h1> và thẻ đóng </h1>. Ví dụ: <h1>Tiêu đề</h1>. Nên dùng chữ thường cho tên thẻ.
- <h1>Tiêu đề</h1>
- <p>Nội dung đoạn văn</p>
- Sai: ＜h1＞Tiêu đề＜/h1＞ (toàn giác)
- Luôn đi kèm thẻ mở và thẻ đóng
- Tuân thủ thứ tự lồng nhau
- Quên thẻ đóng </h1>
- Dùng dấu < > toàn giác
- Viết hoa tên thẻ (vẫn chạy nhưng không nên)
Tiêu đề (h1-h6)
Tiêu đề thể hiện cấu trúc bài viết. h1 là lớn nhất, h6 nhỏ nhất. Mỗi trang chỉ nên có một h1 làm tiêu đề chính.
- <h1>Trang của tôi</h1>
- <h2>Giới thiệu</h2>
- <h3>Sở thích</h3>
- Không nhảy cấp (ví dụ từ h1 nhảy sang h3)
- Ưu tiên ý nghĩa hơn là kích thước hiển thị
- Dùng nhiều thẻ h1 → Không tốt cho SEO
- Dùng tiêu đề chỉ để làm chữ to hơn
Đoạn văn (p)
Thẻ p đại diện cho một đoạn văn (paragraph). Dùng để chứa một khối văn bản.
- <p>Đây là trang web đầu tiên của tôi.</p>
- <p>Đoạn 1</p><p>Đoạn 2</p>
- Đặt đoạn văn dưới tiêu đề để dễ đọc
- Nếu muốn xuống dòng, dùng nhiều thẻ p thay vì thẻ br
- Lồng thẻ p trong thẻ p → Sai cú pháp
- Chỉ viết văn bản mà không có thẻ p
Danh sách (ul, ol, li)
ul là danh sách không thứ tự (dấu chấm), ol là danh sách có thứ tự (số). li là từng mục trong danh sách đó.
- <ul><li>Táo</li><li>Cam</li></ul>
- <ol><li>Bước 1</li><li>Bước 2</li></ol>
- Chỉ đặt thẻ li trực tiếp bên trong ul hoặc ol
- Đặt thẻ khác ngoài li bên trong ul/ol
- Dùng thẻ li ở ngoài ul/ol
Liên kết (a)
Thẻ a tạo liên kết. Thuộc tính href chứa URL đích, văn bản giữa hai thẻ là nội dung hiển thị.
- <a href="/about">Giới thiệu</a>
- <a href="https://google.com">Google</a>
- Thêm target="_blank" rel="noopener" để mở link trong tab mới
- Quên thuộc tính href
- Quên dấu ngoặc kép cho URL
Hình ảnh (img)
Thẻ img hiển thị hình ảnh. Thuộc tính src chứa URL ảnh, alt là mô tả ảnh (bắt buộc). Đây là thẻ tự đóng nên không cần </img>.
- <img src="anh.jpg" alt="Mô tả ảnh">
- alt rất quan trọng cho người khiếm thị và khi ảnh bị lỗi
- Bỏ qua thuộc tính alt
- Sai đường dẫn ảnh trong src
Các bước thực hành
- 1 Viết thẻ h1 2 phút
Thử tạo một tiêu đề.
- Nhập <h1>Xin chào</h1>
- Nhấn chạy và kiểm tra
<h1>Xin chào</h1> - 2 Thêm đoạn văn p 2 phút
Thêm nội dung dưới tiêu đề.
- Dưới <h1>, thêm <p>Đây là đoạn văn.</p>
- Nhấn chạy
<h1>Tiêu đề</h1> <p>Đây là đoạn văn.</p> - 3 Tạo danh sách với ul và li 3 phút
Tạo danh sách các mục.
- Bọc các thẻ <li> trong <ul>
- Nhập nội dung các mục
<ul> <li>Táo</li> <li>Cam</li> </ul>
Câu hỏi thường gặp
- Viết article hay section phiền quá, dùng div hết được không?
- Về hiển thị thì không sao (gọi là div-soup), nhưng Google và các phần mềm đọc màn hình sẽ không hiểu đâu là nội dung chính. Hãy dùng thẻ ngữ nghĩa để tốt cho SEO.
- button và a (link) khác gì nhau khi trông giống nhau?
- Nếu để sang trang khác thì dùng a, nếu để thực hiện một hành động (như gửi form, mở popup) thì dùng button. Đừng nhầm lẫn nhé!
- Có cần dấu / ở cuối thẻ img không (như <img />)?
- Trong HTML5 thì có hay không đều được, nhưng nếu sau này bạn học React, bạn sẽ bắt buộc phải có dấu / đó. Nên tập thói quen viết <img /> ngay từ bây giờ.
① Đã đọc giải thích. Tiếp theo ② Làm bài tập.
Đã nắm vững cơ bản HTML.
Tiếp theo hãy dùng CSS để trang trí. Học về màu sắc, khoảng cách và font chữ.