Semantic HTML: Best Practices for 2019

เผยแพร่แล้ว: 2019-08-31

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

HTML เชิงความหมายคืออะไร?

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

โดยทั่วไป คุณกำลังบอกโปรแกรมรวบรวมข้อมูลของเครื่องมือค้นหา ว่า "นี่คือโพสต์ในบล็อก" หรือ "นี่คือเมนูนำทาง" หรือ “เฮ้ นี่เป็นเพียงส่วนท้าย ดังนั้นอย่าทำร้ายฉันสำหรับเนื้อหาที่ซ้ำกัน ได้โปรด”

แต่มันทำอย่างนั้นได้อย่างไร? มันใช้แท็ก HTML5 พิเศษจำนวนมากที่มีความเฉพาะเจาะจงมาก มาดูตัวอย่างกันและคุณจะเห็นเอง

การจัดรูปแบบข้อความ

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

<p>This is <b>bold text</b></p>
<p>While <i>this is italics</i>, and this is <u>underlined</u>.</p>

ด้วย HTML เชิงความหมาย คุณจะใช้ข้อความที่ หนักแน่น เป็นตัวหนา และแสดงความสำคัญอย่างยิ่งยวดหรือ em เพื่อทำให้ข้อความเป็นตัวเอียง (หรือเน้นย้ำ) ที่น่าสนใจคือ U ยังคงใช้เพื่อขีดเส้นใต้ข้อความ อย่างไรก็ตาม MDN แนะนำให้ใส่สไตล์ผ่าน CSS ด้วย text-decoration: underline; เพื่อสร้างความแตกต่าง

<p>This is <strong>bold text</strong>, while <em>this is italics</em>.</p>
<p>This would be <u style=text-decoration: #222000 wavy underline;">underlined</u>.</p>

เราก็ชอบ เดลที่ จะแสดง ~~ขีดทับ~~ ข้อความที่ถูกลบ

<p>We are also fond of <em>del</em> to show <del>strikethrough</del> deleted text.</p>

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

<p>Make sure that you remember <strong>this term for your test</strong>.
<p>But you should remember <mark>this information about how to use it in context</mark>.</p> 
<p>If you do that, you will be fine.</p>

MDN กล่าวว่าไม่ควรใช้ในลักษณะเดียวกับที่คุณใช้ strong คุณใช้ ความแข็งแกร่ง เพื่อระบุสิ่งที่สำคัญในข้อความ และคุณใช้ เครื่องหมาย เพื่อเน้นสิ่งที่เกี่ยวข้องกับความเข้าใจในเนื้อหานั้น

ส่วน ส่วนหัว และเมนู

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

<div>
  <h1>Page Title Goes here</h1>
    <p>Tagline!</p>
  <div>
  	<ul>
  	  <li><a href="example.com">Home Page Link</a></li>
  	  <li><a href="example.com">Blog Page Link</a></li>
  	  <li><a href="example.com">Podcast Page Link</a></li>
  	</ul>
   </div>
</div>

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

 <div class="header" id="hero-section">
  <h1 class="page-title">Page Title Goes here</h1>
    <p>Tagline!</p>
  <div class="header-menu">
  	<ul>
  	  <li><a href="example.com">Home Page Link</a></li>
  	  <li><a href="example.com">Blog Page Link</a></li>
  	  <li><a href="example.com">Podcast Page Link</a></li>
  	</ul>
   </div>
</div>

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

<header>
  <h1>Page Title Goes Here</h1>
    <p>Tagline!</p>
  <nav>
    <a href="example.com">Home Page Link</a>
    <a href="example.com">Home Page Link</a>
    <a href="example.com">Home Page Link</a>
  </nav>
</header>

มันไม่ง่ายเลยที่จะอ่านและบอกว่าเกิดอะไรขึ้น? คุณมีแท็ก ส่วนหัว ที่แจ้งให้คุณทราบว่านี่คือส่วนหัวของหน้าและแท็ก นำทาง ที่ระบุเมนูการนำทาง (แม้จะฉลาดพอที่จะไม่ต้องใส่สไตล์พิเศษเพื่อแสดงรายการในแนวนอน)

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

<section id="hero-section">
  <header>
    <h1>Page Title Goes Here</h1>
      <p>Tagline!</p>
    <nav>
      <a href="example.com">Home Page Link</a>
      <a href="example.com">Home Page Link</a>
      <a href="example.com">Home Page Link</a>
    </nav>
  </header>
</section>

นอกจากนี้ โปรดสังเกตการใช้ id=”hero-section” ซึ่งเป็นขั้นตอนทางเลือกสำหรับขั้นตอนทางเลือก แต่คุณสามารถจัดรูปแบบ ส่วน ให้เป็นตัวเลือก CSS ได้ด้วยตัวเอง

ซื้อกลับบ้าน

ใช้ ส่วน ในสถานที่ที่คุณอาจอยากใช้ div ภายนอก
ใช้ สามารถใช้ ส่วนหัว เพื่อระบุว่าส่วนใดของหน้าเป็นส่วนหัวของคุณ คุณยังสามารถใช้สิ่งนี้ในบทความหรือโพสต์เพื่อระบุส่วนหัวของโพสต์นั้น ซึ่งแยกจากตัวเว็บไซต์เอง
ใช้ การนำทาง เมื่อคุณตั้งค่าเมนูการนำทางหลักสำหรับไซต์ Nav ไม่ได้เป็นวิธีสำหรับเครื่องมือค้นหาเพื่อค้นหาเชื่อมโยง แต่จะหาวิธีที่ผู้ใช้หลักสามารถนำทางไปยังเว็บไซต์ของคุณ คอลเล็กชันของลิงก์ใดๆ (เช่น เบรดครัมบ์ ฯลฯ) สามารถรวมไว้ใน nav . ได้

ส่วนท้าย

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

<div class="site-footer>
    <p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
    <a href="example.com/contact">Contact Us!</a>
    <img src="/logo.png">
</div>

ในขณะที่ส่วนท้ายความหมายอาจมีลักษณะดังนี้:

<footer>
    <p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
    <a href="example.com/contact">Contact Us!</a>
    <img src="/logo.png">
</footer>

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

หลัก บทความ และส่วนอื่นๆ

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

โดยปกติ บล็อกโพสต์หรือหน้าจะเป็นเอกสาร HTML ธรรมดา แต่ส่วนหัว ส่วนท้าย เนื้อหา แถบด้านข้าง ส่วนแทรก ฯลฯ สามารถนำมารวมกันได้

<body>
  <div class="post-header>
    <h1>Article title</h1>
  </div>
  <div class="post-content>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
      <div class="article-aside">
        <p>Text block</p>
      </div>
  </div>
 <div class="post-footer">
    <img src="/subscribe.png">
  </div>
</body>

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

<main>
  <article>
    <header>
      <h1>Article title</h1>
    </header>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
      <p>Paragraph 3</p>
      <aside>
        <p>Text block</p>
      </aside>
    <footer>
      <img src="/subscribe.png">
    </footer>
  </article>
</main>

อย่างไรก็ตาม คุณควรทราบว่าคุณสามารถระบุเนื้อหาหลักของหน้าได้เพียงครั้งเดียวเท่านั้น หมายความว่าคุณสามารถใช้ หลักได้ เพียงหน้าเดียวเท่านั้น คุณสามารถซ้อน บทความ หลาย บทความ ไว้ใต้ บทความ หลัก เดียวเพื่อระบุสารบัญหรือไดเรกทอรีของเนื้อหาแบบสแตนด์อโลน (คุณยังสามารถใช้แท็ก H1 หลายแท็กด้วยวิธีนี้เพื่อแสดงเครื่องมือค้นหาว่าโพสต์เหล่านั้นเป็นแบบสแตนด์อโลน

ซื้อกลับบ้าน

ใช้แท็ก หลัก เดียวต่อหน้า
สามารถใช้แท็ก บทความได้ หลายรายการต่อหน้าเพื่อระบุเนื้อหาแบบสแตนด์อโลนที่แยกจากกัน (รวมถึง H1 หลายรายการต่อหน้า)
Aside สามารถใช้เป็นแถบด้านข้างหรือแทรกภายในโพสต์หรือหน้าได้

องค์ประกอบอื่น ๆ ที่ใช้น้อย

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

รายละเอียดและบทสรุป

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

<details>
  <summary>Headline that will be shown and clicked on</summary>
    <p>Content that will be hidden</p>
    <a href="example.com">Link that will be hidden</a>
</details>

รายการย่อยของ ข้อมูลสรุป จะถูกซ่อนและขยายได้ และคุณสามารถเพิ่มข้อความเพิ่มเติมได้โดยปิดองค์ประกอบ รายละเอียด

รูปและรูปประกอบ

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

<figure>
  <img src="/chart.jpg">
    <figcaption>Explanation of this chart in short text</figcaption>
</figure>

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

เวลา

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

<article>
  <h1>Title</h1>
   <p>The event will begin on <time datetime="2019-12-25">December 25th</time> and last for <time datetime="PT12H30M0S">12 and a half hours</time>.</p>
</article>

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

บทสรุป

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

คุณปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดสำหรับ HTML เชิงความหมายใด

ภาพเด่นของบทความโดย whiteMocca / shutterstock.com