ความคิดเกี่ยวกับการสร้างเว็บไซต์มาตรฐานเว็บ

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

1. ความเข้าใจมาตรฐานเว็บและข้อกำหนด W3C XHTML

ตามความเข้าใจตามปกติ แนวคิดทั้งสองนี้ดูเหมือนจะอ้างถึงสิ่งเดียวกัน ("ทฤษฎีขั้นสูง" เหล่านี้ที่เราพูดคุยกันในฉบับนี้^_^) แต่ฉันคิดว่าในความเป็นจริงแล้วจากมุมมองทางเทคนิค สองสิ่งนี้แทบไม่มีความสัมพันธ์กันเลย กล่าวโดยสรุป มาตรฐานเว็บคือการใช้โครงสร้าง ประสิทธิภาพ และพฤติกรรมของเพจอย่างอิสระ โดยทั่วไปแล้ว ภาษานี้เป็นภาษายอดนิยม "div+css" ในการรับสมัครงานในปัจจุบัน อย่างไรก็ตาม W3C XHTML ไม่มีเวอร์ชันใดที่วางข้อจำกัดเกี่ยวกับแนวคิดของมาตรฐานเว็บ แน่นอนว่าเราสามารถใช้ xhtml 1.1 เพื่อเขียนเว็บเพจที่วางตำแหน่งเป็นตารางได้ ณ จุดนี้คุณอาจคิดว่าฉันกำลังพูดเรื่องไร้สาระมากมาย แต่ด้วยเทคโนโลยีใดๆ คุณจะสามารถใช้งานได้อย่างถูกต้องก็ต่อเมื่อคุณมีความเข้าใจแนวคิดพื้นฐานที่ชัดเจนเพียงพอเท่านั้น ให้ฉันพูดถึงสองเส้นทางที่เข้าใจผิดในการประยุกต์ใช้มาตรฐานเว็บในปัจจุบันจากสองด้านต่อไปนี้:

กรณีแรกนั้นง่าย ฉันคิดว่าตราบใดที่ใช้ XHTML+CSS มันก็ถือเป็นมาตรฐานของเว็บ หน้าเต็มไปด้วยคลาสและรหัส คุณสามารถกำหนดชั้นเรียนแยกกันได้ทุกรายละเอียดได้อย่างอิสระ ความแตกต่างระหว่างหน้าเว็บดังกล่าวและ HTML แบบดั้งเดิมคือ มี "/" พิเศษอยู่ในแท็ก img ที่จริงแล้ว กลับไปใช้ HTML แบบเดิมจะดีกว่า อย่างน้อยฉันก็สามารถใช้แบบอักษรได้อย่างง่ายดายโดยไม่ต้องค้นหาสไตล์ชีทเหมือนพจนานุกรม การใช้ CSS แบบไม่เป็นทางการที่ละเอียดยิ่งขึ้นอีกประการหนึ่งที่ฉันจะพูดถึงในภายหลัง

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

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

อีกตัวอย่างหนึ่งอาจจะลึกซึ้งกว่านี้ ฉันเคยเห็นบทความบน alistapart.com มาก่อนเกี่ยวกับวิธีใช้คอลัมน์สามทางบนหน้าเว็บ หลักการน่าจะใช้สามหรือสี่ div เพื่อซ้อนกัน ฉันคิดว่านี่เป็นการละเมิดมาตรฐานเว็บด้วย เนื่องจากลำดับการวางแท็ก div เหล่านี้ในโค้ดไม่ได้มีไว้สำหรับความต้องการเชิงโครงสร้างเท่านั้น แต่สำหรับประสิทธิภาพของหน้าเว็บด้วย

แน่นอนว่าผมยอมรับว่ามุมมองข้างต้นมันเกินขอบเขตไปบ้าง (แต่ในทางกลับกัน ถ้าต้องใช้มุมมนแบบไม่ใช่รูปภาพ ก็ถือว่าเกินกำลังไปหน่อยนะครับ 555) บางครั้งโครงสร้างและประสิทธิภาพไม่สามารถแยกออกจากกันได้ง่ายนัก เพื่อให้ได้ประสิทธิภาพที่สมบูรณ์ เราต้องปล่อยให้โครงสร้างปรับเปลี่ยน (ลองนึกถึงการใช้ <div style="clear:both" />) แต่สิ่งสำคัญคือต้องรู้ว่าอะไรถูกและอะไรผิด แม้ว่าบางครั้งเราจะต้องทำอะไรผิดพลาดก็ตาม

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

2. ความหมายของแท็ก HTML

มาตรฐานเว็บในปัจจุบันมีชื่อเรียกขานว่า "div+css" หรือ "เค้าโครงเลเยอร์" ฉันไม่คัดค้านความได้เปรียบนี้ แต่สิ่งนี้จะนำไปสู่ความเข้าใจผิด: การใช้แท็ก div จำนวนมากเป็นองค์ประกอบโครงสร้าง อันที่จริง นี่เป็นรูปแบบการละเมิด div ขั้นสูงกว่า (กล่าวถึงโดย Jeffrey Zeldman ในหนังสือ "การปรับโครงสร้างเว็บไซต์")

HTML ให้แท็กมากมายแก่เรา ซึ่งแต่ละแท็กก็มีความหมายในตัวเอง ฉันคิดว่าเมื่อออกแบบ นอกเหนือจากการปฏิบัติตามไวยากรณ์ HTML แล้ว เราควรใช้ประโยชน์จากและปฏิบัติตาม "ความหมาย" ของแต่ละแท็กอย่างเต็มที่ ตัวอย่างเช่น ข้อความชื่อเรื่องควรรวมอยู่ใน h1-h6 เนื้อหาข้อความย่อหน้าใหญ่ควรแบ่งส่วนด้วย <p> แทนที่จะเป็น <br /> รายการควรอยู่ใน ul หรือ ol หรือ dl และข้อมูลในรูปแบบตาราง ควรยังคงเป็นเค้าโครงตาราง

ทำไมทำเช่นนี้? เหตุผลที่น่าเชื่อถือมากคือเพื่อให้แน่ใจว่าเมื่อผู้ใช้ลบการแสดงผล CSS หน้าเว็บจะสามารถแสดงลำดับชั้นโครงสร้างของเนื้อหาได้อย่างมีประสิทธิภาพมากที่สุด หากใช้ div ทั้งหมด เมื่อลบ CSS หน้าเว็บทั้งหมดจะสูญเสียลำดับชั้น เหลือเพียงเศษข้อความที่ยุ่งเหยิงเท่านั้น สิ่งนี้ไม่เป็นไปตามข้อกำหนดของมาตรฐานเว็บสำหรับความเข้ากันได้ที่มีการกำหนดค่าต่ำ

ให้ฉันระบุรายละเอียดความเข้าใจของฉันเกี่ยวกับความหมายของแท็กบางแท็ก:

พีบรา

มาพูดถึงสิ่งที่ง่ายที่สุดก่อน ใช้แท็ก p แทน br (แม้จะสอง <br /> ติดกันก็ตาม) สำหรับย่อหน้า ดูเหมือนว่าจะดำเนินไปโดยไม่พูดอะไรมาก แต่บางครั้งเราก็ต้องละทิ้งหลักการนี้ไป ตัวอย่างทั่วไปคือการโพสต์ในฟอรั่ม ถ้าฉันต้องการแบ่งส่วน ฉันกด Enter สิ่งที่ถูกส่งไปยังพื้นหลังและแสดงในลักษณะนี้จะถูกแบ่งส่วนอย่างชัดเจนโดยใช้ <br />

ตารางที่

เนื่องจากการโปรโมต div+css อย่างเข้มข้น ดูเหมือนว่าใครก็ตามที่ใช้เค้าโครงตารางจะถือว่าเป็นคนพื้นเมืองที่ไร้อารยธรรม แต่ฉันคิดว่ามุมมองนี้ไม่ถูกต้อง ความหมายของตารางก็คือตาราง ดังนั้นข้อมูลใดๆ ที่ควรปรากฏในรูปแบบตารางก็ควรยังคงอยู่ในตาราง ตัวอย่างง่ายๆ คือ บัญชีรายชื่อเพื่อนร่วมชั้น รวมถึงชื่อ รหัสนักเรียน เพศ ฯลฯ ซึ่งเห็นได้ชัดว่าเป็นข้อมูลในรูปแบบตาราง ดังนั้นจึงควรใช้เค้าโครงตาราง อีกตัวอย่างหนึ่งที่ควรค่าแก่การสำรวจคือการนำทางปฏิทินในบล็อก ฉันเคยเห็นโปรแกรมบล็อก วันที่ในการนำทางปฏิทินนั้นรวมอยู่ใน div ตั้งแต่วันที่ 1 ถึงวันที่ 30 จากนั้นใช้รูปแบบ float:left เพื่อจัดเรียงปฏิทินของเดือนปัจจุบันเป็นแถวที่ 7 เมื่อฉันยกเลิกการแสดง CSS ของเบราว์เซอร์ ส่วนของปฏิทินจะถูกจัดเรียงในแนวตั้งตั้งแต่หมายเลข 1 ถึงหมายเลข 30 ฉันคิดว่านี่เป็นสิ่งที่ผิด เนื่องจากปฏิทินควรเป็นข้อมูลในรูปแบบตาราง จึงควรใช้เค้าโครงตารางต่อไป หลังจากยกเลิก CSS แล้ว ควรจัดกลุ่มไว้ในตารางโดยมี 7 รายการเรียงกัน

th เป็นอีกแท็กหนึ่งที่จะถูกละเว้น เนื่องจากความสามารถรอบด้านของ CSS เซลล์ตารางทั้งหมดจึงสามารถสร้างขึ้นได้โดยใช้ td และแอตทริบิวต์คลาส แต่ในทางความหมาย เซลล์ตารางบางเซลล์ควรมีป้ายกำกับด้วย th ตัวอย่างเช่น ในตารางปฏิทินที่กล่าวถึงข้างต้น หน่วย "MON TUE WED... SUN" ที่ระบุสัปดาห์ควรใช้ th แทน td

h1-h6

สำหรับแท็ก h1-h6 แท็กควรใช้ได้กับข้อความชื่อเรื่องทั้งหมดตามความหมาย ดังนั้น วิธีการเขียนบางวิธี เช่น <div class="diary-title> จึงซ้ำซ้อน เขียนโดยตรงเป็น <h1> แล้วกำหนด CSS โดยตรงสำหรับ h1 แทน .diary-title มันจะไม่ให้ผลแบบเดียวกันใช่หรือไม่ ​​แน่นอนว่า กฎข้อนี้ I ไม่สามารถเข้มงวดเกินไป เพราะบางครั้งองค์ประกอบโครงสร้างของส่วนชื่อไม่สามารถแก้ไขได้ง่ายๆ โดยใช้ h1 แต่อย่างมากที่สุด ฉันใช้วิธีการอย่าง <h1><span></ span></h1> เพื่อเปลี่ยนชื่อเรื่อง โครงสร้างมีความซับซ้อนมากขึ้นเพื่อตอบสนองความต้องการด้านประสิทธิภาพ

แต่ความขัดแย้งทางความหมายเกิดขึ้นที่นี่ ควรเข้าใจ h1 เป็นชื่อระดับแรกหรือเป็นชื่อที่มีขนาดตัวอักษรขนาด 1 ฉันมักจะเข้าใจว่ามันเป็นส่วนหัวระดับแรก และหากมีคำบรรยายใต้ส่วนหัวระดับแรก ให้ใช้ h2 แต่ในความเป็นจริง เมื่อมองย้อนกลับไปที่จุดเริ่มต้นของการออกแบบ HTML ตัวเลขหลัง h1-h6 เป็นที่เข้าใจกันมากกว่าว่าเป็นการควบคุมขนาดของข้อความชื่อเรื่อง h3 อาจใช้เพื่อใช้แบบอักษรขนาด 3 เท่านั้น ไม่ใช่เป็นส่วนหัวระดับที่สาม ไม่อย่างนั้น ชื่อระดับแรกทั้งหมดจะใช้ h1 และทั้งหมดเป็นฟอนต์ขนาดใหญ่มาก และคุณต้องใช้ CSS เพื่อควบคุมขนาดฟอนต์ ซึ่งรู้สึกว่ายุ่งยากมาก นี่เป็นคำถามสำหรับการอภิปราย

เอ่อ เฒ่า

เมื่อใดก็ตามที่คุณต้องการแสดงรายการคำศัพท์ คุณควรใช้ ul หรือ ol แทน p ตัวอย่างเช่น ความต้องการงานในโฆษณารับสมัครงาน เช่น ข้อควรระวัง เช่น คำแนะนำขั้นตอนการปฏิบัติงาน นอกจากนี้ การใช้งานที่ได้รับความนิยมคือการใช้ ulli เพื่อแสดงเมนูนำทางของหน้าเว็บ จากนั้นใช้ CSS เพื่อควบคุมการจัดเรียง

ควรเพิ่มด้วยว่าอย่าลืมว่า ul หรือ ol สามารถใช้ใน li เพื่อสร้างรายการระดับที่สองได้

ดล ดท วว

นี่เป็นชุดแท็กที่เกือบจะถูกลืม แต่ Jeffrey Zeldman ส่งเสริมการใช้แท็กเหล่านี้ใน "การปรับโครงสร้างเว็บไซต์" เป็นอย่างยิ่ง dl ควรเป็นชื่อเต็มของ "การกำหนดรายการ (หรือรายการคำจำกัดความ ถ้าใครทราบช่วยบอกฉันด้วย)" การใช้งานทั่วไปคือรายการพจนานุกรม ชื่อของคำนั้นอยู่ใน dt และคำอธิบายของคำนั้นอยู่ใน dd เว็บไซต์ alistapart.com นั้นฉลาดยิ่งกว่าเดิม โดยกำหนดคอลัมน์ด้านขวาทั้งหมดเป็น dl โดยใช้ dt สำหรับชื่อของแต่ละหน่วย และ dd สำหรับเนื้อหาของหน่วย

รูปภาพ

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

ช่วง

span กำลังได้รับความนิยมเท่ากับ div แต่จริงๆ แล้วผมคิดว่าเราควรคงการใช้แบบเดิมเอาไว้ ความเข้าใจส่วนตัวของฉันคือแต่เดิม span ถูกใช้เพื่อพกพาคุณลักษณะของคลาสหรือสไตล์ ตัวมันเองไม่มีความหมายที่ชัดเจน ดังนั้นในการไหลของข้อความ ถ้าเราจำเป็นต้องเปลี่ยนแปลงสไตล์ให้กับข้อความบางข้อความ เราจะใช้ span เพื่อล้อมรอบข้อความนั้น ตัวอย่างเช่น หากจำเป็นต้องเพิ่มคำบางคำด้วยสีแดง ฉันจะใช้ <span class="red">

อย่างไรก็ตาม เป็นที่น่าสังเกตว่าสิ่งนี้อาจทำให้เกิดปัญหาที่กล่าวถึงใน h1 ก่อนหน้านี้ เนื่องจากสไตล์ข้อความบางรูปแบบมีแท็กสำเร็จรูปจริงๆ เช่น <strong>, <sub> ฯลฯ เราจึงควรให้โอกาสแก่รูปแบบเหล่านี้อย่างเหมาะสม

ก

a คือป้ายกำกับที่ควบคุมการเชื่อมต่อหลายมิติ แต่มีบางกรณีพิเศษที่เราอาจไม่ชอบใช้มัน เช่น หน้าต่างเล็กๆ จะต้องเปิดขึ้นมา ฉันไม่ได้ใส่ใจมากนัก แต่ฉันคิดว่านักออกแบบบางคนจะกำหนด onclick ลงในแท็ก <img> ของไอคอน "เล่น" โดยตรง โดยส่วนตัวแล้วฉันคิดว่าเราควรเพิ่ม a ภายนอก img จากนั้นกำหนด onclick ภายใน a และอย่าลืมเขียน return false ที่ส่วนท้ายของฟังก์ชัน js หากเป็นไปได้ ควรเขียนแอตทริบิวต์ href ของแท็กด้วย URL ของหน้าต่างป๊อปอัปเพื่อให้แน่ใจว่าผู้ใช้ยังสามารถเปิดหน้าเว็บได้อย่างมีประสิทธิภาพ แม้ว่า JS จะถูกปิดใช้งานก็ตาม

นั่นคือทั้งหมดที่ฉันจะแสดงในตอนนี้

สุดท้ายนี้ เราจะสรุปความสำคัญของการปฏิบัติตามความหมายของแท็ก HTML ข้อกำหนดประการหนึ่งของมาตรฐานเว็บคือความเข้ากันได้แบบ low-profile: เมื่อผู้ใช้ปิดใช้งานรูปภาพ ปิดใช้งาน CSS หรือปิดใช้งาน JS เรายังคงสามารถอนุญาตให้เขาเรียกดูเนื้อหาเว็บได้อย่างมีประสิทธิภาพ ดังที่เราทุกคนทราบกันดีว่าแอตทริบิวต์ Alt ที่จำเป็นคือการพิจารณาความเข้ากันได้เมื่อปิดใช้งานรูปภาพ การปฏิบัติตามความหมายของแท็ก HTML อย่างถูกต้องช่วยให้มั่นใจได้ถึงความเข้ากันได้เมื่อปิดใช้งาน CSS เฉพาะเมื่อมีการใช้แท็ก HTML อย่างถูกต้องและหน้าเว็บของเรามี "ลายเส้น CSS" ผู้คนจะยังสามารถดูว่าเมนูการนำทางอยู่ที่ไหน ชื่อบทความอยู่ที่ไหน และตารางปฏิทินจะไม่กระจัดกระจาย