ควรใช้ <span> แทน <p> เมื่อใด


94

ตามที่คำถามระบุว่าหากฉันมีข้อความที่ต้องการเพิ่มใน HTML ฉันควรใช้<p>เมื่อใดและฉันควรใช้เมื่อ<span>ใด

คำตอบ:


91

คุณควรจำไว้ว่า HTML มีไว้เพื่ออธิบายเนื้อหาที่มีอยู่

ดังนั้นหากคุณต้องการถ่ายทอดย่อหน้าให้ทำเช่นนั้น

การเปรียบเทียบของคุณไม่ถูกต้อง การเปรียบเทียบที่ตรงไปตรงมาก็จะยิ่งมากขึ้นเท่านั้น

เมื่อใดควรใช้ a <div>แทน a <p>?

เนื่องจากทั้งสองเป็นองค์ประกอบระดับบล็อก

A <span>เป็นแบบอินไลน์เช่นเดียวกับจุดยึด ( <a>), การ<strong>เน้น ( <em>) ฯลฯ ดังนั้นโปรดจำไว้ว่าโดยธรรมชาติเริ่มต้นทั้งในรูปแบบ html และในการเขียนแบบธรรมชาติย่อหน้าจะทำให้เกิดการหยุดพักก่อนและหลังเช่น<div>.

บางครั้งเมื่อจัดรูปแบบสิ่งต่างๆ - สิ่งที่สอดแทรก - a <span>เป็นสิ่งที่ดีที่จะให้บางสิ่งบางอย่างแก่คุณเพื่อ "เชื่อมโยง" css ให้ แต่เป็นแท็กว่างเปล่าที่ไม่มีความหมายเชิงความหมายหรือโวหาร


7
เมื่อเปรียบเทียบองค์ประกอบแบบอินไลน์กับบล็อกโปรดระวังอย่าอธิบายลักษณะที่มองเห็นได้ ในฐานะที่เป็นสเปค HTML5กล่าวว่าเป็นpอาจไม่จำเป็นต้องได้รับการตกแต่งด้วยรอบแบ่งบรรทัดตัวอย่างเช่นมันอาจจะตามมาด้วยการอินไลน์Pilcrowสัญลักษณ์ คำว่า "อินไลน์" และ "บล็อก" ยังไม่มีความหมายสำหรับผู้ใช้ที่ตาบอด แต่ให้สร้างความแตกต่างระหว่างเนื้อหาโฟลว์และเนื้อหาที่ใช้วลี (ดูลิงก์นี้ )
chharvey

3
นอกจากนี้พฤติกรรม padding ซ้ายแตกต่างกันในกว่ามันไม่เกี่ยวกับp spanในย่อหน้าการขยายจะมีผลกับทุกบรรทัด (บล็อกของข้อความ) ในขณะที่ช่วงขยายจะมีผลกับบรรทัดแรกเท่านั้น
diynevala

95

ตามความหมายคุณใช้<p>แท็กเพื่อระบุย่อหน้า <span>ใช้เพื่อนำสไตล์ CSS และ / หรือคลาสไปใช้กับส่วนข้อความและองค์ประกอบแบบอินไลน์โดยพลการ


13

<p>แท็กเป็นparagraph และเป็นเช่นนี้ก็เป็นบล็อกองค์ประกอบ (เป็นเช่นh1และdiv) ในขณะที่spanเป็นองค์ประกอบแบบอินไลน์ (เหมือนเช่น, bและa)

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

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


ใช่สแปนไม่มีระยะขอบดังนั้นจึงเป็นการดีที่เซลล์ตาราง (td) มีความสามารถในการใช้มาร์กอัป html
Igor Fomenko

6

Span ไม่ใช่ความหมายโดยสิ้นเชิง ไม่มีความหมายและทำหน้าที่เป็นเพียงองค์ประกอบสำหรับเอฟเฟกต์เครื่องสำอางเท่านั้น

ย่อหน้ามีความหมายเชิงความหมายโดยบอกเครื่อง (เช่นเบราว์เซอร์หรือโปรแกรมอ่านหน้าจอ) ว่าเนื้อหาที่ห่อหุ้มเป็นกลุ่มข้อความและมีความหมายเช่นเดียวกับย่อหน้าของข้อความในหนังสือ


5

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


5

สแปนคือองค์ประกอบการจัดรูปแบบอินไลน์ที่ไม่มีฟีดบรรทัดด้านบนหรือด้านล่าง

p คือองค์ประกอบบล็อกที่มีฟีดบรรทัดโดยนัยด้านบนและด้านล่าง

http://w3schools.com/tags/default.asp


4

คำอธิบายที่ใช้ได้จริง: โดยค่าเริ่มต้น<p> </p>จะเพิ่มตัวแบ่งบรรทัดก่อนและหลังข้อความที่ปิดล้อม (ดังนั้นจึงสร้างย่อหน้า) <span>ไม่ได้ทำเช่นนี้นั่นคือเหตุผลที่มันถูกเรียกว่าอินไลน์


3

แท็ก p หมายถึงองค์ประกอบย่อหน้า มีระยะขอบ / ช่องว่างที่ใช้กับมัน ช่วงคือแท็กอินไลน์ที่ไม่มีการเรียงลำดับ ความแตกต่างที่สำคัญคือ p เป็นองค์ประกอบบล็อกเมื่อสแปนอินไลน์ซึ่งหมายความว่า<p>Hi</p><p>There</p>จะปรากฏในบรรทัดที่แตกต่างกันเมื่อ<span>Hi</span><span>There</span>หมุนขึ้นเคียงข้างกัน


3

เมื่อเราใช้ข้อความปกติในเวลานั้นเราต้องการ<p>แท็กเมื่อเราใช้ข้อความปกติพร้อมเอฟเฟกต์บางอย่างในเวลานั้นเราต้องการ<span>แท็ก


2

<span> คือแท็กแบบอินไลน์ <p> คือแท็กบล็อกที่ใช้สำหรับย่อหน้า เบราว์เซอร์จะแสดงบรรทัดว่างใต้ย่อหน้าในขณะที่ <span> จะแสดงในบรรทัดเดียวกัน


0

แท็กเป็นองค์ประกอบระดับบล็อก แต่แท็กเป็นองค์ประกอบแบบอินไลน์โดยปกติเราจะใช้แท็ก span เพื่อจัดรูปแบบภายในองค์ประกอบบล็อก แต่คุณไม่จำเป็นต้องใช้แท็ก span ในรูปแบบอินไลน์ที่คุณต้องทำคือ; แปลงองค์ประกอบบล็อกเป็นองค์ประกอบแบบอินไลน์โดยใช้ "display: inline"


-6
p {
    float: left;
    margin: 0;
}

จะไม่มีช่องว่างรอบ ๆ ดูเหมือนว่าจะเป็นช่วง

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.