เรียนรู้วิธีใช้ HTML <div> ธาตุ
<div> องค์ประกอบคือองค์ประกอบคอนเทนเนอร์ทั่วไปที่ใช้ในการแบ่ง จัดกลุ่ม และห่อหุ้มเนื้อหา
คุณควรใช้เฉพาะ <div> ใช้องค์ประกอบหากไม่มีองค์ประกอบ HTML เชิงความหมายที่จะใช้สัมพันธ์กับบริบท (หรือหากคุณไม่แน่ใจ)
มาร์กอัปความหมาย คือเมื่อคุณใช้องค์ประกอบ HTML ที่อธิบายความหมาย/หน้าที่ของเนื้อหาที่คุณใส่เข้าไป <div> องค์ประกอบเป็นองค์ประกอบทั่วไป/ไม่มีความหมาย
ใช้กรณีสำหรับองค์ประกอบ
สมมติว่าคุณกำลังเขียนโค้ดคอมโพเนนต์โมดอลที่ใช้ซ้ำได้สำหรับเว็บไซต์ของคุณ ซึ่งจะกระตุ้นให้ผู้เยี่ยมชมไซต์สมัครรับจดหมายข่าวของคุณ
ไม่มีแท็ก HTML เชิงความหมายที่มีอยู่แล้วในการกำหนดองค์ประกอบดังกล่าว ดังนั้นจึงเป็นตัวอย่างที่สมบูรณ์แบบว่าเมื่อใดควรใช้ <div> ทั่วไป องค์ประกอบคอนเทนเนอร์:
<div class="subscribe-modal">
<form id="contact" method="post" action="">
<fieldset>
<h3>Subscribe to my Newsletter</h3>
<input
name="email"
id="email"
type="email"
placeholder="Enter your email address here"
required
/>
<input type="submit" name="submit" class="submit" value="Subscribe!" />
</fieldset>
</form>
</div>
<div> แท็กเป็นหนึ่งในแท็ก HTML จำนวนมากที่ใช้กำหนดองค์ประกอบคอนเทนเนอร์ องค์ประกอบคอนเทนเนอร์ HTML ที่ใช้บ่อยที่สุดคือ:
<article> ,<section> , <main> , <header> , <footer> ,<form> .
หากองค์ประกอบใด ๆ ข้างต้นเหมาะสมที่จะใช้เป็นคอนเทนเนอร์สำหรับเนื้อหาของคุณ ให้ใช้องค์ประกอบเหล่านั้นแทน <div> ทั่วไป .
ทำไม? เพราะทั้งหมดเป็น แท็กองค์ประกอบความหมาย ในขณะที่ <div> เป็นแท็กที่ไม่มีความหมายซึ่งไม่มีบริบทเฉพาะ
ข้อควรรู้เกี่ยวกับองค์ประกอบ
คุณสามารถใส่เนื้อหาประเภทใดก็ได้ภายใน <div> ธาตุ
แม้ว่าโดยทั่วไปจะแนะนำมาร์กอัปเชิงความหมาย แต่ก็ไม่จำเป็นสำหรับเบราว์เซอร์ที่จะทำความเข้าใจและแสดงหน้าเว็บของคุณต่อผู้ใช้
อย่างไรก็ตาม หากคุณใช้องค์ประกอบ HTML ทั่วไป/ไม่มีความหมายในสถานการณ์ที่ HTML มีแท็กเชิงความหมายให้คุณใช้อยู่แล้ว อาจส่งผลเสียต่อ SEO ของคุณ
โดยทั่วไป ฉันจะใช้ <div> องค์ประกอบถ้าฉันไม่แน่ใจว่าจะใช้องค์ประกอบ HTML ใดเพราะฉันอยากจะใช้องค์ประกอบทั่วไปมากกว่าองค์ประกอบที่ไม่ถูกต้อง นอกจากนี้ คุณไม่สามารถใช้ <div> . ได้จริงๆ องค์ประกอบไม่ถูกต้องจากมุมมองทางเทคนิค — จากมุมมองเชิงความหมายเท่านั้น
-
-
-
-
สมมติว่าคุณกำลังเขียนโค้ดคอมโพเนนต์โมดอลที่ใช้ซ้ำได้สำหรับเว็บไซต์ของคุณ ซึ่งจะกระตุ้นให้ผู้เยี่ยมชมไซต์สมัครรับจดหมายข่าวของคุณ
ไม่มีแท็ก HTML เชิงความหมายที่มีอยู่แล้วในการกำหนดองค์ประกอบดังกล่าว ดังนั้นจึงเป็นตัวอย่างที่สมบูรณ์แบบว่าเมื่อใดควรใช้ <div> ทั่วไป องค์ประกอบคอนเทนเนอร์:
<div class="subscribe-modal">
<form id="contact" method="post" action="">
<fieldset>
<h3>Subscribe to my Newsletter</h3>
<input
name="email"
id="email"
type="email"
placeholder="Enter your email address here"
required
/>
<input type="submit" name="submit" class="submit" value="Subscribe!" />
</fieldset>
</form>
</div>
<div> แท็กเป็นหนึ่งในแท็ก HTML จำนวนมากที่ใช้กำหนดองค์ประกอบคอนเทนเนอร์ องค์ประกอบคอนเทนเนอร์ HTML ที่ใช้บ่อยที่สุดคือ:
<article> ,<section> , <main> , <header> , <footer> ,<form> .
หากองค์ประกอบใด ๆ ข้างต้นเหมาะสมที่จะใช้เป็นคอนเทนเนอร์สำหรับเนื้อหาของคุณ ให้ใช้องค์ประกอบเหล่านั้นแทน <div> ทั่วไป .
ทำไม? เพราะทั้งหมดเป็น แท็กองค์ประกอบความหมาย ในขณะที่ <div> เป็นแท็กที่ไม่มีความหมายซึ่งไม่มีบริบทเฉพาะ
ข้อควรรู้เกี่ยวกับองค์ประกอบ
คุณสามารถใส่เนื้อหาประเภทใดก็ได้ภายใน <div> ธาตุ
แม้ว่าโดยทั่วไปจะแนะนำมาร์กอัปเชิงความหมาย แต่ก็ไม่จำเป็นสำหรับเบราว์เซอร์ที่จะทำความเข้าใจและแสดงหน้าเว็บของคุณต่อผู้ใช้
อย่างไรก็ตาม หากคุณใช้องค์ประกอบ HTML ทั่วไป/ไม่มีความหมายในสถานการณ์ที่ HTML มีแท็กเชิงความหมายให้คุณใช้อยู่แล้ว อาจส่งผลเสียต่อ SEO ของคุณ
โดยทั่วไป ฉันจะใช้ <div> องค์ประกอบถ้าฉันไม่แน่ใจว่าจะใช้องค์ประกอบ HTML ใดเพราะฉันอยากจะใช้องค์ประกอบทั่วไปมากกว่าองค์ประกอบที่ไม่ถูกต้อง นอกจากนี้ คุณไม่สามารถใช้ <div> . ได้จริงๆ องค์ประกอบไม่ถูกต้องจากมุมมองทางเทคนิค — จากมุมมองเชิงความหมายเท่านั้น
-
-
-
-
คุณสามารถใส่เนื้อหาประเภทใดก็ได้ภายใน <div> ธาตุ
แม้ว่าโดยทั่วไปจะแนะนำมาร์กอัปเชิงความหมาย แต่ก็ไม่จำเป็นสำหรับเบราว์เซอร์ที่จะทำความเข้าใจและแสดงหน้าเว็บของคุณต่อผู้ใช้
อย่างไรก็ตาม หากคุณใช้องค์ประกอบ HTML ทั่วไป/ไม่มีความหมายในสถานการณ์ที่ HTML มีแท็กเชิงความหมายให้คุณใช้อยู่แล้ว อาจส่งผลเสียต่อ SEO ของคุณ
โดยทั่วไป ฉันจะใช้ <div> องค์ประกอบถ้าฉันไม่แน่ใจว่าจะใช้องค์ประกอบ HTML ใดเพราะฉันอยากจะใช้องค์ประกอบทั่วไปมากกว่าองค์ประกอบที่ไม่ถูกต้อง นอกจากนี้ คุณไม่สามารถใช้ <div> . ได้จริงๆ องค์ประกอบไม่ถูกต้องจากมุมมองทางเทคนิค — จากมุมมองเชิงความหมายเท่านั้น
