HTML <main> หลักของเว็บ

  • หน้าก่อน <link>
  • หน้าต่อไป <map>

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

<main> องค์ประกอบนี้กำหนดเนื้อหาหลักของเอกสาร

<main> เนื้อหาในองค์ประกอบควรเป็นเดี่ยวเดียวสำหรับเอกสาร ไม่ควรมีเนื้อหาที่ซ้ำกันที่ใช้งานในหลายเอกสาร เช่น รายการข่าวเซิงไซด์ ลิงก์การนำทาง ข้อมูลลิขสิทธิ์ สัญลักษณ์เว็บไซต์และฟอร์มการค้นหาเป็นต้น

คำเตือน:ไม่สามารถมีองค์ประกอบหลายตัวในเอกสาร องค์ประกอบ <main>。 องค์ประกอบ <main> ไม่สามารถเป็น <article>、<aside>、<footer>、<header> หรือ <nav> องค์ประกอบที่เป็นทายาทขององค์ประกอบ

ตัวอย่าง

ตัวอย่าง 1

กำหนดเนื้อหาหลักของเอกสาร:

<main>
  <h1>บราวเซอร์ที่เป็นที่นิยมที่สุด</h1>
  <p>โกลโปเปิลครอม ฟายเร็ฟ และเอดจ์เป็นบราวเซอร์ที่ถูกใช้งานมากที่สุดในปัจจุบัน。</p>
  <article>
    <h2>โกลโปเปิลครอม</h2>
    <p>โกลโปเปิลไชน์ ชื่อสั้น โกลโปเปิลครอม คือบราวเซอร์เว็บที่พัฒนาโดยกูเกิล และเปิดตัวในปี 2008...</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox คือโปรแกรมบราวเซอร์เปิดทางการใช้งานโดย Mozilla ...&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge คือโปรแกรมบราวเซอร์เครื่องคอมพิวเตอร์ที่พัฒนาโดย Microsoft และเปิดตัวในปี 2015 ...&</p>
  </article>
</main>

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ตั้งค่าด้วย CSS <main> สไตล์ขององค์ประกอบ:

<html>
<head>
<style>
main {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}
main > h1, p, .browser {
  margin: 10px;
  padding: 5px;
}
.browser {
  background: white;
}
.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>
<main>
  <h1>บราวเซอร์ที่เป็นที่นิยมที่สุด</h1>
  <p>โกลโปเปิลครอม ฟายเร็ฟ และเอดจ์เป็นบราวเซอร์ที่ถูกใช้งานมากที่สุดในปัจจุบัน。</p>
  <article>
    <h2>โกลโปเปิลครอม</h2>
    <p>โกลโปเปิลไชน์ ชื่อสั้น โกลโปเปิลครอม คือบราวเซอร์เว็บที่พัฒนาโดยกูเกิล และเปิดตัวในปี 2008...</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox คือโปรแกรมบราวเซอร์เปิดทางการใช้งานโดย Mozilla ...&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge คือโปรแกรมบราวเซอร์เครื่องคอมพิวเตอร์ที่พัฒนาโดย Microsoft และเปิดตัวในปี 2015 ...&</p>
  </article>
</main>
</body>
</html>

ทดลองด้วยตัวเอง

การใช้งานทั่วไป

<main> แบบบันทึกยังสนับสนุน รายละเอียดการใช้งานทั่วไปใน HTML。

รายละเอียดเหตุการณ์

<main> แบบบันทึกยังสนับสนุน รายละเอียดเหตุการณ์ใน HTML。

การสนับสนุนโปรแกรมนี้

ตัวเลขในตารางนี้ระบุสูตรการใช้งานแบบบันทึกที่สนับสนุนเต็มที่สุด

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 12.0 21.0 7.0 16.0
  • หน้าก่อน <link>
  • หน้าต่อไป <map>