การใช้ p ถึง inline elements อย่าง span, strong และ em

เมื่อถึงเวลาที่ต้องพูดถึง ความหมายในเชิงลึก อันถึงขั้นที่ต้องให้ซึ้ง กับพระธรรมคำของของ xhtml แล้ว การใช้ <p>, <span>, <strong> หรือ <em> นั้น จริงๆ เขานำไปใช้กันยังไง หรือว่าเอาไปประยุกต์ใช้กันยังไง ทุกๆ Element มีความหมายในตัวของมันนะครับ สุ่มห้าสุ่มหกไป ไม่ดี

เมื่อถึงเวลาที่ต้องพูดถึง ความหมายในเชิงลึก อันถึงขั้นที่ต้องให้ซึ้ง กับพระธรรมคำของของ xhtml แล้ว การใช้ <p>, <span>, <strong> หรือ <em> นั้น จริงๆ เขานำไปใช้กันยังไง หรือว่าเอาไปประยุกต์ใช้กันยังไง ทุกๆ Element มีความหมายในตัวของมันนะครับ สุ่มห้าสุ่มหกไป ไม่ดี

สำหรับใครที่ยังไม่กระจ่างแจ้งกับการใช้ ผมขอแยกแยะประเด็นและความสำคัญหลักๆ ของแต่ละ Element เป็นข้อๆ นะขอรับ

1.<p> (Paragraph)

ความหมายของการใช้งาน

ความหมายตามตัวครับ “ย่อหน้า” เมื่อใดก็ตามที่มีการย่อหน้าใหม่ เราควรใช้ <p> เป็นตัวแบ่งเนื้อหาในแต่ละย่อหน้านั้นๆ

คุณลักษณะ

เป็น Element ที่อยู่ในหมวด Structural Module ซึ่งแสดงผลเป็น Block Element ด้วย และสามารถ ใช้xhtml elements ในตระกูล Content Model แบบ Text | List | blockcode | blockquote | pre | table ใส่เข้าไปข้างในได้ แต่ไม่สามารถ เอา <p> ซ้อนเข้าไปในตัวของมันเองได้

2.<span>, <strong> และ <em>

Inline elements เหล่านี้ ท่านเคยถามถึงความสำคัญในชีวิตของพวกเขา หรือไม่ถ้ายัง สอบถามเขาสักนิดเถิด ว่าแท้จริงแล้ว เขาถูกสร้างมาเพื่อสิ่งใด อย่าคิดเพียงเพื่อ เขาเหล่านั้นมีไว้เพื่อให้ผู้หื่นกระหายในเว็บ 2.0 นำไปกระทำชำเราแบบผิดๆ สงสารผู้สร้างบ้าง w3c จะรู้สึกอย่างไร Tim Berners-Lee จะหัวเสียมากมายแค่ไหน หากเขารู้ว่า มีคนเอาสิ่งที่ตัวเองปลุกปั้นไปใช้ในทางที่ผิด

คำว่า Inline ชื่อก็บอกตรงๆ ว่า “อยู่ในแถว” คือการใช้ elements เหล่านี้ ในแถวเท่านั้น ในที่นี้ของพูดถึงแถวของข้อมูลที่อยู่ใน <p> ก่อนนะครับ

2.1<span>

ลักษณะการทำงานของ span มีความคล้ายคลึงกับการทำงาน ของ div ในเชิงแนวความคิด คือการนำเอามาจัดวางโครงสร้างเพื่อให้ใช้ css แสดงจัดการแสดงผลกับข้อมูล<sapn> จะถูกเรียกใช้งานก็ต่อเมื่อคุณต้องการจะเสกข้อมูลที่มีอยู่ในบรรทัดนั้นๆ ให้แสดงผลในรูปแบบและลักษณะแตกต่างออกไป (แค่รูปแบบการแสดงผลนะครับ ไม่เกี่ยวกับการเน้นย้ำเรื่องความหมาย) เช่น สีที่แตกต่าง หรือ ขีดเส้นใต้ มีขอบสี มีพื้นหลังไฮไลท์

2.2<strong>

เมื่อใดก็ตาม ใน paragraph นั้นๆ คำที่มีความสำคัญมากกว่าคำๆ อื่นในบรรทัดที่ต้องการเน้น ย้ำ จะใช้ strong ในการระบุ ในการแสดงผลและการสื่อความหมายถึง นัยยะแห่งความสำคัญของคำนั้น รูปแบบการแสดงผล แสดงออกมาเป็นตัวหนา

หลายคนสงสัยว่า ใน html มี <b> อยู่แล้ว ทำไมต้องเปลี่ยนมาใช้ <strong> ด้วยหละ มันก็แสดงผลเหมือนๆ กันแสดงผลเหมือนกันนั้นใช่ครับ แต่ ความหมายไม่เหมือนกัน

XHTML แตกต่างจาก HTML ตรงที่ การสื่อความหมายของ tag และ element

เช่น ตัวอย่างต่อไปนี้

Die hard 4.0 got very strong screenplay.

กับ

Die hard 4.0 got very bold screenplay.

คุณคิดว่า อันไหนมันอ่านแล้วเข้าใจของความหมายเชิงการสื่อสารมวลชนครับ

กับ 1. หนังเรื่อง Die Hard 4.0 บทแมร่งสุดยอดเลยหวะ หรือ 2. หนังเรื่อง Die Hard 4.0 บทหนังเรื่องนี้แมร่งเป็นตัวหนาหมดเลยหวะ แสดดดดด

พาลให้เข้าใจกันไปคนละเรื่อง

Note:

นอกเรื่องนิดนึง แนะนำสำหรับคอหนังแอ็คชั่นและแฟนเดนตาย ป๋า วิลลิส Die hard 4.0 ไม่ทำให้คุณผิดหวัง กับแอ็คชั่นเว่อร์ๆ แบบฉบับของ ดายฮาร์ด และบทหนังที่จิกกัดความง่อยแดกของ รัฐบาลอเมริกาตลอดทั้งเรื่อง ว่าด้วยความกลัวของคนในสังคมกับกระแสการคุกคาม ก่อการร้ายตอบโต้จากกลุ่มผู้ก่อการร้ายภายในที่ซ่อนอยู่ (หนังให้ผู้ร้ายเป็นคนในประเทศประมาณโจรก่อการร้ายทั้งหลายไม่ได้อยู่ไหนไกล มันแดกภาษีคุณอยู่แถวนี้นี่เอง เหมือนประเทศอะไรน้า ที่นักการเมืองชอบเข้ามานั่งงาบภาษีของกรู แล้วเอาตูดไว้แช่น้ำและบริการกันเอง) และความห่วยแตก ล่าช้า ในการให้ความช่วยเหลือประชาชนผู้ประสบเคราะห์ภัยในประเทศ

2.3<em>

เมื่อคุณต้องการเน้นข้อความในบรรทัดให้แปลก ออกไปในเชิงความหมาย หรือแตกต่างออกไป em จะเน้นความแปลกและแตกต่างและแสดงผลในรูปลักษณะตัวเอียง แต่ strong จะเน้นความสำคัญ และแสดงผลในลักษณะตัวหนาจึงต่างกันในลักษณะแห่งการใช้งาน

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

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

รักกันชอบกันอย่าลืมแชร์นะครัช:
error0

Back to Top

0 Responses to การใช้ p ถึง inline elements อย่าง span, strong และ em

  1. likhi1


    ไม่เคยใช้เลยนะครับแท๊ก <em> ใช้แต่ <stong>

    " คุณต้องการเน้นข้อความในบรรทัดให้แปลก ออกไปในเชิงความหมาย ???"

    ใช้แล้วมันตัวหนาเหมือน <stong> ป่าว ??


    เดี๋ยวต้องลองครับ !!!

    Reply

  2. iake

    <b> กับ <i> ใน xhtml 2.0 นี่ไม่มีใช้อีกต่อไป ไชโย ไชโย ไชโย

    ——-

    ไม่เข้าใจในข้อ 1 ครับ <p>

    เป็น Element ที่อยู่ในหมวด Structural Module ซึ่งแสดงผลเป็น Block Element ด้วย และสามารถ ใช้xhtml elements ในตระกูล Content Model แบบ Text | List | blockcode | blockquote | pre | table ใส่เข้าไปข้างในได้ แต่ไม่สามารถ เอา <p> ซ้อนเข้าไปในตัวของมันเองได้


    <p> แล้วตามด้วยเอลิเมนท์ <blockquote> <pre> <table> ได้เหรอครับ

    Reply

  3. radiz

    Block Element ไม่สามารถอยู่ใน Block Element ได้ยกเว้นบางตัวที่มีคุณสมบัติอยู่ในตัวเองได้ อาทิ div

    Reply

  4. radiz

    ใน XHTML2 p จะสามารถนำเสนอทุกอย่างเหมือน

    กับหน้าหนังสือที่เราอ่าน ๆ กัน ซึ่งก็คือ 1 ย่อหน้านั้น

    มันสามารถที่จะมีอะไรได้


    เช่น 1 ย่อหน้าของคุณ มีทั้ง list มีทั้งคำพูดตัวอย่าง

    (blockquote) มีทั้งตัวอย่างโค้ด (blockcode) คุณ

    สามารถที่จะเอา element ที่บ่งคุณลักษณะเหล่านี้

    วางลงไปใน p ได้ (ขอย้ำว่า XHTML2)

    Reply

  5. radiz

    Text | List | blockcode | blockquote | pre

    เหล่านี้อยู่ใน p ได้ยกเว้น table ซึ่งตาราง คือ

    "ตาราง" ไม่ได้อยู่ในย่อหน้า ไม่ถือว่าเป็นย่อหน้า

    เป็นประเภทของ content แบบนึง

    Reply

  6. iake

    อ่อ ครับ

    สงสัยต่อ งั้นถามต่อเลยครับ

    ถ้า blockquote อยู่ใน p element ได้ งั้นจากเดิมใน xhtml 1.0 xhtml 1.1 เราเขียน

    <blockquote><p>ข้อความ</p><blockquote>

    งั้นใน xhtml 2.0 ต้องเอา <p> ออกหรือเปล่า

    <p><blockquote>ข้อความ</blockquote></p>

    Reply

  7. radiz

    ตามนั้นครับ เข้าใจถูกต้องแล้ว

    Reply

  8. Woody

    <p> อยู่ใน <blockquote> เช่นเดิมครับ แต่พวก List กับ <p> ต้องแยกกัน

    ส่วน <strong> กับ <em> นั้นต่างจาก <b> กับ <i> ที่ความหมายครับ strong นั้นแปลว่า "ชัดเจน เข้มข้น เต็มที่" ซึ่งถ้าใช้ในการ markup ข้อความ ก็จะทำให้ข้อความนั้นมีมีความสำคัญมาก ผู้อ่านต้องให้ความใ่ส่ใจ ส่วน <em> นั้นย่อมาจาก emphasize ซึ่งแปลว่า "ให้ความสำคัญ หรือเน้นความสำคัญ" ถ้านำมาใช้กับข้อความก็หมายถึงการเน้นความสำคัญของข้อความ ความหมายใกล้เคียงกับ strong แต่ strong จะให้ความหมายหนักกว่า ส่วน <b> กับ <i> นั้นย่อมาจากคำว่า bold และ italic ซึ่งแปลว่า "หนา" กับ "เีอียง" ซึ่งไม่ถือว่ามีความหมายทางโครงสร้างเอกสาร เพราะคำว่า "หนา" กับ "เอียง" ไม่ได้บอกเราเลยว่าข้อความเหล่านั้นทำหน้าที่อะไร มีความสำคัญมากน้อยแค่ไหน ก็เลยถูกยกเลิกการใช้ไป เราเรียกแท็กที่ไม่มีความหมายเหล่านี้ว่า Presentation Tag ครับ คือเน้นการแสดงผล แต่ไม่มีความหมายเชิงโครงสร้างหรือ Semantic

    Reply

  9. radiz

    http://www.w3.org/TR/2004/WD-xhtml2-20040722/mod-structural.html

    :) ว่าง ๆ แวะไปอ่านบ้างก็ดีนะครับ สิ่งที่พรมันสอนในที่นี้คือ XHTML 2

    ซึ่งมีการปรับเปลี่ยน ลักษณะการใช้งานตามที่พรบอก หรือ จะเข้าไปอ่านบทความใน W3C ก็ได้ครับ

    Reply

  10. jommann

    อ่านเรื่องนี้แล้ว ทำให้ผม รู้จัก พวก tag และ element ต่าง ๆ อย่างเข้าใจมากขึ้น ว่าส่วนไหนต้องใช้ยังงัย เขียนอย่างไร คนพัฒนาต่อจากเราถึงเข้า ขอบคุณครับ

    Reply

  11. แป๊ป

    อยากให้เขียนให้ดูด้วยจังจะได้เข้าใจ

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top

Social Share Buttons and Icons powered by Ultimatelysocial