ความแตกต่างระหว่าง HTML และ CSS

ในบทความนี้ เราจะทำความเข้าใจความแตกต่างระหว่าง HTML และ CSS

HTML (HyperText Markup Language)

ย่อมาจาก Hyper Text Markup Language
ช่วยสร้างหน้าเว็บและแอปพลิเคชัน
ช่วยกำหนดโครงสร้างของหน้าเว็บ
เป็นภาษา Markup (ภาษาเครื่องหมาย)
ช่วยสร้างหน้าเว็บแบบคงที่ (Static Pages) ได้
ช่วยแสดงข้อมูล
HyperText ช่วยกำหนดลิงก์ระหว่างหน้าเว็บหลายหน้า
Markup Language ช่วยกำหนดเอกสารข้อความโดยใช้แท็ก (tags) ซึ่งให้โครงสร้างกับหน้าเว็บ
มีตัวเลือกสำรองและรองรับ (backup and support) น้อยกว่า
HTML ไม่สามารถใช้ภายใน CSS stylesheet ได้
ช่วยทำเครื่องหมายข้อความ (annotate) เพื่อให้ระบบเข้าใจและนำไปใช้ได้
มีจำนวนแท็กที่กำหนดไว้เฉพาะ
แท็กเหล่านี้ถูกกำหนดไว้ล่วงหน้า (predefined)
ข้อมูลถูกล้อมรอบด้วยแท็ก
แท็กปิด (Closing tags) ไม่ได้เป็นสิ่งจำเป็นเสมอไป

ตัวอย่าง HTML

<!DOCTYPE html> 
<html> 
<head> 
  <title>My title</title> 
</head> 
<body> 
  <h1>title</h1> 
  <p>A sample</p> 
</body> 
</html>

ผลลัพธ์

ความแตกต่างระหว่าง HTML และ CSS

CSS (Cascading Style Sheets)

ช่วยจัดรูปแบบ (style) หน้าเว็บ
ใช้คุณสมบัติการจัดรูปแบบต่างๆ เพื่อบรรลุเป้าหมาย
ใช้ 'selectors' และ 'declaration blocks'
สามารถเป็นไฟล์ภายนอก (external) หรือภายใน (internal) ขึ้นอยู่กับความต้องการ
CSS สามารถใช้ภายในเอกสาร HTML ได้
สามารถใช้แสดงข้อมูลได้
มีการสำรองและรองรับ (backup and support) สูงกว่า HTML

ตัวอย่าง CSS

<style> 
p { 
  color: pink; 
  text-align: left; 
} 
</style>