HTML5 ความหมายองค์ประกอบ
ความหมายคือการศึกษาความหมายของคำและวลีในภาษา
องค์ประกอบความหมาย = องค์ประกอบที่มีความหมาย
อะไรคือองค์ประกอบความหมาย?
องค์ประกอบความหมายได้อย่างชัดเจนอธิบายความหมายของมันทั้งเบราว์เซอร์และนักพัฒนา
ตัวอย่างของที่ไม่ใช่ความหมายองค์ประกอบ: <div> และ <span> - บอกอะไรเกี่ยวกับเนื้อหา
ตัวอย่างของความหมายองค์ประกอบ: <form> <table> และ <บทความ> - ชัดเจนกำหนดเนื้อหา
สนับสนุนเบราว์เซอร์
HTML5 องค์ประกอบความหมายได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัย
นอกจากนี้คุณสามารถ "สอน" เบราว์เซอร์รุ่นเก่าวิธีการจัดการ "องค์ประกอบที่ไม่รู้จัก"
อ่านเกี่ยวกับมันในการสนับสนุนเบราว์เซอร์ HTML5
องค์ประกอบความหมายใหม่ใน HTML5
เว็บไซต์จำนวนมากมีโค้ด HTML ที่ชอบ: <div id = "NAV"> <div class = "หัว"> <div id = "ส่วนท้าย">
เพื่อระบุนำทาง, ส่วนหัวและส่วนท้าย
HTML5 มีองค์ประกอบความหมายใหม่ในการกำหนดส่วนต่าง ๆ ของหน้าเว็บ:
- <บทความ>
- <กัน>
- <รายละเอียด>
- <figcaption>
- <รูป>
- <ท้าย>
- <หัว>
- <หลัก>
- <เครื่องหมาย>
- <nav>
- <ส่วน>
- <สรุป>
- <เวลา>
HTML5 <section> ธาตุ
ก <section> องค์ประกอบที่กำหนดส่วนในเอกสาร
ตามเอกสาร HTML5 ของ W3C: "ส่วนคือกลุ่มใจเนื้อหาโดยปกติจะมีหัวข้อ."
หน้าแรกอาจปกติจะแบ่งออกเป็นส่วนสำหรับการแนะนำเนื้อหาและข้อมูลการติดต่อ
ทดลองกดตรงนี้
HTML5 <บทความ> ธาตุ
ก <บทความ> องค์ประกอบระบุอิสระเนื้อหาที่ตนเองมี
บทความที่ควรให้ความรู้สึกของมันเองและมันควรจะเป็นไปได้ที่จะอ่านมันเป็นอิสระจากส่วนที่เหลือของเว็บไซต์
ตัวอย่างของกรณีที่ <บทความ> องค์ประกอบที่สามารถนำมาใช้:
- โพสต์ฟอรั่ม
- โพสต์บล็อก
- บทความในหนังสือพิมพ์
ทดลองกดตรงนี้
รัง <บทความ> ใน <section> หรือทางกลับกัน?
ก <บทความ> องค์ประกอบระบุอิสระเนื้อหาที่ตนเองมี
ก <section> องค์ประกอบที่กำหนดส่วนในเอกสาร
เราสามารถใช้คำจำกัดความที่จะตัดสินใจว่าจะทำรังองค์ประกอบเหล่านั้นหรือไม่ ไม่เราทำไมได้!
ดังนั้นบนอินเทอร์เน็ตคุณจะพบกับหน้าเว็บ HTML
<section> องค์ประกอบที่มี <บทความ> องค์ประกอบและ
<บทความ> องค์ประกอบที่มี <ส่วน> องค์ประกอบ
นอกจากนี้คุณยังจะได้พบหน้าเว็บที่มี <section>
องค์ประกอบที่มี <section> องค์ประกอบและ <บทความ>
องค์ประกอบที่มี <บทความ> องค์ประกอบ
ตัวอย่างสำหรับหนังสือพิมพ์: กีฬาบทความในการเล่นกีฬาส่วนอาจมีเทคนิคส่วนในแต่ละบทความ
HTML5 <ส่วนหัว> ธาตุ
ก <ส่วนหัว> องค์ประกอบระบุส่วนหัวสำหรับเอกสารหรือส่วนใดส่วนหนึ่ง
ก <ส่วนหัว> องค์ประกอบที่ควรจะใช้เป็นภาชนะสำหรับเนื้อหาเบื้องต้น
คุณสามารถมีหลาย <ส่วนหัว> องค์ประกอบในเอกสารหนึ่ง
ตัวอย่างต่อไปนี้กำหนดส่วนหัวสำหรับบทความนี้:
ทดลองกดตรงนี้
HTML5 <ท้าย> ธาตุ
ก <ท้าย> องค์ประกอบระบุท้ายสำหรับเอกสารหรือส่วนใดส่วนหนึ่ง
<ท้าย> องค์ประกอบที่ควรจะมีข้อมูลเกี่ยวกับองค์ประกอบที่มีของ
ส่วนท้ายมักจะมีผู้เขียนข้อมูลเอกสารลิขสิทธิ์เชื่อมโยงกับข้อตกลงในการใช้ข้อมูลที่ติดต่อ ฯลฯ
คุณอาจจะมีหลาย <ท้าย> องค์ประกอบในเอกสารหนึ่ง
ทดลองกดตรงนี้
HTML5 <nav> ธาตุ
ก <nav> องค์ประกอบที่กำหนดชุดของการเชื่อมโยงการนำทาง
ขอให้สังเกตว่าการเชื่อมโยงไม่ทั้งหมดของเอกสารที่ควรจะเป็นภายใน <nav> องค์ประกอบ ก <nav> องค์ประกอบที่มีวัตถุประสงค์เฉพาะสำหรับบล็อกที่สำคัญของการเชื่อมโยงการนำทาง
ทดลองกดตรงนี้
HTML5 <กัน> ธาตุ
ก <กัน> องค์ประกอบกำหนดเนื้อหาบางส่วนนอกเหนือจากเนื้อหาที่ถูกวางไว้ใน (เช่นแถบด้านข้าง)
เนื้อหากันควรจะเกี่ยวข้องกับเนื้อหาโดยรอบ
ทดลองกดตรงนี้
HTML5 <รูป> และ <figcaption> องค์ประกอบ
วัตถุประสงค์ของคำอธิบายภาพร่างคือการเพิ่มคำอธิบายภาพลงในภาพ
ใน HTML5, ภาพและคำอธิบายภาพสามารถจัดกลุ่มเข้าด้วยกันใน<ตัวเลข>
องค์ประกอบ:
ทดลองกดตรงนี้
<img>องค์ประกอบที่กำหนดภาพที่<figcaption>
องค์ประกอบที่กำหนดคำบรรยายใต้ภาพ
องค์ประกอบทำไมความหมาย?
ด้วย HTML4 นักพัฒนาที่ใช้ชื่อรหัส /
ระดับของตัวเองเพื่อองค์ประกอบสไตล์:
ส่วนหัวด้านบนด้านล่างท้ายเมนูการนำทางหลักภาชนะเนื้อหาบทความแถบด้านข้าง
topnav ฯลฯ
นี่เองที่ทำให้มันเป็นไปไม่ได้สำหรับเครื่องมือค้นหาเพื่อระบุเนื้อหาของหน้าเว็บที่ถูกต้อง
กับองค์ประกอบ HTML5 ใหม่ (<ส่วนหัว> <ส่วนท้าย> <nav> <ส่วน> <บทความ>) นี้จะกลายเป็นเรื่องง่าย
ตาม W3C เป็นเว็บแบบ Semantic: "อนุญาตให้ข้อมูลที่จะใช้ร่วมกันและนำกลับมาใช้ในการใช้งาน, ผู้ประกอบการและชุมชน."
องค์ประกอบความหมายใน HTML5
ด้านล่างนี้เป็นรายชื่อเรียงตามตัวอักษรขององค์ประกอบความหมายใหม่ใน HTML5
การเชื่อมโยงไปของเราสมบูรณ์HTML5 อ้างอิง
HTML5 โยกย้าย
การย้ายถิ่นจาก HTML4 เป็น HTML5
บทนี้เป็นทั้งหมดเกี่ยวกับวิธีการโยกย้ายจากHTML4เพื่อ
HTML5
ในบทนี้จะแสดงให้เห็นถึงวิธีการแปลงหน้า HTML4 เป็นหน้า HTML5 โดยไม่ต้องทำลายสิ่งที่มีเนื้อหาต้นฉบับหรือโครงสร้าง
คุณสามารถโยกย้ายจาก XHTML เป็น HTML5 โดยใช้สูตรเดียวกัน
ทั่วไป HTML4 หน้า
ทดลองกดตรงนี้
เปลี่ยนเป็น HTML5 Doctype
เปลี่ยน
ประเภทเอกสาร :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
กับประเภทเอกสาร HTML5:
ทดลองกดตรงนี้
การเข้ารหัส HTML5:
ทดลองกดตรงนี้
เพิ่ม HTML5Shiv
ใหม่ HTML5 องค์ประกอบความหมายได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัย นอกจากนี้คุณสามารถ "สอน" เบราว์เซอร์รุ่นเก่าวิธีการจัดการ "องค์ประกอบที่ไม่รู้จัก"
อย่างไรก็ตาม IE8 และก่อนหน้านี้ไม่อนุญาตให้จัดแต่งทรงผมขององค์ประกอบที่ไม่รู้จัก ดังนั้น
HTML5Shiv เป็นวิธีแก้ปัญหา JavaScript
เพื่อเปิดใช้งานการจัดแต่งทรงผมขององค์ประกอบ HTML5 ใน Internet Explorer
รุ่นก่อนที่จะมีรุ่นที่ 9
เพิ่ม HTML5Shiv:
ทดลองกดตรงนี้
อ่านเพิ่มเติมเกี่ยวกับHTML5Shivในการสนับสนุนเบราว์เซอร์ HTML5
เปลี่ยนเป็น HTML5 ความหมายองค์ประกอบ
ซีเอสเอที่มีอยู่มี id ของและชั้นเรียนสำหรับจัดแต่งทรงผมองค์ประกอบ:
body {
font-family: Verdana,sans-serif;
font-size: 0.9em; }
div#header, div#footer {
padding: 10px;
color: white;
background-color: black; }
div#content {
margin: 5px;
padding: 10px;
background-color: lightgrey; }
div.article {
margin: 5px;
padding: 10px;
background-color: white; }
div#menu ul {
padding: 0; }
div#menu ul li {
display: inline;
margin: 5px; }
แทนที่ด้วยรูปแบบ CSS ที่เท่าเทียมกันสำหรับองค์ประกอบความหมาย HTML5:
body {
font-family: Verdana,sans-serif;
font-size: 0.9em; }
header, footer {
padding: 10px;
color: white;
background-color: black; }
section {
margin: 5px;
padding: 10px;
background-color: lightgrey; }
article {
margin: 5px;
padding: 10px;
background-color: white; }
nav ul {
padding: 0; }
nav ul li {
display: inline;
margin: 5px; }
สุดท้ายเปลี่ยนองค์ประกอบองค์ประกอบความหมาย HTML5:
ทดลองกดตรงนี้
ความแตกต่างระหว่าง <บทความ> <ส่วน> และ <div>
มีความสับสน (ขาด) ความแตกต่างใน HTML5 มาตรฐานระหว่าง <บทความ> <ส่วน> และ <div> เป็น
ในมาตรฐาน HTML5 ที่ <section> องค์ประกอบที่ถูกกำหนดให้เป็นบล็อกขององค์ประกอบที่เกี่ยวข้อง
ก <บทความ> องค์ประกอบที่ถูกกำหนดให้เป็นที่สมบูรณ์บล็อกตนเองมีขององค์ประกอบที่เกี่ยวข้อง
ก <div> ถูกกำหนดให้เป็นบล็อกขององค์ประกอบเด็ก
วิธีการตีความที่?
ในตัวอย่างข้างต้นเราได้ใช้ <section> เป็นภาชนะสำหรับที่เกี่ยวข้อง <บทความ>
แต่เราจะได้ใช้ <บทความ> เป็นภาชนะสำหรับบทความได้เป็นอย่างดี
นี่คือตัวอย่างที่แตกต่างกัน:
ทดลองกดตรงนี้
<div> ใน <บทความ>:
ทดลองกดตรงนี้
<div> ใน <section> ใน <บทความ>:
ทดลองกดตรงนี้
HTML5 คู่มือสไตล์และการประชุมการเข้ารหัส
อนุสัญญา Coding HTML
นักพัฒนาเว็บมักจะมีความไม่แน่นอนเกี่ยวกับรูปแบบการเข้ารหัสและไวยากรณ์ที่จะใช้ในรูปแบบ HTML
ระหว่างปี 2000 และปี 2010 นักพัฒนาเว็บหลายแปลงจาก HTML เพื่อ XHTML
ด้วย XHTML, นักพัฒนาจะถูกบังคับให้เขียนถูกต้องและ "ดีขึ้น" รหัส
HTML5 เป็นเลอะเทอะอีกเล็กน้อยเมื่อมันมาถึงการตรวจสอบรหัส
Be Smart และอนาคตหลักฐาน
การใช้งานที่สอดคล้องกันของรูปแบบทำให้มันง่ายขึ้นสำหรับคนอื่น ๆ ที่จะเข้าใจ HTML ของคุณ
ในอนาคตโปรแกรมเช่นผู้อ่าน XML อาจต้องการที่จะอ่าน HTML ของคุณ
ใช้ดี formed- "ใกล้กับ XHTML ไวยากรณ์" สามารถเป็นสมาร์ท
มักจะเก็บรหัสของคุณเป็นระเบียบเรียบร้อยสะอาดและรูปแบบที่ดี
ใช้ที่ถูกต้องประเภทเอกสาร
เสมอประกาศประเภทเอกสารเป็นบรรทัดแรกในเอกสารของคุณ:
ถ้าคุณต้องการที่สอดคล้องกับแท็กกรณีที่ต่ำกว่า, คุณสามารถใช้:
<!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>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 ช่วยให้การผสมตัวอักษรพิมพ์ใหญ่และตัวพิมพ์เล็กในชื่อแอตทริบิวต์
เราขอแนะนำให้ใช้ชื่อแอตทริบิวต์พิมพ์เล็กเนื่องจาก:
- ผสมชื่อพิมพ์ใหญ่และเล็กจะไม่ดี
- นักพัฒนาได้ตามปกติใช้ชื่อตัวพิมพ์เล็ก (เช่นใน XHTML)
- ทำความสะอาดดูตัวพิมพ์เล็ก
- ตัวพิมพ์เล็กจะง่ายต่อการเขียน
ค่าอ้างแอตทริบิวต์
HTML5 ช่วยให้ค่าแอตทริบิวต์ไม่ทราบราคา
เราขอแนะนำให้ quoting ค่าแอตทริบิวต์เนื่องจาก:
- ผสมค่าตัวพิมพ์ใหญ่และพิมพ์เล็กไม่ดี
- ค่าที่ยกมาจะง่ายต่อการอ่าน
- คุณต้องใช้คำพูดถ้าค่ามีช่องว่าง
ที่เลวร้ายมาก:
นี้จะไม่ทำงานเพราะค่าที่มีช่องว่าง:
<table class=table striped>
แย่:
<table class=striped>
ดี:
<table
class="striped">
แอตทริบิวต์ภาพ
เสมอเพิ่มแอตทริบิวต์ "alt" ให้กับภาพ คุณลักษณะนี้เป็นสิ่งสำคัญเมื่อภาพด้วยเหตุผลบางอย่างไม่สามารถแสดงได้ นอกจากนี้ยังมักจะกำหนดความกว้างและความสูงของภาพ จะช่วยลดริบหรี่เพราะเบราว์เซอร์สามารถจองพื้นที่สำหรับภาพก่อนที่จะโหลด
แย่:
<img
src="html5.gif">
ดี:
<img
src="html5.gif" alt="HTML5" style="width:128px;height:128px">
ช่องว่างและป้ายที่เท่าเทียมกัน
HTML5 ช่วยให้ช่องว่างรอบเครื่องหมายเท่ากับ แต่พื้นที่น้อยง่ายต่อการอ่านและหน่วยงานกลุ่มดีกว่ากัน
แย่:
<link
rel = "stylesheet" href = "styles.css">
ดี:
<link rel="stylesheet" href="styles.css">
หลีกเลี่ยงเส้นรหัสยาว
เมื่อใช้โปรแกรมแก้ไข HTML ก็ไม่สะดวกที่จะเลื่อนไปทางขวาและซ้ายในการอ่านรหัส HTML
พยายามที่จะหลีกเลี่ยงเส้นรหัสนานกว่า 80 ตัวอักษร
บรรทัดว่างและเยื้อง
อย่าเพิ่มบรรทัดว่างเปล่าโดยไม่มีเหตุผล
สำหรับการอ่านเพิ่มบรรทัดว่างเปล่าที่จะแยกบล็อกรหัสขนาดใหญ่หรือตรรกะ
สำหรับการอ่านเพิ่มสองช่องว่างของการเยื้อง อย่าใช้คีย์แท็บ
อย่าใช้บรรทัดที่ว่างเปล่าที่ไม่จำเป็นและการเยื้อง มันไม่จำเป็นที่จะเยื้องทุกองค์ประกอบ:
ไม่จำเป็น:
<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">
ประกาศภาษาเป็นสิ่งสำคัญสำหรับการใช้งานการเข้าถึง (อ่านหน้าจอ) และเครื่องมือค้นหา
ถนัด <html> หรือ <body> สามารถผิดพลาด DOM และซอฟต์แวร์ XML
ถนัด <body> สามารถผลิตข้อผิดพลาดในเบราว์เซอร์รุ่นเก่า (IE9)
ถนัด <head>?
ในมาตรฐาน HTML5, <head> แท็กยังสามารถถูกมองข้าม
โดยค่าเริ่มต้นเบราว์เซอร์จะเพิ่มองค์ประกอบทั้งหมดก่อน <body> เพื่อเริ่มต้น <head> องค์ประกอบ
คุณสามารถลดความซับซ้อนของ HTML โดยถนัด <head> tag:
ตัวอย่าง
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
เราไม่แนะนำให้ถนัด <head>
ไม่ใส่แท็กคือไม่คุ้นเคยกับนักพัฒนาเว็บ มันต้องใช้เวลาที่จะจัดตั้งขึ้นเป็นแนวทาง
ข้อมูล 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>
การตั้ง Viewport
HTML5 แนะนำวิธีการที่จะช่วยให้นักออกแบบเว็บใช้ควบคุมวิวพอร์ตผ่าน <meta> แท็ก
วิวพอร์ตพื้นที่ที่มองเห็นของผู้ใช้ของหน้าเว็บ มันขึ้นอยู่กับอุปกรณ์และจะมีขนาดเล็กบนโทรศัพท์มือถือกว่าบนหน้าจอคอมพิวเตอร์
คุณควรมีดังต่อไป <meta> องค์ประกอบวิวพอร์ตในทุกหน้าเว็บของคุณ:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta> องค์ประกอบวิวพอร์ตให้คำแนะนำในเบราว์เซอร์ในการควบคุมขนาดของหน้าเว็บและปรับ
ความกว้าง = ส่วนกว้างของอุปกรณ์ชุดความกว้างของหน้าไปตามหน้าจอที่มีความกว้างของอุปกรณ์ (ซึ่งจะแตกต่างกันไปขึ้นอยู่กับอุปกรณ์)
เริ่มต้นขนาด = 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.
-->
ความคิดเห็นยาวจะง่ายต่อการสังเกตเห็นว่าพวกเขาจะเยื้องสองช่องว่าง
ผ้าสไตล์
ใช้ไวยากรณ์ที่ง่ายสำหรับการเชื่อมโยงไปยังแผ่นสไตล์ (ประเภทแอตทริบิวต์ที่ไม่จำเป็น):
<link rel="stylesheet" href="styles.css">
กฎสั้นสามารถเขียนได้บีบอัดในหนึ่งบรรทัดเช่นนี้
p.intro {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
ใช้ไวยากรณ์ที่เรียบง่ายสำหรับการโหลดสคริปต์ภายนอก (ประเภทแอตทริบิวต์ที่ไม่จำเป็น):
<script src="myscript.js">
