Bạn sẽ đọc được một đoạn HTML, biết đâu là thẻ, nội dung và thuộc tính, đồng thời tự sửa lỗi lồng phần tử. Đây là nền tảng để hiểu các ví dụ ở những bài sau.

Lộ trình này học qua website “Góc học web”: trang chủ, trang bài viết và trang liên hệ. Mỗi bài giải quyết một việc cụ thể. Các bài về từng thẻ là tài liệu tra cứu, không phải danh sách bắt buộc học thuộc.

Phần tử không chỉ là tên thẻ

Trong đoạn <p>Xin chào</p>, toàn bộ cấu trúc đó là một phần tử đoạn văn. Thẻ mở là <p>, nội dung là Xin chào và thẻ đóng là </p>. Những thuật ngữ này gần nhau nhưng không hoàn toàn đồng nghĩa.

Một số phần tử rỗng như img, input và br không có thẻ đóng trong HTML. Dấu / cuối <img /> không làm phần tử thông thường như div trở thành phần tử tự đóng. Để dễ đọc, khóa học dùng tên thẻ viết thường và đặt giá trị thuộc tính trong dấu nháy kép.

Thuộc tính bổ sung thông tin

Trong liên kết <a href=”https://hocvietcode.com/”>Đọc bài</a>, href là thuộc tính cho biết đích đến. Nội dung Đọc bài là phần người dùng nhìn thấy. Một phần tử có thể có nhiều thuộc tính, nhưng không phải mọi thuộc tính đều phù hợp với mọi phần tử.

Thuộc tính boolean dựa vào sự hiện diện: disabled=”false” vẫn làm một điều khiển bị vô hiệu hóa. Muốn không vô hiệu hóa, bỏ thuộc tính disabled. Các ví dụ boolean cụ thể xuất hiện trong phần biểu mẫu.

Lồng phần tử theo cấu trúc cây

Ở ví dụ, strong nằm bên trong p, vì từ HTML là một phần của câu. Thẻ mở sau phải được đóng trước theo cấu trúc lồng hợp lệ: <p>Học <strong>HTML</strong></p>. Không viết <p>Học <strong>HTML</p></strong>.

Thụt dòng giúp con người nhìn cấu trúc, còn quy tắc lồng hợp lệ do HTML quy định. Không thể tùy ý đặt mọi phần tử vào mọi nơi; chẳng hạn p không phải vùng chứa tổng quát để bọc một heading hoặc một bảng.

Khi muốn hiển thị chính ký hiệu HTML

Trong bài hướng dẫn, muốn người đọc thấy ký tự < thì mã nguồn thường viết &lt;, ký tự & viết &amp;. Nếu đưa nguyên <strong> vào nội dung, trình duyệt có thể hiểu là thẻ thay vì ví dụ chữ. Phần tử code giúp đánh dấu đoạn mã, nhưng bản thân code không tự vô hiệu hóa cú pháp HTML bên trong.

Comment viết bằng <!– nội dung –>. Comment không hiển thị thành nội dung trang nhưng người xem nguồn vẫn đọc được. Không đặt mật khẩu hay thông tin bí mật trong comment. Khi kiểm tra lỗi, dùng View Source để xem mã gốc và Inspect để xem cây DOM mà trình duyệt đã tạo; hai thứ có thể khác nhau vì trình duyệt sửa một số lỗi.

Ví dụ để tự chạy

Tạo một tệp HTML để thử đoạn mã sau. Nếu đây là đoạn trích trong body, hãy đặt nó vào bộ khung tài liệu đã học ở bài 3. Bộ mã tải về có sẵn ví dụ đầy đủ của bài này.

<p>Tôi đang học <strong>HTML</strong> để tạo website.</p>
<a href="https://hocvietcode.com/" title="Mở website Học Viết Code">Đọc bài học</a>
<!-- Ghi chú cho người đọc mã -->

Kết quả hiển thị

Từ HTML được nhấn mạnh trong câu; dòng “Đọc bài học” là liên kết. Comment chỉ có trong nguồn, không xuất hiện như một đoạn văn.

Mở ví dụ bài 02 trong tab riêng · Tải bộ ví dụ 16 bài và website hoàn chỉnh

Lỗi thường gặp và cách sửa

• Lồng chéo thẻ: đóng phần tử con trước phần tử cha.
• Đặt heading trong p: tách thành hai phần tử phù hợp.
• Trông chờ title thay cho văn bản liên kết rõ nghĩa: dùng nội dung liên kết dễ hiểu.

Tự kiểm tra

• Chỉ ra thẻ mở, thẻ đóng, thuộc tính và nội dung của liên kết mẫu.
• Giải thích vì sao code không tự làm cho ký tự < trở thành văn bản an toàn.

Tra cứu khi cần

• Phân biệt HTML Elements(phần tử) và HTML Attributes(thuộc tính)
• Thẻ strong trong HTML
• Thẻ pre trong HTML

Tài liệu gốc về chủ đề này trên MDN / HTML Standard

Mục lục lộ trình HTML 16 bài · Thư viện bài HTML tra cứu