Làm cách nào để bạn đặt văn bản vào vùng chứa trong html?

Các thẻ trống đôi khi còn được gọi là thẻ void. Chúng là các thẻ tự đóng như thẻ

div {
  display: block;
}

div {
  display: block;
}

div {
  display: block;
}

Các thẻ vùng chứa là các thẻ có một số nội dung giữa thẻ mở và thẻ đóng của chúng

Một số ví dụ là các thẻ

div {
  display: block;
}

div {
  display: block;
}

div {
  display: block;
}

Thẻ

div {
  display: block;
}

Thẻ

div {
  display: block;
}

Cuối cùng, có thẻ

div {
  display: block;
}

Bên trong thẻ

div {
  display: block;
}

• Thẻ vùng chứa được tạo kiểu
• Chặn thẻ vùng chứa

Hãy cùng tìm hiểu về thẻ vùng chứa được tạo kiểu, sau đó chúng ta sẽ chuyển sang cấu trúc thẻ vùng chứa

Thẻ vùng chứa theo kiểu HTML

Thẻ vùng chứa được tạo kiểu là các thẻ vùng chứa có kiểu dáng mặc định duy nhất được trình duyệt áp dụng cho chúng

Thẻ siêu liên kết

div {
  display: block;
}

Trong Google Chrome, thẻ

div {
  display: block;
}

a:-webkit-any-link {
  color: -webkit-link;
  cursor: pointer;
  text-decoration: underline;
}

CSS cho thẻ

div {
  display: block;
}

div {
  display: block;
}

Danh sách đầy đủ các thẻ vùng chứa được tạo kiểu như sau

• Thẻ siêu liên kết

  div {
    display: block;
  }
  

  7
• Thẻ tiêu đề từ

  div {
    display: block;
  }
  

  32 đến

  div {
    display: block;
  }
  

  33
• Đoạn

  div {
    display: block;
  }
  

  34 thẻ
• Các thẻ kiểu văn bản như

  div {
    display: block;
  }
  

  35 làm cho văn bản của bạn in nghiêng và

  div {
    display: block;
  }
  

  36 cho kiểu in đậm
• Thẻ

  div {
    display: block;
  }
  

  37 cho các nút
• Liệt kê các thẻ như

  div {
    display: block;
  }
  

  38,

  div {
    display: block;
  }
  

  39 và

  div {
    display: block;
  }
  

  10

Trình duyệt sẽ áp dụng kiểu dáng mặc định cho các phần tử ở trên để chúng có hình ảnh đại diện phù hợp

Cuối cùng, có các thẻ chứa khối được sử dụng để cấu trúc trang web của bạn theo ngữ nghĩa

Thẻ vùng chứa khối HTML

Thẻ bộ chứa khối HTML được sử dụng để phân chia tài liệu HTML của bạn giữa các phần để chúng dễ hiểu hơn đối với cả nhà phát triển web và trình duyệt

Trước HTML5, thẻ chứa khối duy nhất là thẻ

div {
  display: block;
}

div {
  display: block;
}

Thẻ

div {
  display: block;
}

Ví dụ: bạn có thể chia một bài đăng trên blog thành ba phần

• Tiêu đề bài viết
• Nội dung bài đăng
• Chân bài đăng

Đây là cách bạn chia bài bằng cách sử dụng thẻ

div {
  display: block;
}

div {
  display: block;
}

Hoặc bạn cũng có thể sử dụng thẻ

div {
  display: block;
}

div {
  display: block;
}

Sử dụng các thẻ

div {
  display: block;
}

• Cấu trúc tài liệu sẽ trực quan hơn (dễ bảo trì và sửa đổi hơn)
• Bạn có thể áp dụng kiểu CSS phức tạp hơn cho trang web của mình

Theo thời gian, việc sử dụng thẻ

div {
  display: block;
}

div {
  display: block;
}

Tuy nhiên, việc sử dụng thuộc tính

div {
  display: block;
}

div {
  display: block;
}

Khi soạn thảo thông số kỹ thuật cho HTML5, tổ chức W3C đã quyết định thêm các thẻ ngữ nghĩa mới để thay thế thẻ chung chung

div {
  display: block;
}

• Thẻ

  div {
    display: block;
  }
  

  51 để nhóm các yếu tố điều hướng của bạn
• Thẻ

  div {
    display: block;
  }
  

  52 mô tả nội dung chính của trang của bạn
• Thẻ

  div {
    display: block;
  }
  

  53 mô tả nội dung phụ trên trang của bạn, thường dành cho thanh bên
• Thẻ

  div {
    display: block;
  }
  

  54 mô tả (các) phần bài viết độc lập trên trang của bạn
• Thẻ

  div {
    display: block;
  }
  

  55 mô tả tiêu đề cho trang hoặc bài viết
• Thẻ

  div {
    display: block;
  }
  

  56 mô tả một phần chung chung riêng biệt
• Thẻ

  div {
    display: block;
  }
  

  57 mô tả chân trang cho trang hoặc bài viết

Các thẻ mới này được hiển thị trên trình duyệt giống như thẻ

div {
  display: block;
}

div {
  display: block;
}

div {
  display: block;
}

Đối với các nhà phát triển web, các thẻ ngữ nghĩa này có nghĩa là cấu trúc một tài liệu HTML trở nên trực quan hơn

Ví dụ: bạn có thể sử dụng thẻ

div {
  display: block;
}

div {
  display: block;
}

div {
  display: block;
}

Đối với một bài đăng trên blog, bạn có thể sử dụng kết hợp các yếu tố ngữ nghĩa như bên dưới

div {
  display: block;
}

Các thẻ ngữ nghĩa cũng làm cho tài liệu của bạn có nhiều thông tin hơn đối với các trình duyệt và công cụ tìm kiếm

Khi bạn viết một bài đăng trên blog, các công cụ tìm kiếm sẽ tìm kiếm các thẻ ngữ nghĩa để diễn giải nội dung của bạn chính xác hơn

Vì HTML5 là tiêu chuẩn sống để viết tài liệu HTML, nên các nhà phát triển web phải sử dụng các thẻ ngữ nghĩa để cấu trúc đúng tài liệu HTML của họ