ຫຼັກການທີ່ສໍາຄັນຂອງການເຄື່ອນໄຫວເວັບມາດຕະຖານທີ່ຮັບຜິດຊອບສໍາລັບອຸດສາຫະກໍາທີ່ພວກເຮົາມີໃນມື້ນີ້ແມ່ນຄວາມຄິດຂອງການນໍາໃຊ້ອົງປະກອບ HTML ສໍາລັບສິ່ງທີ່ພວກເຂົາມີຫຼາຍກ່ວາວ່າພວກເຂົາເຈົ້າອາດຈະປາກົດຢູ່ໃນຕົວທ່ອງເວັບໂດຍຄ່າເລີ່ມຕົ້ນ. ນີ້ແມ່ນເປັນທີ່ຮູ້ຈັກເປັນການນໍາໃຊ້ HTML Semantic.
HTML Semantic ແມ່ນຫຍັງ
ຕົວຊີ້ວັດ HTML semantic ຫຼື semantic ແມ່ນ HTML ທີ່ແນະນໍາຄວາມຫມາຍໃນຫນ້າເວັບແທນທີ່ຈະສະເຫນີພຽງແຕ່. ຕົວຢ່າງເຊັ່ນ,
tag ຊີ້ໃຫ້ເຫັນວ່າຂໍ້ຄວາມທີ່ປິດໄວ້ເປັນວັກ.
ນີ້ແມ່ນທັງທາງທິດສະດີແລະທິດສະດີ, ເພາະວ່າປະຊາຊົນຮູ້ວ່າວັກແມ່ນຫຍັງແລະຕົວທ່ອງເວັບຮູ້ວິທີສະແດງໃຫ້ເຫັນ.
ຢູ່ດ້ານລຸ່ມຂອງສົມຜົນນີ້, ແທໍກເຊັ່ນ ແລະ ບໍ່ມີຄວາມຫມາຍ, ເພາະວ່າພວກເຂົາກໍານົດວ່າວິທີໃດຄວນເບິ່ງ (bold ຫຼື italic) ແລະບໍ່ໃຫ້ຄວາມຫມາຍເພີ່ມເຕີມຕໍ່ກັບ markup.
ຕົວຢ່າງຂອງ tags HTML semantic ປະກອບມີ tags header
ຜ່ານ , , ແລະ . ມີ tags HTML semantic ຫຼາຍທີ່ສາມາດນໍາໃຊ້ໃນເວລາທີ່ທ່ານສ້າງເວັບໄຊທ໌ທີ່ສອດຄ່ອງກັບມາດຕະຖານ.
ເປັນຫຍັງທ່ານຄວນເອົາໃຈໃສ່ກ່ຽວກັບຄໍາເວົ້າທີ່ກ່ຽວຂ້ອງ
ຜົນປະໂຫຍດຂອງການຂຽນ HTML ກ່ຽວກັບຄວາມສໍາຄັນແມ່ນສິ່ງທີ່ຄວນເປັນເປົ້າຫມາຍຂັບຂີ່ຂອງຫນ້າເວັບໃດຫນຶ່ງ - ຄວາມປາຖະຫນາທີ່ຈະສື່ສານ. ໂດຍການເພີ່ມແທໍກ semantic ກັບເອກະສານຂອງທ່ານ, ທ່ານໃຫ້ຂໍ້ມູນເພີ່ມເຕີມກ່ຽວກັບເອກະສານທີ່ຊ່ວຍໃນການສື່ສານ. ໂດຍສະເພາະ, ແທໍກ semantic ເຮັດໃຫ້ມັນຊັດເຈນກັບຕົວທ່ອງເວັບຄວາມຫມາຍຂອງຫນ້າແລະເນື້ອຫາຂອງມັນແມ່ນຫຍັງ.
ຄວາມຊັດເຈນດັ່ງກ່າວແມ່ນຍັງມີການສື່ສານກັບເຄື່ອງຈັກຊອກຫາ, ການຮັບປະກັນວ່າຫນ້າທີ່ຖືກຕ້ອງຖືກສົ່ງໄປສໍາລັບການສອບຖາມທີ່ຖືກຕ້ອງ.
ແທັບ HTML Semantic ສະຫນອງຂໍ້ມູນກ່ຽວກັບເນື້ອຫາຂອງແທໍກເຫຼົ່ານີ້ທີ່ນອກເຫນືອຈາກວິທີທີ່ພວກເຂົາເບິ່ງຢູ່ໃນຫນ້າໃດຫນຶ່ງ. ຂໍ້ຄວາມທີ່ຖືກປິດໄວ້ໃນແທັບ ແມ່ນຖືກຮັບຮູ້ໂດຍຕົວທ່ອງເວັບໃນບາງປະເພດຂອງພາສາກໍານົດລະຫັດ.
ແທນທີ່ຈະພະຍາຍາມທີ່ຈະເຮັດໃຫ້ລະຫັດນັ້ນ, ຕົວທ່ອງເວັບເຂົ້າໃຈວ່າທ່ານກໍາລັງໃຊ້ຂໍ້ຄວາມນັ້ນເປັນຕົວຢ່າງຂອງລະຫັດສໍາລັບຈຸດປະສົງຂອງບົດຄວາມຫຼືບົດແນະນໍາອອນໄລນ໌ຂອງບາງປະເພດ.
ການນໍາໃຊ້ແທໍກ semantic ເຮັດໃຫ້ທ່ານມີຫຼາຍ hooks ສໍາລັບການຄໍ້າປະກັນເນື້ອໃນຂອງທ່ານ. ບາງທີມື້ນີ້ທ່ານມັກຈະມີຕົວຢ່າງລະຫັດຂອງທ່ານສະແດງໃນແບບຕົວທ່ອງເວັບເລີ່ມຕົ້ນ, ແຕ່ມື້ອື່ນ, ທ່ານຕ້ອງການໂທຫາພວກມັນອອກດ້ວຍສີພື້ນຫລັງສີຂີ້ເຖົ່າ, ແລະຕໍ່ມາທ່ານຕ້ອງການກໍານົດຄອບຄົວ font ຫຼື monogram ທີ່ຖືກຕ້ອງເພື່ອໃຊ້ສໍາລັບ ຕົວຢ່າງຂອງທ່ານ. ທ່ານສາມາດເຮັດໄດ້ທັງຫມົດຂອງສິ່ງເຫຼົ່ານີ້ໂດຍໃຊ້ຫມາຍ marking semantic ແລະ smartly ນໍາໃຊ້ CSS.
ໃຊ້ແທໍກ Semantic ຢ່າງຖືກຕ້ອງ
ໃນເວລາທີ່ທ່ານຕ້ອງການນໍາໃຊ້ແທໍກ semantic ເພື່ອຖ່າຍທອດຄວາມຫມາຍແທນທີ່ຈະສໍາລັບຈຸດປະສົງການນໍາສະເຫນີ, ທ່ານຈໍາເປັນຕ້ອງລະມັດລະວັງວ່າທ່ານບໍ່ໃຊ້ພວກມັນຢ່າງຖືກຕ້ອງພຽງແຕ່ສໍາລັບຄຸນລັກສະນະສະແດງຜົນທົ່ວໄປຂອງພວກເຂົາ. ບາງຄໍາທີ່ຖືກນໍາໃຊ້ໂດຍທົ່ວໄປທີ່ຖືກນໍາໃຊ້ໂດຍທົ່ວໄປແລ້ວແມ່ນມີ:
- blockquote - ບາງຄົນໃຊ້ tag ເພື່ອຂຽນຂໍ້ຄວາມທີ່ບໍ່ແມ່ນຄໍາສັ່ງ. ນີ້ແມ່ນເນື່ອງຈາກວ່າ blockquotes ຖືກດັດແປງໂດຍຄ່າເລີ່ມຕົ້ນ. ຖ້າທ່ານພຽງແຕ່ຕ້ອງການຜົນປະໂຫຍດຂອງການເຂົ້າ, ແຕ່ຂໍ້ຄວາມບໍ່ແມ່ນ blockquote, ໃຊ້ຂອບຂອບ CSS ແທນ.
- p - ບາງບັນນາທິການເວັບໃຊ້
& nbsp; (ພື້ນທີ່ທີ່ບໍ່ທໍາລາຍທີ່ມີຢູ່ໃນ paragraoph) ເພື່ອເພີ່ມຊ່ອງຫວ່າງຕື່ມອີກລະຫວ່າງເອກະສານຫນ້າ, ແທນທີ່ຈະກໍານົດວັກໆຕົວຈິງສໍາລັບຂໍ້ຄວາມຂອງຫນ້ານັ້ນ. ເຊັ່ນດຽວກັບຕົວຢ່າງ indenting ທີ່ໄດ້ກ່າວມາກ່ອນຫນ້ານີ້, ທ່ານຄວນໃຊ້ຄຸນສົມບັດແບບຂອບຫຼື padding ເພື່ອເພີ່ມພື້ນທີ່.
- ul - ເຊັ່ນດຽວກັນກັບ blockquote, ການຕິດຕັ້ງຂໍ້ຄວາມພາຍໃນ
tag indents ຂໍ້ຄວາມທີ່ຢູ່ໃນຕົວທ່ອງເວັບສ່ວນໃຫຍ່. ນີ້ແມ່ນທັງຂໍ້ມູນທີ່ບໍ່ຖືກຕ້ອງແລະບໍ່ຖືກຕ້ອງ HTML ເພາະວ່າມີພຽງ - tags ທີ່ຖືກຕ້ອງພາຍໃນ
. ອີກເທື່ອຫນຶ່ງ, ນໍາໃຊ້ແບບເລື່ອນຫຼືແບບ padding ເພື່ອເຂົ້າເບິ່ງຂໍ້ຄວາມ.
- h1-h6 - ຫົວຂໍ້ຫົວຂໍ້ສາມາດຖືກນໍາໃຊ້ເພື່ອເຮັດໃຫ້ຕົວອັກສອນຂະຫນາດໃຫຍ່ແລະມີຄວາມຫນາແຫນ້ນ, ແຕ່ຖ້າບໍ່ແມ່ນຫົວຂໍ້, ມັນບໍ່ຄວນຢູ່ໃນຫົວຂໍ້ແທັກ. ການນໍາໃຊ້ຄຸນສົມບັດ CSS ຕົວອັກສອນ - ນ້ໍາຫນັກແລະ font-size ແທນຖ້າທ່ານຕ້ອງການປ່ຽນຂະຫນາດຫຼືນ້ໍາຫນັກຂອງຂໍ້ຄວາມສະເພາະໃນຫນ້າຂອງທ່ານ.
ໂດຍໃຊ້ແທັບ HTML ທີ່ມີຄວາມຫມາຍ, ທ່ານສ້າງຫນ້າທີ່ໃຫ້ຂໍ້ມູນເພີ່ມເຕີມກ່ວາພຽງແຕ່ສິ່ງທີ່ອ້ອມຂ້າງທັງຫມົດທີ່ມີ tags
.
HTML Tags ທີ່ມີຄວາມຫມາຍ?
ໃນຂະນະທີ່ເກືອບທຸກ HTML4 tag ແລະທຸກ HTML5 tags ມີຄວາມຫມາຍກ່ຽວກັບຄວາມຫມາຍ, ບາງຄໍາທີ່ມີລັກສະນະຕົ້ນຕໍໃນລັກສະນະທໍາມະດາ.
ຕົວຢ່າງເຊັ່ນ HTML5 ໄດ້ປັບຄ່າຄວາມຫມາຍຂອງແທໍກ ແລະ ໃຫ້ເປັນຄວາມຫມາຍ. ປ້າຍ ບໍ່ສົ່ງຄວາມສໍາຄັນພິເສດແຕ່ແທນທີ່ຈະເປັນຂໍ້ຄວາມທີ່ສະແດງອອກເປັນແບບຫນາແຫນ້ນ. ໂຄດ ຍັງບໍ່ສົ່ງເສີມຄວາມສໍາຄັນຫຼືຄວາມສໍາຄັນຕື່ມອີກ, ແຕ່ແທນທີ່ຈະກໍານົດຂໍ້ຄວາມທີ່ຖືກສະແດງໃຫ້ເຫັນໂດຍປົກກະຕິ.
Semantic HTML Tags
ຊື່ຫຍໍ້ Acronym
Long quote Definition ທີ່ຢູ່ສໍາລັບຜູ້ຂຽນ (s) ຂອງເອກະສານ ການອ້າງອິງ Code reference Teletype text ແບ່ງຕາມເຫດຜົນ ຕູ້ຄອນເທນເນີແບບທົ່ວໄປ ຂໍ້ຄວາມທີ່ຖືກລຶບ ຂຽນຂໍ້ຄວາມ ເນັ້ນຫນັກ ຄວາມເຂັ້ມແຂງທີ່ເຂັ້ມແຂງ
headline ລະດັບຫນ້າທໍາອິດ
ລໍາດັບຊັ້ນທີສອງ
ລໍາດັບຊັ້ນທີສາມ
ຫົວຂໍ້ສີ່ລະດັບ
ລໍາດັບຊັ້ນຫ້າຂອງລະດັບ
ລໍາດັບຊັ້ນທີ VI
ພັກຜ່ອນທໍາມະດາ ຂໍ້ຄວາມທີ່ຕ້ອງເຂົ້າໄປໂດຍຜູ້ໃຊ້
ຂໍ້ຄວາມທາງສ່ວນຫນ້າຂອງຮູບແບບ
Short quote inline ສັ້ນ ຜະລິດຕະພັນຕົວຢ່າງ Subscript Superscript ຕົວແປຫຼືຂໍ້ຄວາມຜູ້ໃຊ້ກໍານົດ
, ແລະ . ມີ tags HTML semantic ຫຼາຍທີ່ສາມາດນໍາໃຊ້ໃນເວລາທີ່ທ່ານສ້າງເວັບໄຊທ໌ທີ່ສອດຄ່ອງກັບມາດຕະຖານ.
ເປັນຫຍັງທ່ານຄວນເອົາໃຈໃສ່ກ່ຽວກັບຄໍາເວົ້າທີ່ກ່ຽວຂ້ອງ
ຜົນປະໂຫຍດຂອງການຂຽນ HTML ກ່ຽວກັບຄວາມສໍາຄັນແມ່ນສິ່ງທີ່ຄວນເປັນເປົ້າຫມາຍຂັບຂີ່ຂອງຫນ້າເວັບໃດຫນຶ່ງ - ຄວາມປາຖະຫນາທີ່ຈະສື່ສານ. ໂດຍການເພີ່ມແທໍກ semantic ກັບເອກະສານຂອງທ່ານ, ທ່ານໃຫ້ຂໍ້ມູນເພີ່ມເຕີມກ່ຽວກັບເອກະສານທີ່ຊ່ວຍໃນການສື່ສານ. ໂດຍສະເພາະ, ແທໍກ semantic ເຮັດໃຫ້ມັນຊັດເຈນກັບຕົວທ່ອງເວັບຄວາມຫມາຍຂອງຫນ້າແລະເນື້ອຫາຂອງມັນແມ່ນຫຍັງ.
ຄວາມຊັດເຈນດັ່ງກ່າວແມ່ນຍັງມີການສື່ສານກັບເຄື່ອງຈັກຊອກຫາ, ການຮັບປະກັນວ່າຫນ້າທີ່ຖືກຕ້ອງຖືກສົ່ງໄປສໍາລັບການສອບຖາມທີ່ຖືກຕ້ອງ.
ແທັບ HTML Semantic ສະຫນອງຂໍ້ມູນກ່ຽວກັບເນື້ອຫາຂອງແທໍກເຫຼົ່ານີ້ທີ່ນອກເຫນືອຈາກວິທີທີ່ພວກເຂົາເບິ່ງຢູ່ໃນຫນ້າໃດຫນຶ່ງ. ຂໍ້ຄວາມທີ່ຖືກປິດໄວ້ໃນແທັບ ແມ່ນຖືກຮັບຮູ້ໂດຍຕົວທ່ອງເວັບໃນບາງປະເພດຂອງພາສາກໍານົດລະຫັດ.
ແທນທີ່ຈະພະຍາຍາມທີ່ຈະເຮັດໃຫ້ລະຫັດນັ້ນ, ຕົວທ່ອງເວັບເຂົ້າໃຈວ່າທ່ານກໍາລັງໃຊ້ຂໍ້ຄວາມນັ້ນເປັນຕົວຢ່າງຂອງລະຫັດສໍາລັບຈຸດປະສົງຂອງບົດຄວາມຫຼືບົດແນະນໍາອອນໄລນ໌ຂອງບາງປະເພດ.
ການນໍາໃຊ້ແທໍກ semantic ເຮັດໃຫ້ທ່ານມີຫຼາຍ hooks ສໍາລັບການຄໍ້າປະກັນເນື້ອໃນຂອງທ່ານ. ບາງທີມື້ນີ້ທ່ານມັກຈະມີຕົວຢ່າງລະຫັດຂອງທ່ານສະແດງໃນແບບຕົວທ່ອງເວັບເລີ່ມຕົ້ນ, ແຕ່ມື້ອື່ນ, ທ່ານຕ້ອງການໂທຫາພວກມັນອອກດ້ວຍສີພື້ນຫລັງສີຂີ້ເຖົ່າ, ແລະຕໍ່ມາທ່ານຕ້ອງການກໍານົດຄອບຄົວ font ຫຼື monogram ທີ່ຖືກຕ້ອງເພື່ອໃຊ້ສໍາລັບ ຕົວຢ່າງຂອງທ່ານ. ທ່ານສາມາດເຮັດໄດ້ທັງຫມົດຂອງສິ່ງເຫຼົ່ານີ້ໂດຍໃຊ້ຫມາຍ marking semantic ແລະ smartly ນໍາໃຊ້ CSS.
ໃຊ້ແທໍກ Semantic ຢ່າງຖືກຕ້ອງ
ໃນເວລາທີ່ທ່ານຕ້ອງການນໍາໃຊ້ແທໍກ semantic ເພື່ອຖ່າຍທອດຄວາມຫມາຍແທນທີ່ຈະສໍາລັບຈຸດປະສົງການນໍາສະເຫນີ, ທ່ານຈໍາເປັນຕ້ອງລະມັດລະວັງວ່າທ່ານບໍ່ໃຊ້ພວກມັນຢ່າງຖືກຕ້ອງພຽງແຕ່ສໍາລັບຄຸນລັກສະນະສະແດງຜົນທົ່ວໄປຂອງພວກເຂົາ. ບາງຄໍາທີ່ຖືກນໍາໃຊ້ໂດຍທົ່ວໄປທີ່ຖືກນໍາໃຊ້ໂດຍທົ່ວໄປແລ້ວແມ່ນມີ:
- blockquote - ບາງຄົນໃຊ້ tag ເພື່ອຂຽນຂໍ້ຄວາມທີ່ບໍ່ແມ່ນຄໍາສັ່ງ. ນີ້ແມ່ນເນື່ອງຈາກວ່າ blockquotes ຖືກດັດແປງໂດຍຄ່າເລີ່ມຕົ້ນ. ຖ້າທ່ານພຽງແຕ່ຕ້ອງການຜົນປະໂຫຍດຂອງການເຂົ້າ, ແຕ່ຂໍ້ຄວາມບໍ່ແມ່ນ blockquote, ໃຊ້ຂອບຂອບ CSS ແທນ.
- p - ບາງບັນນາທິການເວັບໃຊ້
& nbsp; (ພື້ນທີ່ທີ່ບໍ່ທໍາລາຍທີ່ມີຢູ່ໃນ paragraoph) ເພື່ອເພີ່ມຊ່ອງຫວ່າງຕື່ມອີກລະຫວ່າງເອກະສານຫນ້າ, ແທນທີ່ຈະກໍານົດວັກໆຕົວຈິງສໍາລັບຂໍ້ຄວາມຂອງຫນ້ານັ້ນ. ເຊັ່ນດຽວກັບຕົວຢ່າງ indenting ທີ່ໄດ້ກ່າວມາກ່ອນຫນ້ານີ້, ທ່ານຄວນໃຊ້ຄຸນສົມບັດແບບຂອບຫຼື padding ເພື່ອເພີ່ມພື້ນທີ່.
- ul - ເຊັ່ນດຽວກັນກັບ blockquote, ການຕິດຕັ້ງຂໍ້ຄວາມພາຍໃນ
tag indents ຂໍ້ຄວາມທີ່ຢູ່ໃນຕົວທ່ອງເວັບສ່ວນໃຫຍ່. ນີ້ແມ່ນທັງຂໍ້ມູນທີ່ບໍ່ຖືກຕ້ອງແລະບໍ່ຖືກຕ້ອງ HTML ເພາະວ່າມີພຽງ - tags ທີ່ຖືກຕ້ອງພາຍໃນ
. ອີກເທື່ອຫນຶ່ງ, ນໍາໃຊ້ແບບເລື່ອນຫຼືແບບ padding ເພື່ອເຂົ້າເບິ່ງຂໍ້ຄວາມ.
- h1-h6 - ຫົວຂໍ້ຫົວຂໍ້ສາມາດຖືກນໍາໃຊ້ເພື່ອເຮັດໃຫ້ຕົວອັກສອນຂະຫນາດໃຫຍ່ແລະມີຄວາມຫນາແຫນ້ນ, ແຕ່ຖ້າບໍ່ແມ່ນຫົວຂໍ້, ມັນບໍ່ຄວນຢູ່ໃນຫົວຂໍ້ແທັກ. ການນໍາໃຊ້ຄຸນສົມບັດ CSS ຕົວອັກສອນ - ນ້ໍາຫນັກແລະ font-size ແທນຖ້າທ່ານຕ້ອງການປ່ຽນຂະຫນາດຫຼືນ້ໍາຫນັກຂອງຂໍ້ຄວາມສະເພາະໃນຫນ້າຂອງທ່ານ.
ໂດຍໃຊ້ແທັບ HTML ທີ່ມີຄວາມຫມາຍ, ທ່ານສ້າງຫນ້າທີ່ໃຫ້ຂໍ້ມູນເພີ່ມເຕີມກ່ວາພຽງແຕ່ສິ່ງທີ່ອ້ອມຂ້າງທັງຫມົດທີ່ມີ tags
.
HTML Tags ທີ່ມີຄວາມຫມາຍ?
ໃນຂະນະທີ່ເກືອບທຸກ HTML4 tag ແລະທຸກ HTML5 tags ມີຄວາມຫມາຍກ່ຽວກັບຄວາມຫມາຍ, ບາງຄໍາທີ່ມີລັກສະນະຕົ້ນຕໍໃນລັກສະນະທໍາມະດາ.
ຕົວຢ່າງເຊັ່ນ HTML5 ໄດ້ປັບຄ່າຄວາມຫມາຍຂອງແທໍກ ແລະ ໃຫ້ເປັນຄວາມຫມາຍ. ປ້າຍ ບໍ່ສົ່ງຄວາມສໍາຄັນພິເສດແຕ່ແທນທີ່ຈະເປັນຂໍ້ຄວາມທີ່ສະແດງອອກເປັນແບບຫນາແຫນ້ນ. ໂຄດ ຍັງບໍ່ສົ່ງເສີມຄວາມສໍາຄັນຫຼືຄວາມສໍາຄັນຕື່ມອີກ, ແຕ່ແທນທີ່ຈະກໍານົດຂໍ້ຄວາມທີ່ຖືກສະແດງໃຫ້ເຫັນໂດຍປົກກະຕິ.
Semantic HTML Tags
ຊື່ຫຍໍ້ Acronym
Long quote Definition ທີ່ຢູ່ສໍາລັບຜູ້ຂຽນ (s) ຂອງເອກະສານ ການອ້າງອິງ Code reference Teletype text ແບ່ງຕາມເຫດຜົນ ຕູ້ຄອນເທນເນີແບບທົ່ວໄປ ຂໍ້ຄວາມທີ່ຖືກລຶບ ຂຽນຂໍ້ຄວາມ ເນັ້ນຫນັກ ຄວາມເຂັ້ມແຂງທີ່ເຂັ້ມແຂງ
headline ລະດັບຫນ້າທໍາອິດ
ລໍາດັບຊັ້ນທີສອງ
ລໍາດັບຊັ້ນທີສາມ
ຫົວຂໍ້ສີ່ລະດັບ
ລໍາດັບຊັ້ນຫ້າຂອງລະດັບ
ລໍາດັບຊັ້ນທີ VI
ພັກຜ່ອນທໍາມະດາ ຂໍ້ຄວາມທີ່ຕ້ອງເຂົ້າໄປໂດຍຜູ້ໃຊ້
ຂໍ້ຄວາມທາງສ່ວນຫນ້າຂອງຮູບແບບ
Short quote inline ສັ້ນ ຜະລິດຕະພັນຕົວຢ່າງ Subscript Superscript ຕົວແປຫຼືຂໍ້ຄວາມຜູ້ໃຊ້ກໍານົດ