แทร็กบ์ HTML <aside>

  • หน้าก่อนหน้า <article>
  • หน้าต่อไป <audio>

คำนิยามและวิธีใช้

<aside> เครื่องหมาย <aside> นั้นกำหนดเนื้อหาที่อยู่นอกเหนือจากเนื้อหาที่อยู่ในบริเวณนี้

เนื้อหาของ aside ควรมีความเกี่ยวข้องโดยตรงกับเนื้อหาที่อยู่รอบๆ

คำแนะนำ:<aside> เนื้อหาทั่วไปจะถูกจัดวางเป็นด้านข้างของเอกสาร

คำเตือน:<aside> องค์ประกอบในเว็บเบราว์เซอร์จะไม่แสดงรูปแบบพิเศษใดๆ แต่คุณสามารถตั้งรูปแบบด้วย CSS ได้ <aside> รูปแบบสไตล์ขององค์ประกอบ (ดูตัวอย่างด้านล่าง)

ดูเพิ่มเติมที่:

คู่มืออ้างอิง HTML DOM:องค์ประกอบ Aside

ตัวอย่าง

ตัวอย่าง 1

แสดงบางส่วนของเนื้อหาที่ไม่ได้ติดต่อกับเนื้อหาที่อยู่ในบริเวณนี้:

<p>นี่ปีร้อนที่ผมและครอบครัวของผมไปเยี่ยมชมสวนสัตว์น้ำหายสามัญญาธิราชวังซึ่งตั้งอยู่ที่นครฝูหยูอัน พื้นที่ทั้งหมดประมาณ 29.7 ฮெกตาร์ และยังเป็นพื้นที่ท่องเที่ยวระดับ AAAA ของประเทศด้วย</p>
<aside>
<h4>สวนสัตว์ทะเลฮางชางของนานกิง</h4>

上海海昌海洋公园是位于浦东新区的主题乐园，围绕海洋文化特色，总占地面积约为29.7公顷，同时也是国家 AAAA 级旅游景区，

</aside>

ลองทดสอบเอง

ตัวอย่าง 2

ตั้งรูปแบบสไตล์สำหรับองค์ประกอบ <aside> ด้วย CSS:

<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>
<h1>aside องค์ประกอบ</h1>
<p>นี่ปีร้อนที่ผมและครอบครัวของผมไปเยี่ยมชมสวนสัตว์น้ำหายสามัญญาธิราชวังซึ่งตั้งอยู่ที่นครฝูหยูอัน พื้นที่ทั้งหมดประมาณ 29.7 ฮெกตาร์ และยังเป็นพื้นที่ท่องเที่ยวระดับ AAAA ของประเทศด้วย</p>
<aside>

上海海昌海洋公园是位于浦东新区的主题乐园，围绕海洋文化特色，总占地面积约为29.7公顷，同时也是国家 AAAA 级旅游景区，

</aside>
<p>นี่ปีร้อนที่ผมและครอบครัวของผมไปเยี่ยมชมสวนสัตว์น้ำหายสามัญญาธิราชวังซึ่งตั้งอยู่ที่นครฝูหยูอัน พื้นที่ทั้งหมดประมาณ 29.7 ฮெกตาร์ และยังเป็นพื้นที่ท่องเที่ยวระดับ AAAA ของประเทศด้วย</p>
<p>นี่ปีร้อนที่ผมและครอบครัวของผมไปเยี่ยมชมสวนสัตว์น้ำหายสามัญญาธิราชวังซึ่งตั้งอยู่ที่นครฝูหยูอัน พื้นที่ทั้งหมดประมาณ 29.7 ฮெกตาร์ และยังเป็นพื้นที่ท่องเที่ยวระดับ AAAA ของประเทศด้วย</p>
</body>
</html>

ลองทดสอบเอง

คุณสมบัติโลกะลักษณ์

<aside> แบบตัวอักษรยังสนับสนุน คุณสมบัติโลกะลักษณ์ใน HTML.

คุณสมบัติเหตุการณ์

<aside> แบบตัวอักษรยังสนับสนุน คุณสมบัติเหตุการณ์ใน HTML.

การตั้งค่า CSS โดยเริ่มต้น

ส่วนใหญ่ของเบราเซอร์จะแสดงด้วยค่าเริ่มต้นดังนี้ <aside> องค์ประกอบ:

aside {
  display: block;
}

การสนับสนุนโปรแกรมบราวเซอร์

ตัวเลขในตารางระบุว่าอะไรเป็นเวอร์ชั่นของเบราเซอร์ที่สนับสนุนองค์ประกอบนี้ทั้งหมดครบถ้วน

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
6.0 9.0 4.0 5.0 11.1
  • หน้าก่อนหน้า <article>
  • หน้าต่อไป <audio>