อนุสัญญา Coding HTML
นักพัฒนาเว็บมักจะมีความไม่แน่นอนเกี่ยวกับรูปแบบการเข้ารหัสและไวยากรณ์ที่จะใช้ในรูปแบบ HTML
ระหว่างปี 2000 และปี 2010 นักพัฒนาเว็บหลายแปลงจาก HTML เพื่อ XHTML
ด้วย XHTML, นักพัฒนาจะถูกบังคับให้เขียนถูกต้องและ "well-formed" รหัส
HTML5 เป็นเลอะเทอะอีกเล็กน้อยเมื่อมันมาถึงการตรวจสอบรหัส
ด้วย HTML5 คุณต้องสร้างการปฏิบัติที่ดีที่สุดของคุณเอง, คู่มือสไตล์และการประชุมการเข้ารหัส
Be Smart และอนาคตหลักฐาน
การใช้งานที่เป็นผลเนื่องมาจากรูปแบบทำให้มันง่ายขึ้นสำหรับคนอื่น ๆ ที่จะเข้าใจและใช้ HTML ของคุณ
ในอนาคตโปรแกรมเช่นผู้อ่าน XML อาจต้องการที่จะอ่าน HTML ของคุณ
การใช้รูปแบบที่ดี "close to XHTML" ไวยากรณ์สามารถเป็นสมาร์ท
เสมอสไตล์ของคุณสมาร์ทเป็นระเบียบเรียบร้อยสะอาดและรูปแบบที่ดี
ใช้ที่ถูกต้องประเภทเอกสาร
เสมอประกาศประเภทเอกสารเป็นบรรทัดแรกในเอกสารของคุณ:
<!DOCTYPE html>ถ้าคุณต้องการที่สอดคล้องกับแท็กกรณีที่ต่ำกว่า, คุณสามารถใช้:
<!DOCTYPE html>ใช้กรณีที่ต่ำกว่าธาตุชื่อ
HTML5 ช่วยให้การผสมตัวอักษรพิมพ์ใหญ่และตัวพิมพ์เล็กในชื่อองค์ประกอบ
เราขอแนะนำให้ใช้ชื่อองค์ประกอบตัวพิมพ์เล็ก:
- ผสมชื่อพิมพ์ใหญ่และเล็กจะไม่ดี
- นักพัฒนาจะใช้ในการใช้ชื่อตัวพิมพ์เล็ก (as in XHTML)
- ทำความสะอาดดูตัวพิมพ์เล็ก
- ตัวพิมพ์เล็กจะง่ายต่อการเขียน
แย่:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>ที่เลวร้ายมาก:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>ดี:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>ปิดทุกองค์ประกอบ HTML
ใน HTML5 คุณไม่ต้องปิดองค์ประกอบทั้งหมด (for example the <p> element)
เราขอแนะนำให้ปิดองค์ประกอบ HTML ทั้งหมด:
มองไม่ดี:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>ดูดี:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>ปิดที่ว่างเปล่าองค์ประกอบ HTML
ใน HTML5 ก็เป็นตัวเลือกที่จะปิดองค์ประกอบที่ว่างเปล่า
นี้ได้รับอนุญาต:
<meta charset="utf-8">นี้ได้รับอนุญาตเพิ่มเติม:
<meta charset="utf-8" />ทับ (/) จะต้อง XHTML และ XML
หากคุณคาดว่าซอฟต์แวร์ XML เพื่อเข้าถึงหน้าเว็บของคุณก็อาจจะมีความคิดที่ดีที่จะให้มัน
ใช้กรณีที่ต่ำกว่า Attribute ชื่อ
HTML5 ช่วยให้การผสมตัวอักษรพิมพ์ใหญ่และตัวพิมพ์เล็กในชื่อแอตทริบิวต์
เราขอแนะนำให้ใช้ชื่อแอตทริบิวต์พิมพ์เล็ก:
- ผสมชื่อพิมพ์ใหญ่และเล็กจะไม่ดี
- นักพัฒนาจะใช้ในการใช้ชื่อตัวพิมพ์เล็ก (as in XHTML)
- ทำความสะอาดดูตัวพิมพ์เล็ก
- ตัวพิมพ์เล็กจะง่ายต่อการเขียน
มองไม่ดี:
<div CLASS="menu">ดูดี:
<div class="menu">ค่าอ้างแอตทริบิวต์
HTML5 ช่วยให้ค่าแอตทริบิวต์ไม่ทราบราคา
เราขอแนะนำให้ quoting ค่าแอตทริบิวต์:
- คุณต้องใช้คำพูดถ้าค่ามีช่องว่าง
- ผสมรูปแบบจะไม่ดี
- ค่าที่ยกมาจะง่ายต่อการอ่าน
นี้จะไม่ทำงานเพราะค่าที่มีช่องว่าง:
<table class=table striped>นี้จะทำงาน:
<table class="table striped">แอตทริบิวต์ภาพ
ควรใช้ alt แอตทริบิวต์ที่มีภาพ มันเป็นสิ่งสำคัญเมื่อภาพไม่สามารถดูได้
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">มักจะกำหนดขนาดภาพ จะช่วยลดริบหรี่เพราะเบราว์เซอร์สามารถจองพื้นที่สำหรับภาพก่อนที่พวกเขาจะถูกโหลด
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px ">ช่องว่างและป้ายที่เท่าเทียมกัน
ช่องว่างรอบเครื่องหมายเท่ากับเป็นกฎหมาย:
<link rel = "stylesheet" href = "styles.css">แต่พื้นที่น้อยง่ายต่อการอ่านและกลุ่มหน่วยงานดีกว่ากัน:
<link rel="stylesheet" href="styles.css">หลีกเลี่ยงเส้นรหัสยาว
เมื่อใช้โปรแกรมแก้ไข HTML ก็ไม่สะดวกที่จะเลื่อนไปทางขวาและซ้ายในการอ่านรหัส HTML
พยายามที่จะหลีกเลี่ยงเส้นรหัสนานกว่า 80 ตัวอักษร
บรรทัดว่างและเยื้อง
อย่าเพิ่มบรรทัดว่างเปล่าโดยไม่มีเหตุผล
สำหรับการอ่านเพิ่มบรรทัดว่างเปล่าที่จะแยกบล็อกรหัสขนาดใหญ่หรือตรรกะ
สำหรับการอ่านเพิ่ม 2 ช่องว่างของการเยื้อง อย่าใช้แท็บ
อย่าใช้บรรทัดที่ว่างเปล่าที่ไม่จำเป็นและการเยื้อง มันไม่จำเป็นที่จะใช้บรรทัดว่างระหว่างรายการสั้นและที่เกี่ยวข้อง มันไม่จำเป็นที่จะเยื้องทุกองค์ประกอบ:
ไม่จำเป็น:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>
</body>ที่ดีกว่า:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>
</body>ตัวอย่างตาราง:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>ตัวอย่างรายการ:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>ถนัด <html> และ <body> ?
ในมาตรฐาน HTML5 ที่ <html> แท็กและ <body> แท็กสามารถละเว้น
รหัสต่อไปนี้จะตรวจสอบเป็น HTML5:
ตัวอย่าง
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p> ลองตัวเอง» เราไม่แนะนำให้ถนัด <html> และ <body> แท็ก
<html> องค์ประกอบรากเอกสาร มันเป็นสถานที่ที่แนะนำสำหรับการระบุภาษาหน้า:
<!DOCTYPE html>
<html lang="en-US">ประกาศภาษาเป็นสิ่งสำคัญสำหรับการใช้งานการเข้าถึง (screen readers) และเครื่องมือค้นหา
ถนัด <html> หรือ <body> สามารถผิดพลาด DOM และซอฟต์แวร์ XML
ถนัด <body> สามารถผลิตข้อผิดพลาดในเบราว์เซอร์รุ่นเก่า (IE9)
ถนัด <head> ?
ในมาตรฐาน HTML5 ที่ <head> แท็กยังสามารถถูกมองข้าม
โดยค่าเริ่มต้นเบราว์เซอร์จะเพิ่มองค์ประกอบทั้งหมดก่อน <body> เพื่อเริ่มต้น <head> องค์ประกอบ
คุณสามารถลดความซับซ้อนของ HTML โดยถนัด <head> แท็ก:
ตัวอย่าง
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> ลองตัวเอง» ไม่ใส่แท็กคือไม่คุ้นเคยกับนักพัฒนาเว็บ มันต้องใช้เวลาที่จะจัดตั้งขึ้นเป็นแนวทาง
ข้อมูล Meta
<title> องค์ประกอบที่จำเป็นต้องใช้ใน HTML5 ให้ชื่อมีความหมายที่เป็นไปได้:
<title>HTML5 Syntax and Coding Style</title>เพื่อให้แน่ใจว่าการตีความที่เหมาะสมและสร้างดัชนีเครื่องมือค้นหาที่ถูกต้องทั้งภาษาและการเข้ารหัสอักขระควรจะกำหนดให้เร็วที่สุดในเอกสาร:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Syntax and Coding Style</title>
</head>HTML ความคิดเห็น
ความคิดเห็นสั้นควรจะเขียนในบรรทัดเดียวที่มีพื้นที่หลังจาก <!-- and a space before --> :
<!-- This is a comment -->ความคิดเห็นยาวทอดหลายสายควรจะเขียนด้วย <!-- and --> ในบรรทัดแยก:
<!--
This is a long comment example. This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example. This is a long comment example.
-->ความคิดเห็นยาวจะง่ายต่อการสังเกตหากพวกเขาจะเยื้อง 2 คัน
ผ้าสไตล์
ใช้ไวยากรณ์ที่เรียบง่ายสำหรับการเชื่อมโยงแผ่นสไตล์ (the type attribute is not necessary) :
<link rel="stylesheet" href="styles.css">กฎสั้นสามารถเขียนได้บีบอัดในหนึ่งบรรทัดเช่นนี้
p.into {font-family: Verdana; font-size: 16em;}กฎยาวควรจะเขียนมากกว่าหลายบรรทัด:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}- วางวงเล็บเปิดในสายเดียวกันกับตัวเลือก
- ใช้พื้นที่หนึ่งก่อนที่จะวงเล็บเปิด
- ใช้ 2 คันเยื้อง
- ใช้ลำไส้ใหญ่บวกพื้นที่ระหว่างแต่ละคุณสมบัติและความคุ้มค่า
- ใช้พื้นที่หลังจากที่แต่ละจุลภาคหรืออัฒภาค
- ใช้อัฒภาคหลังจากแต่ละคู่สถานที่ให้บริการที่มีมูลค่ารวมทั้งที่ผ่านมา
- ใช้คำพูดรอบเฉพาะค่าถ้าค่ามีช่องว่าง
- วางวงเล็บปิดในบรรทัดใหม่โดยไม่เว้นวรรคชั้นนำ
- หลีกเลี่ยงเส้นมากกว่า 80 ตัวอักษร
เพิ่มวรรคหลังเครื่องหมายจุลภาคหรืออัฒภาคเป็นกฎทั่วไปในทุกประเภทของการเขียน
โหลด JavaScript ใน HTML
ใช้ไวยากรณ์ที่เรียบง่ายสำหรับการโหลดสคริปต์ภายนอก (the type attribute is not necessary) :
<script src="myscript.js">การเข้าถึงองค์ประกอบ HTML กับ JavaScript
เป็นผลมาจากการใช้ "untidy" รูปแบบ HTML, อาจส่งผลให้เกิดข้อผิดพลาด JavaScript
ทั้งสองงบ JavaScript จะให้ผลลัพธ์ที่แตกต่างกัน:
ถ้าเป็นไปได้ให้ใช้การตั้งชื่อเดียวกัน (as JavaScript) ในรูปแบบ HTML
ใช้กรณีที่ต่ำกว่ารายชื่อไฟล์
ส่วนใหญ่เว็บเซิร์ฟเวอร์ (Apache, Unix) เป็นกรณีที่สำคัญเกี่ยวกับชื่อไฟล์:
london.jpg ไม่สามารถเข้าถึงได้เป็น london.jpg
เว็บเซิร์ฟเวอร์อื่น ๆ (Microsoft, IIS) ไม่ได้กรณีที่สำคัญ:
london.jpg สามารถเข้าถึงได้เป็น london.jpg หรือ london.jpg
ถ้าคุณใช้การผสมผสานของบนและล่างกรณีที่คุณจะต้องมีความสอดคล้องกันมาก
หากคุณย้ายจากกรณีตายไปยังเซิร์ฟเวอร์ที่มีความสำคัญกรณีแม้ข้อผิดพลาดเล็ก ๆ จะทำลายเว็บของคุณ
เพื่อหลีกเลี่ยงปัญหาเหล่านี้มักจะใช้ชื่อไฟล์กรณีที่ต่ำกว่า (if possible)
นามสกุลไฟล์
ไฟล์ HTML ควรมีนามสกุล .html (or .htm )
ไฟล์ CSS ควรมีนามสกุล .css
ไฟล์ JavaScript ควรมีนามสกุล .js
ความแตกต่างระหว่าง .htm และ .html
มีความแตกต่างระหว่าง .htm และส่วนขยาย .html ไม่เป็น ทั้งสองจะได้รับการปฏิบัติเป็น HTML โดยเว็บเบราว์เซอร์ใด ๆ หรือเว็บเซิร์ฟเวอร์
ความแตกต่างทางวัฒนธรรม
.htm "smells" ของระบบดอสต้นที่ระบบ จำกัด ขยายไป 3 ตัวอักษร
.html "smells" ของระบบปฏิบัติการยูนิกซ์ที่ไม่ได้มีข้อ จำกัด นี้
ความแตกต่างทางเทคนิค
เมื่อ URL ที่ไม่ได้ระบุชื่อไฟล์ (like http://www.w3ii.com/css/) เซิร์ฟเวอร์จะส่งกลับชื่อไฟล์เริ่มต้น ชื่อไฟล์เริ่มต้นที่พบบ่อยจะเป็น index.html, index.htm, default.html และ default.htm
หากเซิร์ฟเวอร์ของคุณมีการกำหนดค่าเฉพาะกับ "index.html" เป็นชื่อไฟล์แฟ้มของคุณจะต้องมีชื่อ "index.html" ไม่ "index.htm."
อย่างไรก็ตามเซิร์ฟเวอร์สามารถกำหนดค่าด้วยชื่อไฟล์เริ่มต้นมากกว่าหนึ่งและโดยปกติคุณสามารถตั้งค่าเริ่มต้นชื่อไฟล์มากเท่าที่ต้องการ
อย่างไรก็ตามการขยายเต็มรูปแบบสำหรับไฟล์ HTML ที่เป็น .html และมีเหตุผลที่มันไม่ควรจะใช้ไม่มี