HTML Style Guide

❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯

HTML Code สามารถเขียนให้ดูดี เป็นระเบียบได้ เมื่อมีผู้มาดูโค้ดที่เขียนขึ้นนั้นจะได้ดูแล้วเข้าใจในทันที เรามาดูวิธีการเขียนโค้ดที่ดีของ HTML กัน

ต้องมีการประกาศประเภทของเอกสารเสมอ

การเขียนโค้ดด้วย HTML บรรทัดแรกจะต้องมีการประกาศชนิดของเอกสารก่อนเสมอ โดยการประกาศที่ถูกต้องคือ

<!DOCTYPE html>

ตั้งชื่อ Element ด้วยตัวพิมพ์เล็ก

ปกติแล้วการเขียนโค้ด HTML Element จะสามารถใช้ตัวอักษรพิมพ์เล็ก หรือใหญ่ผสมกันก็ได้ แต่แนะนำให้ใช้ตัวพิมพ์เล็กดีกว่าเพราะ

  • หากใช้ตัวอักษรพิมพ์เล็ก หรือใหญ่ผสมกัน ในการตั้งชื่อจะดูไม่ดี อาจเกิดความสับสนได้
  • นักเขียนโปรแกรมหรือผู้พัฒนาส่วนใหญ่นิยมใช้ตัวพิมพ์เล็ก
  • การใช้ตัวพิมพ์เล็กทำให้ดูสะอาดตา
  • ตัวพิมพ์เล็กจะเขียนได้ง่ายกว่า

ตัวอย่างการเขียนโค้ดที่ดี

<body>
<p>นี่คือข้อความ</p>
</body>

ตัวอย่างการเขียนโค้ดที่ไม่ดี

<BODY>
<P>นี่คือข้อความ</P>
</BODY>

ปิดทุก HTML Element เสมอ

อันที่จริงการเขียนโค้ด HTML ไม่จำเป็นจะต้องปิดทุก Element เสมอไป อย่างเช่น Element <p>
แต่อย่างไรก็ตามแต่ แนะนำให้ปิดทุก Element จะดีกว่า

ตัวอย่างการเขียนโค้ดที่ดี

<section>
  <p>นี่คือข้อความ</p>
  <p>นี่คือข้อความ</p>
</section>

ตัวอย่างการเขียนโค้ดที่ไม่ดี

<section>
  <p>นี่คือข้อความ
  <p>นี่คือข้อความ
</section>

ชื่อ Attribute ใช้ตัวเล็ก

ปกติแล้วการเขียนโค้ด HTML Attribute จะสามารถใช้ตัวอักษรพิมพ์เล็ก หรือใหญ่ผสมกันก็ได้ แต่แนะนำให้ใช้ตัวพิมพ์เล็กดีกว่าเพราะ

  • หากใช้ตัวอักษรพิมพ์เล็ก หรือใหญ่ผสมกัน ในการตั้งชื่อจะดูไม่ดี อาจเกิดความสับสนได้
  • นักเขียนโปรแกรมหรือผู้พัฒนาส่วนใหญ่นิยมใช้ตัวพิมพ์เล็ก
  • การใช้ตัวพิมพ์เล็กทำให้ดูสะอาดตา
  • ตัวพิมพ์เล็กจะเขียนได้ง่ายกว่า

ตัวอย่างการเขียนโค้ดที่ดี

<a href="https://www.hostatom.com">เข้าสู่หน้าเว็บของ hostatom</a>

ตัวอย่างการเขียนโค้ดที่ไม่ดี

<a HREF="https://www.hostatom.com">เข้าสู่หน้าเว็บของ hostatom</a>

อ้างอิงค่า Quote Attribute เสมอ

เนื่องด้วย HTML จะอนุญาตให้ค่าของ Attribute นั้นไม่ต้องใส่เครื่องหมายคำพูด (Quotes) ก็ได้ แต่เราแนะนำให้ใส่เครื่องหมายคำพูด (Quotes) Attribute เสมอ เพราะว่า

  • นักพัฒนาหรือนักเขียนโปรแกรมนิยมใส่เครื่องหมายคำพูด (Quotes) ให้กับ Attribute เสมอ
  • การใส่เครื่องหมายคำพูด (Quotes) ทำให้ง่ายต่อการอ่านโค้ด
  • หากมีการเว้นวรรค หรือช่องว่างจะต้องใส่เครื่องหมายคำพูด (Quotes) เสมอ

ตัวอย่างการเขียนโค้ดที่ดี

<table class="striped">

ตัวอย่างการเขียนโค้ดที่ไม่ดี

<table class=striped>

ตัวอย่างการเขียนโค้ดที่ไม่ดีมากๆ

ตัวอย่างโค้ดด้านล่างนี้จะไม่สามารถรันผ่านได้ เพราะการเว้นวรรค หรือช่องว่าง

<table class=table striped>

ระบุค่า alt, width และ height ของภาพเสมอ

แนะนำให้ระบุ alt (คำอธิบายภาพ)ของภาพเสมอ เพราะ Attribute นี้สำคัญเป็นอย่างมากเพราะจะถูกนำมาในกรณีที่ภาพไม่แสดง นอกจากนี้ จะต้องระบุค่า width และ height ของรูปเสมอ ซึ่งจะช่วยในลด Flicking เนื่องจากเบราว์เซอร์จะได้จองพื้นที่ไว้สำหรับรูปภาพก่อนที่จะทำการโหลด

ตัวอย่างการเขียนโค้ดที่ดี

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

ตัวอย่างการเขียนโค้ดที่ไม่ดี

<img src="html5.gif">

ช่องว่างและเครื่องหมายเท่ากับ (=)

HTML อนุญาตให้มีช่องว่างระหว่างเครื่องหมายเท่ากับ (=) แต่ถ้าจะให้ดีจริงๆ ควรเขียนติดกันจะดีกว่า เพราะจะสามารถจัดการได้ง่ายและ จัดกลุ่ม Entity ได้ง่ายกว่า

ตัวอย่างการเขียนโค้ดที่ดี

<link rel="stylesheet" href="styles.css">

ตัวอย่างการเขียนโค้ดที่ไม่ดี

<link rel = "stylesheet" href = "styles.css">

อย่าเขียนโค้ดด้วยบรรทัดยาวๆ

อย่าเขียนโค้ดด้วยบรรทัดยาวๆ เพราะเมื่อมีการแก้ไข HTML ด้วย โปรแกรมแก้ไข HTML การเลื่อนหน้าจอไปมา ซ้าย ขวา อาจจะทำไม่สะดวก

การเว้นบรรทัดและการเยื้อง

อย่าเพิ่มบรรทัด เว้นวรรค หรือเยื้องโดยไม่จำเป็น ดังนั้นเพื่อให้โค้ดอ่านง่ายสบายตา ควรเพิ่มบรรทัดในกรณีที่แยก Logical Code หรือ Block ของโค้ดขนาดใหญ่

และเพื่อให้โค้ดที่เขียนอ่านได้ง่ายมากขึ้น ควรเพิ่มการเยื้องโดยเคาะปุ่ม Space Bar 2 ครั้ง อย่าใช้ปุ่ม Tab!!

ตัวอย่างการเขียนโค้ดที่ดี

<body>

<h1>เมืองที่เป็นที่รู้จัก</h1>

<h2>โตเกียว</h2>
<p>โตเกียวเป็นเมืองหลวงของญี่ปุ่น และเป็นเมืองที่มีประชากรมากที่สุดของญี่ปุ่น</p>

<h2>ลอนดอน</h2>
<p>ลอนดอนเป็นเมืองหลวงของประเทศอังกฤษ และเป็นเมืองที่มีประชากรมากที่สุดของอังกฤษ</p>

<h2>ปารีส</h2>
<p>ลอนดอนเป็นเมืองหลวงของประเทศอังกฤษ และเป็นเมืองที่มีประชากรมากที่สุดของอังกฤษ</p>

</body>

ตัวอย่างการเขียนโค้ดที่ไม่ดี

<body>
<h1>เมืองที่เป็นที่รู้จัก</h1>
<h2>โตเกียว</h2><p>โตเกียวเป็นเมืองหลวงของญี่ปุ่น และเป็นเมืองที่มีประชากรมากที่สุดของญี่ปุ่น</p>
<h2>ลอนดอน</h2><p>ลอนดอนเป็นเมืองหลวงของประเทศอังกฤษ และเป็นเมืองที่มีประชากรมากที่สุดของอังกฤษ</p>
<h2>ปารีส</h2><p>ลอนดอนเป็นเมืองหลวงของประเทศอังกฤษ และเป็นเมืองที่มีประชากรมากที่สุดของอังกฤษ</p>
</body>

ตัวอย่างการเขียนโค้ดสำหรับตารางที่ดี

<table>
  <tr>
    <th>ชื่อ</th>
    <th>คำอธิบาย</th>
  </tr>
  <tr>
    <td>ก</td>
    <td>คำอธิบายเกี่ยวกับ ก</td>
  </tr>
  <tr>
    <td>ข</td>
    <td>คำอธิบายเกี่ยวกับ ข</td>
  </tr>
</table>

ตัวอย่างการเขียนโค้ดสำหรับรายการที่ดี

<ul>
  <li>ลอนดอน</li>
  <li>ปารีส</li>
  <li>โตเกียว</li>
</ul>

ห้ามลืมใส่ Element <title>

Element <title> นั้นเป็นสิ่งจำเป็นสำหรับ HTML ข้อความ Title สำคัญมากในการทำ SEO ซึ่ง AI ของ Search Engine จะใช้ Title ในการจัดอันดับผลการค้นหา ซึ่ง <title> มีประโยชน์ดังนี้

  • ใช้แสดงหัวเรื่องบน Browesr Toolbar
  • การใส่ Title สำหรับหน้าเพจ จะเมื่อใส่เพิ่มเข้าไปใน Favorite
  • แสดงชื่อ Title ของหน้าเพจโดยจะแสดงผลในหน้าผลการค้นหา

ดังนั้นจึงควรตั้งชื่อ Title ให้ถูกต้อง และมีความหมายมากที่สุด

<title>โฮสอะตอมบริการ Web Hositng ชื่อดังในไทย</title>

หากลืมใส่ <html> และ <body> ล่ะ?

แม้ไม่มี Tag <html> และ <body> หน้าเพจ HTML ก็จะยังสามารถใช้งานได้ แต่อย่างไรก็ดี ควรมี Tag <html> และ <body> เสมอ เพราะ

  • หากไม่มี Tag <body> หากไปเปิดในเบราว์เซอร์เวอร์ชั่นเก่าๆ หน้าเพจอาจไม่แสดงผล
  • หากไม่มี Tag <html> และ <body> อาจทำให้โปรแกรม DOM และ XML ใช้งานไม่ได้

ตัวอย่าง

<!DOCTYPE html>
<head>
  <title>หัวเรื่อง</title>
</head>

<h1>นี่คือหัวข้อ</h1>
<p>นี่คือข้อความ</p>
ลองดูสิ ❱

หากไม่ใส่ <head> ?

Tag <head> สามารถละเว้นได้ หรือไม่ใส่ก็ได้ ซึ่งเบราว์เซอร์จะเพิ่ม Element ทั้งหมดก่อน Tag <body> เป็นค่าเริ่มต้นของ <head> แทน แต่อย่างไรก็ดี แนะนำว่าควรใส่ Tag <head> เสมอ

ตัวอย่าง

<!DOCTYPE html>
<html>
<title>หัวเรื่อง</title>
<body>

<h1>นี่คือหัวข้อ</h1>
<p>นี่คือข้อความ</p>
</body>
</html>
ลองดูสิ ❱

ต้องปิด Elements HTML ที่ว่างเปล่าด้วยหรือไม่?

ใน HTML คุณสามารถเลือกปิด Elements HTML ที่ว่างเปล่าด้วยได้ ซึ่งหากคุณคาดหวังว่าโปรแกรม XML/XHTML สามารถเข้าถึงเพจที่สร้างได้ ให้ใส่เครื่องหมาย (/) ลงไปปิดท้าย เพราะโปรแกรม XML/XHTML เครื่องหมาย (/)

ที่อนุญาตให้ใช้

<meta charset="utf-8">

แบบนี้ก็ใช้ได้เช่นกัน

<meta charset="utf-8" />

การเพิ่ม Attribute Lang

Attribute Lang ปกติแล้วจะใส่ไว้ใน Tag <html> เสมอ ซึ่ง Attribute Lang นี้มีไว้เพื่อประกาศภาษาของหน้าเพจ และช่วยให้ Search Engine ในเรื่องของการค้นหาและการแสดงผลบนเบราว์เซอร์

<!DOCTYPE html>
<html lang="en-th">
<head>
  <title>หัวเรื่อง</title>
</head>
<body>

<h1>นี่คือหัวข้อ</h1>
<p>นี่คือข้อความ</p>

</body>
</html>
ลองดูสิ ❱

Meta Data

เพื่อให้แน่ใจว่า Search Engine ได้จัดทำ Index และตีความในเรื่องของภาษา หรืออักขระ <meta charset=”charset“> ได้ถูกต้อง ควรจะต้องกำหนดไว้ในส่วนบนของ HTML

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>

การตั้งค่า Viewport

Viewport จะเป็นการแสดงผลของหน้าเว็บ ซึ่งจะแตกต่างต่างกันไปตามอุปกรณ์ อย่างเช่น หากดูหน้าเว็บผ่านทางมือถือ หน้าเว็บเพจก็จะต้องเล็กกว่าบนจอคอมพิวเตอร์

ดังนั้นผู้พัฒนาจึงควรใส่ Element <meta> ลงในหน้าเว็บด้วย

<meta name="viewport" content="width=device-width, initial-scale=1.0">

จากคำสั่งข้างบนเรามาดูคำอธิบายของคำสั่งกัน

width=device-width จะใช้กำหนดความกว้างของหน้าจออุปกรณ์

initial-scale=1.0 จะเป็นการกำหนดระดับการซูมเมื่อมีการโหลดหน้าเว็บบนเบราว์เซอร์เป็นครั้งแรก

นี่คือภาพตัวอย่างของเว็บที่มี Meta Viewport กับไม่มี Meta Viewport

ตัวอย่างที่ไม่มีแท็ก Viewport

ตัวอย่างมีแท็ก Viewport

Tip: หากเรียกดูหน้าเว็บนี้ผ่านโทรศัพท์ หรือ Tablet สามารถคลิกลิงก์เพื่อดูความแตกต่างของภาพทั้ง 2 ได้

HTML Comments

ถ้าเป็น Comments สั้นๆ จะเขียนแบบนี้

<!-- This is a comment -->

ส่วน Comments ยาวๆ จะเขียนแบบนี้

<!--
  This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example.
-->

หากต้องการให้ Comments ยาวๆ ดูง่าย แนะนำให้มีเคาะ Space Bar 2 ทีแล้วค่อยพิมพ์ข้อความเยื้องเข้าไป

การใช้ Style Sheets

ใช้ Syntax ง่ายๆ เพื่อลิงก์ไปยัง Style Sheets (ไม่จำเป็นต้องใช้ Attribute type)

<link rel="stylesheet" href="styles.css">

ด้วยกฎของ CSS สามารถเขียนแบบสั้นๆ ได้ ดังนี้

p.intro {font-family:Verdana;font-size:16em;}

หากเขียนแบบยาวๆ ตามกฎของ CSS สามารถเขียนได้ ดังนี้

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • วางวงเล็บปีกกาให้อยู้ในบรรทัดเดียวกันกับส่วนที่เลือกใช้งาน
  • เคาะเว้นวรรค 1 ทีก่อนที่จะใส่เครื่องหมายปีกกาเปิด
  • เมื่อขึ้นบรรทัดใหม่ให้เคาะเว้นวรรค 2 ที
  • ใส่เครื่องหมาย Semicolon (;) หลังค่า Property ในแต่ละคู่ รวมไปถึงค่าคู่สุดท้ายด้วย
  • ใส่เครื่องหมายคำพูด (” “) ล้อมรอบค่า เมื่อค่านั้นเป็นค่าว่างเท่านั้น
  • ใส่วงเล็บปีกกาปิดในบรรทัดใหม่โดยไม่ต้องเคาะเว้นวรรค

การ Load ใช้งาน JavaScript ใน HTML

ใช้ Syntax ง่ายๆ สำหรับการโหลด Script จากภายนอก (ไม่จำเป็นต้องใช้ Attribute type)

<script src="myscript.js">

การเข้าถึง Element HTML ด้วย JavaScript

หากใช้โค้ด HTML ที่ไม่ดี (Untidy) อาจทำให้ JavaScript แสดงผลผิดพลาดได้ เรามาดูการใช้งานคำสั่ง JavaScript ด้านล่างนี้กัน

<!DOCTYPE html>
<html>
<body>

<p id="Demo">ข้อความที่ 1.</p>
<p id="demo">ข้อความที่ 2.</p>

<script>
// ให้แสดงเฉพาะข้อความที่ 2 เท่านั้น
document.getElementById("demo").innerHTML = "สวัสดี";

</script>

</body>
</html>
ลองดูสิ ❱

ตั้งชื่อไฟล์ด้วยตัวพิมพ์เล็ก

บาง Server อย่าง Apache, Unix ต้องระวังในเรื่องของชื่อไฟล์ที่ใช้ตัวพิมพ์เล็ก ตัวพิมพ์ใหญ่ ยกตัวอย่างเช่น ชื่อไฟล์ “london.jpg” หากพิมพ์ว่า “London.jpg” ก็จะไม่พบไฟล์

แต่บาง Server อย่าง Microsoft, IIS ไม่ซีเรียสเรื่องการใช้ตัวพิมพ์เล็ก ตัวพิมพ์ใหญ่ ยกตัวอย่างเช่น ชื่อไฟล์ “london.jpg” หากพิมพ์ว่า “London.jpg” ก็จะยังสามารถเจอไฟล์

ซึ่งหากตั้งชื่อไฟล์โดยใช้ตัวเล็กตัวใหญ่ผสมกัน จึงต้องระวังเป็นอย่างยิ่ง เพราะหากมีการย้าย Server อาจส่งผลทำให้ไฟล์นั้นไม่สามารถใช้งานได้ ส่งผลให้เว็บที่สร้างขึ้นพังได้

เพื่อป้องกันปัญหา แนะนำให้ใช้ตัวพิมพ์เล็กเสมอ!!!

File Extensions (นามสกุลไฟล์)

ไฟล์ HTML จะต้องมีนามสกุลเป็น .html (หรือจะใช้เป็น .htm ก็ได้)

ไฟล์ CSS จะต้องใช้นามสกุล .css

ไฟล์ JavaScript ต้องใช้นามสกุล .js

ความแตกต่างระหว่าง .htm กับ .html

สำหรับความแตกต่างระหว่าง .htm กับ .html นั้น ไม่มีความแตกต่างกันเลย สามารถใช้งานได้เหมือนกัน ซึ่ง Web Browser และ Server จะถือว่าทั้งสองนามสกุลเป็นไฟล์ HTML

Default Filenames

เมื่อไม่ได้ระบุชื่อไฟล์ต่อท้าย URL อย่างเช่น “https://www.hostatom.com” ดังนั้นชื่อไฟล์เริ่มต้น (Default Filenames) คือ “index.html”, “index.htm”, “default.html” หรือ “default.html”

ซึ่งหาก Server มีการตั้งค่าไฟล์เริ่มต้นเป็น “index.html” ดังนั้นชื่อไฟล์จะต้องเป็น “index.html” ไม่ใช่ “default.html” อย่างไรก็ตาม Server สามารถกำหนดไฟล์เริ่มต้นได้มากกว่า 1 ไฟล์ ซึ่งผู้พัฒนาสามารถตั้งชื่อไฟล์เริ่มต้นได้เท่าไหร่ก็ได้

❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯