โครงสร้าง HTML เชิงความหมายมีประโยชน์อย่างไร?

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

HTML มีโครงสร้างตามบริบทและความหมายของเนื้อหาเอกสารเว็บ ตัวอย่างเช่น เราเห็นว่า <h1> เป็นตัวหนา โดยมีขนาดตัวอักษร 2em และ <strong> เป็นตัวหนา ดังนั้นอย่าให้เป็นเช่นนั้น คิดว่าเป็น HTML ประสิทธิภาพ จริงๆ แล้วสิ่งเหล่านี้เป็นรูปแบบ CSS เริ่มต้นของ HTML ในที่ทำงาน ดังนั้นก่อนอื่นเราต้องรู้ว่า HTML ไม่เกี่ยวข้องกับประสิทธิภาพของหน้าเว็บ สิ่งเหล่านี้เป็นเรื่องของ CSS บทบาทของ HTML ในหน้าเพจคือโครงสร้างและความหมาย ในแง่ของคนธรรมดา มันคือการแบ่งเนื้อหา

โครงสร้าง HTML เชิงความหมายจะต้องเน้นโครงสร้าง HTML ก่อน

โครงสร้าง HTML คือโครงกระดูกของหน้าเพจ โครงสร้าง HTML เปรียบเสมือนกำแพงเหล็กและคอนกรีต หากบ้านไม่มีกำแพงเหล็กและคอนกรีต ก็เป็นเพียงกองอิฐที่ไร้ประโยชน์ ไม่สามารถอยู่อาศัยหรือใช้ในการทำงานได้ CSS เป็นวัสดุตกแต่ง มันคือพื้นไม้ หินอ่อน และสี มันถูกใช้ในการตกแต่งบ้าน พลังของ CSS ไม่จำเป็นเลยที่จะบอกว่ามันเป็นเพียงกองไม้ บอร์ดถูกทาสีเข้าด้วยกันและไม่มีมูลค่าการใช้งานจริง CSS อาศัยเอกสาร (X)HTML ที่อ้างอิงถึงมันทั้งหมด หากคุณต้องการใช้ประโยชน์จากพลังของ CSS อย่างเต็มที่ จำเป็นต้องจัดเตรียมเนื้อหา HTML ที่ทั้งสะอาดและมีโครงสร้าง "HTML เป็นภาษากลางสำหรับการเผยแพร่ไฮเปอร์เท็กซ์บนอินเทอร์เน็ต... HTML ใช้แท็กเพื่อจัดโครงสร้างข้อความ ization” ( http://www.w3.org/MarkUp/ )

จะเขียนโครงสร้าง HTML เชิงความหมายได้อย่างไร?
HTML เป็นวิธีการเพิ่มโครงสร้างและความหมาย (หรือ "อรรถศาสตร์") ให้กับเนื้อหาข้อความ มันจะบอกเราว่า: "บรรทัดนี้คือชื่อเรื่อง บรรทัดเหล่านี้ประกอบเป็นย่อหน้า คำเหล่านี้เป็นรายการของรายการ และคำเหล่านี้เป็นไฮเปอร์ลิงก์ไปยังไฟล์อื่นบนอินเทอร์เน็ต" เป็นที่น่าสังเกตว่าคุณไม่ควรปล่อยให้ HTML บอกเราว่า: "ข้อความเหล่านี้เป็นสีน้ำเงิน และข้อความเหล่านี้เป็นสีแดง เนื้อหาส่วนนี้เป็นคอลัมน์ขวาสุด และเนื้อหาบรรทัดนี้อยู่ในตัวเอียง" ข้อมูลที่เกี่ยวข้องกับประสิทธิภาพนี้เป็นงานของ CSS เมื่อทำการพัฒนาส่วนหน้า โปรดจำไว้ว่า: HTML บอกเราว่าเนื้อหาชิ้นหนึ่งคืออะไร (หรือความหมายของเนื้อหา) ไม่ใช่สิ่งที่ดูเหมือน เมื่อเราพูดถึง "มาร์กอัปเชิงความหมาย" HTML ที่เรากำลังพูดถึงควรแยกออกจากข้อมูลการนำเสนอโดยสิ้นเชิง และแท็กในนั้นควรกำหนดโครงสร้างของเอกสารเชิงความหมาย

โครงสร้าง HTML เชิงความหมายนั้นเรียบง่ายมาก ขั้นแรก ให้เข้าใจความหมายของแต่ละแท็กใน html <div> เป็นคอนเทนเนอร์ <strong> ใช้สำหรับเน้น <ul><li> เป็นรายการที่ไม่เรียงลำดับ ฯลฯ... การดูเนื้อหา เมื่อคิดว่าป้ายกำกับใดสามารถอธิบายได้ดีกว่า ให้ใช้ป้ายกำกับใดก็ได้

โครงสร้าง HTML เชิงความหมายมีประโยชน์อย่างไร?

เรารู้ว่า HTML5 มีแท็กใหม่ เช่น <header> และ <footer> HTML กำลังพัฒนาไปสู่โครงสร้าง HTML ที่แข็งแกร่งและมีความหมายมากขึ้น ยังไม่ก้าวหน้าเท่ากับ html5 ในเรื่องนี้ การตายของ xhtml2 นอกจากนี้ยังแสดงให้เห็นว่าโครงสร้าง HTML เชิงความหมายเป็นแนวโน้มการพัฒนาของ html

1. เมื่อสไตล์ถูกลบหรือสูญหาย หน้าเพจสามารถนำเสนอโครงสร้างที่ชัดเจน:

HTML เองไม่มีประสิทธิภาพ ตัวอย่างเช่น เราเห็นว่า <h1> เป็นตัวหนา ขนาดตัวอักษร 2em ตัวหนา อย่าคิดว่านี่คือประสิทธิภาพของ HTML จริงๆ แล้วสิ่งเหล่านี้คือสไตล์ CSS เริ่มต้น ฟังก์ชัน ดังนั้นการลบหรือสูญเสียสไตล์จะทำให้เพจมีโครงสร้างที่ชัดเจน ซึ่งไม่ใช่ข้อดีของโครงสร้าง HTML เชิงความหมาย อย่างไรก็ตาม เบราว์เซอร์มีสไตล์เริ่มต้นก็เพื่อแสดงความหมายได้ดีขึ้นเช่นกัน html อาจกล่าวได้ว่ารูปแบบเริ่มต้นของเบราว์เซอร์และโครงสร้าง HTML เชิงความหมายแยกจากกันไม่ได้

2. โปรแกรมอ่านหน้าจอ (หากผู้เยี่ยมชมมีความบกพร่องทางสายตา) จะ "อ่าน" หน้าเว็บของคุณตามมาร์กอัปของคุณทั้งหมด

ตัวอย่างเช่น หากคุณใช้มาร์กอัปเชิงความหมาย โปรแกรมอ่านหน้าจอจะ "สะกด" คำศัพท์ของคุณ แทนที่จะพยายามออกเสียงทั้งหมด

3. อุปกรณ์เช่น PDA และโทรศัพท์มือถืออาจไม่สามารถแสดงหน้าเว็บได้เหมือนกับเบราว์เซอร์คอมพิวเตอร์ทั่วไป (โดยปกติแล้วเป็นเพราะอุปกรณ์เหล่านี้มีการรองรับ CSS ที่อ่อนแอ)

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

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

4. โปรแกรมรวบรวมข้อมูลของเครื่องมือค้นหายังต้องอาศัยแท็กเพื่อกำหนดบริบทและน้ำหนักของคำหลักแต่ละคำ

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

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

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

6. อำนวยความสะดวกในการพัฒนาและบำรุงรักษาทีมงาน

W3C ได้กำหนดมาตรฐานที่ดีสำหรับเรา ทุกคนในทีมปฏิบัติตามมาตรฐานนี้ ซึ่งสามารถลดสิ่งที่แตกต่างมากมาย อำนวยความสะดวกในการพัฒนาและบำรุงรักษา ปรับปรุงประสิทธิภาพการพัฒนา และแม้กระทั่ง บรรลุการพัฒนาแบบโมดูลาร์

หากคุณมีความคิดเห็นที่แตกต่างหรือเพิ่มเติมกรุณาฝากข้อความไว้เพื่อหารือ

ขอขอบคุณบราเดอร์ Gui, Milk Tea, Xiaozhi, Stealing Rice, Caspar และ CSS Forest Group สำหรับการสนทนา

ข้อความต้นฉบับ: http://www.css88.com/archives/1668