Tài liệu HTML
Tài liệu tham khảo HTML ngắn gọn, đi kèm ví dụ. Đọc khái niệm, xem code, rồi luyện tập trong một hành trình Coddy.
Bắt đầu khóa họcBắt đầu
- Doctype`<!DOCTYPE html>` là dòng đầu tiên của mọi tài liệu HTML. Dòng này báo trình duyệt hiển thị trang ở standards mode thay vì quirks mode. Tìm hiểu cú pháp, các doctype cũ gây ra điều gì và cách kiểm tra chế độ hiển thị.
- ThẻThẻ HTML đánh dấu nội dung để trình duyệt biết từng phần là gì: tiêu đề, đoạn văn, liên kết, hình ảnh. Tìm hiểu cách thẻ và phần tử hoạt động, thẻ nào không có thẻ đóng, cách lồng thẻ và những thẻ bạn sẽ dùng nhiều nhất.
- Thuộc tínhThuộc tính bổ sung thông tin cho một phần tử HTML: link dẫn tới đâu, ảnh hiển thị gì, class CSS nào được áp dụng. Tìm hiểu cú pháp, các thuộc tính toàn cục mà mọi phần tử đều nhận, class và id, thuộc tính boolean và thuộc tính data-*.
- Chú thíchChú thích HTML là phần chữ nằm giữa <!-- và --> mà trình duyệt không hiển thị. Tìm hiểu cú pháp, chú thích nhiều dòng, cách comment code, phím tắt trong trình soạn thảo, vì sao chú thích không lồng nhau được và vì sao chúng không bao giờ là riêng tư.
- DivThẻ <div> là một khối chứa chung, không mang ý nghĩa riêng. Tìm hiểu cách nhóm nội dung bằng div, định dạng div bằng class, dựng bố cục với div và flexbox, và khi nào nên dùng thẻ ngữ nghĩa hoặc nút bấm thay cho div.
- SpanThẻ <span> là một khối chứa inline chung: nó bọc vài từ bên trong một dòng để bạn định dạng hoặc thao tác bằng script mà không làm ngắt dòng. Tìm hiểu cách dùng span, span khác div thế nào, và khi nào một thẻ cụ thể hơn sẽ phù hợp hơn.
Văn bản
- HeadingHTML có sáu cấp tiêu đề, từ <h1> đến <h6>, tạo nên dàn ý của trang. Tìm hiểu kích thước mặc định, cách sắp xếp thứ tự tiêu đề, nên dùng bao nhiêu thẻ h1, cách đổi kích thước bằng CSS và cách trình đọc màn hình dùng chúng.
- Xuống dòngDùng <br> để bắt đầu một dòng mới bên trong một khối văn bản. Tìm hiểu khi nào <br> là đúng và khi nào nên dùng đoạn văn, cách giữ ký tự xuống dòng trong văn bản, cách cho từ dài được ngắt với <wbr> và cách ngăn một dòng bị ngắt.
- Khoảng trắngTrình duyệt gộp mọi chuỗi dấu cách liên tiếp trong HTML thành một. Tìm hiểu cách thêm dấu cách bằng , tác dụng của khoảng trắng không ngắt dòng, cách giữ nguyên dấu cách và tab bằng <pre> và white-space, và khi nào nên tạo khoảng cách bằng CSS.
- In đậm và in nghiêngIn đậm chữ trong HTML bằng <strong> hoặc <b>, in nghiêng bằng <em> hoặc <i>. Tìm hiểu khi nào dùng thẻ nào, cách kết hợp đậm và nghiêng, và cách in đậm hay in nghiêng bằng CSS.
- Gạch chânGạch chân chữ trong HTML bằng <u> hoặc text-decoration của CSS, và gạch ngang chữ bằng <s> hoặc <del>. Tìm hiểu ý nghĩa của từng thẻ, cách <ins> và <del> đánh dấu chỉnh sửa, và vì sao gạch chân chữ không phải liên kết khiến người đọc bối rối.
- SuperscriptViết chỉ số trên (superscript) bằng <sup> và chỉ số dưới (subscript) bằng <sub>: số mũ, số thứ tự, ký hiệu chú thích và công thức hóa học. Tìm hiểu các cách dùng phổ biến, cách ngăn chúng làm giãn khoảng cách dòng, và khi nào ký tự Unicode hoặc MathML phù hợp hơn.
- Đường kẻ ngangVẽ đường kẻ ngang trong HTML bằng thẻ <hr>. Tìm hiểu ý nghĩa của thẻ, cách đổi màu, độ dày, chiều rộng và kiểu đường bằng CSS, cách tạo đường phân cách có chữ ở giữa, và cách vẽ đường kẻ dọc.
- Căn giữa chữCăn giữa chữ trong HTML bằng thuộc tính CSS text-align: center. Tìm hiểu nên đặt nó ở đâu, vì sao nó không có tác dụng trên span, cách căn giữa chữ theo chiều dọc trong một khung, cách căn chữ về đầu, cuối hoặc đều hai bên, và cách thụt lề đoạn văn.
Liên kết và hình ảnh
- Liên kết (a href)Cách phần tử <a> tạo liên kết: thuộc tính href, URL tuyệt đối và tương đối, nhảy tới một phần của trang bằng #id, liên kết tải xuống, thẻ card làm liên kết, và những lỗi làm hỏng liên kết.
- Mở liên kết trong tab mớiThêm target="_blank" vào liên kết để mở nó trong tab mới. Trang này giải thích rel="noopener" và noreferrer, cách báo cho người dùng biết liên kết mở tab mới, các giá trị target khác và cách làm điều đó bằng JavaScript.
- Liên kết email (mailto)Tạo liên kết mở một email mới bằng href="mailto:", điền sẵn tiêu đề, nội dung, cc và bcc, mã hóa chúng đúng cách, và tạo liên kết bấm để gọi với tel: và sms:.
- Nút linkCách đúng để làm một nút dẫn sang trang khác là một link được định dạng như nút. Xem vì sao đặt nút trong link hay chuyển trang bằng onclick đều có vấn đề, khi nào nút trong form là lựa chọn đúng, và cách định dạng, vô hiệu hóa nút link.
- Hình ảnhCách chèn ảnh trong HTML bằng thẻ <img>: src và alt, đặt kích thước ảnh bằng width và height, ảnh responsive, cắt ảnh bằng object-fit, chú thích với figure, lazy loading, và khoảng trống dưới ảnh.
Danh sách và bảng
- Danh sáchCách tạo danh sách trong HTML: gạch đầu dòng với <ul>, danh sách đánh số với <ol> (start, reversed, chữ cái và số La Mã), danh sách lồng nhau, danh sách mô tả, và cách định dạng hoặc bỏ dấu đầu dòng bằng CSS.
- BảngCách tạo bảng trong HTML: hàng bằng <tr>, ô bằng <td>, ô tiêu đề bằng <th> và scope, caption, thead, tbody và tfoot, tô màu xen kẽ các hàng, và bảng cuộn được trên màn hình nhỏ.
- Viền bảngCách thêm viền cho bảng HTML bằng CSS: đường kẻ đơn với border-collapse, border-spacing, chỉ kẻ dòng ngang, chỉ kẻ viền bên trong, bo tròn góc, và vì sao thuộc tính border đã lỗi thời.
- Colspan và rowspanGộp ô trong bảng theo chiều ngang bằng colspan và theo chiều dọc bằng rowspan. Tìm hiểu cách đếm ô để bảng luôn vuông vức, tạo tiêu đề nhóm, và giữ bảng có ô gộp dễ đọc với trình đọc màn hình.
Biểu mẫu
- FormCách tạo form trong HTML: phần tử form, thuộc tính name, action và method (GET và POST), nhóm trường bằng fieldset và legend, kiểm tra dữ liệu có sẵn với required và pattern, và xử lý việc gửi form bằng JavaScript.
- Các kiểu inputMọi type của thẻ <input> trong HTML ở cùng một chỗ: text, email, password, number, range, date và time, color, file, hidden và các type còn lại, kèm những gì mỗi type kiểm tra, bàn phím mà nó mở trên điện thoại và các thuộc tính dùng chung.
- NútCách tạo nút trong HTML bằng phần tử <button>: ba type (submit, button, reset), gửi giá trị cùng form, nút bị vô hiệu hóa, nút có biểu tượng, và định dạng bằng CSS mà vẫn giữ vòng focus.
- CheckboxCách tạo checkbox trong HTML bằng <input type="checkbox">: nhãn, thuộc tính checked, form gửi gì khi ô được chọn và khi không, nhóm checkbox, chọn tất cả với trạng thái indeterminate, và định dạng.
- Radio ButtonCách radio button hoạt động trong HTML: nhóm các nút bằng thuộc tính name, đặt lựa chọn mặc định bằng checked, nhóm bắt buộc chọn, đọc giá trị được chọn bằng JavaScript, cách dùng bàn phím, và định dạng chúng thành vòng tròn tùy chỉnh hoặc thẻ lựa chọn.
- Select DropdownCách tạo danh sách thả xuống (dropdown) trong HTML với <select> và <option>: value, lựa chọn mặc định hoặc placeholder, required, nhóm lựa chọn, chọn nhiều, đọc và gán giá trị bằng JavaScript, và định dạng mũi tên.
- TextareaCách tạo ô nhập chữ nhiều dòng bằng <textarea>: rows và cols, chữ mặc định giữa hai thẻ, đổi kích thước và tự giãn, maxlength kèm bộ đếm ký tự, xuống dòng trong dữ liệu gửi đi và cách định kiểu.
- LabelCách phần tử <label> đặt tên cho một trường form: nối bằng for và id hoặc bằng cách bọc, vùng nhấp lớn hơn cho checkbox và radio, gợi ý và thông báo lỗi, nhãn ẩn, và những lỗi làm đứt kết nối.
HTML ngữ nghĩa
- HTML ngữ nghĩaHTML ngữ nghĩa (semantic HTML) là chọn thẻ theo bản chất của nội dung, không theo vẻ ngoài. Tìm hiểu các thẻ bố cục ngữ nghĩa (header, nav, main, article, aside, footer), những gì chúng mang lại cho trình đọc màn hình và công cụ tìm kiếm, và cách kiểm tra cấu trúc trang.
- HeaderPhần tử <header> chứa phần mở đầu của một trang hoặc một phần: logo, tiêu đề, menu điều hướng, dòng tác giả. Tìm hiểu cách dựng header cho trang web, <header> khác gì <head> và thẻ tiêu đề, cách dùng header trong bài viết và cách làm header dính trên đầu trang.
- FooterPhần tử <footer> khép lại một trang hoặc một phần: bản quyền, thông tin liên hệ, liên kết, thông tin tác giả. Tìm hiểu cách dựng footer cho trang web với các cột liên kết, cách giữ footer ở cuối một trang ngắn, và cách footer hoạt động bên trong bài viết.
- NavPhần tử <nav> đánh dấu một khối liên kết điều hướng chính. Tìm hiểu cách tạo thanh điều hướng bằng <nav> và một danh sách, cách đánh dấu trang hiện tại, cách gắn nhãn cho nhiều nav trên một trang và cách làm nút bật tắt menu cho di động.
- SectionPhần tử <section> nhóm nội dung cùng một chủ đề dưới tiêu đề riêng của nó. Tìm hiểu khi nào dùng <section>, khi nào <article> hoặc <div> phù hợp hơn, cách ba thẻ này lồng vào nhau, và cách một section có nhãn trở thành landmark.
Head và thẻ meta
- Thẻ titlePhần tử <title> đặt tên cho trang trên tab trình duyệt, trong dấu trang và trong kết quả tìm kiếm. Tìm hiểu nó nằm ở đâu, nên dài bao nhiêu, khác gì với <h1> và thuộc tính title, và cách đổi nó bằng JavaScript.
- Meta viewportThẻ meta viewport cho điện thoại biết cần dàn trang theo chiều rộng màn hình thay vì chiều rộng của máy tính. Tìm hiểu thẻ chuẩn, tác dụng của từng giá trị, vì sao CSS responsive phụ thuộc vào nó và những giá trị nên tránh.
- RedirectChuyển hướng một trang sang trang khác bằng thẻ meta refresh trong HTML thuần, bằng JavaScript, hoặc trên máy chủ. Tìm hiểu cú pháp meta refresh, cách tự động tải lại trang, vì sao redirect 301 trên máy chủ là lựa chọn tốt hơn, và công cụ tìm kiếm xử lý từng cách ra sao.
- FaviconFavicon là biểu tượng nhỏ trên tab trình duyệt. Tìm hiểu thẻ link dùng để thêm favicon, những tệp và kích thước cần có (ICO, SVG, PNG, apple-touch-icon), cách làm favicon bằng SVG hoặc emoji, cách đổi favicon bằng JavaScript và vì sao favicon cũ vẫn cứ hiện ra.
- Thuộc tính langThuộc tính lang cho trình duyệt, trình đọc màn hình và công cụ dịch biết nội dung của bạn viết bằng ngôn ngữ nào. Tìm hiểu nên đặt nó ở đâu, dùng mã nào (en, en-US, pt-BR), cách đánh dấu một cụm từ bằng ngôn ngữ khác và những thay đổi bạn nhìn thấy được.
Đa phương tiện và tương tác
- Thẻ iframePhần tử <iframe> hiển thị một trang web khác bên trong trang của bạn. Tìm hiểu các thuộc tính cần có (src, title, width, height), cách nhúng video YouTube và bản đồ, cách làm iframe responsive, cách sandbox giới hạn quyền của iframe, và vì sao một số trang web từ chối hiển thị trong iframe.
- Thẻ videoPhần tử <video> phát tệp video bằng trình phát có sẵn của trình duyệt. Tìm hiểu cách viết, các thuộc tính quan trọng (controls, autoplay, muted, loop, playsinline, poster, preload), định dạng dự phòng với <source>, phụ đề với <track>, kích thước responsive và điều khiển phát bằng JavaScript.
- Thẻ audioPhần tử <audio> phát tệp âm thanh bằng trình phát có sẵn của trình duyệt. Tìm hiểu cách viết, các thuộc tính (controls, autoplay, loop, muted, preload), nên dùng định dạng nào, vì sao autoplay có tiếng bị chặn và cách tự làm nút phát bằng JavaScript.
- Details và summaryPhần tử <details> và <summary> tạo một phần nội dung thu gọn được mà không cần JavaScript: summary luôn hiển thị, nhấp vào nó sẽ hiện hoặc ẩn phần còn lại. Tìm hiểu cách viết, thuộc tính open và name, accordion, định dạng mũi tên và sự kiện toggle.
