Studio Noom

1. !DOCTYPE html

<!DOCTYPE html> คือการประกาศให้บราวเซอร์รู้ว่าไฟล์ต่อไปนี้คือ HTML

2. TAG FOCUS HTML 5

<Nav> แสดงลิงค์หลักของเว็บไซต์
<Header> แสดงข้อมูลในส่วนหัว
<aside> แสดงข้อมูลในส่วนด้านข้าง
<footer> แสดงข้อมูลในส่วนล่างของเว็บไซต์
<section> สำหรับแบ่งข้อมูลออกเป็น ส่วน ๆ
<article> แยกรายละเอียดของข้อมูลที่สนใจ

3. ANNOUNCE ID AND CLISS HTML 5

. หมายถึงการประกาศ CLASS
# หมายถึงการประกาศ ID ซึ่งในไฟล์นั้น ๆ ต้องมี ID ไม่ซ้ำกัน

4. NEW ELEMENT HTML 5

<time> สำหรับแสดงวันและเวลา
<mark> สำหรับแสดงข้อมูลที่เราเน้น
<meter> ใช้สำหรับดูข้อมูลของการใช้งานทั่วไป
<Progress> ใช้ดูความก้าวหน้าของคำสั่ง
<Canvas> ใช้สำหรับการวาดรูป 2 มิติ ใช้ Java Script ในการจัดการคำสั่งแล้วควบคุม
<Video> ใช้สำหรับเล่นไฟล์วิดีโอ
<Audio> ใช้สำหรับเล่นไฟล์เสียง

5. NEW INPUT HTML 5

<Date>
<Month>
<Week>
<Time>
<Range>
<Email>

6. TYPE ELEMENT HTML

Void Element เป็นเอลิเมนต์ที่มีเพียงแท็กเปิดเพียงแท็กเดียว ตัวอย่างแท็ก br, hr
Raw Element เป็นเอลิเมนต์ที่ประกอบด้วย 3 ส่วนได้แก่ (แท็กเปิด ข้อความ แท็กปิด)
Nested Elements เป็นเอลิเมนต์ที่ประกอบด้วย 3 ส่วน (แท็กเปิด แท็กลูก ข้อความ แท็กลูกปิด แท็กปิด)

7. INLINE ELEMENT AND BLOCK ELEMENT

Block Element คือเอลิเมนต์ที่มีลักษณะเป็นบล็อก เมื่อกำหนด Block Element ลงในเว็บไซต์ เอลิเมนต์จะขึ้นบรรทัดใหม่ และใช้ความกว้าง 100% ของแท็กที่อยู่สูงกว่า (Parent Element)
Inline Element คือเอลิเมนต์ที่ไม่มีลักษณะเป็นบล็อค ซึ่งเมื่อกำหนด Inline Element ลงในเว็บไซต์เอลิเมนต์จะอยู่ในบรรทัดเดิม และใช้ความกว้างเท่าที่จำเป็นเท่านั้น

8. Padding Vs Margin

ความแตกต่างระหว่าง padding กับ margin อยู่ตรงที่ padding เป็นระยะห่างของข้อความที่อยู่ภายในเอลิเมนต์ ส่วน margin เป็นระยะห่างระหว่างเอลิเมนต์ที่อยู่ภายนอก สิ่งสำคัญคือ การกำหนด margin จะไม่มีผลต่อพื้นที่ของเอลิเมนต์ที่ต้องการแสดงบนหน้าจอแต่อย่างใด