Sun Jul 15 01:39:47 2018 [26966 views]
การจัด 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
การเขียนโค้ดที่ดีนั้นจำเป็นต้องจัดโค้ดให้เป็นระเบียบ เพื่อให้ง่ายต่อการอ่าน ทั้งกับตัวเองและผู้อื่นที่จะมาอ่านโค้ดเรา วันนี้เราจะมาดูกันว่าการโค้ด 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
เกี่ยวกับผู้เขียน
Pongpat Weesommai
เคยทำงานเป็นวิศวกรซอฟต์แวร์อยู่ที่ไต้หวัน และเคยทำงานfreelance ให้บริษัทต่างๆ เช่น aCommerce SoftbankTelecom
แสดงความคิดเห็น
Pongpat Weesommai
เคยทำงานเป็นวิศวกรซอฟต์แวร์อยู่ที่ไต้หวัน และเคยทำงานfreelance ให้บริษัทต่างๆ เช่น aCommerce SoftbankTelecom