Trong bài học bạn sẽ được tìm hiểu về cấu trúc trang HTML và lướt qua một số thẻ phổ biến trong HTML. Đừng lo nếu như bạn chưa thể hiểu rõ về công dụng của các thẻ vì chúng ta sẽ tìm hiểu kỹ hơn ở các bài học tiếp theo.
HTML Document
Một HTML document hay trang HTML phải luôn bắt đầu bằng khai báo DOCTYPE. Nếu dùng HTML phiên bản 5 (là phiên bản mới nhất tính tại thời điểm bài viết này được công bố) thì khai báo này sẽ như sau:
<!DOCTYPE html>
Toàn bộ nội dung của một trang HTML sẽ được đặt trong cặp thẻ <html></html> và cặp thẻ này đi theo sau khai báo DOCTYPE:
<!DOCTYPE html> <html> … </html>
Cặp thẻ <head></head> thường theo sau thẻ mở <html> và chứa các thông tin bổ sung (meta data) về trang HTML như tiêu đề trang bộ ký tự (liên quan tới ngôn ngữ) của trang, link tham chiếu các tập tin CSS và JavaScript sử dụng trên trang… Các thông tin meta data thường sẽ không xuất hiện ở phần nội dung trang khi hiển thị trên trình duyệt:
<!DOCTYPE html> <html> <head> … </head> </html>
Phần nội dung được hiển thị trên trang sẽ nằm trong cặp thẻ <body></body>:
<!DOCTYPE html> <html> <head> … </head> <body> … </body> </html>
Một ví dụ đầy đủ về cấu trúc trong HTML như sau:
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>Trang HTML Đầu Tiên</title> </head> <body> <h1>Xin Chào Thế Giới!</h1> </body> </html>
Chạy Thử
HTML Meta Data
Thẻ meta dùng để thêm thông tin bổ sung (meta data) cho trang HTML. Ví dụ như để quy định bộ ký tự sử dụng là UTF-8:
<meta charset=”utf-8″>
Thẻ <meta> là thẻ tự đóng. Trình duyệt hoặc các bộ máy tính kiếm search engine như Google sẽ cần sử dụng thông tin này để có thể phân tích, hiển thị nội dung trên trang một cách hợp lý nhất.
HTML Tiêu Đề Trang
Thẻ tiêu đề được đặt trong cặp thẻ <head></head> và dùng để tạo tiêu đề cho trang.
<title>Trang HTML Đầu Tiên</title>
Tiêu đề trang không hiển thị ở phần nội dung trang mà được hiển thị ở thanh tab của trình duyệt.
HTML Đề Mục
Các thẻ đề mục dùng để tạo đề mục cho nội dung của trang. HTML có 6 loại thẻ đề mục khác nhau từ <h1>, <h2> cho tới <h6> với thứ tự quan trọng của đề mục giảm dần. Ví dụ thẻ <h1> dùng đánh dấu đề mục có mức độ quan trọng cao và <h6> với đề mục ít quan trọng hơn.
<h1>Thẻ đề mục 1</h1> <h2>Thẻ đề mục 2</h2> <h3>Thẻ đề mục 3</h3>
Chạy Thử
HTML Đoạn Văn
Đoạn văn bản trong HTML được đánh dấu bởi thẻ <p>:
<p>Đoạn văn đầu tiên…</p> <p>Đoạn văn thứ hai…</p>
Chạy Thử
HTML Link Liên Kết
Thẻ <a> được dùng để tạo link liên kết trong HTML:
<a href=”https://www.codehub.vn” title=”CodeHub.vn”>CodeHub.vn</a>
Chạy Thử
Địa chỉ của link liên kết được xác định bởi giá trị của thuộc tính href có trong thẻ mở <a>. Chúng ta sẽ tìm hiểu về thuộc tính ở các bài học tiếp theo.
HTML Ảnh
Thẻ <img> được dùng để đánh dấu hình ảnh trên trang:
<img src=”https://www.codehub.vn/logo.jpg” alt=”Logo CodeHub.vn” width=”100″ height=”100″>
Chạy Thử
Địa chỉ của ảnh được xác định bởi thuộc tính src. Các thuộc tính khác như alt (alternative text), width và height cung cấp thêm các thông tin về ảnh. Đừng lo chúng ta sẽ tìm hiểu về các thuộc tính này ở các bài học tiếp theo.
HTML Nút Bấm
Thẻ <button> được dùng để tạo một nút bấm trên trang:
<button>Click vào đây</button>
Chạy Thử
HTML Danh Sách
Các thẻ <ul> và <ol> được dùng để tạo một danh sách:
<ul> <li>Cà phê</li> <li>Trà</li> <li>Nước ngọt</li> <li>Bia</li> <li>Rượu</li> </ul>
Chạy Thử
Chúng ta sẽ tìm hiểu về các thẻ này ở các bài học tiếp theo!