การเขียนโค้ด HTML ให้มีรูปแบบสม่ำเสมอ สะอาด และเป็นระเบียบ จะช่วยให้ผู้อื่นอ่าน เข้าใจโค้ดของคุณได้ง่ายขึ้น ต่อไปนี้คือแนวทางและเคล็ดลับในการเขียนโค้ด HTML ที่ดี
ต้องประกาศประเภทของเอกสารเสมอ
ก่อนเขียน HTML ทุกครั้ง ควรประกาศประเภทเอกสาร (Document Type) เป็นบรรทัดแรกของเอกสารเสมอ ชนิดเอกสารที่ถูกต้องสำหรับ HTML คือ
<!DOCTYPE html>
ใช้ชื่อแท็กตัวพิมพ์เล็ก
HTML อนุญาตให้ใช้ตัวพิมพ์ใหญ่และเล็กผสมกันได้ในชื่อแท็ก
อย่างไรก็ตาม ขอแนะนำให้ใช้ชื่อแท็กเป็นตัวพิมพ์เล็ก เพราะว่า
- การผสมตัวพิมพ์ใหญ่และเล็กดูไม่สวย
- นักพัฒนาส่วนใหญ่ใช้ตัวพิมพ์เล็ก
- ตัวพิมพ์เล็กดูสะอาดตา
- ตัวพิมพ์เล็กพิมพ์ได้ง่ายกว่า
ตัวอย่างการเขียนโค้ดที่ดี
<body>
<p>นี่คือข้อความ</p>
</body>
ตัวอย่างการเขียนโค้ดที่ไม่ดี
<BODY>
<P>นี่คือข้อความ</P>
</BODY>
ปิดแท็ก HTML ให้ครบ
แม้ว่า HTML จะอนุญาตให้บางแท็กไม่ต้องปิด เช่น <p> แต่ในทางปฏิบัติ ควรปิดแท็กให้ครบเสมอ เพื่อหลีกเลี่ยงข้อผิดพลาดในการแสดงผล และทำให้โครงสร้างของเอกสารอ่านง่ายและถูกต้องตามมาตรฐาน
ตัวอย่างการเขียนโค้ดที่ดี
<section>
<p>นี่คือข้อความ</p>
<p>นี่คือข้อความ</p>
</section>
ตัวอย่างการเขียนโค้ดที่ไม่ดี
<section>
<p>นี่คือข้อความ
<p>นี่คือข้อความ
</section>
ใช้ชื่อแอตทริบิวต์เป็นตัวพิมพ์เล็ก
HTML อนุญาตให้ใช้ตัวพิมพ์ใหญ่และเล็กผสมกันในชื่อแอตทริบิวต์
- ใช้ตัวอักษรพิมพ์เล็ก-ใหญ่ผสมกัน แล้วดูไม่สวย
- นักพัฒนาส่วนใหญ่ใช้ตัวพิมพ์เล็ก
- ตัวพิมพ์เล็กดูสะอาดตา
- ตัวพิมพ์เล็กพิมพ์ได้ง่ายกว่า
ตัวอย่างการเขียนโค้ดที่ดี
<a href="https://www.hostatom.com">เข้าสู่หน้าเว็บของ hostatom</a>
ตัวอย่างการเขียนโค้ดที่ไม่ดี
<a HREF="https://www.hostatom.com">เข้าสู่หน้าเว็บของ hostatom</a>
ใส่เครื่องหมายคำพูดให้กับค่าของแอตทริบิวต์เสมอ
ตัวอย่างการเขียนโค้ดที่ดี
<table class="striped">
ตัวอย่างการเขียนโค้ดที่ไม่ดี
<table class=striped>
ตัวอย่างการเขียนโค้ดที่ไม่ดีมากๆ
<table class=table striped>
ระบุ alt, width, และ height ให้รูปภาพเสมอ
ควรระบุ <alt> เสมอ เพื่ออธิบายรูป เผื่อรูปโหลดไม่ขึ้นหรือช่วยให้โปรแกรมอ่านหน้าจอเข้าใจรูปได้
นอกจากนี้ ควรกำหนด width และ height เสมอ เพื่อช่วยลดการกระพริบขณะโหลดหน้าเว็บ เพราะเบราว์เซอร์จะสามารถจองพื้นที่ให้รูปภาพก่อนโหลดจริง
ตัวอย่างการเขียนโค้ดที่ดี
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
ตัวอย่างการเขียนโค้ดที่ไม่ดี
<img src="html5.gif">
ช่องว่างและเครื่องหมายเท่ากับ
HTML อนุญาตให้มีช่องว่างรอบเครื่องหมาย = ได้
แต่การไม่มีช่องว่างจะอ่านง่ายกว่าและดูเป็นระเบียบมากกว่า
ตัวอย่างการเขียนโค้ดที่ดี
<link rel="stylesheet" href="styles.css">
ตัวอย่างการเขียนโค้ดที่ไม่ดี
<link rel = "stylesheet" href = "styles.css">
หลีกเลี่ยงการเขียนโค้ดบรรทัดยาวๆ
เมื่อใช้ HTML editor การต้องเลื่อนซ้ายขวาเพื่ออ่านโค้ดยาว ๆ อาจทำได้ไม่สะดวก
พยายามอย่าให้บรรทัดโค้ดยาวเกินไป
เว้นบรรทัดและการย่อหน้า
อย่าเว้นบรรทัด เว้นวรรค หรือย่อหน้าโดยไม่มีเหตุผล
- อย่าเว้นบรรทัดหรือย่อหน้าโดยไม่จำเป็น
- เว้นบรรทัดเมื่อต้องการแยกกลุ่มโค้ด เช่น section หรือ block
- แนะนำให้ย่อหน้าด้วย space 2 ช่อง แทนการใช้ปุ่ม tab
ตัวอย่างการเขียนโค้ดที่ดี
<body>
<h1>เมืองที่เป็นที่รู้จัก</h1>
<h2>โตเกียว</h2>
<p>เมืองหลวงของญี่ปุ่น</p>
<h2>ลอนดอน</h2>
<p>เมืองหลวงของอังกฤษ</p>
</body>
ตัวอย่างการเขียนโค้ดที่ไม่ดี
<body>
<h1>เมืองที่เป็นที่รู้จัก</h1>
<h2>โตเกียว</h2><p>เมืองหลวงของญี่ปุ่น</p>
<h2>ลอนดอน</h2><p>เมืองหลวงของอังกฤษ</p>
</body>
ตัวอย่างการเขียนโค้ดสำหรับตารางที่ดี
<table>
<tr>
<th>ชื่อ</th>
<th>คำอธิบาย</th>
</tr>
<tr>
<td>ก</td>
<td>คำอธิบายเกี่ยวกับ ก</td>
</tr>
</table>
ตัวอย่างการเขียนโค้ดสำหรับรายการที่ดี
<ul>
<li>ลอนดอน</li>
<li>ปารีส</li>
<li>โตเกียว</li>
</ul>
อย่าลืมแท็ก <title>
แท็ก <title> เป็น แท็กที่จำเป็นต้องมี ในทุกหน้า HTML
เนื้อหาภายใน <title> มีความสำคัญมากต่อการเพิ่มประสิทธิภาพการค้นหา (SEO)
ชื่อหน้าจะถูกใช้โดยอัลกอริทึมของเครื่องมือค้นหาในการตัดสินลำดับเมื่อแสดงผลการค้นหา
แท็ก <title> มีหน้าที่ดังนี้
- กำหนดชื่อให้แสดงในแถบเครื่องมือของเบราว์เซอร์
- แสดงชื่อเมื่อหน้าเว็บถูกเพิ่มเป็นรายการโปรด
- แสดงชื่อในผลการค้นหาของเครื่องมือค้นหา
<title>โฮสอะตอมบริการ Web Hosting ชื่อดังในไทย</title>
การละ <html> และ <body> ได้หรือไม่ ?
แนะนำควรใส่ไว้เสมอ เพื่อหลีกเลี่ยงปัญหาในเบราว์เซอร์เก่า หรือ DOM/XML
<!DOCTYPE html>
<head>
<title>หัวเรื่อง</title>
</head>
<h1>นี่คือหัวข้อ</h1>
<p>นี่คือข้อความ</p>
แท็ก <head> ควรมีเสมอ
ละได้ แต่ แนะนำใช้แท็ก <head> เสมอ
เบราว์เซอร์จะเพิ่มองค์ประกอบทั้งหมดก่อนแท็ก <body> ลงใน <head> โดยอัตโนมัติ
<!DOCTYPE html>
<html>
<title>หัวเรื่อง</title>
<body>
<h1>นี่คือหัวข้อ</h1>
<p>นี่คือข้อความ</p>
</body>
</html>
ปิดแท็ก HTML ที่ว่างเปล่าหรือไม่ ?
ใน HTML การปิดแท็กที่ว่างเปล่าเป็นสิ่งที่เลือกได้ ไม่จำเป็นต้องทำ
อนุญาตให้ใช้แบบนี้
<meta charset="utf-8">
หรือแบบนี้ก็อนุญาต
<meta charset="utf-8" />
หากคุณคาดว่าซอฟต์แวร์ XML/XHTML จะเข้าถึงหน้าเว็บของคุณ
ให้คงเครื่องหมาย / ไว้ เพราะมันเป็นสิ่งจำเป็นใน XML และ XHTML
เพิ่มแอตทริบิวต์ lang
คุณควรใส่แอตทริบิวต์ lang ภายในแท็ก <html> เสมอ
เพื่อประกาศภาษาของหน้าเว็บ ซึ่งช่วยให้เครื่องมือค้นหาและเบราว์เซอร์ทำงานได้ถูกต้อง
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
ข้อมูลเมตา (Meta Data)
เพื่อให้การแปลผลและการจัดทำดัชนีโดยเครื่องมือค้นหาทำงานได้ถูกต้อง
ควรกำหนดทั้งภาษาและการเข้ารหัสอักขระ (charset) ให้เร็วที่สุดในเอกสาร HTML
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
การตั้งค่า Viewport (Setting The Viewport)
Viewport คือพื้นที่แสดงผลของเว็บในแต่ละอุปกรณ์
เพื่อให้เว็บไซต์แสดงผลดีในมือถือ ให้เพิ่มแท็กนี้ทุกครั้ง
คุณควรรวมแท็ก <meta> ต่อไปนี้ในทุกหน้าเว็บของคุณ
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- ส่วน
width=device-widthกำหนดให้ความกว้างเท่ากับหน้าจออุปกรณ์ - ส่วน
initial-scale=1.0กำหนดระดับการซูมเริ่มต้นเมื่อหน้าเว็บโหลด
ตัวอย่าง ของเว็บที่มี Meta Viewport กับไม่มี Meta Viewport
คำอธิบายใน HTML (HTML Comments)
ความคิดเห็นสั้น ๆ ควรเขียนในบรรทัดเดียว เช่น
<!-- This is a comment -->
ความคิดเห็นที่มีหลายบรรทัด ควรเขียนแบบนี้
<!--
This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example.
-->
การใช้สไตล์ชีต (Using Style Sheets)
ใช้ไวยากรณ์ที่เรียบง่ายในการเชื่อมโยงกับไฟล์สไตล์ชีต ไม่จำเป็นต้องใส่ type
<link rel="stylesheet" href="styles.css">
กฎ CSS ที่สั้นสามารถเขียนแบบย่อได้ เช่น
p.intro {font-family:Verdana;font-size:16px;}
ส่วนกฎ CSS ที่ยาวควรเขียนแยกหลายบรรทัด เช่น
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
แนวทางที่แนะนำ
- วงเล็บเปิด
{ควรอยู่บรรทัดเดียวกับตัวเลือก (selector) - มีช่องว่างหนึ่งช่องก่อนวงเล็บเปิด
- ใช้การเยื้องสองช่องว่าง
- ใช้เครื่องหมาย
;หลังแต่ละคู่ property-value รวมถึงบรรทัดสุดท้าย - ใช้เครื่องหมายอัญประกาศเฉพาะเมื่อค่ามีช่องว่าง
- วงเล็บปิด
}ควรอยู่บรรทัดใหม่โดยไม่มีช่องว่างนำหน้า
การโหลด JavaScript ใน HTML
ใช้รูปแบบง่าย ๆ ในการโหลดสคริปต์ภายนอก ไม่จำเป็นต้องใส่ type
<script src="myscript.js">
การเข้าถึงองค์ประกอบ HTML ด้วย JavaScript
คำสั่ง JavaScript สองบรรทัดต่อไปนี้จะให้ผลลัพธ์ต่างกัน
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML = "Hello";
ใช้ชื่อไฟล์ตัวพิมพ์เล็ก
ควรใช้ชื่อไฟล์เป็น ตัวพิมพ์เล็กทั้งหมด เพราะบางเซิร์ฟเวอร์ (เช่น Apache, Unix) แยกแยะตัวพิมพ์เล็ก-ใหญ่ หากใช้ปนกันอาจทำให้ไฟล์ไม่แสดงหรือเว็บพังได้เมื่อย้ายเซิร์ฟเวอร์ ดังนั้นควรตั้งชื่อไฟล์ให้เป็นตัวพิมพ์เล็กเสมอ (lowercase)
ส่วนขยายไฟล์ (File Extensions)
- ไฟล์ HTML ควรมีนามสกุล
.htmlแต่.htmก็อนุญาต - ไฟล์ CSS ควรมีนามสกุล
.css - ไฟล์ JavaScript ควรมีนามสกุล
.js
ความแตกต่างระหว่าง .htm และ .html?
ไม่มีความแตกต่างระหว่างนามสกุลไฟล์ .htm และ .html
ทั้งสองแบบจะถูกมองว่าเป็นไฟล์ HTML เหมือนกันโดยเว็บเบราว์เซอร์และเว็บเซิร์ฟเวอร์ทุกตัว
ชื่อไฟล์เริ่มต้น (Default Filenames)
ถ้า URL ไม่มีชื่อไฟล์ ตัวอย่างเช่น https://www.hostatom.com/
เซิร์ฟเวอร์จะโหลดไฟล์เริ่มต้นให้อัตโนมัติ เช่น index.html หรือ default.html แต่ละเซิร์ฟเวอร์ตั้งชื่อไฟล์เริ่มต้นไม่เหมือนกัน บางที่ใช้เฉพาะ index.html ดังนั้นควรตั้งชื่อไฟล์หน้าแรกให้ตรงกับการตั้งค่าของเซิร์ฟเวอร์ เพื่อให้เว็บเปิดได้แน่นอน