7 แท็ก HTML ที่คุณต้องรู้ในฐานะนักเขียนหรือบล็อกเกอร์ออนไลน์

ประเด็นที่สำคัญ

HTML มีบทบาทสำคัญในการเผยแพร่เนื้อหาที่เป็นลายลักษณ์อักษรบนอินเทอร์เน็ต เนื่องจากหน้าเว็บต้องอาศัยความสามารถในการแสดงข้อมูลในลักษณะที่น่าดึงดูด และจัดระเบียบเพื่อการจัดทำดัชนีที่เหมาะสมที่สุดโดยโปรแกรมค้นหา

เพื่อที่จะควบคุมการนำเสนอและความสวยงามของงานเขียนได้อย่างเต็มที่ ผู้เขียนจะต้องคุ้นเคยกับองค์ประกอบ HTML พื้นฐาน เช่น แท็กหัวเรื่อง แท็กข้อความตัวหนาและตัวเอียง และแท็กย่อหน้า

รายการ สัญลักษณ์แสดงหัวข้อย่อย และแท็กรูปภาพสามารถใช้เพื่อปรับปรุงการจัดระเบียบและความสวยงามของบทความ ในขณะที่ไฮเปอร์ลิงก์ให้บริบทเพิ่มเติมและปรับปรุงการจัดอันดับของเครื่องมือค้นหา

เป็นความเข้าใจผิดที่พบบ่อยในหมู่ผู้เขียนบางคน รวมถึงผู้ที่เชี่ยวชาญด้านเทคโนโลยีว่า ความชำนาญในความรู้ HTML นั้นไม่จำเป็น อย่างไรก็ตาม สำหรับเนื้อหาที่มีจุดประสงค์เพื่อการเผยแพร่บนอินเทอร์เน็ต ความเข้าใจเกี่ยวกับ HTML มีความเกี่ยวข้องและจำเป็นมากขึ้นกว่าการรับรู้ในตอนแรก

เว็บไซต์ใช้ HTML เป็นวิธีการแสดงเนื้อหา แม้ว่าโปรแกรมแก้ไขมาร์กอัป ผู้สร้างไซต์ และแพลตฟอร์มการจัดการเนื้อหาหลายรายจะอนุญาตให้แก้ไขบทความด้วยภาพได้ แต่สิ่งสำคัญที่ควรทราบคือโค้ด HTML ยังคงมีส่วนร่วมในกระบวนการนี้

เพื่อให้ได้คำสั่งที่ครอบคลุมเกี่ยวกับรูปลักษณ์ของเนื้อหาและปรับเปลี่ยนการนำเสนอได้อย่างแม่นยำ จำเป็นต้องทำความคุ้นเคยกับองค์ประกอบ HTML หลัก องค์ประกอบเหล่านี้ให้อิทธิพลอย่างมากต่อลักษณะที่ปรากฏของหน้าเว็บหรือเว็บไซต์ในแง่ของเค้าโครง สไตล์ และการจัดองค์กร ความคุ้นเคยกับการใช้งานทำให้ผู้ใช้สามารถกำหนดเนื้อหาดิจิทัลตามความต้องการและข้อกำหนดเฉพาะได้อย่างมีประสิทธิภาพ

แท็กหัวเรื่อง

แท็กส่วนหัวช่วยให้สามารถสรุปส่วนใดส่วนหนึ่งหรือส่วนย่อยภายในบทความได้ โดยทั่วไป เว็บเบราว์เซอร์จะแสดงแท็กส่วนหัวด้วยแบบอักษรที่ใหญ่และหนาขึ้น ซึ่งจะทำให้แท็กเหล่านั้นชัดเจนกว่าข้อความที่อยู่รอบๆ

นอกเหนือจากการถ่ายทอดข้อมูลภาพผ่านส่วนหัวแล้ว ยังให้ความรู้สึกถึงการจัดระเบียบและการจัดอันดับเนื้อหา ดังนั้นจึงอำนวยความสะดวกในการทำความเข้าใจโดยอัลกอริธึมการรวบรวมข้อมูลเว็บที่เกี่ยวข้องกับการจัดเรียงหน้าเว็บ

มีการใช้แท็กส่วนหัวที่มีหมายเลขหกแท็ก โดยที่ตัวเลขที่มีนัยสำคัญกว่าจะสอดคล้องกับส่วนหัวที่มีอันดับต่ำกว่า ขอแนะนำให้ใช้แท็กสำหรับชื่อหลักของหน้าเว็บ ในขณะที่ควรใช้แท็กสำหรับส่วนและแท็กสำหรับส่วนย่อย

เมื่อพิจารณาถึงลักษณะของเนื้อหาและกลุ่มเป้าหมายของคุณแล้ว ควรใช้โครงสร้างองค์กรที่เหมาะสมอย่างรอบคอบ แม้ว่า และ แท็กอาจเหมาะสมกับเนื้อหาที่ซับซ้อนหรือถูกกฎหมาย แต่ความสามารถในการอ่านอาจทำให้เกิดความท้าทายสำหรับผู้ชมทั่วไป

ส่วนหัวมีบทบาทสำคัญในการแบ่งบทความที่มีความยาวออกเป็นส่วนต่างๆ ที่สามารถจัดการได้มากขึ้น ทำให้ง่ายต่อการอ่านสำหรับผู้อ่านที่อาจพบว่าผนังข้อความดูน่ากลัว ต่างจากผู้อ่านเฉยๆ ที่อาจอ่านเนื้อหาที่ไม่น่าดึงดูด หัวข้อต่างๆ ให้ความรู้สึกถึงโครงสร้างที่กระตุ้นให้เกิดการมีส่วนร่วมอย่างแข็งขันกับเนื้อหา ด้วยการสลับฉากสั้นๆ ระหว่างหัวข้อต่างๆ ทำให้ทั้งนักเขียนและผู้อ่านได้พักหายใจและจัดกลุ่มใหม่ก่อนที่จะกลับเข้าสู่การอภิปรายที่กำลังดำเนินอยู่

โปรดตรวจสอบให้แน่ใจว่าคุณสรุปแต่ละองค์ประกอบส่วนหัวด้วยแท็กปิดที่เหมาะสม เช่น

การจัดรูปแบบตัวหนา ตัวเอียง และข้อความอื่นๆ

แท็กส่วนหัวมีบทบาทสำคัญในการกำหนดรูปแบบสถาปัตยกรรมโดยรวมของหน้าเว็บ ในขณะที่แท็กการจัดรูปแบบที่เฉพาะเจาะจงมากขึ้นได้รับการออกแบบมาเพื่อระบุรายละเอียดเล็กๆ น้อยๆ ภายในข้อความ ตัวอย่างเช่น เมื่อต้องการเน้นส่วนใดส่วนหนึ่งของประโยค แท็กเหล่านี้เสนอวิธีการในการเปลี่ยนแปลงรูปลักษณ์ของข้อความโดยไม่กระทบต่อความสำคัญของลำดับชั้น

⭐ สำหรับข้อความตัวหนา.

⭐ สำหรับข้อความตัวเอียง

⭐ สำหรับข้อความขีดทับ

เครื่องมือการจัดการมาร์กดาวน์และเนื้อหามักจะทำซ้ำการจัดรูปแบบเมื่อถ่ายโอนข้อความจากแอปพลิเคชันทางเลือก หากต้องการปรับแต่งข้อมูลนี้ ให้ลบโค้ดเหล่านี้ออกจากแหล่งที่มาดั้งเดิม หรือตัดการจัดรูปแบบออกเมื่อแทรกข้อมูล เพื่อหลีกเลี่ยงปัญหาดังกล่าวในระหว่างกระบวนการเริ่มต้น

ย่อหน้าและการเว้นวรรค

นอกจากการใช้ส่วนหัวเพื่อจัดระเบียบเนื้อหาออกเป็นส่วนต่างๆ แล้ว ยังสามารถใช้ทั้งองค์ประกอบ และ เพื่อแบ่งย่อหน้าหรือสร้างการขัดจังหวะบรรทัด ตามลำดับ

เครื่องมือแก้ไขภาพหลายอย่างจะรวมเครื่องหมายเหล่านี้ไว้โดยอัตโนมัติเมื่อพิมพ์ เช่น เมื่อกดปุ่ม Enter อย่างไรก็ตาม เป็นไปได้ที่ผู้ใช้เขียนเนื้อหาในโปรแกรมแก้ไขแบบข้อความเพื่อรวมคุณลักษณะเหล่านี้ไว้ในโค้ด HTML โดยตรง

เมื่อเขียนข้อความที่ต้องมีการแยกบรรทัดระหว่างบรรทัดโดยไม่จำเป็นต้องเริ่มย่อหน้าใหม่ การใช้แท็กปิดตัวเองของ HTML เป็นตัวเลือกที่เหมาะสม สิ่งนี้มีความเกี่ยวข้องอย่างยิ่งเมื่อสร้างบทกวีหรืองานวรรณกรรมอื่นๆ ที่แนวความคิดไหลลื่นจากบรรทัดหนึ่งไปยังอีกบรรทัดหนึ่งได้อย่างราบรื่น และไม่รับประกันว่าจะสร้างย่อหน้าที่แตกต่างกัน ในกรณีเช่นนี้ การใช้แท็กช่วยให้การเปลี่ยนผ่านเป็นไปอย่างราบรื่นโดยยังคงรักษาการแบ่งส่วนเชิงพื้นที่ที่ต้องการไว้

แท็ก เป็นองค์ประกอบ HTML ที่ไม่มีส่วนปิดที่สอดคล้องกัน ดังนั้น จึงควรใช้อย่างอิสระ คุณลักษณะนี้สามารถนำมาประกอบกับข้อเท็จจริงที่ว่ามันไม่มีหรือมีอิทธิพลต่อเนื้อหาหรือคำอธิบายใดๆ

การใช้เครื่องหมายเหล่านี้ช่วยให้ปฏิบัติตามหลักเกณฑ์ที่กำหนดไว้เกี่ยวกับคุณภาพความสวยงามของทั้งเนื้อหาที่เป็นลายลักษณ์อักษรและดิจิทัล ซึ่งจะเป็นการเพิ่มความน่าเชื่อถือของหน้าเว็บของตนตามที่ทั้งผู้เข้าชมที่เป็นมนุษย์และอัลกอริธึมของเครื่องมือค้นหารับรู้

ตัวเลขและสัญลักษณ์แสดงหัวข้อย่อย

รายการทำหน้าที่เป็นวิธีที่มีประสิทธิภาพในการจัดเรียงข้อมูลเมื่อนำเสนอหลายรายการติดต่อกัน เมื่อแยกแยะคอลเลกชั่นของส่วนประกอบแต่ละส่วน เช่น ส่วนผสมของสูตรหรือคำแนะนำตามลำดับ การใช้รายการจะช่วยให้มั่นใจว่ามีการจัดระเบียบที่สอดคล้องกัน

องค์ประกอบนี้ใช้เพื่อสร้างรายการเรียงลำดับหรือเรียงลำดับเลข ในขณะที่แท็ก แสดงรายการที่ไม่เรียงลำดับซึ่งมีรายการหัวข้อย่อย แท็กใช้เพื่อกำหนดองค์ประกอบแต่ละรายการภายในประเภทรายการใดประเภทหนึ่ง

นี่คือตัวอย่างลักษณะของรายการเรียงลำดับที่ประกอบด้วยห้าองค์ประกอบในรูปแบบ HTML:css รายการแรก รายการที่สอง รายการที่สาม รายการที่สี่ รายการที่ห้า

 <ol>
     <li>alpha</li>
     <li>bravo</li>
     <li>charlie</li>
     <li>delta</li>
     <li>echo</li>
</ol>

มาร์กอัปดังกล่าวเมื่อแสดงผลโดยเว็บเบราว์เซอร์ จะปรากฏในรูปแบบที่คล้ายกับโครงสร้างต่อไปนี้:

หากคุณต้องการใช้รายการแจกแจง โปรดแทนที่ด้วยเพื่อรับรายการหัวข้อย่อย

รหัส HTML ที่ให้มาสาธิตวิธีการจัดระเบียบเนื้อหาโดยใช้รายการที่ซ้อนกัน รายการที่อยู่นอกสุดถูกกำหนดโดยแท็ก พร้อมด้วยตัวระบุ"my-list"ภายในรายการภายนอก มีรายการภายในสองรายการที่สร้างขึ้นโดยใช้แท็ก และซ้อนอยู่ภายในเป็นรายการเพิ่มเติมที่แสดงโดยองค์ประกอบ ตามด้วยคำอธิบายข้อความที่สอดคล้องกันซึ่งอยู่ในแท็ก โครงสร้างนี้ช่วยให้สามารถนำเสนอข้อมูลหลายระดับอย่างเป็นระบบในรูปแบบที่ย่อยง่าย

งานนี้กำหนดให้คุณต้องจัดเตรียมข้อความที่ให้มาอย่างละเอียดและไพเราะยิ่งขึ้นโดยใช้ภาษาและน้ำเสียงที่เหมาะสม ซึ่งสื่อถึงความหมายเดียวกันในขณะที่ยังคงรูปแบบที่เป็นทางการไว้

 <ol>
  <li>alpha</li>
  <li>
    bravo
    <ol>
      <li>Hip</li>
      <li>Hip</li>
      <li>Hooray</li>
    </ol>
  </li>
  <li>charlie</li>
  <li>
    delta
    <ul>
      <li>Difference</li>
      <li>River mouth</li>
    </ul>
  </li>
  <li>echo</li>
</ol> 

คุณสามารถใช้โครงสร้างรายการที่ซ้อนกัน ซึ่งครอบคลุมรูปแบบรายการที่หลากหลาย เพื่อแสดงลำดับชั้นที่ซับซ้อนมากขึ้น และเพิ่มความเข้าใจสำหรับผู้อ่านของคุณเกี่ยวกับหัวข้อที่กำหนด

การสร้างโต๊ะ

เมื่อต้องจัดการกับข้อมูลที่เกี่ยวข้องกันในปริมาณที่มากขึ้น การใช้ตารางอาจเป็นวิธีการจัดระเบียบที่มีประสิทธิภาพ

หากต้องการสร้างตาราง HTML ให้เริ่มต้นด้วยองค์ประกอบ `

ควรใส่ข้อมูลทั้งหมดที่คุณตั้งใจจะแสดงภายในตาราง ใช้องค์ประกอบ เพื่อกำหนดแต่ละแถวของตาราง และใช้องค์ประกอบ เพื่อแสดงถึงแต่ละเซลล์ภายในแต่ละแถว หากคุณต้องการระบุส่วนหัวของตาราง คุณอาจแทนที่องค์ประกอบ ด้วยองค์ประกอบ ` ซึ่งหมายถึง"ส่วนหัวของตาราง"อย่าลืมระบุองค์ประกอบการปิดที่สอดคล้องกันสำหรับตาราง แถว และเซลล์ของคุณ

 <table>
     <tr>
          <th>Group 1</th>
          <th>Group 2</th>
     </tr>
     <tr>
          <td>Mark</td>
          <td>Belle</td>
     </tr>
     <tr>
          <td>Ralph</td>
          <td>Shane</td>
     </tr>
     <tr>
          <td>John</td>
          <td>Josie</td>
     </tr>
</table>

ในรูปแบบการแสดงผลภายในสภาพแวดล้อมการท่องเว็บ ตารางควรปรากฏดังนี้:

เมื่อใช้ HTML เพื่อสร้างตาราง สิ่งสำคัญคือต้องทราบว่ากระบวนการจะเกิดขึ้นทีละแถว แทนที่จะเป็นคอลัมน์ต่อคอลัมน์ อย่างไรก็ตาม เราสามารถใช้เทคนิค CSS ร่วมสมัยเพื่อตกแต่งตารางด้วยองค์ประกอบสไตล์ต่างๆ เช่น เส้นขอบ การวนซ้ำแถวสี และการตกแต่งเพิ่มเติม

การเพิ่มรูปภาพ

การรวมองค์ประกอบภาพเข้ากับเว็บเพจทำให้เกิดความท้าทายที่ไม่เหมือนใครเมื่อเปรียบเทียบกับการจัดรูปแบบเนื้อหาที่เป็นข้อความ โดยปกติแล้ว รูปภาพจะไม่ถูกถ่ายทอดผ่านภาษา จึงจำเป็นต้องมีการจัดเก็บไว้ภายในไฟล์แต่ละไฟล์ ดังนั้นจึงต้องสร้างวิธีการระบุตำแหน่งของไฟล์เหล่านี้ร่วมกับแท็ก HTML ที่เกี่ยวข้อง

การใช้องค์ประกอบ ![]() ช่วยให้สามารถรวมจินตภาพภายในเอกสารได้ อย่างไรก็ตาม มีความจำเป็นต้องใช้ฟังก์ชัน HTML ที่เรียกว่า"คุณลักษณะ"เพื่อระบุตำแหน่งของไฟล์รูปภาพที่แนบมาด้วย คุณลักษณะเหล่านี้จะถูกผนวกเข้ากับตัวระบุของแท็ก และนำหน้าเครื่องหมายปีกกาแบบสรุป แต่ละแอตทริบิวต์มีชื่อเล่นและค่าที่สอดคล้องกัน ซึ่งเชื่อมต่อกันด้วยเครื่องหมายเท่ากับ ขอแนะนำให้ใส่ค่าแอตทริบิวต์ไว้ในเครื่องหมายคำพูดคู่

นี่คือตัวอย่าง:

 <img alt="tree leaves and branches"
    src="https://images.unsplash.com/photo-1532365673558-f9bb768644e7"> 

แอตทริบิวต์"src"ซึ่งหมายถึงแหล่งที่มา ระบุ URL ของรูปภาพที่จะรวมไว้ นี่อาจเป็น URL เชิงสัมพันธ์หรือแบบสัมบูรณ์ ขึ้นอยู่กับว่าเป็นรูปภาพภายนอกหรืออยู่บนเซิร์ฟเวอร์เดียวกัน

แอตทริบิวต์"alt"หมายถึง"ข้อความแสดงแทน"ซึ่งทำหน้าที่ให้คำอธิบายของเนื้อหาที่ปรากฎภายในรูปภาพ โดยทั่วไปขอแนะนำให้รวมแอตทริบิวต์นี้เนื่องจากจะเก็บค่าไว้สำหรับผู้ใช้โปรแกรมอ่านหน้าจอและอัลกอริธึมของเครื่องมือค้นหา ไม่ว่าผู้ชมจะเป็นมนุษย์หรือเป็นอัตโนมัติ ผู้ที่ไม่สามารถรับรู้ภาพต้นฉบับไม่ว่าด้วยเหตุผลใดก็ตาม อาจได้รับข้อมูลเชิงลึกเกี่ยวกับเนื้อหาผ่านการจัดเตรียมข้อความแสดงแทน

เบราว์เซอร์จะรวมรูปภาพที่ระบุโดย URL แหล่งที่มาที่ให้ไว้ภายในแอตทริบิวต์’src’ซึ่งจะรวมเข้ากับหน้าเว็บได้อย่างราบรื่นดังนี้: