มาตรฐานสไตล์และกฎหมายรหัส HTML(5)

กฎข้อตกลงของ HTML

นักพัฒนาเว็บมักไม่แน่ใจในรูปแบบโค้ดและการใช้งานภาษาที่ใช้ใน HTML

ในช่วงปี 2000 ถึง 2010 นักพัฒนาเว็บมากมายได้เปลี่ยนจาก HTML ไปยัง XHTML

ผ่าน XHTML นักพัฒนาจำเป็นต้องเขียนโค้ดที่มีรูปแบบที่ดี

HTML5 จะลดบังคับใช้ในการตรวจสอบโค้ด

ผ่าน HTML5 คุณจำเป็นต้องสร้างสิ่งของเพื่อตัวเองของคุณความประสงค์ที่ดีสุด แนวทาง และกฎข้อตกลงในการเขียนโค้ด.

สมน้ำสมเนื้อและมีการรับรองในอนาคต

การใช้สไตล์ที่สมเหตุสมผลสามารถทำให้คนอื่นง่ายต่อการเข้าใจและใช้ HTML ของคุณ

ในอนาคต โปรแกรมที่อ่าน XML เช่นเดียวกับ HTML อาจต้องอ่าน HTML ของคุณ

ใช้กรรมวิธีที่เหมาะสมของ “XHTML แบบเขียนแบบเก่า” สามารถทำให้สมน้ำสมเนื้อขึ้น

หมายเหตุ：ให้มั่นใจว่ารูปแบบของคุณเป็นรูปแบบที่สมน้ำสมเนื้อ สมซึมสมาน สะอาด และมีรูปแบบที่ดี

ใช้ประเภทเอกสารที่ถูกต้อง

ใช้ระบุประเภทเอกสารตั้งแต่บรรทัดแรกของเอกสารตลอดเวลา:

<!DOCTYPE html>

หากคุณเฉยแรงในการใช้ตัวอักษรต่ำและตัวอักษรใหญ่ คุณสามารถใช้:

<!doctype html>

ใช้ชื่อประกายต่ำ

HTML5 อนุญาตให้ใช้ตัวอักษรในชื่อประกายทั้งใหญ่และต่ำ

เราแนะนำให้ใช้ชื่อประกายต่ำ:

  • ชื่อที่ผสมของตัวอักษรใหญ่และต่ำไม่ดี
  • นักพัฒนามักใช้ตัวอักษรต่ำ (เช่นใน 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 คุณไม่จำเป็นต้องปิดทั้งหมดประกาย (เช่น <p> อิเล็กทรอนิกส์)

เราแนะนำให้ปิดทั้งหมดประกาย HTML อิเล็กทรอนิกส์:

มันดูไม่ดี:

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</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 ในการเข้าถึงเว็บเพจของคุณ มันเป็นข้อดีที่จะทำตามประวัติการนี้:

ใช้ชื่อคุณสมบัติในตัวเล็ก

HTML5 อนุญาตให้ชื่อคุณสมบัติผสมในขนาดใหญ่และเล็ก:

เราแนะนำให้ใช้ชื่อคุณสมบัติในตัวเล็ก:

  • ชื่อคุณสมบัติที่ผสมไม่ดี:
  • ผู้พัฒนามีความสามารถในการใช้ชื่อคุณสมบัติในตัวเล็ก (เช่นใน XHTML):
  • ชื่อคุณสมบัติในตัวเล็กดูสะอายขึ้น:
  • ชื่อคุณสมบัติในตัวเล็กง่ายต่อการเขียน:

มันดูไม่ดี:

<div CLASS="menu">

มันดูดี:

<div class="menu">

ใช้เครื่องหมายเปิดปิดค่าของคุณสมบัติ

HTML5 อนุญาตให้ไม่มีเครื่องหมายเปิดปิดค่าของคุณสมบัติ:

เราแนะนำให้ใช้เครื่องหมายเปิดปิดค่าของคุณสมบัติ:

  • ถ้าค่าของคุณสมบัติมีค่า ต้องใช้เครื่องหมายเปิดปิด:
  • รูปแบบที่ผสมของสไตล์ไม่ดี:
  • ค่าที่มีเครื่องหมายเปิดปิดนั้นง่ายต่อการอ่าน:

ค่าของคุณสมบัตินี้ไม่ถูกต้อง เพราะมีช่องว่างในค่า:

<table class=table striped>

นี่เป็นที่ถูกต้อง:

<table class="table striped">

คุณสมบัติที่จำเป็น

กรุณาใช้คุณสมบัติ alt ทุกครั้ง: 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">

แต่การลดช่องว่างที่ไม่จำเป็นนั้นง่ายต่อการอ่าน และจัดกลุ่มองค์ประกอบได้ดีขึ้น: But space-less is easier to read, and groups entities better together:

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

หลีกเลี่ยงบรรทัดรหัสยาว:

เมื่อใช้เครื่องแก้ไข HTML การอ่านรหัส HTML ด้วยการเลื่อนซ้ายขวาไม่สะดวก:

กรุณาพยายามที่จะไม่ให้บรรทัดรหัสเกิน 80 อักษร:

บรรทัดว่างและขอบวงหุ้ม

กรุณาไม่เพิ่มบรรทัดว่างโดยไม่มีเหตุผล:

เพื่อเพิ่มความเข้าใจง่ายต่อได้ กรุณาใช้บรรทัดว่างเพื่อแบ่งเป็นบรรทัดใหญ่หรือบรรทัดทางโลกิก:

เพื่อเพิ่มความเข้าใจง่ายต่อได้ กรุณาเพิ่มขอบวงหุ้มสองช่องขอบวงหุ้มเรียบร้อย และไม่ใช้ TAB:

กรุณาไม่ใช้บรรทัดว่างและขอบวงหุ้มที่ไม่จำเป็น。ไม่มีความจำเป็นที่จะใช้บรรทัดว่างระหว่างประวัติการที่สั้นและเกี่ยวข้อง และไม่มีความจำเป็นที่จะขอบวงหุ้มแต่ละองค์ประกอบ:

不必要：

<body>
  <h1>著名城市</h1>
  <h2>Tokyo</h2>
  <p>
    東京是日本的首都，大東京地區的中心，
    以及世界上人口最多的都市區。
    它是日本政府的所在地和皇宮，
    以及日本皇室的住所。
  </p>
</body>

更好：

<body>
<h1>著名城市</h1>
<h2>Tokyo</h2>
<p>
東京是日本的首都，大東京地區的中心，
以及世界上人口最多的都市區。
它是日本政府的所在地和皇宮，
以及日本皇室的住所。
</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>LondonA</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">

對於可訪問應用程序（屏幕閱讀器）和搜索引擎，聲明語言很重要。

省略 <html> 或 <body> 可令 DOM 和 XML 軟件崩潰。

省略 <body> 會在老式瀏覽器（IE9）中產生錯誤。

省略 <head>？

在 HTML5 标準中，<head> 标籤也能被省略。

默认地，浏览器会把 <body> 之前的所有元素添加到默认的 <head> 元素。

通过省略 <head> 标籤，您能够降低 HTML 的复杂性：

示例

<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

ทดลองด้วยตัวเอง

หมายเหตุ：สำหรับนักพัฒนาเว็บ การละเลยการใช้แท็กนั้นน่าจะเป็นเรื่องที่เป็นที่รู้จัก การสร้างกฎต้องใช้เวลา

ข้อมูลเมตา

<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

หมายเหตุสั้นควรเขียนบนบรรทัดเดียว และเพิ่มช่องว่างหนึ่งตัวหลัง <!-- และเพิ่มช่องว่างหนึ่งตัวก่อน -->

<!-- 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. This is a long comment example. This is a long comment example.
-->

หมายเหตุยาวง่ายต่อการดู หากมีการย่อหน้าสองช่องว่าง

ไซลส์

ใช้ภาษาที่เรียบง่ายสำหรับการลิงก์ไซลส์ (ประกาศทาคาย์ไม่จำเป็น)

<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;
}
  • วงเปิดตั้งแต่เดียวกับเลือกตัว
  • ใช้ช่องว่างหนึ่งตัวก่อนวงเปิด
  • ใช้ระดับช่องว่างสองตัว
  • ใช้สัญญาณความสัมพันธ์หลังจากคุณสมบัติและค่า โดยเพิ่มช่องว่างหนึ่งตัว
  • ใช้ช่องว่างหลังจากความหมายหรือสัญญาณความสัมพันธ์
  • ใช้สัญญาณความสัมพันธ์หลังจากคู่ของคุณสมบัติ (รวมถึงคู่ของคุณสมบัติสุดท้าย)
  • ใช้เครื่องหมายเปิดหรือปิดหมายเหตุเพื่อรอบความหมายที่มีช่องว่าง
  • จัดให้ปิดวงเล็บอยู่บนบรรทัดใหม่ และไม่ใช้ช่องว่างก่อนหน้านี้
  • หลีกเลี่ยงการใช้ตัวอักษรเกิน 80 ตัวในแต่ละบรรทัด

หมายเหตุ：เพิ่มช่องว่างหลังจากความหมายหรือสัญญาณความสัมพันธ์ คือกฎที่เป็นทั่วไปสำหรับการเขียนทุกแบบ

โหลด JavaScript ใน HTML

ใช้กราฟิกศัพท์ที่เรียบร้อยเพื่อโหลดสคริปต์ภายนอก (attribute type ไม่จำเป็น)

<script src="myscript.js">

เข้าถึงองค์ประกอบ HTML ด้วย JavaScript

ผลลัพธ์ของการใช้รูปแบบ HTML ที่ไม่เรียบร้อยอาจทำให้เกิดข้อผิดพลาด JavaScript

สองประโยค JavaScript ของคุณจะสร้างผลลัพธ์ที่ต่างกัน

var obj = getElementById("Demo")
var obj = getElementById("demo")

ทดลองด้วยตัวเอง

หากเป็นไปได้ ใช้นโยบายการตั้งชื่อที่เหมือนกันกับ JavaScript (และ HTML)

โปรดเข้าถึงมานุษย์สไตล์ JavaScript

ใช้ชื่อไฟล์ในรูปแบบต่ำเรียง

เซิร์ฟเวอร์เว็บส่วนใหญ่ (Apache, Unix) มีความเป็นส่วนตัวต่อขนาดพิมพ์ใหญ่เล็ก

ไม่สามารถเข้าถึง London.jpg ด้วย london.jpg

เซิร์ฟเวอร์เว็บอื่น (Microsoft, IIS) ไม่มีความเป็นส่วนตัวต่อขนาดพิมพ์ใหญ่เล็ก

สามารถเข้าถึง London.jpg ได้ทั้งด้วย london.jpg หรือ London.jpg

หากใช้ขนาดพิมพ์เล็กใหญ่เชิงผสม คุณจะต้องมีความสัมพันธ์ต่อเชิงเรียงที่สูงขึ้น

หากคุณเปลี่ยนมาจากเซิร์ฟเวอร์ที่ไม่มีความเป็นส่วนตัวต่อขนาดพิมพ์ใหญ่เล็ก ไปยังเซิร์ฟเวอร์ที่มีความเป็นส่วนตัวต่อขนาดพิมพ์ใหญ่เล็ก ปัญหาเล็กน้อยเหล่านี้จะทำลายเว็บไซต์ของคุณ

เพื่อป้องกันปัญหาเหล่านี้ โปรดใช้ชื่อไฟล์ในรูปแบบต่ำเรียง (ถ้าเป็นไปได้)

นามสกุลไฟล์

ชื่อไฟล์ HTML ควรใช้นามสกุล .html(แทน .htm)

ไฟล์ CSS ควรใช้นามสกุล .css.

ไฟล์ JavaScript ควรใช้นามสกุล .js.