ប្រភេទ

ប្លុក និងធាតុទោល (Block vs Inline Elements)

នេះគឺជាមេរៀនដ៏សំខាន់បំផុតមួយ ដែលអ្នកត្រូវយល់អោយច្បាស់មុននឹងឈានចូលទៅរៀន CSS។ រាល់ Elements ទាំងអស់នៅក្នុង HTML ត្រូវបានបែងចែកជា ២ ប្រភេទធំៗ គឺ Block-level Elements និង Inline Elements ដោយផ្អែកលើ "ឥរិយាបទ" នៃការបង្ហាញរបស់វានៅលើអេក្រង់។

១. Block-level Elements (ធាតុផ្តាច់មុខ)

Block Elements តែងតែចាប់ផ្តើមនៅលើ បន្ទាត់ថ្មី ជានិច្ច ហើយវាស៊ីទំហំទទឹងពេញ (100% ពីឆ្វេងទៅស្តាំ) នៃកន្លែងដែលវាស្ថិតនៅ។ ទោះបីជាអត្ថបទវានៅខ្លីក៏ដោយ ក៏វាមិនអនុញ្ញាតអោយអ្នកណាផ្សេងមកនៅក្បែរវាដែរ (លុះត្រាតែអ្នកប្រើ CSS ទៅកែវា)។

Element ពេញនិយម៖ <div>, <p>, <h1> ដល់ <h6>, <ul>, <ol>, <li>, <table>, <form>

២. Inline Elements (ធាតុរួសរាយ)

Inline Elements មិន ចាប់ផ្តើមនៅលើបន្ទាត់ថ្មីនោះទេ។ វាស៊ីទំហំតែប៉ុនអត្ថបទរបស់វាប៉ុណ្ណោះ។ ដូច្នេះហើយ ទើបវាអាចនៅរួមគ្នាលើបន្ទាត់តែមួយបានយ៉ាងច្រើន (ដូចជាពាក្យនៅក្នុងកថាខណ្ឌតែមួយ)។

Element ពេញនិយម៖ <span>, <a>, <img>, <b>, <strong>, <i>, <input>

៣. តើ <div> និង <span> ប្រើសម្រាប់ធ្វើអ្វី?

ទាំងពីរនេះមិនមានអត្ថន័យអ្វីពិសេសសម្រាប់ Google ទេ ប៉ុន្តែពួកវាត្រូវបានប្រើប្រាស់ច្រើនជាងគេបំផុតសម្រាប់ការរៀបចំ Layout (រៀបចំប្លង់) ដោយសហការជាមួយ CSS។

• <div>: (Block) ត្រូវបានគេប្រើសម្រាប់ ធ្វើជាប្រអប់ខ្ចប់ (Container) របស់របរផ្សេងៗបញ្ចូលគ្នាជាក្រុម ដើម្បីងាយស្រួលរៀបចំទីតាំង ឬចាក់ពណ៌ផ្ទៃខាងក្រោយទាំងមូល។
• <span>: (Inline) ប្រើសម្រាប់ កំណត់សម្គាល់ពាក្យមួយ ឬឃ្លាមួយ នៅក្នុងកថាខណ្ឌធំ ដើម្បីធ្វើការប្តូរពណ៌វាជាដើម ដោយមិនអោយកថាខណ្ឌនោះធ្លាក់ទៅបន្ទាត់ថ្មី។

៤. Semantic Elements (Element ដែលមានអត្ថន័យ)

ចាប់តាំងពី HTML5 ចេញមក ជំនួសអោយការប្រើ <div> សម្រាប់គ្រប់កន្លែង (ដែលហៅថា Div Soup ធ្វើអោយកូដពិបាកមើល) គេបានបង្កើត Semantic Block Elements ជាច្រើនដើម្បីជំនួស <div> ដោយបញ្ជាក់ពីអត្ថន័យច្បាស់លាស់៖

• <header> : ក្បាលនៃគេហទំព័រ (កន្លែងដាក់ Logo និង Menu)។
• <nav> : របារបញ្ជាទិសដៅ (Navigation bar)។
• <main> : មាតិកាសំខាន់បំផុតនៃទំព័រ។
• <article> : អត្ថបទព័ត៌មាន (អាចផ្តាច់យកទៅដាក់ទីណាផ្សេងក៏មានន័យគ្រប់គ្រាន់)។
• <section> : ផ្នែកផ្សេងៗនៃគេហទំព័រ។
• <footer> : បាតក្រោមនៃគេហទំព័រ (កន្លែងដាក់ Copyright ឬ Contact)។

ទាំងអស់នេះមានដំណើរការ (ជា Block) ដូច <div> បេះបិទគ្រាន់តែវាជួយអោយ Google និងអ្នកសរសេរកូដគ្នាឯង ងាយស្រួលយល់ថាផ្នែកហ្នឹងជាអ្វីប៉ុណ្ណោះ។