ຄວາມແຕກຕ່າງລະຫວ່າງ DIV ແລະ SECTION ຄືແນວໃດ?

ເຂົ້າໃຈ HTML5 SECTION Element

ໃນເວລາທີ່ HTML5 burts ໃນ scene ຈໍານວນປີກ່ອນຫນ້ານີ້, ມັນໄດ້ເພີ່ມຊໍ່ຂອງອົງປະກອບສ່ວນໃຫມ່ໃນການ langauge, ລວມທັງອົງປະກອບ SECTION. ສ່ວນໃຫຍ່ຂອງອົງປະກອບໃຫມ່ທີ່ HTML5 ແນະນໍາມີການນໍາໃຊ້ຢ່າງຈະແຈ້ງ. ຕົວຢ່າງ, ອົງປະກອບທີ່ຖືກນໍາໃຊ້ເພື່ອກໍານົດບົດຄວາມແລະພາກສ່ວນຕົ້ນຕໍຂອງຫນ້າເວັບ, ອົງປະກອບທີ່ຖືກນໍາໃຊ້ເພື່ອກໍານົດເນື້ອຫາທີ່ກ່ຽວຂ້ອງທີ່ບໍ່ສໍາຄັນກັບສ່ວນທີ່ເຫຼືອຂອງຫນ້າ, ແລະຫົວ, ຂອບ, ແລະທ້າຍເບື້ອງແມ່ນຕົວຕົນເອງທີ່ຊັດເຈນ. ອົງປະກອບ SECTION ໃຫມ່ທີ່ເພີ່ມໃຫມ່, ຢ່າງໃດກໍຕາມ, ແມ່ນຫນ້ອຍນ້ອຍຈະແຈ້ງ.

ປະຊາຊົນຈໍານວນຫຼາຍເຊື່ອວ່າອົງປະກອບຂອງເອກະສານ HTML ແລະແທ້ໆກໍ່ແມ່ນສິ່ງດຽວກັນທີ່ມີລັກສະນະທີ່ບັນຈຸຢູ່ໃນເວັບໄຊທ໌. ຄວາມເປັນຈິງ, ຢ່າງໃດກໍຕາມ, ແມ່ນວ່າທັງສອງອົງປະກອບ, ໃນຂະນະທີ່ທັງສອງເປັນອົງປະກອບທີ່ມີ, ແມ່ນຫຍັງແຕ່ທົ່ວໄປ. ມີເຫດຜົນສະເພາະທີ່ຈະນໍາໃຊ້ທັງພາກສ່ວນ SECTION ແລະອົງປະກອບ DIV - ແລະບົດຄວາມນີ້ຈະອະທິບາຍຄວາມແຕກຕ່າງເຫຼົ່ານີ້.

Sections and Divs

ອົງປະກອບພາກສ່ວນແມ່ນໄດ້ຖືກກໍານົດເປັນພາກທີ່ມີຄວາມຫມາຍຂອງຫນ້າເວັບຫລືເວັບໄຊທ໌ທີ່ບໍ່ແມ່ນປະເພດສະເພາະໃດຫນຶ່ງ (ເຊັ່ນບົດຫຼືຫລີກໄປທາງຫນຶ່ງ). ຂ້າພະເຈົ້າມັກຈະນໍາໃຊ້ອົງປະກອບນີ້ເມື່ອຂ້າພະເຈົ້າຫມາຍເຖິງສ່ວນທີ່ແຕກຕ່າງຂອງຫນ້າ - ສ່ວນທີ່ສາມາດຍ້າຍແລະຖືກນໍາໃຊ້ໃນຫນ້າອື່ນຫຼືພາກສ່ວນຂອງເວັບໄຊທ໌. ມັນເປັນສ່ວນທີ່ແຕກຕ່າງກັນຂອງເນື້ອຫາ, ຫຼື "ສ່ວນ" ຂອງເນື້ອໃນ, ຖ້າທ່ານຈະ.

ໃນທາງກົງກັນຂ້າມ, ທ່ານໃຊ້ອົງປະກອບ DIV ສໍາລັບບາງສ່ວນຂອງຫນ້າທີ່ທ່ານຕ້ອງການທີ່ຈະແບ່ງປັນແຕ່ສໍາລັບຈຸດປະສົງອື່ນນອກເຫນືອຈາກ ຄວາມກ່ຽວຂ້ອງ . ຂ້າພະເຈົ້າຈະລວບລວມພື້ນທີ່ຂອງເນື້ອໃນໃນພະແນກຖ້າຂ້ອຍເຮັດຢ່າງດຽວເພື່ອໃຫ້ຕົນເອງ "hook" ໃຊ້ກັບ CSS. ມັນອາດຈະບໍ່ເປັນສ່ວນທີ່ແຕກຕ່າງກັນຂອງເນື້ອຫາໂດຍອີງໃສ່ຄໍາສັບ, ແຕ່ແມ່ນບາງສິ່ງບາງຢ່າງຂ້າພະເຈົ້າກໍານົດໃນຄໍາສັ່ງເພື່ອບັນລຸຮູບແບບທີ່ຂ້ອຍຕ້ອງການສໍາລັບຫນ້າຂອງຂ້ອຍ.

ມັນທັງຫມົດກ່ຽວກັບຄວາມສໍາຄັນ

ນີ້ແມ່ນແນວຄວາມຄິດທີ່ຍາກທີ່ຈະເຂົ້າໃຈ, ແຕ່ຄວາມແຕກຕ່າງພຽງແຕ່ລະຫວ່າງອົງປະກອບ DIV ແລະອົງປະກອບ SECTION ແມ່ນຄວາມກ່ຽວຂ້ອງ. ໃນຄໍາສັບຕ່າງໆອື່ນໆ, ມັນເປັນ ຄວາມຫມາຍ ຂອງພາກລະຫັດທີ່ທ່ານກໍາລັງແບ່ງປັນ.

ເນື້ອຫາທີ່ມີຢູ່ພາຍໃນອົງປະກອບ DIV ບໍ່ມີຄວາມຫມາຍໃດໆ. ມັນຖືກນໍາໃຊ້ທີ່ດີທີ່ສຸດສໍາລັບສິ່ງຕ່າງໆເຊັ່ນ:

• ຄໍເຕົ້າໄຂ່ທີ່ CSS ແລະ hooks ສໍາລັບຮູບແບບ CSS
• ຕູ້ຄອນເທນເນີ
• JavaScript hooks
• Divisions ສໍາລັບ HTML ເພື່ອເຮັດໃຫ້ມັນງ່າຍຕໍ່ການອ່ານ

ອົງປະກອບ DIV ໃຊ້ເປັນອົງປະກອບດຽວທີ່ພວກເຮົາໄດ້ສ້າງສໍາລັບການເພີ່ມຮູບແບບຂອງເອກະສານຂອງພວກເຮົາແລະສ້າງຄໍລໍາແລະຮູບແບບທີ່ຫນ້າສົນໃຈ. ເນື່ອງຈາກວ່າ, ພວກເຮົາໄດ້ສິ້ນສຸດລົງເຖິງກັບ HTML ທີ່ຖືກຂົ່ມເຫັງກັບອົງປະກອບ DIV - ສິ່ງທີ່ນັກອອກແບບເວັບອາດຈະເອີ້ນວ່າ "divitis." ມີເຖິງແມ່ນວ່າບັນນາທິການ WYSIWYG ທີ່ນໍາໃຊ້ອົງປະກອບ DIV ໄດ້ສະເພາະ. ຂ້າພະເຈົ້າໄດ້ຕົວຈິງແລ້ວໃນໄລຍະ HTML ທີ່ນໍາໃຊ້ອົງປະກອບ DIV ແທນທີ່ຈະສໍາລັບວັກ!

ມີ HTML5, ພວກເຮົາສາມາດເລີ່ມຕົ້ນນໍາໃຊ້ອົງປະກອບສ່ວນເພື່ອສ້າງເອກະສານຄໍາອະທິບາຍກ່ຽວກັບເຊີງລົບ (ນໍາໃຊ້ສໍາລັບການນໍາທາງແລະຕົວເລກການສະແດງອອກແລະອື່ນໆ) ແລະກໍານົດຮູບແບບຂອງອົງປະກອບເຫຼົ່ານັ້ນ.

ແມ່ນຫຍັງກ່ຽວກັບອົງປະກອບ SPAN?

ອົງປະກອບອື່ນໆທີ່ຄົນສ່ວນໃຫຍ່ຄິດກ່ຽວກັບເວລາທີ່ພວກເຂົາຄິດກ່ຽວກັບອົງປະກອບ DIV ແມ່ນອົງປະກອບ. ອົງປະກອບນີ້, ຄື DIV, ບໍ່ແມ່ນອົງປະກອບທີ່ມີຄວາມຫມາຍ. ມັນເປັນອົງປະກອບພາຍໃນທີ່ທ່ານສາມາດໃຊ້ໃນການເພີ່ມຮຽງສໍາລັບຄໍເຕົ້າໄຂ່ທີ່ແລະອັກສອນຕ່າງໆປະມານເນື້ອໃນຂອງເນື້ອໃນ (ສ່ວນໃຫຍ່ເປັນຂໍ້ຄວາມ). ໃນຄວາມຮູ້ສຶກນັ້ນມັນກໍ່ຄືກັບອົງປະກອບ DIV ເທົ່ານັ້ນ, ເທົ່ານັ້ນ, ແທນທີ່ຈະເປັນ ອົງປະກອບຕັນ . ໃນບາງທາງ, ມັນອາດຈະງ່າຍທີ່ຈະຄິດກ່ຽວກັບ DIV ເປັນອົງປະກອບ SPAN ລະດັບຕັນແລະໃຊ້ມັນໃນແບບດຽວກັນທ່ານຈະ SPAN ພຽງແຕ່ສໍາລັບເນື້ອຫາທັງຫມົດຂອງເນື້ອຫາ HTML.

ບໍ່ມີອົງປະກອບຂອງເສັ້ນລຽບທຽບໃນ HTML5.

ສໍາລັບລຸ້ນເກົ່າຂອງ Internet Explorer

ເຖິງແມ່ນວ່າທ່ານກໍາລັງສະຫນັບສະຫນູນສະບັບເກົ່າຂອງ IE (ເຊັ່ນ IE 8 ແລະຕ່ໍາກວ່າ) ທີ່ບໍ່ໄດ້ຮັບຮູ້ HTML5, ທ່ານບໍ່ຄວນຢ້ານກົວທີ່ຈະນໍາໃຊ້ tags HTML ທີ່ຖືກຕ້ອງ. semantics ຈະຊ່ວຍໃຫ້ທ່ານແລະທີມງານຂອງທ່ານຈັດການຫນ້າໃນອະນາຄົດ (ເພາະວ່າທ່ານຈະຮູ້ວ່າສ່ວນນັ້ນແມ່ນບົດຄວາມຖ້າມັນຖືກອ້ອມຮອບດ້ວຍອົງປະກອບ ARTICLE). ບວກ, ຕົວທ່ອງເວັບທີ່ບໍ່ໄດ້ຮັບຮູ້ tags ທີ່ຈະຊ່ວຍໃຫ້ພວກເຂົາດີກວ່າ.

ທ່ານຍັງສາມາດນໍາໃຊ້ອົງປະກອບສ່ວນ HTML5 ກ່ຽວກັບສ່ວນປະກອບທີ່ມີ Internet Explorer, ທ່ານພຽງແຕ່ຕ້ອງການເພີ່ມສະຄິບແລະອາດຈະມີບາງອົງປະກອບ DIV ອ້ອມຂ້າງເພື່ອໃຫ້ພວກເຂົາຮັບຮູ້ວ່າ HTML ເປັນ HTML.

ການໃຊ້ DIV ແລະ SECTION Elements

ຖ້າທ່ານໃຊ້ພວກມັນຢ່າງຖືກຕ້ອງ, ທ່ານສາມາດນໍາໃຊ້ທັງສອງອົງປະກອບ DIV ແລະ SECTION ຮ່ວມກັນໃນເອກະສານ HTML5 ທີ່ຖືກຕ້ອງ. ດັ່ງທີ່ທ່ານໄດ້ເຫັນຢູ່ໃນບົດຄວາມນີ້, ທ່ານໃຊ້ອົງປະກອບ SECTION ເພື່ອກໍານົດບາງສ່ວນທີ່ແຍກອອກມາຂອງເນື້ອຫາແລະທ່ານໃຊ້ອົງປະກອບ DIV ເປັນ hooks ສໍາລັບ CSS ແລະ JavaScript ແລະກໍານົດຮູບແບບທີ່ບໍ່ມີຄວາມຫມາຍກ່ຽວກັບຄວາມຫມາຍ.

ບົດສະບັບຕົ້ນໂດຍ Jennifer Krynin. ແກ້ໄຂໂດຍ Jeremy Girard ເມື່ອວັນທີ 3/15/17