Mặc dù các trang web hiện đại thường được xây dựng với giao diện người dùng thân thiện, nhưng thật tốt nếu biết một số HTML cơ bản. Nếu biết 17 thẻ sau đây, bạn có thể tạo ra một trang web cơ bản từ đầu hoặc tinh chỉnh code được tạo bởi một ứng dụng như WordPress.
Bài viết cung cấp các ví dụ cho hầu hết các thẻ, nhưng nếu muốn, bạn có thể tải tệp HTML được liên kết ở cuối bài viết để xem trong trình soạn thảo văn bản và tải nó lên trong một trình duyệt.
1. <!DOCTYPE html>
Bạn sẽ cần thẻ này ở đầu mỗi tài liệu HTML tạo ra. Điều này đảm bảo một trình duyệt biết rằng nó đang đọc HTML.
2. <html>
Đây là một thẻ khác nói với trình duyệt rằng nó đang đọc HTML. Tại sao chúng ta cần cả hai thẻ <!DOCTYPE html> và <html>? Thật sự có trời mới biết nhưng tốt hơn hết là bạn không nên bỏ nó. Và ở cuối tài liệu, thêm thẻ </html>.
3. <head>
Đối với các trang cơ bản, thẻ <head> sẽ chứa tiêu đề.
4. <title>
Thẻ này xác định tiêu đề của trang. Tất cả những gì bạn cần làm là đặt tiêu đề vào thẻ và đóng nó, ví dụ này bao gồm cả thẻ head:
<head> <title>My Website</title> </head>Đây là tên được hiển thị dưới dạng tiêu đề tab khi nó được mở trong một trình duyệt.
5. <meta>
Giống như thẻ title, siêu dữ liệu được đặt trong khu vực tiêu đề của trang (siêu dữ liệu này, khác với siêu dữ liệu từ thiết bị di động). Siêu dữ liệu chủ yếu được sử dụng bởi các công cụ tìm kiếm và là thông tin trên trang của bạn. Có một số trường meta khác nhau, nhưng đây là một trong số các loại meta được sử dụng phổ biến nhất:
- Description – Mô tả cơ bản của trang.
- Keywords – Lựa chọn từ khoá áp dụng cho trang.
- author – Tác giả của trang.
- viewport – Một thẻ đảm bảo rằng trang có thể được xem trên tất cả các thiết bị.
Dưới đây là ví dụ có thể áp dụng cho trang này:
6. <body>
Về cơ bản, mọi thứ trừ tiêu đề được đặt trong phần thân của trang web và đặt trong thẻ body.
7. <h1>
Thẻ <h1> xác định tiêu đề cấp một trên trang. Thẻ <h2> xác định tiêu đề cấp hai, <h3> cho cấp ba, v.v…, đến thẻ <h6>. Ví dụ: tên của thẻ trong bài viết này là tiêu đề cấp hai.
