ทำไมเราต้องใช้ div

เช้านี้ในขณะที่ฉันกำลังเขียน html และ haml บางอย่างเกิดขึ้นกับฉันว่าวิธีที่ divs ถูกใช้นั้นไร้สาระ ทำไม divs ไม่ได้บอกเป็นนัย ๆ ? ลองคิดดูถ้านี่:

<div class="hero-img">
   <img src="http://whatever.com/this.jpg">
</div>

นี่คือ:

<hero-img>
   <img src="http://whatever.com/this.jpg">
</hero-img>

หากสันนิษฐานว่าเป็นส่วนของ "div class" องค์ประกอบ HTML จะมีความหมายมากขึ้นและสามารถอ่านได้มากขึ้นด้วยแท็กปิดการจับคู่!

สิ่งนี้คล้ายกับ HAML ที่เรามี:

.content Hello, World!

ซึ่งกลายเป็น:

<div class='content'>Hello, World!</div>

มันดูเหมือนว่าฉันเป็นเพียงสิ่งเดียวที่จะต้องเกิดขึ้นสำหรับการทำงานในเบราว์เซอร์ที่เป็นเบราว์เซอร์สามารถเริ่มต้นการตีความทุกองค์ประกอบโดยไม่ต้องนิยามองค์ประกอบ HTML <div class="<element name>">ที่มีอยู่เป็นนัยว่า

สิ่งนี้อาจเข้ากันได้อย่างสมบูรณ์แบบย้อนหลัง สำหรับตัวเลือก CSS และ jQuery เป็นต้น "div.hero-img" ยังคงใช้งานได้และเป็นไวยากรณ์ที่จำเป็นในการเลือกองค์ประกอบ

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

แล้วทำไมเราต้องใช้ div?

หากคุณดูที่รายการองค์ประกอบ html5 ของ Mozillaทุกองค์ประกอบมีความหมายทางตรรกแล้วเราจะไปถึง<div>และมันจะบอกว่า:

"แสดงภาชนะบรรจุทั่วไปที่ไม่มีความหมายพิเศษ"

..and แล้วพวกเขารายการองค์ประกอบโดยพลการที่พวกเขาจะเพิ่มเป็น HTML5 <details>เช่น

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

ดังนั้นฉันคิดว่าต้องมีเหตุผลที่ดีที่สิ่งนี้ยังไม่เกิดขึ้น กรุณาอธิบายให้ฉัน!

ปัญหาที่ 1: ช่องว่างสีขาว

ฉันเชื่อว่านี่ไม่ได้เกิดขึ้นโดยทั่วไป แม้ว่าหนึ่งในเหตุผลที่ดีที่ว่านี้ยังไม่ได้และอาจจะไม่ควรเกิดขึ้นเป็นเพราะwhite-spacesใน CSS กำหนดชั้นเรียนหลายองค์ประกอบในขณะที่พวกเขากำหนดclasses HTMLattributes

อธิบาย (หรือขอให้เบราว์เซอร์แยกวิเคราะห์) โค้ดต่อไปนี้:

<pet family style=" ... ">
  <img src="my-pets-family.jpg"/>
</pet family>

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

ดังนั้นหากฉันต้องการ<div class="pet family">ไม่มีวิธีกำหนดสองคลาสจริง ๆ ซึ่งเป็นหนึ่งในสองเหตุผลหลักที่ฉันจะใช้คลาสแทนรหัส

ปัญหาที่ 2: ส่งต่อความเข้ากันได้!

การใช้<div>s ในขณะนี้บังคับให้เรา (อย่างน้อยพวกเราบางคน) เยื้องอย่างเหมาะสมและแสดงความคิดเห็นรอบ ๆ โค้ดของเราซึ่งเป็นแนวปฏิบัติที่ดีสำหรับทุกภาษาโปรแกรม

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

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

ปัญหาเดียวกันกับการvariablesใช้reserved wordsในบางภาษา PHP แก้ไขได้ด้วยเงินดอลลาร์เข้าสู่ระบบดังนั้นวิธีการที่คล้ายกันในรูปแบบ HTML <div class="something">จะส่งผลให้เป็นสิ่งที่ดีกว่าไม่มากเกินกว่าการใช้งานในปัจจุบันของ

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

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

เมื่อใช้<div>เบราว์เซอร์จะรู้ว่ามีคอนเทนเนอร์อยู่ที่นั่นและสามารถละเว้นคอนเทนเนอร์หรือส่งต่อไปยังเครื่องมืออื่น ๆ ในสายโซ่ที่อาจทำอะไรกับคอนเทนเนอร์ได้

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

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

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

ตัวอย่างของคุณแสดงคุณสมบัติหนึ่งว่าทำไม divs ไม่ไร้สาระ

<div class="hero-img">
  <img src="http://whatever.com/this.jpg">
</div>

คุณมีถูกต้องไม่ปิดimgแท็ก บางแท็กเช่นimg, br, hrและอื่น ๆ ที่ไม่ได้มีเนื้อหาใด ๆ และดังนั้นจึงไม่ต้องปิด โปรแกรมแยกวิเคราะห์รู้สิ่งนี้

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

เหตุผลที่องค์ประกอบบางอย่างต้องปิดและอื่น ๆ ไม่ได้มาจากมรดก SGML ซึ่งโพสต์บล็อกนี้อธิบายอย่าง: http://www.colorglare.com/2014/02/03/to-close-or-not- เพื่อ close.html

มันเป็นเรื่องของความชัดเจน หากใช้ XHTML ซึ่งเป็น XML บริสุทธิ์ดังนั้นจึงถูกกำหนดอย่างสมบูรณ์คุณสามารถใช้เนมสเปซของคุณเองได้ที่นี่เช่นผ่านคำนำหน้าq::

<q:hero-img>
    <img src="http://whatever.com/this.jpg">
</q:hero-img>

หากคุณต้องการใช้ XML เพื่อแปลงเป็น (X) HTML คุณจะสามารถสร้างจาก HTML จริงของแท็ก "HTML" <div class="hero-img">ฟรี

ในบางแท็กแอตทริบิวต์ namespace ด้วย URL ของคุณเอง (จำลอง)

xmlns:q="http://..."

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

div class = เป็นวิธีในการหลีกเลี่ยง "ข้อ จำกัด " นี้

และนั่นเป็นสาเหตุที่คุณไม่เห็นสิ่งปลูกสร้าง "โดยนัย" เหล่านั้น

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

ในการสร้างองค์ประกอบที่มีชื่อของคุณเองอย่างที่คุณแสดงมีปัญหาในเครื่องมือค้นหาและเครื่องมืออื่น ๆ ที่ไม่ทราบว่าองค์ประกอบของคุณมีความหมายว่าอย่างไร "hero-img" คืออะไรและแตกต่างจาก "hero-image" ของฉันอย่างไรและ API ของฉันควรจัดการกับมันอย่างไรเมื่อฉันไปที่หน้าของคุณ? เบราว์เซอร์ควรจัดการองค์ประกอบนั้นอย่างไร มันเป็นระดับบล็อกหรืออินไลน์? มีคำถามมากเกินไป

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