- ใช้ doctype, html, head และ body อย่างถูกต้องเพื่อให้เบราว์เซอร์และเครื่องมือค้นหามีโครงร่างที่คาดเดาได้และเป็นไปตามมาตรฐาน
- จัดโครงสร้างเนื้อหาที่มองเห็นได้ด้วยองค์ประกอบเชิงความหมาย (ส่วนหัว การนำทาง หลัก ส่วน บทความ ส่วนเสริม ส่วนท้าย) และลำดับชั้นหัวเรื่อง h1–h6 ที่สะอาด
- เสริมสร้างการเข้าถึงและ SEO โดยการประกาศภาษา ใช้จุดสังเกต เขียนข้อความ alt ที่มีความหมาย และตรวจสอบ HTML ของคุณ
- วางแผนโครงสร้างหน้าและไซต์ล่วงหน้าเพื่อให้เอกสารทุกฉบับมีความสอดคล้องกัน ง่ายต่อการนำทาง และดูแลรักษาง่ายในระยะยาว
การเรียนรู้วิธีจัดโครงสร้างเนื้อหาใน HTML คือความแตกต่างระหว่างหน้าเว็บที่เพียงแค่ "แสดงผลบางอย่างบนหน้าจอ" กับหน้าเว็บที่ใช้งานง่าย เข้าถึงได้ และเป็นมิตรกับ SEOเมื่อ HTML ของคุณถูกจัดระเบียบด้วยลำดับชั้นที่ชัดเจน เบราว์เซอร์ เครื่องมือค้นหา และเทคโนโลยีช่วยเหลือต่างๆ จะเข้าใจความหมายของแต่ละส่วนและวิธีที่ทุกส่วนเชื่อมโยงกันได้ทันที
แทนที่จะคิดว่า HTML เป็นเพียงวิธีการใส่แท็กบนหน้าเว็บ การมองว่ามันเป็นพิมพ์เขียวของเอกสารของคุณจะช่วยได้ด้วยโครงสร้างที่แข็งแกร่ง คุณจะกำหนดได้ว่าเนื้อหาหลักของคุณอยู่ที่ไหน หัวข้อต่างๆ เกี่ยวข้องกันอย่างไร อะไรคือการนำทาง อะไรคือข้อมูลรอง และส่วนใดที่อธิบายตัวเอกสารเองในส่วนหัว ในคู่มือนี้ เราจะเจาะลึกถึงโครงสร้างเนื้อหาใน HTML ตั้งแต่โครงร่างโดยรวมของหน้าเว็บ ไปจนถึงหัวข้อ ความหมาย การเข้าถึง และรูปแบบการจัดวางที่เป็นรูปธรรมสำหรับหน้าเว็บในโลกแห่งความเป็นจริง
1. โครงร่างทั่วไปของเอกสาร HTML
เอกสาร HTML ทุกฉบับเริ่มต้นด้วยโครงสร้างระดับสูงเดียวกัน ได้แก่ doctype, html, head และ bodyอาจดูเหมือนโครงสร้างพื้นฐานที่ซ้ำซาก แต่แต่ละส่วนมีบทบาทสำคัญอย่างยิ่งต่อวิธีการที่เบราว์เซอร์ประมวลผลและแสดงผลเนื้อหาของคุณ และวิธีการที่เครื่องมือค้นหาตีความหน้าเว็บของคุณ
บรรทัดแรกสุดคือการประกาศ doctype ซึ่งเขียนว่า <!DOCTYPE html> ใน HTML5คำสั่งนี้ไม่ได้สร้างผลลัพธ์ที่มองเห็นได้ แต่เป็นการบอกให้เบราว์เซอร์ใช้โหมดมาตรฐานแทนโหมด quirks เพื่อหลีกเลี่ยงพฤติกรรมการแสดงผลแบบเก่าที่อาจทำให้เลย์เอาต์หรือ CSS ของคุณเสียหายได้
ถัดจาก doctype คือองค์ประกอบราก <html> ซึ่งครอบคลุมเอกสารทั้งหมดเกือบทุกอย่าง ทั้งเมตาเดตาของเอกสารและหน้าเว็บที่มองเห็นได้ ล้วนอยู่ภายใน <html>…</html> นี่คือที่ที่คุณกำหนดภาษาของเอกสารด้วยแอตทริบิวต์ lang ตัวอย่างเช่น <html lang=”en”> สำหรับภาษาอังกฤษ หรือ <html lang=”es-ES”> สำหรับภาษาสเปนจากประเทศสเปน
การระบุภาษาด้วย `lang` นั้นมีความสำคัญอย่างยิ่งต่อการเข้าถึงได้ง่าย การปรับแต่งเว็บไซต์ให้ติดอันดับการค้นหา (SEO) และเครื่องมือแปลภาษา โปรแกรมอ่านหน้าจอใช้ข้อมูลนี้เพื่อเลือกกฎการออกเสียงที่ถูกต้อง เครื่องมือค้นหาและโปรแกรมแปลภาษาอัตโนมัติใช้ข้อมูลนี้เพื่อทำความเข้าใจภาษาหลัก และ CSS ยังสามารถกำหนดเป้าหมายการจัดสไตล์เฉพาะภาษาโดยใช้ตัวเลือก เช่น `[lang|=”fr”]` หรือ `:lang(en)` ได้อีกด้วย
ภายในองค์ประกอบ html หลัก คุณจะมีองค์ประกอบย่อยโดยตรงสองส่วนเสมอ ได้แก่ <head> และ <body>ส่วน <head> จะประกอบด้วยข้อมูลเมตาและทรัพยากรทั้งหมดที่จำเป็นสำหรับการตีความและแสดงผลหน้าเว็บ (เช่น การเข้ารหัส ชื่อเรื่อง CSS ไอคอน URL มาตรฐาน ฯลฯ) ในขณะที่ส่วน <body> จะประกอบด้วยเนื้อหาที่ผู้ใช้เห็นและโต้ตอบด้วยในหน้าต่างเบราว์เซอร์
2. อะไรอยู่ใน (และเหตุใดมันจึงสำคัญ)
ส่วนหัวของเว็บไซต์นั้นมองไม่เห็นสำหรับผู้เข้าชมทั่วไป แต่มีความสำคัญอย่างยิ่งต่อการทำงาน ประสิทธิภาพ และการจัดอันดับของเว็บไซต์ของคุณข้อมูลที่คุณใส่ไว้ในส่วนนี้จะช่วยชี้นำเครื่องมือค้นหา แพลตฟอร์มโซเชียล เบราว์เซอร์ และอุปกรณ์ต่างๆ ในการจัดการและแสดงผลหน้าเว็บของคุณ
สิ่งแรกๆ ที่ควรใส่ไว้ในส่วน <head> คือการประกาศการเข้ารหัสอักขระโดยใช้ <meta charset=”utf-8″ /> UTF-8 เป็นมาตรฐานสำหรับ HTML5 รองรับอักขระและอีโมจิเกือบทุกตัว และรับประกันว่าชื่อเรื่อง ข้อความ CSS และ JavaScript ของคุณจะถูกตีความอย่างถูกต้องโดยไม่คำนึงถึงภาษาหรือสัญลักษณ์ที่คุณใช้
ทุกหน้าต้องกำหนดองค์ประกอบ <title> ที่ไม่ซ้ำกันและมีความหมายเนื้อหาภายใน <title>…</title> จะปรากฏในแท็บเบราว์เซอร์ บุ๊กมาร์ก ประวัติการเข้าชม และที่สำคัญที่สุดคือเป็นหัวข้อหลักที่คลิกได้ในหน้าผลการค้นหาของเครื่องมือค้นหา เว้นแต่จะถูกแทนที่ด้วยเมตาแท็กเฉพาะ จากมุมมอง SEO นี่คือข้อความที่มีค่ามากที่สุดชิ้นหนึ่งในเอกสารของคุณ
อีกหนึ่งองค์ประกอบเมตาที่แทบจะขาดไม่ได้ในเลย์เอาต์สมัยใหม่คือการประกาศวิวพอร์ตการใช้ <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> จะบอกให้เบราว์เซอร์บนมือถือปรับขนาดเลย์เอาต์ให้พอดีกับความกว้างของอุปกรณ์ แทนที่จะย่อขนาดดีไซน์บนเดสก์ท็อปให้เหลือขนาดเล็กบนหน้าจอ ซึ่งเป็นสิ่งสำคัญสำหรับดีไซน์ที่ตอบสนองต่ออุปกรณ์ต่างๆ และสำหรับการผ่านการตรวจสอบพื้นฐานด้านมือถือและการเข้าถึงได้ง่าย
นอกเหนือจากชุดอักขระ ชื่อเรื่อง และขนาดหน้าจอแล้ว ส่วนหัว (head) คือส่วนที่คุณกำหนดเมตาเดต้า สไตล์ และลิงก์สำคัญส่วนใหญ่ซึ่งรวมถึงคำอธิบายเมตาที่เน้น SEO ไฟล์ CSS ไอคอนเว็บไซต์ เวอร์ชันภาษาอื่น URL มาตรฐาน ไฟล์กำหนดค่าเว็บ การเชื่อมต่อล่วงหน้า และอื่นๆ อีกมากมาย องค์ประกอบทั้งหมดเหล่านี้มีส่วนช่วยทางอ้อมต่อความเข้าใจโครงสร้างเนื้อหาและประสบการณ์การใช้งานเว็บไซต์ของคุณ
เมตาดาต้าและทรัพยากรเชิงโครงสร้างที่จำเป็น
โดยปกติแล้ว CSS จะเชื่อมต่ออยู่ภายใน <head> โดยใช้ <link rel=”stylesheet” href=”styles.css”>ไฟล์สไตล์ชีตภายนอกช่วยแยกการแสดงผลออกจากโครงสร้าง สามารถแคชข้ามหน้าต่างๆ เพื่อประสิทธิภาพที่ดีขึ้น และช่วยรักษาแหล่งข้อมูลที่ถูกต้องเพียงแหล่งเดียวสำหรับระบบการออกแบบของคุณ
นอกจากนี้ คุณยังสามารถใส่ CSS ไว้ในบล็อก <style> ภายใน <head> หรือแม้กระทั่งนำเข้าสไตล์ชีตเพิ่มเติมจากที่นั่นได้ตัวอย่างเช่น นักพัฒนาบางครั้งใช้ @import ภายในแท็ก style เพื่อวางสไตล์ชีตลงในเลเยอร์ cascade ที่เฉพาะเจาะจง หรือประกาศคุณสมบัติ CSS แบบกำหนดเอง (ตัวแปร) ที่ระดับ :root ก่อนที่จะอ้างอิงถึงคุณสมบัติเหล่านั้นทั่วทั้งเว็บไซต์
องค์ประกอบ <link> มีประโยชน์มากกว่าแค่การใช้สำหรับสไตล์ชีตโดยการเปลี่ยนแอตทริบิวต์ rel คุณสามารถชี้ไปยัง favicon ด้วย rel=”icon”, กำหนดเวอร์ชันภาษาอื่นด้วย rel=”alternate” และ hreflang, ระบุ URL มาตรฐานด้วย rel=”canonical” หรืออ้างอิงถึงไฟล์ manifest ของแอปและข้อมูลความสัมพันธ์อื่นๆ ที่เบราว์เซอร์และโปรแกรมรวบรวมข้อมูลควรทราบ
การกำหนดไอคอนด้วย <link rel=”icon” …> ช่วยให้แบรนด์ของคุณเป็นที่จดจำได้ในแท็บเบราว์เซอร์และบุ๊กมาร์กคุณสามารถระบุขนาดหรือประเภทต่างๆ ได้ (เช่น PNG หรือ SVG) และยังสามารถกำหนดไอคอนพิเศษสำหรับแพลตฟอร์มต่างๆ เช่น iOS ด้วย rel=”apple-touch-icon” หรือไอคอนแบบซ่อนสำหรับแท็บที่ตรึงไว้ใน Safari ได้อีกด้วย
ลิงก์สำรองมีความสำคัญอย่างยิ่งสำหรับการตั้งค่าหลายภาษาหรือการเผยแพร่เนื้อหาเมื่อคุณใช้ <link rel=”alternate” href=”…” hreflang=”fr-FR” /> ตัวอย่างเช่น คุณกำลังบอกเครื่องมือค้นหาว่ามีเวอร์ชันภาษาฝรั่งเศสของหน้าเดียวกันอยู่ และกำหนดเป้าหมายไปที่ภาษา/ภูมิภาคใด ในทำนองเดียวกัน ลิงก์สำรองสามารถชี้ไปยังฟีด RSS หรือไฟล์ PDF ได้ หากคุณระบุประเภทที่เหมาะสม
URL มาตรฐาน สคริปต์ และสิ่งที่ใช้ไม่บ่อย
ลิงก์ Canonical ที่มี rel=”canonical” ช่วยแก้ไขปัญหาเนื้อหาซ้ำซ้อนโดยระบุว่า URL ใดเป็นแหล่งข้อมูลหลักหากบทความเดียวกันมีอยู่หลายเส้นทาง หรือมีการเผยแพร่ซ้ำในโดเมนอื่น URL Canonical จะรวมสัญญาณการจัดอันดับและป้องกันไม่ให้เครื่องมือค้นหาเดาว่าควรจัดทำดัชนีเวอร์ชันใด
JavaScript ถูกแนบโดยใช้แท็ก <script> ซึ่งสามารถฝังโค้ดแบบอินไลน์หรืออ้างอิงไฟล์ภายนอกผ่านแอตทริบิวต์ src ได้เนื่องจาก JavaScript จะทำให้การแสดงผลหยุดชะงักโดยค่าเริ่มต้น นักพัฒนาหลายคนจึงวางแท็ก script ไว้ที่ท้ายแท็ก body หรือใช้แอตทริบิวต์ defer หรือ async เพื่อให้เนื้อหา HTML แสดงผลเสร็จก่อนที่สคริปต์จะทำงาน
แอตทริบิวต์ `defer` บอกให้เบราว์เซอร์ดาวน์โหลดสคริปต์โดยไม่บล็อกการแสดงผล และเรียกใช้สคริปต์หลังจากที่ HTML ถูกวิเคราะห์เสร็จสมบูรณ์แล้วในทางตรงกันข้าม `async` ก็หลีกเลี่ยงการบล็อกระหว่างการดาวน์โหลดเช่นกัน แต่จะเรียกใช้สคริปต์ทันทีที่พร้อมใช้งาน ซึ่งอาจขัดจังหวะการไหลของการวิเคราะห์ ซึ่งอาจเป็นปัญหาเมื่อสคริปต์ขึ้นอยู่กับองค์ประกอบ DOM ที่กำหนดไว้ในภายหลังในเอกสาร
องค์ประกอบ <base> ซึ่งปรากฏเฉพาะในส่วนหัว (head) เท่านั้น จะกำหนด URL พื้นฐานและเป้าหมายเริ่มต้นสำหรับลิงก์สัมพัทธ์ทั้งหมดโดยการตั้งค่า <base href=”https://example.com” target=”_top” /> คุณจะบอกเบราว์เซอร์ว่า URL สัมพัทธ์ทุกรายการในหน้าเว็บควรได้รับการแก้ไขจากรากนั้น และอาจเปิดในบริบทการเรียกดูเฉพาะ เช่น หน้าต่างใหม่ หรือเฟรมระดับบนสุด
แม้ว่า <base> จะมีประสิทธิภาพ แต่ก็มีผลข้างเคียง โดยเฉพาะอย่างยิ่งสำหรับแองเคอร์ภายในหน้าและเส้นทางทรัพยากรแบบสัมพัทธ์อนุญาตให้มีองค์ประกอบ base เพียงหนึ่งเดียวต่อเอกสาร ต้องปรากฏก่อน URL แบบสัมพัทธ์ใดๆ และจะแปลงแองเคอร์แบบง่ายๆ เช่น <a href=”#section”> ให้เป็นคำขอ URL แบบเต็มที่มีส่วนย่อยแนบมากับ href ของ base
3. ชั้นเนื้อหาที่มองเห็นได้: และรูปแบบความหมาย
ทุกสิ่งที่ผู้ใช้เห็นและโต้ตอบด้วยนั้นอยู่ภายในองค์ประกอบ <body>นี่คือที่ที่คุณจัดโครงสร้างเนื้อหาของคุณด้วยองค์ประกอบเชิงความหมายที่อธิบายบทบาทของแต่ละส่วนของหน้าเว็บ เช่น การนำทาง เนื้อหาหลัก บทความ แถบด้านข้าง ส่วนท้าย และอื่นๆ
HTML5 ได้นำเสนอชุดองค์ประกอบการจัดวางเชิงความหมาย (semantic layout elements) ที่เข้ามาแทนที่คอนเทนเนอร์ <div> ทั่วไปในหลายสถานการณ์องค์ประกอบต่างๆ เช่น <header>, <nav>, <main>, <section>, <article>, <aside> และ <footer> อธิบายความหมายแทนที่จะเป็นเพียงแค่รูปลักษณ์ ซึ่งช่วยให้เทคโนโลยีช่วยเหลือและเครื่องมือค้นหาช่วยสร้างแผนที่ในใจเกี่ยวกับหน้าเว็บของคุณได้
<header> โดยทั่วไปจะประกอบด้วยเนื้อหาแนะนำหรือการนำทางสำหรับหน้าเว็บหรือส่วนเฉพาะอาจรวมถึงโลโก้ ชื่อเว็บไซต์ เมนูหลัก หรือหัวข้อหลัก คุณสามารถมีส่วนหัวระดับหน้าเว็บใกล้กับส่วนบนของเนื้อหาหลัก และส่วนหัวเพิ่มเติมภายในส่วนต่างๆ หรือบทความเมื่อคุณต้องการแนะนำย่อยๆ
<nav> เป็นแท็กที่ใช้สำหรับส่วนนำทางโดยเฉพาะ และมักใช้สำหรับเมนูหลักหรือกลุ่มลิงก์สำคัญคุณอาจวางส่วนนำทางหลักไว้ในส่วนหัว แต่ nav ก็สามารถปรากฏในที่อื่นได้เช่นกัน เช่น ในแถบด้านข้างหรือส่วนท้าย ตราบใดที่ใช้สำหรับการนำทางและไม่ใช่การรวบรวมลิงก์ที่ไม่เกี่ยวข้องกันโดยทั่วไป
<main> คือส่วนเนื้อหาหลักที่ไม่ซ้ำกันของหน้าเว็บ และควรปรากฏเพียงครั้งเดียวในเอกสาร โดยปกติแล้วภายใน <main> คุณจะจัดระเบียบเนื้อหาโดยใช้ <section> สำหรับหัวข้อต่างๆ <article> สำหรับบทความอิสระ เช่น บทความในบล็อกหรือข่าว และ <aside> สำหรับข้อมูลที่เกี่ยวข้องแต่เป็นข้อมูลรอง เช่น หมายเหตุเพิ่มเติม โฆษณา หรือการนำทางเสริม
ส่วน บทความ บทเสริม และส่วนท้าย
<section> หมายถึงกลุ่มเนื้อหาที่มีหัวข้อแตกต่างกัน โดยปกติจะมีหัวข้อเฉพาะของตนเองอาจเป็นบทในบทความยาวๆ ส่วน "คุณสมบัติ" ในหน้าสินค้า หรือส่วนหนึ่งของหน้าแรก เช่น "คำรับรองจากลูกค้า" หรือ "ราคา" การแบ่งกลุ่มเนื้อหาช่วยแบ่งเอกสารที่ซับซ้อนออกเป็นส่วนๆ ที่เข้าใจง่าย
<article> ใช้สำหรับเนื้อหาที่สมบูรณ์ในตัวเอง สามารถอยู่ได้ด้วยตัวเองโดยไม่ต้องอาศัยบริบทโดยรอบตัวอย่างเช่น บทความในบล็อก เอกสารประกอบ ความคิดเห็นของผู้ใช้ ข่าว หรือข้อความในฟอรัม บทความมักจะมีส่วนหัว (ประกอบด้วยชื่อเรื่อง ผู้เขียน และวันที่) และส่วนท้าย (ประกอบด้วยแท็ก ลิงก์สำหรับแชร์ หรือข้อมูลเมตา)
<aside> สงวนไว้สำหรับเนื้อหาที่เกี่ยวข้องกับเนื้อหาหลักเพียงเล็กน้อย เช่น แถบด้านข้าง ข้อความที่ยกมา ลิงก์ที่เกี่ยวข้อง หรือบล็อกโฆษณาเนื่องจากมีจุดประสงค์เพื่อเสริมเนื้อหาหลัก โปรแกรมอ่านหน้าจอและเครื่องมืออื่นๆ จึงสามารถจัดการได้อย่างเหมาะสม และผู้ใช้สามารถแยกแยะเนื้อหาหลักออกจากส่วนเสริมได้ง่ายขึ้น
ส่วนท้าย (footer) จะปรากฏที่ส่วนท้ายของหัวข้อหรือด้านล่างสุดของหน้าเว็บทั้งหมดโดยปกติแล้ว ส่วนท้ายระดับหน้าเว็บจะประกอบด้วยข้อความแจ้งลิขสิทธิ์ ข้อมูลติดต่อ การนำทางเพิ่มเติม ลิงก์ทางกฎหมาย หรือเครดิตของเว็บไซต์ ในขณะที่ส่วนท้ายระดับบทความอาจประกอบด้วยประวัติผู้เขียน หมวดหมู่ วันที่อัปเดต หรือบทความที่เกี่ยวข้อง
ความยืดหยุ่นขององค์ประกอบเหล่านี้หมายความว่าคุณสามารถผสมผสานและจัดเรียงให้เข้ากับการออกแบบของคุณได้ แต่การยึดมั่นในความหมายที่ตั้งใจไว้จะช่วยให้ HTML ของคุณพกพาสะดวกและเข้าใจง่ายตัวอย่างเช่น คุณสามารถวาง nav ไว้ใน header หรือที่อื่น ๆ ในส่วน body ได้อย่างถูกต้อง แต่คุณไม่ควรใช้ nav สำหรับชุดลิงก์แบบสุ่มที่ไม่ใช่ส่วนหนึ่งของการนำทาง หรือใช้ main หลายครั้งในหน้าเว็บเดียว
4. ลำดับชั้นของหัวเรื่องและโครงสร้างข้อความ
หัวข้อเป็นแกนหลักของโครงสร้างเนื้อหาของคุณ โดยกำหนดลำดับความสำคัญของหัวข้อและหัวข้อย่อยตลอดทั้งเอกสาร HTML มีระดับหัวข้อหกระดับ ตั้งแต่ <h1> (สำคัญที่สุด) ไปจนถึง <h6> (สำคัญน้อยที่สุด) และวิธีการจัดเรียงหัวข้อของคุณส่งผลต่อทั้งผู้อ่านและเครื่องมือค้นหา
โดยทั่วไปจะมี <h1> เพียงหัวข้อเดียวที่แสดงหัวข้อหลักของหน้า ตามด้วย <h2> สำหรับส่วนหลัก และ <h3>-<h6> สำหรับส่วนย่อยที่ลึกลงไปเมื่อหัวข้อสองหัวข้ออยู่ในระดับเดียวกัน หัวข้อเหล่านั้นจะแสดงถึงส่วนที่เกี่ยวข้องกัน ในขณะที่หัวข้อระดับต่ำกว่าจะนำเสนอส่วนย่อยที่ซ้อนอยู่ภายในหัวข้อระดับสูงกว่า
ย่อหน้าและเนื้อหาอื่นๆ ที่อยู่ถัดจากหัวข้อจะจัดอยู่ในส่วนที่กำหนดโดยหัวข้อนั้นเมื่อมีหัวข้อใหม่ในระดับเดียวกันปรากฏขึ้น ส่วนก่อนหน้าจะถือว่าปิดลงและส่วนใหม่จะเริ่มต้นขึ้น โครงสร้างโดยนัยนี้เองที่เทคโนโลยีช่วยเหลือใช้ในการสร้างโครงร่างที่ผู้ใช้สามารถข้ามไปยังส่วนต่างๆ ได้อย่างรวดเร็ว
การข้ามระดับโดยพลการ เช่น การกระโดดจาก h1 ไปยัง h4 โดยตรง อาจทำให้ทั้งเครื่องมืออัตโนมัติและผู้อ่านสับสนได้คำแนะนำทั่วไปคือให้เลื่อนไปทีละระดับในลำดับชั้น: จาก h1 ไปยัง h2 สำหรับหัวข้อย่อย จากนั้นอาจไปยัง h3 และต่อไปเรื่อยๆ โดยลดระดับลงทีละระดับเท่านั้นเมื่อต้องการจัดวางเนื้อหาให้ลึกลงไป
โดยปกติแล้วเบราว์เซอร์จะใช้สไตล์เริ่มต้นกับหัวข้อต่างๆ เช่น ขนาดตัวอักษรที่ใหญ่ขึ้น ตัวหนา และระยะห่างแนวตั้งที่มากขึ้นสไตล์เหล่านี้ทำให้โครงสร้างดูชัดเจนอยู่แล้ว แต่คุณสามารถปรับแต่งการนำเสนอด้วย CSS ได้โดยยังคงรักษาระดับความหมายพื้นฐานเอาไว้
ย่อหน้า รายการ และความหมายแบบอินไลน์
เนื้อหาข้อความปกติจะอยู่ภายในแท็ก <p> โดยแต่ละแท็กจะแทนย่อหน้าแยกกัน การมีใจความหลักเพียงหนึ่งเดียวต่อย่อหน้าจะช่วยเพิ่มความอ่านง่ายและสอดคล้องกับวิธีการที่เทคโนโลยีช่วยเหลือช่วยให้ผู้ใช้สามารถนำทางผ่านบล็อกข้อความได้
รายการลำดับ (<ol>) และรายการไม่ลำดับ (<ul>) ที่มีรายการย่อย <li> เหมาะอย่างยิ่งสำหรับการจัดกลุ่มข้อมูล เช่น ขั้นตอน คุณสมบัติ หรือคำถามที่พบบ่อย รายการลำดับแสดงลำดับหรือลำดับความสำคัญ ในขณะที่รายการไม่ลำดับเพียงแค่จัดกลุ่มรายการที่เกี่ยวข้องโดยไม่แสดงลำดับใดๆ ทั้งสองแบบมีประโยชน์อย่างมากสำหรับการจัดโครงสร้างคำอธิบายที่ซับซ้อน
องค์ประกอบแบบแทรกในบรรทัด เช่น <strong>, <em>, <a>, <span> และอื่นๆ ช่วยเสริมเนื้อหาโดยไม่ขัดจังหวะการไหลของย่อหน้า <strong> สื่อถึงความสำคัญอย่างมาก (และมักจะแสดงเป็นตัวหนา) <em> เน้นข้อความ (มักจะเป็นตัวเอียง) และ <a href=”…”> สร้างไฮเปอร์ลิงก์ที่เชื่อมโยงเอกสารต่างๆ ภายในเว็บไซต์ของคุณหรือไปยังแหล่งข้อมูลภายนอก
รูปภาพที่มีแท็ก <img> ถือเป็นองค์ประกอบที่ถูกแทนที่และไม่ได้ครอบเนื้อหา แต่ยังคงมีส่วนร่วมในโครงสร้างเชิงความหมายผ่านแอตทริบิวต์ต่างๆ เช่น altแอตทริบิวต์ alt มีความสำคัญอย่างยิ่งต่อการเข้าถึงและ SEO เนื่องจากเป็นการอธิบายรูปภาพให้กับผู้ใช้ที่ไม่สามารถมองเห็นได้ และให้กับเครื่องมือค้นหาที่วิเคราะห์เฉพาะข้อความเท่านั้น
การผสมผสานองค์ประกอบระดับบล็อกและองค์ประกอบแบบอินไลน์อย่างรอบคอบ ช่วยให้คุณสามารถแสดงลำดับชั้น ความสัมพันธ์ และการเน้นย้ำได้โดยใช้ HTML เพียงอย่างเดียว โดยปล่อยให้รายละเอียดด้านภาพ เช่น สี ฟอนต์ และระยะห่าง เป็นหน้าที่ของ CSSการแยกส่วนการทำงานนี้ทำให้โค้ด HTML ของคุณดูสะอาดตาและทำให้การเปลี่ยนแปลงการออกแบบในภายหลังทำได้ง่ายขึ้น
5. การเข้าถึงและภาษาในโครงสร้างเนื้อหา
เอกสาร HTML ที่มีโครงสร้างที่ดีนั้นไม่ได้เป็นเพียงแค่เรื่องของความเรียบร้อยเท่านั้น แต่ยังเป็นสิ่งจำเป็นสำหรับความสามารถในการเข้าถึงอีกด้วย ผู้ที่ต้องพึ่งพาโปรแกรมอ่านหน้าจอ การนำทางด้วยแป้นพิมพ์ หรือเทคโนโลยีช่วยเหลืออื่นๆ ต่างพึ่งพาความหมายของ HTML ของคุณเพื่อทำความเข้าใจและใช้งานเนื้อหาได้อย่างมีประสิทธิภาพ
การระบุภาษาของเอกสารด้วยคำสั่ง `lang` ในองค์ประกอบ `<html>` เป็นหนึ่งในขั้นตอนแรกๆ ของการเข้าถึงได้ง่ายเมื่อระบุภาษาอย่างชัดเจน โปรแกรมอ่านหน้าจอจะเลือกการออกเสียงและพจนานุกรมที่ถูกต้อง และเครื่องมือแปลอัตโนมัติจะจัดการเนื้อหาของคุณได้อย่างแม่นยำยิ่งขึ้นในภูมิภาคและสำเนียงต่างๆ
นอกจากนี้ คุณยังสามารถกำหนดภาษาที่เปลี่ยนแปลงภายในเนื้อหาได้โดยใช้คำสั่ง lang กับองค์ประกอบต่างๆ เช่น <span> หรือ <p>เมื่อส่วนใดส่วนหนึ่งของข้อความเปลี่ยนไปใช้ภาษาอื่น การตั้งค่า lang=”fr-CA” หรือ lang=”pt-BR” บนส่วนนั้นจะส่งสัญญาณไปยังเครื่องมือช่วยเหลือผู้พิการว่ากฎการออกเสียงและการอ่านควรเปลี่ยนแปลงเฉพาะในส่วนนั้นเท่านั้น
นอกเหนือจากภาษาแล้ว หัวข้อ จุดสังเกต และข้อความทางเลือก ถือเป็นหัวใจสำคัญของโครงสร้างที่เข้าถึงได้ การจัดลำดับหัวข้อที่ชัดเจน การใช้คำหลัก หลัก นำทาง หัวเรื่อง ส่วนท้าย ส่วน และหมายเหตุ อย่างถูกต้อง รวมถึงคุณลักษณะ alt ที่มีความหมายสำหรับรูปภาพ ช่วยให้เทคโนโลยีช่วยเหลือสามารถสร้างโครงร่างและให้การนำทางด้วยจุดสังเกต เช่น "ข้ามไปยังเนื้อหาหลัก" หรือ "ไปที่การนำทาง"
สีสันและรูปแบบการจัดวางภาพเพียงอย่างเดียวไม่ควรเป็นวิธีเดียวในการสื่อสารข้อมูลสำคัญความแตกต่างของสีสูง ขนาดตัวอักษรที่อ่านง่าย สถานะการโฟกัสสำหรับองค์ประกอบแบบโต้ตอบ และข้อความลิงก์ที่สื่อความหมาย เช่น “อ่านเพิ่มเติมเกี่ยวกับการป้องกันอัคคีภัย” แทนที่จะเป็นเพียง “คลิกที่นี่” ล้วนเป็นส่วนหนึ่งของการทำให้เนื้อหาที่มีโครงสร้างของคุณใช้งานได้สำหรับผู้คนจำนวนมากที่สุดเท่าที่จะเป็นไปได้
การตรวจสอบความถูกต้องของ HTML และการตรวจสอบการเข้าถึงโดยใช้เครื่องมืออัตโนมัติและการทดสอบด้วยตนเองจะช่วยให้ค้นพบปัญหาโครงสร้างได้ตั้งแต่เนิ่นๆเครื่องมือเหล่านี้สามารถตรวจจับแอตทริบิวต์ alt ที่หายไป การจัดเรียงหัวข้อที่ไม่ถูกต้อง ลำดับหัวข้อที่ผิดพลาด หรือการใช้แลนด์มาร์คที่ไม่ถูกต้อง ซึ่งทั้งหมดนี้สามารถแก้ไขได้โดยตรงในโค้ด HTML ก่อนที่จะส่งผลกระทบต่อผู้ใช้งานจริง
6. การวางแผนโครงสร้างเนื้อหาของเว็บไซต์
ก่อนที่คุณจะเขียนแท็กแม้แต่แท็กเดียว การวางแผนโครงสร้างเชิงตรรกะของเว็บไซต์และหน้าเว็บของคุณนั้นสำคัญมากการคิดในแง่ของส่วนต่างๆ ลำดับความสำคัญของข้อมูล และลำดับการนำทาง จะนำไปสู่ HTML ที่ดูแลรักษาง่าย ขยายได้ และปรับให้เหมาะสมกับเครื่องมือค้นหาได้ง่ายขึ้น
จุดเริ่มต้นที่นิยมใช้กันคือการร่างแผนผังเว็บไซต์หรือแผนภาพโครงสร้างของเว็บไซต์โดยปกติจะรวมถึงหน้าหลัก เช่น หน้าแรก เกี่ยวกับเรา บริการ บล็อก ติดต่อเรา และหน้าย่อยหรือหมวดหมู่ต่างๆ ที่แตกแขนงออกมาจากหน้าเหล่านั้น เพื่อแสดงให้เห็นว่าผู้ใช้จะนำทางไปยังหน้าต่างๆ ได้อย่างไร
ภายในหน้าเว็บเดียว คุณสามารถกำหนดโครงสร้าง HTML ในอนาคตได้โดยใช้บล็อกเชิงความหมายหลายบล็อกตัวอย่างเช่น คุณอาจกำหนดส่วนหัวที่มีโลโก้และเมนูนำทาง ส่วนหลักที่มีหลายส่วน (ภาพเด่น คุณสมบัติ คำรับรอง ราคา) ส่วนเสริมสำหรับเนื้อหาเพิ่มเติม และส่วนท้ายที่ประกอบด้วยข้อมูลติดต่อและลิงก์ข้อกำหนดทางกฎหมาย
การกำหนดหัวข้อให้กับบล็อกเหล่านั้นตั้งแต่เนิ่นๆ จะช่วยให้ลำดับชั้น h1-h6 ของคุณมีความสอดคล้องกันคุณตัดสินใจล่วงหน้าว่า h1 จะเป็นอะไร ส่วนใดควรใช้หัวข้อ h2 และส่วนใดจำเป็นต้องใช้หัวข้อย่อยที่ลึกกว่า เช่น h3 หรือ h4 เพื่ออธิบายหัวข้อที่ซับซ้อนโดยไม่ทำให้ผู้อ่านรู้สึกว่าข้อมูลมากเกินไป
จากมุมมอง SEO และ UX การวางเนื้อหาหลักและส่วนสำคัญไว้ด้านบนสุดของ DOM ถือเป็นเรื่องที่ชาญฉลาดโดยทั่วไปแล้วเครื่องมือค้นหาจะให้ความสนใจกับเนื้อหาที่อยู่ใกล้ส่วนบนสุดของเอกสารมากกว่า และผู้ใช้ชื่นชอบการค้นหาข้อมูลหลักได้อย่างรวดเร็วมากกว่าการเลื่อนผ่านบทนำยาวๆ หรือองค์ประกอบตกแต่งต่างๆ
แนวทางปฏิบัติที่ดีที่สุดสำหรับโครงสร้าง HTML ที่สามารถบำรุงรักษาได้
ใช้ชื่อคลาสและ ID ที่สื่อความหมายเพื่อติดป้ายกำกับองค์ประกอบโครงสร้างเมื่อจำเป็น แต่ควรหลีกเลี่ยงการซ้อน div มากเกินไปคลาสต่างๆ เช่น .main-nav, .site-header หรือ .sidebar จะช่วยให้คุณเข้าใจหน้าที่ของส่วนประกอบนั้นได้ทันที ทำให้ HTML และ CSS ของคุณอ่านง่ายขึ้นมากแม้ผ่านไปหลายเดือนแล้วก็ตาม
รักษาโครงสร้าง HTML ให้เรียบง่ายที่สุดเท่าที่จะเป็นไปได้ แต่ยังคงแสดงลำดับชั้นที่แท้จริงไว้ได้คอนเทนเนอร์ที่ซ้อนกันลึกๆ ซึ่งมีไว้สำหรับการจัดสไตล์เท่านั้น มักจะสามารถแทนที่ได้ด้วย CSS ที่คิดมาอย่างรอบคอบกว่า ส่งผลให้มาร์กอัปสะอาดตาและเบาขึ้น ซึ่งง่ายต่อการใช้งานสำหรับทุกคน
จัดกลุ่มเนื้อหาที่เกี่ยวข้องไว้ในองค์ประกอบเชิงความหมายแทนที่จะกระจายไปทั่วหน้าตัวอย่างเช่น บทความในบล็อกควรอยู่ภายในบทความหลัก โดยมีชื่อเรื่อง วันที่ ผู้เขียน และเนื้อหาอยู่ด้วยกัน ในขณะที่บทความที่เกี่ยวข้องหรือประวัติผู้เขียนสามารถอยู่ในส่วนเพิ่มเติมหรือส่วนท้ายของบทความ โดยแยกออกจากเนื้อหาหลักอย่างชัดเจน
ทุกครั้งที่คุณขยายหน้าเว็บหรือออกแบบส่วนใดส่วนหนึ่งใหม่ ควรทบทวนโครงสร้างของคุณเสมอเอกสาร HTML มักสะสมส่วนประกอบที่ไม่จำเป็นและองค์ประกอบเฉพาะกิจเพิ่มขึ้นเรื่อย ๆ ดังนั้นการปรับโครงสร้างใหม่ให้กลับมาเป็นโครงสร้างที่มีความหมายสอดคล้องกันเป็นระยะ ๆ จะช่วยให้การบำรุงรักษาทำได้ง่ายขึ้น มีประสิทธิภาพมากขึ้น และเข้าถึงได้ง่ายขึ้น
การจัดทำเอกสารเกี่ยวกับรูปแบบโครงสร้างของคุณ เช่น วิธีการสร้างส่วนหัว ส่วนต่างๆ บทความ และส่วนท้าย จะช่วยให้ทีมขนาดใหญ่ทำงานได้อย่างสม่ำเสมอแนวทางภายในเล็กๆ ที่อธิบายว่าควรใช้ส่วนประกอบใดในการนำทาง วิธีการจัดระเบียบหัวข้อ และวิธีการทำเครื่องหมายส่วนประกอบที่ซ้ำกัน จะช่วยป้องกันไม่ให้โค้ดของคุณกลายเป็นโครงสร้างที่ยุ่งเหยิง
7. รูปแบบโครงสร้างเชิงปฏิบัติสำหรับประเภทหน้าทั่วไป
โดยทั่วไปแล้ว หน้าเว็บประเภทต่างๆ มักมีโครงสร้างรูปแบบที่คล้ายคลึงกัน ซึ่งคุณสามารถนำมาใช้ซ้ำและปรับเปลี่ยนได้ในโครงการต่างๆการรู้จักรูปแบบเหล่านี้จะช่วยให้คุณออกแบบโครงสร้างเนื้อหาที่ใช้งานง่ายและเข้าใจได้ง่ายใน HTML
หน้าแรกของเว็บไซต์โดยทั่วไปอาจเริ่มต้นด้วยส่วนหัว (<header>) ที่ประกอบด้วยโลโก้และเมนูนำทางหลัก (<nav>)ตามด้วยส่วนหลัก (<main>) ที่มีหลายส่วนย่อย (<section>) ได้แก่ ส่วนไฮไลท์ (hero section) ที่มีหัวข้อ h1 และคำกระตุ้นการตัดสินใจ (call-to-action) ส่วนแสดงคุณสมบัติ (features section) ส่วนแสดงความคิดเห็นจากผู้ใช้ (testimonials) และส่วนสุดท้ายที่เชิญชวนให้ผู้ใช้ติดต่อหรือลงทะเบียน
ด้านล่างเนื้อหาหลัก มักจะมีส่วน <footer> ซึ่งให้ข้อมูลโดยรวมและการนำทางเพิ่มเติมลิงก์ไปยังนโยบายความเป็นส่วนตัว ข้อกำหนดในการให้บริการ ตัวเลือกการติดต่อ เครือข่ายสังคม และเมนูรองต่างๆ จะอยู่ตรงนี้ ทำให้ค้นหาได้ง่ายโดยไม่รบกวนเนื้อหาหลักด้านบน
หน้าบทความในบล็อกเหมาะอย่างยิ่งสำหรับการใช้แท็ก <article>โดยปกติแล้ว บทความจะประกอบด้วยส่วนหัวที่มีชื่อเรื่องของบทความ (มักจะเป็น h1 ของหน้า) วันที่เผยแพร่ และรายละเอียดของผู้เขียน ตามด้วยเนื้อหาของบทความ ซึ่งแบ่งออกเป็นส่วนๆ ด้วยหัวข้อ h2/h3 และสุดท้ายคือส่วนท้ายบทความที่มีแท็ก ปุ่มแชร์ หรือลิงก์ไปยังเนื้อหาที่เกี่ยวข้อง
แถบด้านข้างหรือแผงเสริมจะแสดงด้วยองค์ประกอบ <aside>โดยอาจรวมถึงรายการบทความล่าสุด ตัวกรองหมวดหมู่ แบบฟอร์มลงทะเบียนรับจดหมายข่าว หรือความช่วยเหลือตามบริบท เนื่องจาก aside ถูกกำหนดความหมายว่าเป็นเนื้อหาเสริม เทคโนโลยีช่วยเหลือจึงสามารถแสดงผลในลักษณะนั้นแก่ผู้ใช้ได้
หน้าติดต่อและหน้าบริการใช้โครงสร้างพื้นฐานเดียวกัน แต่เน้นความชัดเจนและง่ายต่อการใช้งานหัวข้อที่ชัดเจน ย่อหน้าที่กระชับ การควบคุมแบบฟอร์มที่มีป้ายกำกับอย่างเหมาะสม และลำดับการอ่านที่เป็นตรรกะ ช่วยให้ผู้ใช้สามารถค้นหาวิธีติดต่อคุณหรือเข้าใจข้อเสนอของคุณได้โดยไม่ต้องเดา
8. องค์ประกอบ HTML คุณลักษณะและบทบาทในโครงสร้าง
ภายใต้รูปแบบทั้งหมดเหล่านี้ ทุกอย่างใน HTML นั้นล้วนขึ้นอยู่กับองค์ประกอบ แท็ก และแอตทริบิวต์การเข้าใจวิธีการทำงานร่วมกันของสิ่งเหล่านี้จะช่วยให้คุณควบคุมโครงสร้างเนื้อหา การแสดงผล และพฤติกรรมได้อย่างละเอียด
องค์ประกอบ HTML ประกอบด้วยแท็กเปิด คุณสมบัติเสริม (ถ้ามี) เนื้อหา และในกรณีส่วนใหญ่ แท็กปิดตัวอย่างเช่น <p>นี่คือย่อหน้า</p> ประกอบด้วยแท็กเปิด <p> โหนดข้อความ และแท็กปิด </p> ซึ่งทั้งหมดนี้รวมกันเป็นองค์ประกอบย่อหน้า
แอตทริบิวต์จะปรากฏอยู่ภายในแท็กเปิด และให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบนั้น ๆโดยจะมาในรูปแบบคู่ชื่อ="ค่า" เช่น class="highlight", id="intro" หรือ href="/contact" แอตทริบิวต์บางอย่างเป็นแบบทั่วไปและสามารถปรากฏบนองค์ประกอบใดก็ได้ (เช่น class, id, lang) ในขณะที่บางอย่างเฉพาะเจาะจงกับแท็กบางแท็ก (เช่น src สำหรับ img หรือ type สำหรับ input)
คลาสมีความสำคัญอย่างยิ่งสำหรับการจัดโครงสร้างและตกแต่งเอกสารขนาดใหญ่โดยการกำหนดคลาสเดียวกันให้กับองค์ประกอบหลายๆ อย่าง เช่น `class="important"` คุณสามารถใช้กฎ CSS ทั่วไปหรือกำหนดเป้าหมายใน JavaScript ได้ ทำให้โครงสร้างมีความยืดหยุ่นแต่ยังคงจัดการได้ง่าย
ไม่ใช่ว่าทุกองค์ประกอบจะต้องมีแท็กปิดเสมอไป บางองค์ประกอบเป็นองค์ประกอบว่างเปล่า (void) ที่ไม่มีเนื้อหาองค์ประกอบเช่น <img>, <meta>, <link> และ <br> จัดอยู่ในประเภทนี้ พวกมันยังคงมีส่วนร่วมในโครงสร้างของคุณ แต่เฉพาะผ่านทางแอตทริบิวต์เท่านั้น เนื่องจากพวกมันไม่ได้ครอบคลุมข้อความภายในหรือองค์ประกอบย่อยใดๆ
องค์การดูแลมาตรฐานเว็บโลก (W3C) เป็นผู้ดูแลข้อกำหนดที่กำหนดวิธีการทำงานร่วมกันขององค์ประกอบและคุณลักษณะทั้งหมดเหล่านี้การปฏิบัติตามมาตรฐานเหล่านั้นจะทำให้หน้าเว็บของคุณสามารถทำงานร่วมกันได้ในเบราว์เซอร์และอุปกรณ์ต่างๆ และรับประกันว่าโครงสร้างเนื้อหาที่คุณออกแบบมาอย่างพิถีพิถันจะทำงานได้อย่างคาดเดาได้สำหรับผู้เข้าชมทุกคน
การนำสิ่งทั้งหมดนี้ไปปฏิบัติจริงหมายถึงการปฏิบัติต่อ HTML ให้เป็นโครงสร้างทางความหมายของไซต์ของคุณ โครงร่างเอกสารที่ชัดเจน การใช้หัวข้ออย่างแม่นยำ การจัดวางที่รอบคอบด้วยเนื้อหาหลัก ส่วน บทความ ส่วนเสริม และส่วนท้าย เมตาข้อมูลในหัวข้อที่เข้าถึงได้ และแอตทริบิวต์ที่มีความหมายในทุกองค์ประกอบ จะทำให้เนื้อหาของคุณอ่านง่ายขึ้น นำทางได้ง่ายขึ้น และจัดอันดับได้ดีในเครื่องมือค้นหา
