Đối tượng Aside trong HTML DOM

Đối tượng Aside trong HTML DOM đại diện cho phần tử <aside> - dùng cho nội dung phụ, bên lề (sidebar, quảng cáo, liên kết liên quan...).

Tạo aside object

document.createElement("ASIDE");

Ví dụ

<!DOCTYPE html>
<html>
<style>
  body { text-align: center; background-color: #fff; color: #0197F6; }
  h1 { color: #23CE6B; }
  .btn { background-color: #fff; border: 2px solid #0197F6; height: 2rem; width: 40%; margin: 2rem auto; display: block; color: #0197F6; outline: none; cursor: pointer; border-radius: 20px; }
  aside { border: 1.5px solid #db133a; padding: 20px; margin: 1rem auto; max-width: 400px; background: #f9f9f9; }
</style>
<body>
<h1>Demo DOM Aside Object</h1>
<button onclick="createAside()" class="btn">Tạo phần tử <aside></button>
<script>
  function createAside() {
    var asideElement = document.createElement("ASIDE");
    asideElement.innerHTML = '<h3>Đây là aside</h3><p>Nội dung bên lề: sidebar, quảng cáo, link liên quan...</p>';
    document.body.appendChild(asideElement);
  }
</script>
</body>
</html>

Kết quả

Nhấn "Tạo phần tử <aside>" → một khung aside xuất hiện bên dưới với viền đỏ.

Ý nghĩa semantic: <aside> cho nội dung liên quan nhưng tách biệt khỏi nội dung chính (sidebar, pull quote, định nghĩa, quảng cáo). Giúp SEO và accessibility.