Thẻ HTML <aside>

Định nghĩa và cách sử dụng

<aside> Thẻ <aside> xác định một số nội dung ngoài nội dung của nó.

Nội dung của thẻ <aside> nên có mối liên quan gián tiếp với nội dung xung quanh.

Lời khuyên:<aside> Nội dung thường được đặt làm thanh bên trong tài liệu.

Lưu ý:<aside> Phần tử không hiển thị bất kỳ kiểu đặc biệt nào trong trình duyệt. Tuy nhiên, bạn có thể sử dụng CSS để đặt: <aside> Kiểu của phần tử (xem ví dụ dưới đây).

Xin xem thêm:

Tài liệu tham khảo HTML DOM:Đối tượng Aside

Mô hình

Ví dụ 1

Hiển thị một số nội dung ngoài nội dung của nó:

<p>Trong mùa hè này, gia đình tôi đã tham quan Công viên hải dương Thien Chang ở Thượng Hải. Khí hậu rất tốt, công viên hải dương rất huyền ảo! Gia đình tôi đã có một mùa hè tuyệt vời!</p>
<aside>
<h4>Thảo cương Thủy cung Thượng Hải</h4>
<p>Công viên hải dương Thien Chang ở Thượng Hải là một khu vui chơi giải trí chủ đề nằm ở khu mới Phố Đông, với đặc điểm văn hóa hải dương, tổng diện tích khoảng 29,7 ha, cũng là khu du lịch thắng cảnh cấp AAAA của quốc gia,</p>
</aside>

Thử nghiệm trực tiếp

Ví dụ 2

Đặt kiểu cho thẻ <aside> bằng CSS:

<html>
<head>
<style>
aside {
  độ rộng: 30%;
  cách lấp đầy trái: 15px;
  cách biên trái: 15px;
  độ rộng: phải;
  cách viết chữ: nghiêng;
  màu nền: lightgray;
}
</style>
</head>
<body>
<h1>thẻ <aside></h1>
<p>Trong mùa hè này, gia đình tôi đã tham quan Công viên hải dương Thien Chang ở Thượng Hải. Khí hậu rất tốt, công viên hải dương rất huyền ảo! Gia đình tôi đã có một mùa hè tuyệt vời!</p>
<aside>
<p>Công viên hải dương Thien Chang ở Thượng Hải là một khu vui chơi giải trí chủ đề nằm ở khu mới Phố Đông, với đặc điểm văn hóa hải dương, tổng diện tích khoảng 29,7 ha, cũng là khu du lịch thắng cảnh cấp AAAA của quốc gia,</p>
</aside>
<p>Trong mùa hè này, gia đình tôi đã tham quan Công viên hải dương Thien Chang ở Thượng Hải. Khí hậu rất tốt, công viên hải dương rất huyền ảo! Gia đình tôi đã có một mùa hè tuyệt vời!</p>
<p>Trong mùa hè này, gia đình tôi đã tham quan Công viên hải dương Thien Chang ở Thượng Hải. Khí hậu rất tốt, công viên hải dương rất huyền ảo! Gia đình tôi đã có một mùa hè tuyệt vời!</p>
</body>
</html>

Thử nghiệm trực tiếp

Thuộc tính toàn cục

<aside> Thẻ cũng hỗ trợ Thuộc tính toàn cục trong HTML.

Thuộc tính sự kiện

<aside> Thẻ cũng hỗ trợ Thuộc tính sự kiện trong HTML.

Cài đặt CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị giá trị mặc định sau đây <aside> Thiết bị:

aside {
  display: block;
}

Hỗ trợ trình duyệt

Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn yếu tố này.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
6.0 9.0 4.0 5.0 11.1