Article Image

Sun Jul 15 01:39:47 2018 [27244 views]

By Pongpat Weesommai

การจัด HTML ให้เป็นระเบียบ เพื่อให้ชีวิตง่ายขึ้น

การเขียนโค้ดที่ดีนั้นจำเป็นต้องจัดโค้ดให้เป็นระเบียบ เพื่อให้ง่ายต่อการอ่าน ทั้งกับตัวเองและผู้อื่นที่จะมาอ่านโค้ดเรา วันนี้เราจะมาดูกันว่าการโค้ด HTML ที่ดีนั้นเป็นอย่างไร

มาทำความรู้จักกับ div element

ถ้าพูดถึง div แล้ว คงจะมีคำอธิบายตรงตัวได้ยากมาก div ย่อมาจากคำว่า division(แผนกหรือกอง) ซึ่งเอาไว้ใช้ในการเป็นภาชนะสำหรับ HTML elements อื่นๆ อีกที เพื่อความง่ายในการใช้เป็นตัวเลือกเพื่อที่จะตกแต่งด้วย CSS หรือจะทำให้มันมีการเคลื่อนไหวด้วย JavaScript อ่านการใช้ของ div แล้วก็อาจจะงงๆ หน่อย แต่ง่ายๆ ก็คือการจับเป็นก้อนกลุ่มเพื่อความง่ายในการอ่านและเป็นตัวเลือกเพื่อที่จะเอาไปทำไรต่อ

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <!-- div ใช้เพื่อเป็นการบอกว่า elements ที่อยู่ข้างในนี้เป็น navigation bar(แถบนำทาง) หรือเมนู เพื่อให้ผู้ใช้คลิกไปหน้าอื่นได้ -->
    <div>
      <ul>
        <li><a href="index.html">หน้าแรก</a></li>
        <li><a href="about-us.html">เกี่ยวกับเรา</a></li>
        <li><a href="contact-us.html">ติดต่อเรา</a></li>
      </ul>
    </div>
  </body>
</html>

แล้วเราสามารถใช้ CSS ในการเลือกแถบนำทางข้างบนได้ง่ายๆ เพื่อตกแต่งมัน

div > ul > li {
  border: 1px solid #4496d2;
  list-style: none;
}

ผลลัพธ์จากโค้ดข้างบน (มีตกแต่งเพิ่มเติมเพื่อให้รูปร่างเป็นอย่างนี้ ลองไปเล่นกันดูครับ)

บางคนคงคิดว่าแล้วทำไม เราต้องใส่ div ครอบมันในเมื่อใช้ ul > li ก็เลือกตัวที่จะแต่งได้สบายๆ อยู่แล้ว แต่ที่เราทำอย่างนี้เพื่อความง่ายในการอ่านโค้ด เพราะในหน้านี้เราอาจจะมี ul ตัวอื่นในหน้าและไม่ได้ทำหน้าที่เป็นแถบนำทาง พอเราเห็น div ครอบไว้จะได้รู้เลยว่านี้คือแถบนำทางนะ ไม่ใช่รายการทั่วไป มาถึงตอนนี้ก็อาจจะมีคนสงสัยอยู่ดี แล้วถ้ามี div ครอบ ul อีกอันล่ะ แต่ไม่ใช่แถบนำทางแต่เป็นรายการที่พิเศษสักอย่าง เราจะมาดูกันในหัวข้อถัดไปว่าจะจัดการปัญหาอย่างนี้อย่างไร

จัดระเบียบ HTML ด้วย ID

ถ้าเรามีแถบนำทางและรายการพิเศษที่ใช้โครงสร้าง div เป็นพ่อแม่และ ul เป็นลูกเหมือนกันจะทำยังไงให้มันแตกต่างกันเพื่อที่จะใช้เป็นตัวเลือกง่ายๆ เราสามารถใช้ attribute (คุณสมบัติ) id หรือย่อมาจาก unique identifier (ตัวระบุเฉพาะ) เพื่อบ่งชี้ว่า element ตัวนี้คืออะไร เช่น

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="navbar">
      <ul>
        <li><a href="index.html">หน้าแรก</a></li>
        <li><a href="about-us.html">เกี่ยวกับเรา</a></li>
        <li><a href="contact-us.html">ติดต่อเรา</a></li>
      </ul>
    </div>
    <div id="product-list">
      <ul>
        <li>iPhone X</li>
        <li>iPhone 8</li>
        <li>iPhone 8 Plus</li>
        <li>Samsung Galaxy S9/S9+</li>
      </ul>
    </div>
  </body>
</html>

จากโค้ดข้างบนเราจะเห็นได้ว่า เราใส่ id ให้ div เพื่อที่จะระบุว่า div แต่ละอันคืออะไร ในที่นี้อันแรกคือ navbar (แถบนำทาง) และอันที่สองคือ product-list (รายการผลิตภัณฑ์) ทำให้โค้ดเราอ่านง่ายขึ้นเยอะและสามารถใช้เป็นตัวเลือกง่ายๆ เช่น

#navbar > ul > li {
  border: 1px solid #4469d2;
}
#product-list > ul > li {
  color: gray;
}

สังเกตว่าการที่จะเลือกตัวที่จะตกแต่งโดย id นั้นใช้เครื่องหมาย # และตามด้วยชื่อ id จะเห็นได้ว่าทำให้โค้ดอ่านง่ายขึ้นและทำให้ชีวิตง่ายขึ้นด้วยเวลาที่จะต้องเลือกไปทำอะไรสักอย่าง

ข้อควรระวัง ทุกครั้งที่ใช้ id ชื่อๆ หนึ่งควรใช้แค่ครั้งเดียวในหน้า HTML นั้นๆ ห้ามใช้ซ้ำเป็นอันขาด

จัดระเบียบ HTML ด้วย Class

คุณสมบัติ class (ประเภท) นั้นก็คล้ายๆ id แต่แตกต่างตรงที่ว่าสามารถใช้ชื่อซ้ำกันได้ หมายความว่ายังไงไปดูที่ตัวโค้ดกันนน

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div class="product-list">
      <h3>มือถือ</h3>
      <ul>
        <li>iPhone X</li>
        <li>iPhone 8</li>
        <li>iPhone 8 Plus</li>
        <li>Samsung Galaxy S9/S9+</li>
      </ul>
    </div>
    <div class="product-list">
      <h3>คอมพิวเตอร์</h3>
      <ul>
        <li>Macbook Pro 2018 13"</li>
        <li>Macbook Pro 2018 15"</li>
        <li>Dell XPS 13</li>
        <li>Asus Zenbook Pro</li>
      </ul>
    </div>
  </body>
</html>

จากโค้ดข้างบนเราจะเห็นได้ว่ามีสอง div ที่ใช้ชื่อ class เหมือนกัน ซึ่งถ้าเป็น id จะไม่สามารถทำได้และจากการใช้ class ทำให้เราเห็นอย่างง่ายดายว่า มีรายการผลิตภัณฑ์อยู่สองอันซึ่งก็คือ มือถือและคอมพิวเตอร์ การที่เราจะเลือก class ไปตกแต่งใน CSS สามารถทำได้ตามโค้ดข้างล่าง

.product-list {
  border: 2px solid black;
}
.product-list > ul > li {
  color: gray;
}

สังเกตว่าการที่จะเลือกตัวที่จะตกแต่งโดย class นั้นเราจะใช้เครื่องหมาย . และตามด้วยชื่อ class 

ทิ้งท้าย

พอเราเรียนเรื่อง id กับ class ไปแล้ว หลายๆ คนก็คงจะสงสัยว่าเราจะเลือกใช้ id ตอนไหน แล้วเลือกใช้ class ตอนไหนกัน จากตัวอย่างข้างบนจะเห็นได้ว่าถ้ามีมากกว่าหนึ่ง element ที่จะมีคุณสมบัติคล้ายๆ กันและใช้การตกแต่งแบบเดียวกัน การใช้ class ก็เป็นอะไรที่เหมาะสมมากกว่า เพราะว่ามีมากกว่าหนึ่งรายการที่เป็นรายการผลิตภัณฑ์ แต่ถ้าอีกตัวอย่างที่มีแถบนำทางหรือเมนูอยู่อย่างเดียวแน่ๆ ในหน้านั้น ใช้ id ก็คงจะเหมาะสมกว่า

อย่างที่ผมเคยบอกหลายๆ ทีว่าการเลือกใช้อะไรสักอย่างให้ดูที่ความเหมาะสม เพราะว่ามันไม่มีอะไรที่ดีที่สุด :) หวังว่าบทความนี้จะช่วยให้ใครหลายๆ คนที่เพิ่งเริ่มเขียนเว็บจัดระเบียบโค้ดให้อ่านง่ายและใช้งานง่ายขึ้นนะครับ ถ้ามีตรงไหนไม่เข้าใจก็สามารถสอบถามมาได้ในกลุ่มหรือทางเพจ หากชอบบทความนี้รบกวนกดไลค์หรือกดแชร์ให้เพื่อนๆ ที่สนใจด้านนึ้อ่านกันด้วยเน้อออ~

ขอขอบคุณรูปภาพจาก pixabay.com from Pexels

เกี่ยวกับผู้เขียน

Author's Profile Picture
Pongpat Weesommai

เคยทำงานเป็นวิศวกรซอฟต์แวร์อยู่ที่ไต้หวัน และเคยทำงานfreelance ให้บริษัทต่างๆ เช่น aCommerce SoftbankTelecom

แสดงความคิดเห็น