จริงๆแล้ว ในมุมมองของผมคือ...
tag หมายถึง คน พรรคการเมือง จังหวัด ประเทศ ซึ่งบางทีก็ไม่เกี่ยวกันเลย เช่น จังหวัดกับพรรคการเมือง(กรณีศึกษาคือ br hr) แต่บางที่ก็ขึ้นอยู่กับ อีก tag เช่น คน อาศัยอยู่ในจังหวัด ซึ่งจังหวัดก็อยู่ในประเทศอีกที (กรณีศึกษาคือ แท็ก table tr td)
class หมายถึง เมือง ชานเมือง บ้านนอก ซึ่งมีความสัมพันธืกันตรงที่ เป็นแต่ละประเภท ของจังหวัด เหมือนกัน
id หมายถึง กรุงเทพฯ นครฯ ทรท ไอ้แอนนนนน (ซึ่งไม่บังคับ แต่ควรที่จะเป็นชื่อเฉพาะและไม่ซ้ำกัน เพื่อการเรียกจาก Javascript ให้ถูกต้อง)
กล่าวคือ
id(identify) จะเป็นชื่อของ tag เพื่อให้ tag นั้นๆ ดูต่างกันเช่น
<คน id="ทักษิณ">อิอิอิ</คน>
<คน id="ไอ้แอนนนนน">หึหึหึ</คน>
เวลา Javascript มันจะเลือกกระทำ เราจึงต้องบอกให้ Javascript ให้เข้าใจซะก่อนว่าจะเอาใครออกไป
ถ้าไม่ใส่ id แล้ว มันก็จะสับสน ว่าจะเอาใครออกกันแน่
ส่วน class ก็เหมือนกับ ชนชั้น หรือรูปแบบ เช่น รถเบนซ์คลาส C คลาส S
ตัวอย่างก็เช่น
<ประเทศ>
<จังหวัด class="เมือง" id="กรุงเทพฯ"></จังหวัด>
<จังหวัด class="เมือง" id="เชียงใหม่"></จังหวัด>
<จังหวัด class="บ้านนอก" id="นครฯ"></จังหวัด>(สมมุตินะจ๊ะสมมุติ)
</ประเทศ>
อะไรแบบนี้
ดังนั้น ถ้าในอนาคตเราจำเป็นต้องใช้ Javascript เข้ามาร่วมด้วยในอนาคต อย่าพยายามใช้ id ซ้ำกัน
หรือไม่งั้นก็หลีกเลี่ยงโดยการ ใช้ class ในการกำหนด style เสียดีกว่า...
แต่ที่มีทั้ง id และ class ก็เนื่องจากว่า
กรุงเทพ เชียงใหม่ นครฯ มีที่ตั้งที่แน่นอน และที่ตั้งไม่ซ้ำกันอยู่แล้ว จึงกำหนดสไตล์ ในเรื่องของที่ตั้งไว้กับ id
ส่วน เมือง และ บ้านนอก ก็ต่างกันที่ มีความมั่งคั่ง และความล้าหลัง มีหลายจังหวัดที่ดูเป็นเมือง และหลายจังหวัดที่ดูเป็นบ้านนอก เราจึงกำหนดสไตล์ในเรื่องประมาณนี้ไว้กับ class
ส่วน ประเทศและจังหวัด ก็มีความต่างกัน เพราะจังหวัดอยู่ในประเทศอีกทีนึง
สมมุติว่าคนประเทศไทยส่วนใหญ่ นับถือศาสนาพุทธ เราก็ตั้งสไตล์ให้กับ tag ประเทศ ว่าให้นับถือพุทธ
แต่สมมุติว่า จังหวัด นครฯ นับถืออิสลามกันหมด เราก็ มากำหนดสไตล์ให้กับ id ที่ชื่อ นครฯ ให้นับถืออิสลามต่างหาก ผลที่ได้ออกมาคือ หลายๆจังหวัดนับถือศาสนาพุทธ แต่ นครฯ นับถืออิสลาม
นอกจากนั้น ประเทศ อาจจะใส่ id ไปก็ได้ เช่น <ประเทศ id="ประเทศไทย"></ประเทศ>
-------------------------------------------------
ส่วน ตรง .s1 เราจะสามารถเปลี่ยนเป็นอะไรก็ได้ตามใจเรา เช่น .cat ก็ไม่ว่ากัน แต่เวลากำหนด class ใน แท็ก ก็ต้องกำหนดเป็น class="cat" ด้วย
------------------------------------------------
อีกเรื่องนึงคือว่า....
ดูตัวอย่างนะ
.kitty {
color: red;
font-size: 12pt;
background-color: green
}จะเห็นว่าแม้ว่าโปรแกรมช่วยสร้างต่างๆมันจะมี ; ห้อยท้ายทุก property
แต่วิธีที่ถูกต้องจริงๆ property ตัวสุดท้าย ควรจะไม่มี ; ปิดท้าย
เพราะว่า ถ้าปิดท้าย ตามทฤษฎีระบบมันจะมองว่า จะยังมีอีก property ที่อยู่หลัง ; อันสุดท้ายอีก
ทำให้มันอ่านตัวเปล่าๆ แบบเปล่าประโยชน์ เพิ่มอีก 1 property ทำให้ มันช้าขึ้น
แต่หยวนๆหรอกน่ะ เพราะจริงๆแล้วมันต่างกับเพียงโคตรเสี้ยวๆๆๆ วินาที และเราจะแทบไม่เห็นความแตกต่างเลย
ที่โปรแกรมมันห้อยท้ายให้ ก็คงเพราะง่ายต่อการที่ให้โปรแกรมมันจัดการโค้ดนั่นเอง
-------------------------------------------------
ณ ตอนนี้คงต้องใช้จินตนาการไปก่อน เดี๋ยวจะเริ่มสอนให้ใช้งานจริงซะที
