ແມ່ນຫຍັງຄື Tag HTML ທຽບກັບ HTML Element?

ມີຄວາມແຕກຕ່າງລະຫວ່າງເງື່ອນໄຂເຫຼົ່ານີ້ສອງ

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

ເມື່ອທ່ານໄດ້ຍິນຄໍາເວົ້າເຫຼົ່ານີ້ທັງສອງຄໍາເວົ້າ, ທ່ານອາດຈະຮູ້ວ່າພວກເຂົາຖືກນໍາໃຊ້ກັນຢ່າງລະອຽດ. ດັ່ງນັ້ນ, ຫນຶ່ງຄໍາຖາມທີ່ຜູ້ຊ່ຽວຊານເວັບໃຫມ່ຈໍານວນຫຼາຍມີເມື່ອພວກເຂົາເລີ່ມຕົ້ນເຮັດວຽກກັບ HTML code ແມ່ນ "ຄວາມແຕກຕ່າງກັນລະຫວ່າງ HTML Tag ແລະ Element HTML ແມ່ນຫຍັງ?"

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

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

HTML ແມ່ນ ພາສາການຕີລາຄາ , ຊຶ່ງຫມາຍຄວາມວ່າມັນຖືກຂຽນດ້ວຍລະຫັດທີ່ສາມາດອ່ານໂດຍບຸກຄົນທີ່ບໍ່ຈໍາເປັນຕ້ອງຖືກລວບລວມກ່ອນ. ໃນຄໍາສັບຕ່າງໆອື່ນໆ, ຂໍ້ຄວາມໃນຫນ້າເວັບແມ່ນ "ຫມາຍເຖິງ" ກັບລະຫັດເຫຼົ່ານີ້ເພື່ອໃຫ້ຄໍາແນະນໍາຂອງຕົວທ່ອງເວັບໃນເວັບທີ່ຈະສະແດງຂໍ້ຄວາມ. ເຫຼົ່ານີ້ tags markup ແມ່ນ tags HTML ຕົວຂອງເຂົາເຈົ້າເອງ.

ເມື່ອຂຽນ HTML, ທ່ານຂຽນ HTML tags. ແທັບ HTML ທັງຫມົດແມ່ນມີຈໍານວນພາກສ່ວນສະເພາະ, ລວມທັງ:

• ເຄື່ອງຫມາຍຫນ້ອຍກວ່າ <
• ຄໍາສັບຫຼືລັກສະນະທີ່ກໍານົດວ່າແທັກຖືກຂຽນ
• ຈໍານວນຂອງ HTML ຄຸນສົມບັດ ທາງເລືອກໃນຮູບແບບຂອງຊື່ = "ມູນຄ່າ" ຄູ່
• ແລະສຸດທ້າຍມີຫຼາຍກວ່າ

ຕົວຢ່າງ, ນີ້ແມ່ນບາງ HTML tags:

ເຫຼົ່ານີ້ແມ່ນທັງຫມົດ tags ເປີດ, ໂດຍບໍ່ມີຄຸນສົມບັດທາງເລືອກທີ່ເພີ່ມເຂົ້າໃນໃຫ້ເຂົາເຈົ້າ. ເຫຼົ່ານີ້ tags ສະແດງໃຫ້ເຫັນ:

• - ກໍານົດວັກຫນຶ່ງ.

• - ກໍານົດຫນ້າເປັນ HTML
• - ກໍານົດການແບ່ງເປັນ.

ຕໍ່ໄປນີ້ແມ່ນຍັງ HTML tags:

• ຕົວຢ່າງທັງຫມົດເຫຼົ່ານີ້ລວມມີຄຸນລັກສະນະຕ່າງໆທີ່ໄດ້ຖືກເພີ່ມໃສ່ແທັບ HTML ເປີດ.

  • ul
    ເປັນບັນຊີລາຍຊື່ທີ່ບໍ່ມີການສັ່ງຊື້ທີ່ມີຄຸນສົມບັດ ID
    • ພາກນີ້ມີຄຸນລັກສະນະຂອງຊັ້ນ
    • ອົງປະກອບມໍ, ຫຼືການເຊື່ອມໂຍງ, ລວມມີ "href" attribute
    • ແທໍກຮູບພາບທີ່ມີ "src" attribute

    ສໍາລັບທະນາຄານແລະຮູບພາບ, ຄຸນລັກສະນະແມ່ນຕົວຈິງແລ້ວບໍ່ເປັນທາງເລືອກ, ພວກເຂົາແມ່ນຈໍາເປັນສໍາລັບ tags ທີ່ຈະສະແດງຢ່າງຖືກຕ້ອງ. ທ່ານຈໍາເປັນຕ້ອງບອກບ່ອນເຊື່ອມຕໍ່ທີ່ຕ້ອງໄປ (ຊຶ່ງເປັນສິ່ງທີ່ "href" ເຮັດ) ແລະຮູບພາບທີ່ຈະສະແດງ (ເຊິ່ງແມ່ນສິ່ງທີ່ "src" attribute).

    ແມ່ນຫຍັງ HTML Elements

    ອີງຕາມຂໍ້ກໍານົດຂອງ HTML W3C , ອົງປະກອບ ເປັນພື້ນຖານການກໍ່ສ້າງພື້ນຖານຂອງ HTML ແລະປົກກະຕິແມ່ນມີ ສອງແທັກ : ແທັບເປີດແລະແທັບປິດ. ມາຮອດປະຈຸບັນພວກເຮົາໄດ້ເບິ່ງພຽງແຕ່ແທັບເປີດ, ເຊິ່ງຈະເລີ່ມຕົ້ນອົງປະກອບ. ເພື່ອຢຸດອົງປະກອບນັ້ນ, ທ່ານຂຽນແທັບປິດທີ່ສອດຄ້ອງກັນ.

    ຕົວຢ່າງ, ສໍາລັບອົງປະກອບຂອງວັກທ່ານຂຽນນີ້:

    ນີ້ແມ່ນປະກອບດ້ວຍປຶ້ມເປີດທີ່ພວກເຮົາໄດ້ເຫັນມາໃນປັດຈຸບັນເຊັ່ນດຽວກັນກັບຄໍາທີ່ປິດ - . ແທັບປິດແມ່ນແທ້ໆພຽງແຕ່ໂຄ້ດເປີດແຕ່ຊ້ໍາ, ແຕ່ມີ "slash ກ້າວຫນ້າ" ເພີ່ມໂດຍກົງຫຼັງຈາກ "ຫນ້ອຍກວ່າສັນຍາລັກ".

    ເກືອບທັງຫມົດອົງປະກອບ HTML ມີໂຄດຄໍາສັ່ງແລະແທັບປິດ. ແທັກເຫຼົ່ານີ້ປະກອບດ້ວຍຂໍ້ຄວາມທີ່ຈະສະແດງໃນຫນ້າເວັບ. ຕົວຢ່າງເຊັ່ນຂຽນຂໍ້ຄວາມຂອງຂໍ້ຄວາມ, ທ່ານຂຽນຂໍ້ຄວາມທີ່ຈະສະແດງຢູ່ໃນຫນ້າແລະຫຼັງຈາກນັ້ນໃສ່ມັນດ້ວຍແທັກເຫຼົ່ານີ້:

    ນີ້ແມ່ນບ່ອນທີ່ທ່ານຈະຂຽນຂໍ້ຄວາມຂອງວັກທີ່ທ່ານຕ້ອງການສະແດງຢູ່ໃນຫນ້າເວັບ.

    ບາງເອກະສານ HTML ບໍ່ມີໂຄ້ດປິດ. ເຫຼົ່ານີ້ເອີ້ນວ່າ "ອົງປະກອບທີ່ຫວ່າງບໍ່". ບາງຄັ້ງ, ພວກມັນແມ່ນເອີ້ນວ່າ " singleton " ຫຼື "void". ອົງປະກອບຫວ່າງບໍ່ແມ່ນງ່າຍທີ່ຈະນໍາໃຊ້ເພາະວ່າທ່ານພຽງແຕ່ຕ້ອງມີແທັບຫນຶ່ງໃນຫນ້າເວັບຂອງທ່ານແລະຕົວທ່ອງເວັບຈະຮູ້ວ່າຈະເຮັດແນວໃດ. ສໍາລັບຕົວຢ່າງ, ເພື່ອເພີ່ມການທໍາລາຍເສັ້ນດຽວກັບຫນ້າຂອງທ່ານ, ທ່ານຈະນໍາໃຊ້ໂຄດຄໍາສັ່ງ b.

    ອົງປະກອບທົ່ວໄປທີ່ປະກອບມີແຖບເປີດເປັນອົງປະກອບ "ຮູບພາບ". ຍົກ​ຕົວ​ຢ່າງ:

    ພວກເຮົາໄດ້ເຫັນຕົວຢ່າງນີ້ກ່ອນຫນ້ານີ້, ແຕ່ບໍ່ມີແທັບປິດສໍາລັບອົງປະກອບຮູບພາບນີ້. ຕົວທ່ອງເວັບພຽງແຕ່ຈະແທນທີ່ລະຫັດນີ້ກັບຮູບພາບທີ່ຖືກອ້າງອີງໃນ "href" attribute. ໃນກໍລະນີນີ້, ວ່າຈະເປັນ "logo.png".

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

    ບົດສະບັບຕົ້ນໂດຍ Jennifer Krynin. ແກ້ໄຂໂດຍ Jeremy Girard ວັນທີ 7/21/17