บทช่วยสอนHTML

HTML หน้าแรก บทนำ HTML โปรแกรมแก้ไข HTML HTML พื้นฐาน องค์ประกอบ HTML แอตทริบิวต์ HTML ส่วนหัว HTML ย่อหน้า HTML รูปแบบ HTML การจัดรูปแบบ HTML ใบเสนอราคา HTML ความคิดเห็น HTML HTML สี HTML CSS ลิงค์ HTML รูปภาพ HTML HTML Favicon ตาราง HTML รายการ HTML บล็อก HTML & อินไลน์ คลาส HTML รหัส HTML HTML Iframes HTML JavaScript เส้นทางไฟล์ HTML หัวหน้า HTML เค้าโครง HTML HTML Responsive HTML รหัสคอมพิวเตอร์ HTML Semantics คู่มือสไตล์ HTML เอนทิตี HTML สัญลักษณ์ HTML HTML Emojis ชุดอักขระ HTML การเข้ารหัส URL HTML HTML กับ XHTML

แบบฟอร์มHTML

แบบฟอร์ม HTML คุณสมบัติแบบฟอร์ม HTML องค์ประกอบแบบฟอร์ม HTML ประเภทอินพุต HTML แอตทริบิวต์การป้อนข้อมูล HTML แอตทริบิวต์แบบฟอร์มการป้อนข้อมูล HTML

กราฟิกHTML

HTML Canvas HTML SVG

สื่อHTML

สื่อ HTML วิดีโอ HTML HTML Audio ปลั๊กอิน HTML HTML YouTube

HTML APIs

HTML Geolocation HTML ลาก/วาง HTML Web Storage HTML Web Workers HTML SSE

ตัวอย่างHTML

ตัวอย่าง HTML แบบทดสอบ HTML แบบฝึกหัด HTML ใบรับรอง HTML สรุป HTML การเข้าถึง HTML

ข้อมูลอ้างอิงHTML

รายการแท็ก HTML แอตทริบิวต์ HTML HTML Global Attributes รองรับ HTML Browser เหตุการณ์ HTML HTML สี HTML Canvas HTML เสียง/วิดีโอ HTML Doctypes ชุดอักขระ HTML การเข้ารหัส URL HTML HTML Lang Codes ข้อความ HTTP วิธี HTTP ตัวแปลง PX เป็น EM แป้นพิมพ์ลัด

คู่มือสไตล์ HTML


โค้ด HTML ที่สม่ำเสมอ สะอาด และเป็นระเบียบช่วยให้ผู้อื่นอ่านและทำความเข้าใจโค้ดของคุณได้ง่ายขึ้น

ต่อไปนี้เป็นแนวทางและเคล็ดลับในการสร้างโค้ด HTML ที่ดี


ประกาศประเภทเอกสารเสมอ

ประกาศประเภทเอกสารเป็นบรรทัดแรกในเอกสารของคุณเสมอ

ประเภทเอกสารที่ถูกต้องสำหรับ HTML คือ:

<!DOCTYPE html>

ใช้ชื่อองค์ประกอบตัวพิมพ์เล็ก

HTML อนุญาตให้ผสมอักษรตัวพิมพ์ใหญ่และตัวพิมพ์เล็กในชื่อองค์ประกอบ

อย่างไรก็ตาม เราขอแนะนำให้ใช้ชื่อองค์ประกอบตัวพิมพ์เล็ก เนื่องจาก:

  • การผสมชื่อตัวพิมพ์ใหญ่และตัวพิมพ์เล็กดูไม่ดี
  • นักพัฒนามักใช้ชื่อตัวพิมพ์เล็ก
  • ตัวพิมพ์เล็กดูสะอาดตาขึ้น
  • ตัวพิมพ์เล็กเขียนง่ายกว่า

ดี:

<body>
<p>This is a paragraph.</p>
</body>

แย่:

<BODY>
<P>This is a paragraph.</P>
</BODY>


ปิดองค์ประกอบ HTML ทั้งหมด

ใน HTML คุณไม่จำเป็นต้องปิดองค์ประกอบทั้งหมด (เช่น<p>องค์ประกอบ)

อย่างไรก็ตาม เราขอแนะนำอย่างยิ่งให้ปิดองค์ประกอบ HTML ทั้งหมดดังนี้:

ดี:

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

แย่:

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

ใช้ชื่อแอตทริบิวต์ตัวพิมพ์เล็ก

HTML อนุญาตให้ผสมอักษรตัวพิมพ์ใหญ่และตัวพิมพ์เล็กในชื่อแอตทริบิวต์

อย่างไรก็ตาม เราขอแนะนำให้ใช้ชื่อแอตทริบิวต์ตัวพิมพ์เล็ก เนื่องจาก:

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

ดี:

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

แย่:

<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

เสนอราคาแอตทริบิวต์เสมอ

HTML อนุญาตให้ใช้ค่าแอตทริบิวต์โดยไม่ต้องใส่เครื่องหมายคำพูด

อย่างไรก็ตาม เราแนะนำให้อ้างอิงค่าแอตทริบิวต์ เนื่องจาก:

  • นักพัฒนามักจะอ้างอิงค่าแอตทริบิวต์
  • ค่าที่ยกมานั้นง่ายต่อการอ่าน
  • คุณต้องใช้เครื่องหมายคำพูดหากค่ามีช่องว่าง

ดี:

<table class="striped">

แย่:

<table class=striped>

ที่เลวร้ายมาก:

สิ่งนี้จะไม่ทำงานเนื่องจากค่ามีช่องว่าง:

<table class=table striped>

ระบุ alt ความกว้าง และความสูงเสมอสำหรับรูปภาพ

ระบุ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 จะไม่สะดวกที่จะเลื่อนไปทางขวาและซ้ายเพื่ออ่านโค้ด HTML

พยายามหลีกเลี่ยงโค้ดที่ยาวเกินไป


เส้นเปล่าและการเยื้อง

อย่าเพิ่มบรรทัดว่าง ช่องว่าง หรือการเยื้องโดยไม่มีเหตุผล

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

เพื่อให้อ่านง่าย ให้เว้นวรรคสองช่อง อย่าใช้ปุ่มแท็บ

ดี:

<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>

ตัวอย่างรายการที่ดี:

<ul>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ul>

ไม่เคยข้าม <title> องค์ประกอบ

องค์ประกอบ<title>ที่จำเป็นใน HTML

เนื้อหาของหน้าชื่อมีความสำคัญมากสำหรับการเพิ่มประสิทธิภาพกลไกค้นหา (SEO)! อัลกอริทึมของเครื่องมือค้นหาใช้ชื่อหน้าเพื่อกำหนดลำดับเมื่อแสดงรายการหน้าในผลการค้นหา

องค์ประกอบ<title>:

  • กำหนดชื่อในแถบเครื่องมือเบราว์เซอร์
  • ให้ชื่อเรื่องสำหรับหน้าเมื่อมีการเพิ่มในรายการโปรด
  • แสดงชื่อหน้าในผลลัพธ์ของเครื่องมือค้นหา

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

<title>HTML Style Guide and Coding Conventions</title>

ละเว้น <html> และ <body>?

หน้า HTML จะตรวจสอบโดยไม่มีแท็ก<html>และ :<body>

ตัวอย่าง

<!DOCTYPE html>
<head>
  <title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

อย่างไรก็ตาม เราขอแนะนำอย่างยิ่งให้เพิ่ม<html>และ <body>แท็ก!

การ ละเว้น<body>อาจทำให้เกิดข้อผิดพลาดในเบราว์เซอร์รุ่นเก่าได้

ละเว้น<html>และ<body> ยังสามารถทำให้ซอฟต์แวร์ DOM และ XML ขัดข้องได้


ละเว้น <head>?

แท็ก HTML <head> สามารถละเว้นได้

เบราว์เซอร์จะเพิ่มองค์ประกอบทั้งหมดก่อนหน้า ให้กับ องค์ประกอบ<body>เริ่มต้น<head>

ตัวอย่าง

<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

อย่างไรก็ตาม เราขอแนะนำให้ใช้<head>แท็ก


ปิดองค์ประกอบ HTML ที่ว่างเปล่า?

ใน HTML คุณสามารถเลือกปิดองค์ประกอบว่างได้

อนุญาต:

<meta charset="utf-8">

อนุญาตด้วย:

<meta charset="utf-8" />

หากคุณคาดว่าซอฟต์แวร์ XML/XHTML จะเข้าถึงหน้าเว็บของคุณ ให้ใช้เครื่องหมายสแลชปิด (/) เนื่องจากจำเป็นต้องใช้ใน XML และ XHTML


เพิ่ม lang Attribute

คุณควรใส่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>

ข้อมูลเมตา

เพื่อให้แน่ใจว่ามีการตีความที่ถูกต้องและการจัดทำดัชนีเครื่องมือค้นหาที่ถูกต้อง ทั้งภาษาและการเข้ารหัสอักขระควรถูกกำหนดให้เร็วที่สุดในเอกสาร HTML:<meta charset="charset">

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

การตั้งค่าวิวพอร์ต

วิวพอร์ตคือพื้นที่ที่ผู้ใช้มองเห็นได้ของหน้าเว็บ มันแตกต่างกันไปตามอุปกรณ์ - บนโทรศัพท์มือถือจะเล็กกว่าบนหน้าจอคอมพิวเตอร์

คุณควรรวม<meta>องค์ประกอบต่อไปนี้ในหน้าเว็บทั้งหมดของคุณ:

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

ซึ่งจะให้คำแนะนำเบราว์เซอร์เกี่ยวกับวิธีการควบคุมขนาดและขนาดของหน้า

ส่วนwidth=device-widthกำหนดความกว้างของหน้าตามความกว้างหน้าจอของอุปกรณ์ (ซึ่งจะแตกต่างกันไปขึ้นอยู่กับอุปกรณ์)

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

ต่อไปนี้คือตัวอย่างของหน้าเว็บ ที่ ไม่มีเมตาแท็กของวิวพอร์ต และหน้าเว็บเดียวกันกับเมตาแท็กของวิวพอร์ต:

เคล็ดลับ:หากคุณกำลังเรียกดูหน้านี้ด้วยโทรศัพท์หรือแท็บเล็ต คุณสามารถคลิกลิงก์สองลิงก์ด้านล่างเพื่อดูความแตกต่าง



ความคิดเห็น 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.
-->

ความคิดเห็นแบบยาวจะสังเกตได้ง่ายกว่าหากเว้นวรรคสองช่อง


การใช้สไตล์ชีต

Use simple syntax for linking to style sheets (the type attribute is not necessary):

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

Short CSS rules can be written compressed, like this:

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

Long CSS rules should be written over multiple lines:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • Place the opening bracket on the same line as the selector
  • Use one space before the opening bracket
  • Use two spaces of indentation
  • Use semicolon after each property-value pair, including the last
  • Only use quotes around values if the value contains spaces
  • Place the closing bracket on a new line, without leading spaces

Loading JavaScript in HTML

Use simple syntax for loading external scripts (the type attribute is not necessary):

<script src="myscript.js">

Accessing HTML Elements with JavaScript

Using "untidy" HTML code can result in JavaScript errors.

These two JavaScript statements will produce different results:

Example

getElementById("Demo").innerHTML = "Hello";

getElementById("demo").innerHTML = "Hello";

Visit the JavaScript Style Guide.


Use Lower Case File Names

Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".

Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg".

If you use a mix of uppercase and lowercase, you have to be aware of this.

If you move from a case-insensitive to a case-sensitive server, even small errors will break your web!

To avoid these problems, always use lowercase file names!


File Extensions

HTML files should have a .html extension (.htm is allowed).

CSS files should have a .css extension.

JavaScript files should have a .js extension.


Differences Between .htm and .html?

There is no difference between the .htm and .html file extensions!

Both will be treated as HTML by any web browser and web server.


Default Filenames

When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".

If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".

However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.