HTML Semantic Elements

ในเนื้อหาส่วนนี้จะพูดถึงเรื่องของ Semantic Element ซึ่งหมายถึง element ที่มีความหมายในตัวเองเพื่อใช้ในการสร้างความแตกต่างของโครงสร้างแต่ละส่วนภายในเว็บไซต์อย่างชัดเจน ยกตัวอย่างเช่น

  • <article> ส่วนเนื้อหาพิเศษต่างๆ
  • <aside> เนื้อหาด้านข้าง
  • <details> ซ่อนแสดงรายละเอียด/เนื้อหา
  • <footer> ส่วนท้ายของเว็บไซต์
  • <header> ส่วนหัวของเว็บไซต์
  • <nav> ส่วนที่ใช้ในการสร้างลิงค์นำทาง
  • <section> กำหนดส่วน แบ่งส่วนของเอกสาร HTML 

ตัวอย่างการใช้งาน Semantic Element เบื้องต้น

<html>
<body>

<section>
<article>
  <h2>1.Article</h2>
  <p>Content ..................................................</p>
</article>
</section>


<section>
<aside>
  <h2>2.Aside</h2>
  <p>Content ..................................................</p>
</aside>
</section>


<section>
<h2>3.Details and Summary</h2>
<details>
  <summary>more</summary>
  <p>Content ..................................................</p>
</details>
</section>


<section>
<h2>4.Figure and Figcaption</h2>
 <figure>
 <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
  </figure>
</section>


<section>
 <h2>5.Footer</h2>
 <footer>
 	<a href="https://www.narasak.com/" target="_blank">narasak.com</a>
 </footer>
</section>


<section>
<header>
  <h2>6.Header</h2>
  <p>Content ..................................................</p>
</header>
</section>


<section>
 <h2>Nav</h2>
 <nav>
<a href="#">link 1</a> ||
<a href="#">link 2</a> ||
<a href="#">link 3</a>
</nav>
</section>


</body>
</html>

ไฟล์ที่ 1 แสดงผลลัพธ์เพื่อการนำไปใช้

จากไฟล์ที่ 1 เป็นเพียงการทดลองนำ Semantic element ไปเขียนยำรวมกันเพื่อดูผลลัพธ์ที่แสดงบนเบราว์เซอร์ ซึ่งตัวอย่างที่ 3 จะช่วยให้เข้ามากยิ่งขึ้นว่าทำไมถึงควรใช้ Semantic element 

 

ตัวอย่างที่ 3 สร้างเค้าโครงเว็บไซต์ด้วย Semantic Element

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
  margin: 4px;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}


header {
  background-color: rgb(100, 200, 255);
  padding: 20px;
  text-align: center;
  font-size: 35px;
  color: white;
}


section {
  display: -webkit-flex;
  display: flex;
}


nav {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #ccc;
  padding: 20px;
  
}


nav ul {
  list-style-type: none;
  padding: 0;
}

a{
 text-decoration:none;
}

a:hover{
    opacity:0.5;
}

article {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #f1f1f1;
  padding: 10px;
}


footer {
  background-color: rgb(100, 200, 255);
  padding: 10px;
  text-align: center;
  color: white;
}


@media (max-width: 600px) {
  section {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}
</style>
</head>
<body>

<header>
  <h2>การสร้างเค้าโครงเว็บไซต์ด้วย Semantic Element</h2>
</header>

<section>
  <nav>
    <ul>
      <li><a href="#">link 1</a></li>
      <li><a href="#">link 2</a></li>
      <li><a href="#">link 3</a></li>
    </ul>
  </nav>
  
  <article>
    <h1>Semantic Element</h1>
    <p>เนื้อหาที่ 1</p>
    <p>เนื้อหาที่ 2</p>
    <p>เนื้อหาที่ 3</p>
    <p>เนื้อหาที่ 4</p>
  </article>
</section>

<footer>
  <p>Footer</p>
</footer>

</body>
</html>

ไฟล์ที่ 2 การสร้างเค้าโครงเว็บด้วย Semantic Element

อธิบายไฟล์ที่ 2 หากลองสังเกตดูจะเห็นได้ว่า โครงสร้างของเว็บไซต์มีการแบ่งส่วนอย่างชัดเจน เช่นส่วนหัวก็ใช้ <header> หรือ ส่วนท้ายก็ใช้ <footer> ซึ่งไม่เพียงแต่ช่วยให้โครงสร้างของเว็บไซต์มีความชัดเจน แต่ยังช่วยให้การกำหนดรูปแบบการแสดงผลด้วย CSS สามารถทำได้ง่ายมากยิ่งขึ้น 

 

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: