Khmer Angkor Academy | សិក្សាបង្កើតគេហទំព័រជាភាសាខ្មែរ

Semantic Tags និង Presentational Tags

ក្នុង HTML5 យើងមាន Tags ពីរប្រភេទសំរាប់ការកំណត់ទ្រង់ទ្រាយអត្ថបទ៖

Semantic Tags (Tags ដែលមានអត្ថន័យ)

Tags ទាំងនេះប្រាប់អំពីអត្ថន័យនៃខ្លឹមសារ ហើយល្អសំរាប់ SEO និង Accessibility។ ឧទាហរណ៍៖

 - បង្ហាញពីសារៈសំខាន់ (ចេញក្រាស់)
 - បង្ហាញពីការសង្កត់សំឡេង (ចេញទ្រេត)

Presentational Tags (Tags ដែលគ្រាន់តែកំណត់រូបរាង)

Tags ទាំងនេះគ្រាន់តែកំណត់រូបរាងដោយមិនបានប្រាប់អត្ថន័យ។ ឧទាហរណ៍៖

 - ធ្វើឲ្យអក្សរក្រាស់ (គ្រាន់តែរូបរាង)
 - ធ្វើឲ្យអក្សរទ្រេត (គ្រាន់តែរូបរាង)

សំខាន់៖ ប្រើ Semantic Tags (, ) នៅពេលដែលខ្លឹមសារមានសារៈសំខាន់ ឬត្រូវសង្កត់សំឡេង។ ប្រើ Presentational Tags (, ) នៅពេលដែលគ្រាន់តែចង់កំណត់រូបរាងប៉ុណ្ណោះ។

ក្រាស់

ដើម្បីឲ្យអក្សរមួយក្រាស់ យើងប្រើ  ឬ  ។ ពាក្យពេញរបស់ b គឺ bold ។

ទ្រេត

ដើម្បីឲ្យអក្សរមួយក្រាស់ ត្រូវសរសេរនៅក្នុង  ។ ពាក្យពេញរបស់ i គឺ italic ។

ភាពខុសគ្នារវាង strong vs b និង em vs i

Tag	ប្រភេទ	គោលបំណង	ឧទាហរណ៍ប្រើប្រាស់
`<strong>`	Semantic	ខ្លឹមសារសំខាន់ ឬចាំបាច់ត្រូវយកចិត្តទុកដាក់	ការព្រមាន, ពាក្យគន្លឹះ
`<b>`	Presentational	គ្រាន់តែធ្វើឲ្យអក្សរក្រាស់ដើម្បីទាក់ទាញភ្នែក	ឈ្មោះផលិតផល, ពាក្យគន្លឹះក្នុងអត្ថបទ
`<em>`	Semantic	ខ្លឹមសារដែលត្រូវសង្កត់សំឡេង	ពាក្យដែលត្រូវអានដោយសង្កត់សំឡេង
`<i>`	Presentational	គ្រាន់តែធ្វើឲ្យអក្សរទ្រេត	ពាក្យបរទេស, ឈ្មោះវិទ្យាសាស្ត្រ, ការគិតក្នុងចិត្ត

បន្ទាត់ពីក្រោម

ដើម្បីឲ្យអក្សរមួយមានបន្ទាត់ពីក្រោយ ត្រូវសរសេរនៅក្នុង  ។ ពាក្យពេញរបស់ u គឺ underline ។

បន្ទាត់កណ្ដាលអក្សរ

ដើម្បីឲ្យអក្សរមួយមានបន្ទាត់គូសផ្ដេកចំកណ្ដាលអក្សរ ត្រូវសរសេរនៅក្នុង <del> ។ ពាក្យពេញរបស់ del គឺ delete ។

ពាក្យកត់ចំណាំ

ដើម្បីឲ្យអក្សរមួយមានពណ៌លឿងពីក្រោយ ត្រូវសរសេរវានៅក្នុង  ។

អក្សរតូចលើ

អក្សរតូចលើតែងត្រូវបានឃើញក្នុងគណិតវិទ្យា ។

x² ។

អក្សរតូចលើត្រូវសរសេរនៅក្នុង  ។ ពាក្យពេញរបស់ sup គឺ superscript ។

អក្សរតូចក្រោម

អក្សរតូចលើតែងត្រូវបានឃើញក្នុងគីមីវិទ្យា ។

H₂O ។

អក្សរតូចខាងលើត្រូវសរសេរនៅក្នុង  ។ ពាក្យពេញរបស់ sub គឺ subscript ។

អាគតដ្ឋាន

អាគតដ្ឋានមានដូចជា ចំណងជើងបទចំរៀង ចំណងជើងរឿង ឈ្មោះក្រុមហ៊ុន ឈ្មោះគំនូរ ឈ្មោះរូបចម្លាក់... តែមិនមែនឈ្មោះមនុស្សទេ ។ យើងត្រូវសរសេរវានៅក្នុង <cite> ។

អាសយដ្ឋាន

អាសយដ្ឋានត្រូវសរសេរនៅក្នុង <address> តែមិនមែនសំរាប់តែអាសយដ្ឋានប៉ុណ្ណោះទេ វាត្រូវបានប្រើសំរាប់ព័ត៌មានទំនាក់ទំនងផងដែរ ។

អព្ភន្តរស័ព្ទ

ឃ្លាដែលត្រូវសរសេរនៅក្នុងអព្ភន្តរសញ្ញា ត្រូវសរសេរនៅក្នុង <q> ។ ពាក្យពេញរបស់ q គឺ quote ។

សម្រង់បណ្ដុំ

សម្រង់បណ្ដុំគឺជាបណ្ដុំនៃឃ្លាដែលស្រង់ចេញពីប្រភពមួយផ្សេងទៀត ។ យើងត្រូវសរសេរសម្រង់បណ្ដុំនៅក្នុង <blockquote> ។

អត្ថបទដែលត្រូវបានសរសេរនៅក្នុង <blockquote> គឺតែងផ្ដាច់ខ្លួនវាពីគេពីឯង ហើយមានគម្លាតនៅជុំវិញ ។

Tags បន្ថែមសំរាប់ទ្រង់ទ្រាយអត្ថបទ

បន្ទាត់ពីក្រោមសម្រាប់អត្ថបទបន្ថែម (ins)

Tag <ins> ប្រើសំរាប់បង្ហាញអ្វីដែលត្រូវបានបន្ថែមថ្មីក្នុងឯកសារ។ ពាក្យពេញរបស់ ins គឺ insert។

បន្ទាត់កណ្ដាល (s)

Tag <s> ប្រើសំរាប់បង្ហាញអត្ថបទដែលលែងត្រឹមត្រូវ ឬលែងពាក់ព័ន្ធ។

អក្សរតូច (small)

Tag  ប្រើសំរាប់អត្ថបទជាព័ត៌មានបន្ថែម ដូចជាកម្មសិទ្ធិ, ការពន្យល់តូចៗ។

អក្សរកាត់ (abbr)

Tag <abbr> ប្រើសំរាប់បង្ហាញអក្សរកាត់ ឬពាក្យកាត់ ហើយអាចប្រើ attribute title ដើម្បីពន្យល់ពាក្យពេញ។

ពេលវេលា (time)

Tag <time> ប្រើសំរាប់បង្ហាញពេលវេលា ឬកាលបរិច្ឆេទ ដោយប្រើ attribute datetime សំរាប់ទ្រង់ទ្រាយដែលម៉ាស៊ីនអាចអានបាន។

Tags សម្រាប់អត្ថបទកុំព្យូទ័រ

Tags ទាំងនេះប្រើសម្រាប់បង្ហាញកូដ, ពាក្យបញ្ជា, និងអត្ថបទពាក់ព័ន្ធកុំព្យូទ័រ។

កូដ (code)

Tag <code> ប្រើសំរាប់បង្ហាញកូដកុំព្យូទ័រ ឬឈ្មោះមុខងារ។

ក្ដារចុច (kbd)

Tag <kbd> ប្រើសំរាប់បង្ហាញការចុចក្ដារចុច (keyboard input)។ ពាក្យពេញរបស់ kbd គឺ keyboard។

លទ្ធផលកម្មវិធី (samp)

Tag <samp> ប្រើសំរាប់បង្ហាញលទ្ធផលចេញពីកម្មវិធី (sample output)។

អថេរ (var)

Tag <var> ប្រើសំរាប់បង្ហាញឈ្មោះអថេរក្នុងគណិតវិទ្យា ឬកម្មវិធី (variable)។

តារាងប្រៀបធៀប Formatting Tags ទាំងអស់

Tag	ប្រភេទ	លទ្ធផល	គោលបំណង
`<strong>`	Semantic	ក្រាស់	ខ្លឹមសារសំខាន់
`<b>`	Presentational	ក្រាស់	គ្រាន់តែក្រាស់
`<em>`	Semantic	ទ្រេត	សង្កត់សំឡេង
`<i>`	Presentational	ទ្រេត	គ្រាន់តែទ្រេត
`<u>`	Presentational	បន្ទាត់ពីក្រោម	បន្ទាត់ពីក្រោម
`<del>`	Semantic	~~បន្ទាត់កណ្ដាល~~	អត្ថបទដែលលុបចោល
`<s>`	Presentational	~~បន្ទាត់កណ្ដាល~~	អត្ថបទដែលលែងត្រឹមត្រូវ
`<ins>`	Semantic	បន្ទាត់ពីក្រោម	អត្ថបទដែលបន្ថែមថ្មី
`<mark>`	Semantic	លឿង	ពាក្យកត់ចំណាំ
`<small>`	Semantic	អក្សរតូច	ព័ត៌មានបន្ថែម
`<sup>`	Presentational	x²	អក្សរតូចលើ
`<sub>`	Presentational	H₂O	អក្សរតូចក្រោម
`<code>`	Semantic	`កូដ`	កូដកុំព្យូទ័រ
`<kbd>`	Semantic	`Ctrl`	ការចុចក្ដារចុច
`<samp>`	Semantic	`Output`	លទ្ធផលកម្មវិធី
`<var>`	Semantic	`x`	អថេរ
`<abbr>`	Semantic	Ex.	អក្សរកាត់
`<time>`	Semantic	2024	ពេលវេលា/កាលបរិច្ឆេទ
`<cite>`	Semantic	ចំណងជើង	អាគតដ្ឋាន
`<q>`	Semantic	សម្រង់	អព្ភន្តរស័ព្ទ
`<blockquote>`	Semantic	សម្រង់បណ្ដុំ	សម្រង់បណ្ដុំពីប្រភពផ្សេង

ការប្រើប្រាស់ល្អបំផុត (Best Practices)

ប្រើ Semantic Tags ជាអាទិភាព: ប្រើ  ជាជាង  និង  ជាជាង  នៅពេលដែលខ្លឹមសារមានអត្ថន័យពិសេស។ Semantic tags ល្អសំរាប់ SEO, Accessibility និង Screen Readers។
កុំប្រើច្រើនពេក: ការប្រើ formatting tags ច្រើនពេកធ្វើឲ្យអត្ថបទលំបាកអាន។ ប្រើតែនៅពេលចាំបាច់ប៉ុណ្ណោះ។
ប្រើ CSS សំរាប់រចនាប័ទ្ម: សំរាប់រចនាប័ទ្មទូទៅ (ពណ៌, ទំហំ, font) ត្រូវប្រើ CSS ជាជាង HTML formatting tags។
ប្រើ <del> និង <ins> ជាមួយគ្នា: នៅពេលបង្ហាញការផ្លាស់ប្តូរ ប្រើទាំងពីរដើម្បីបង្ហាញការលុបចោល និងការបន្ថែម។
ប្រើ <abbr> ជាមួយ title: តែងតែបន្ថែម attribute title ដើម្បីពន្យល់អក្សរកាត់។
ប្រើ <time> សំរាប់កាលបរិច្ឆេទ: ប្រើ <time> ជាមួយ datetime attribute ដើម្បីឲ្យម៉ាស៊ីនស្វែងរកអាចយល់បាន។
ប្រើ <code> សំរាប់កូដ: នៅពេលបង្ហាញកូដកុំព្យូទ័រ ត្រូវប្រើ <code> ដើម្បីឲ្យងាយសម្គាល់។

ចំណាំ: Semantic HTML ជួយឲ្យគេហទំព័ររបស់អ្នកងាយស្រួលប្រើប្រាស់សំរាប់អ្នកពិការ និងជួយកែលម្អ SEO (Search Engine Optimization) របស់គេហទំព័រ។

ទ្រង់ទ្រាយ​អត្ថបទ

Semantic Tags និង Presentational Tags

Semantic Tags (Tags ដែល​មាន​អត្ថន័យ)

Presentational Tags (Tags ដែល​គ្រាន់តែ​កំណត់​រូបរាង)

ក្រាស់

ទ្រេត

ភាព​ខុស​គ្នា​រវាង strong vs b និង em vs i

បន្ទាត់​ពី​ក្រោម

បន្ទាត់​កណ្ដាល​អក្សរ

ពាក្យ​កត់​ចំណាំ

អក្សរ​តូច​លើ

អក្សរ​តូច​ក្រោម