ฉันควรใช้แท็ก <i> สำหรับไอคอนแทน <span> หรือไม่ [ปิด]

ฉันดูที่แหล่งที่มาของ Facebook พวกเขาใช้<i>แท็กเพื่อแสดงไอคอน

นอกจากนี้วันนี้ฉันก็ดู Bootstrap ของ Twitter ด้วย นอกจากนี้ยังใช้<i>แท็กเพื่อแสดงไอคอน

แต่,

จากสเป็ค HTML5 :

องค์ประกอบ I แสดงช่วงของข้อความในเสียงหรืออารมณ์ทางเลือกหรืออื่น ๆ จากออฟเซ็ตปกติเช่นการกำหนดทางอนุกรมวิธานศัพท์ทางเทคนิควลีสำนวนจากภาษาอื่นความคิดชื่อเรือหรืออื่น ๆ งานประพันธ์ที่มีการนำเสนอแบบตัวพิมพ์ทั่วไปเป็นตัวเอียง

เหตุใดพวกเขาจึงใช้<i>แท็กเพื่อแสดงไอคอน

มันไม่ใช่การฝึกฝนที่เลวร้ายใช่ไหม?

หรือฉันกำลังพลาดบางสิ่งที่นี่

ฉันใช้spanเพื่อแสดงไอคอนและดูเหมือนว่าจะใช้งานได้สำหรับฉันจนถึงตอนนี้

ปรับปรุง:

Bootstrap 3 ตอนนี้ใช้spanสำหรับไอคอน Doc อย่างเป็นทางการ

เหตุใดพวกเขาจึงใช้<i>แท็กเพื่อแสดงไอคอน

เพราะมันเป็น:

• สั้น
• ฉันหมายถึงไอคอน (แม้ว่าจะไม่ใช่ HTML)

มันไม่ได้เป็นการปฏิบัติที่ไม่ดี?

การปฏิบัติอันยิ่งใหญ่ มันคือชัยชนะของการแสดงเหนือความหมาย

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

ในท้ายที่สุดฉันได้ข้อสรุปว่าการฝึกฝนนี้ไม่ใช่เรื่องที่ไม่น่าตื่นเต้นเลย ในความเป็นจริงนอกเหนือจากความสั้นและความสัมพันธ์ที่ดีของ "ฉันคือไอคอน" ฉันคิดว่ามันเป็นทางเลือกที่มีความหมายมากที่สุดสำหรับไอคอนเมื่อ<img>แท็กตรงไปตรงมาไม่สามารถใช้งานได้

1. การใช้งานสอดคล้องกับข้อมูลจำเพาะ

แม้ว่ามันอาจจะไม่ใช่สิ่งที่ W3 มีอยู่ในใจเป็นหลัก แต่สำหรับฉันแล้วสเป็คอย่างเป็นทางการของฉัน<i>สามารถรองรับไอคอนได้อย่างง่ายดาย ท้ายที่สุดสัญลักษณ์ตอบกลับลูกศรกำลังพูดว่า "ตอบกลับ" ในอีกทางหนึ่ง มันเป็นการแสดงออกถึงคำศัพท์ทางเทคนิคที่อาจไม่คุ้นเคยกับผู้อ่านและมักจะเป็นตัวเอียง ("ที่นี่ที่ Twitter นี่คือสิ่งที่เราเรียกว่าลูกศรตอบ ") และมันเป็นคำศัพท์จากภาษาอื่น: ภาษาสัญลักษณ์

หากแทนที่จะใช้สัญลักษณ์ลูกศร Twitter ใช้<i>shout out</i>หรือ<i>[Japanese character for reply]</i>(ในหน้าภาษาอังกฤษ) ซึ่งจะสอดคล้องกับข้อมูลจำเพาะ แล้วทำไมไม่<i>[reply arrow]</i>? (ฉันกำลังพูดความหมาย HTML อย่างเคร่งครัดที่นี่ไม่ใช่การเข้าถึงซึ่งฉันจะไป)

เท่าที่ฉันเห็นส่วนหนึ่งของข้อมูลจำเพาะที่ละเมิดโดยการใช้ไอคอนอย่างชัดเจนคือวลี "span of text" (เมื่อแท็กไม่มีข้อความด้วย) เป็นที่ชัดเจนว่า<i>แท็กมีไว้สำหรับข้อความเป็นหลัก แต่นั่นเป็นรายละเอียดเล็กน้อยเมื่อเทียบกับความตั้งใจโดยรวมของแท็ก คำถามสำคัญสำหรับแท็กนี้ไม่ใช่รูปแบบของเนื้อหา แต่มีความหมายของเนื้อหานั้น

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

ดังนั้นความจริงที่ว่าผู้เขียนสเป็คไม่ได้คิด (หรือเลือก) เพื่อให้ความกระจ่างในเรื่องนี้ไม่ควรผูกมือเราจากการทำสิ่งที่สมเหตุสมผลและสอดคล้องกับจิตวิญญาณของแท็ก <a>แท็กเดิมทีตั้งใจจะนำผู้ใช้ไปที่อื่น แต่ตอนนี้มันอาจปรากฏขึ้น Lightbox ใหญ่โห่ใช่มั้ย หากมีคนคิดวิธีที่จะเปิดไลท์บ็อกซ์เมื่อคลิกก่อนที่ข้อมูลจำเพาะจะหายไปพวกเขาก็ควรจะใช้<a>แท็กไม่ใช่<span>แม้ว่าจะไม่สอดคล้องกับคำจำกัดความปัจจุบันทั้งหมด - เพราะมันมาใกล้ที่สุดและเป็น ยังคงสอดคล้องกับจิตวิญญาณของแท็ก ("สิ่งที่จะเกิดขึ้นเมื่อคุณคลิกที่นี่") จัดการแบบเดียวกันกับ<i>- สิ่งที่คุณใส่ไว้ข้างในหรืออะไรก็ตามที่คุณใช้มันอย่างสร้างสรรค์

2. <i>แท็กเพิ่มความหมายเชิงความหมายให้กับองค์ประกอบไอคอน

ตัวเลือกอื่นในการพกไอคอนคลาสด้วยตัวมันเอง<span>ซึ่งแน่นอนว่าไม่มีความหมายทางความหมายใด ๆ เมื่อเครื่องถาม<span>สิ่งที่มีอยู่มันจะพูดว่า "ฉันไม่ได้เป็นอะไรก็ได้" แต่<i>แท็กบอกว่า "ฉันมีวิธีพูดที่แตกต่างไปจากวิธีปกติหรืออาจเป็นคำที่ไม่คุ้นเคย" มันไม่เหมือนกับ "ฉันมีไอคอน" แต่มันใกล้กว่านั้นมาก<span>เลย!

3. ในที่สุดการใช้งานทั่วไปทำให้ถูกต้อง

นอกเหนือจากข้างต้นแล้วการพิจารณาว่าเครื่องอ่าน (ไม่ว่าจะเป็นเสิร์ชเอ็นจิ้นตัวอ่านหน้าจอหรืออะไรก็ตาม) อาจเริ่มพิจารณาว่า Facebook, Twitter และเว็บไซต์อื่น ๆ ใช้<i>แท็กสำหรับไอคอนได้ตลอดเวลา พวกเขาไม่สนใจสเป็คเท่าที่พวกเขาสนใจเกี่ยวกับการแยกความหมายจากโค้ดด้วยวิธีการที่จำเป็น ดังนั้นพวกเขาอาจใช้ความรู้เรื่องการใช้งานทั่วไปนี้เพื่อบันทึกว่า "อาจมีไอคอนที่นี่" หรือทำบางสิ่งที่ก้าวหน้ากว่าเช่นเรียกดู CSS เพื่อบอกความหมายหรือใครจะรู้ ดังนั้นหากคุณเลือกที่จะใช้<i>ไอคอนสำหรับเว็บไซต์ของคุณคุณอาจให้ความหมายมากกว่าข้อกำหนด

ยิ่งไปกว่านั้นหากการใช้งานนี้แพร่หลายมันก็น่าจะรวมอยู่ในข้อมูลจำเพาะในอนาคต จากนั้นคุณจะต้องผ่านรหัสของคุณแทนที่<span>ด้วย<i>'s! ดังนั้นอาจเข้าท่ากับสิ่งที่ดูเหมือนจะเป็นทิศทางของสเป็คโดยเฉพาะอย่างยิ่งเมื่อมันไม่ขัดแย้งกับสเป็คปัจจุบันอย่างชัดเจน การใช้งานทั่วไปมีแนวโน้มที่จะกำหนดกฎภาษามากกว่าวิธีอื่น ๆ หากคุณอายุมากพอคุณจำได้ไหมว่า "เว็บไซต์" เป็นการสะกดอย่างเป็นทางการเมื่อคำใหม่? พจนานุกรมยืนยันว่าจะต้องมีพื้นที่และเว็บต้องเป็นตัวพิมพ์ใหญ่ มีเหตุผลความหมายสำหรับสิ่งนั้น แต่การใช้งานทั่วไปบอกว่า "ไม่ว่ามันจะโง่อะไรฉันใช้ 'เว็บไซต์' เพราะมันกระชับและดูดีกว่า" และอีกไม่นาน

4. ดังนั้นฉันจะไปข้างหน้าและใช้มัน

ดังนั้น<i>ให้ความหมายมากขึ้นกับเครื่องเพราะสเป็คมันให้ความหมายมากขึ้นกับมนุษย์เพราะเราเชื่อมโยง "i" กับ "ไอคอน" ได้อย่างง่ายดายและมีความยาวตัวอักษรเพียงตัวเดียว ชนะ! และหากคุณแน่ใจว่าได้รวมข้อความที่เทียบเท่าไว้ทั้งใน<i>แท็กหรือด้านขวาถัดจาก (เช่นเดียวกับ Twitter) ผู้อ่านหน้าจอจะเข้าใจว่าคลิกเพื่อตอบกลับได้อย่างไรลิงก์นั้นสามารถใช้งานได้ถ้า CSS ไม่โหลดและผู้อ่านที่ดี สายตาและเบราว์เซอร์ที่เหมาะสมจะเห็นไอคอนสวย ในใจทั้งหมดนี้ฉันไม่เห็นข้อเสีย

คำตอบของเควนตินระบุไว้อย่างชัดเจนว่า iไม่ควรใช้แท็กเพื่อกำหนดไอคอน

แต่ฮอลลี่แนะนำว่า spanไม่มีความหมายในตัวเองและลงมติเห็นด้วยiแทนที่จะเป็นspanแท็ก

มีข้อเสนอแนะให้ใช้น้อยimgเนื่องจากเป็นความหมายและมีaltแท็ก แต่เราไม่ควรใช้เช่นกันimgเพราะยังว่างเปล่าsrcส่งคำขอไปยังเซิร์ฟเวอร์ อ่านที่นี่

ฉันคิดว่าวิธีที่ถูกต้องจะเป็น

<span class="icon-fb" role="img" aria-label="facebook"></span>

วิธีนี้จะช่วยแก้ปัญหาเรื่องไม่มีaltแท็กspanและทำให้ผู้ใช้ที่มีความบกพร่องทางการมองเห็นสามารถเข้าถึงได้ มันมีความหมายและไม่ใช้การแฮ็ก (การแฮ็ก) แท็กใด ๆ

การเดาของฉัน: เนื่องจาก Twitter เห็นว่าจำเป็นที่จะต้องสนับสนุนเบราว์เซอร์รุ่นเก่ามิฉะนั้นพวกเขาจะใช้:before/ :afterpseudo-elements

เบราว์เซอร์รุ่นเก่าไม่รองรับองค์ประกอบหลอกที่ฉันกล่าวถึงดังนั้นพวกเขาจึงจำเป็นต้องใช้องค์ประกอบ HTML จริงสำหรับไอคอนและเนื่องจากไอคอนไม่มีแท็ก 'พิเศษ' พวกเขาเพิ่งไปพร้อมกับ<i>แท็กและเบราว์เซอร์ทั้งหมดสนับสนุน แท็กนั้น

พวกเขาอาจใช้ a อย่างแน่นอน<span>เช่นเดียวกับคุณ (ซึ่งก็ดีทั้งหมด) แต่อาจเป็นเพราะเหตุผลที่ฉันกล่าวถึงข้างต้นบวกกับที่กล่าวถึงโดยQuentinเป็นเหตุผลที่ Bootstrap ใช้<i>แท็ก

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

PS ความจริงที่ว่าไอคอนเริ่มต้นด้วย'i'และมี<i>แท็กนั้นเป็นเรื่องบังเอิญโดยสิ้นเชิง

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

ไม่มีอะไรที่จะหยุดคุณจากการสร้างองค์ประกอบที่กำหนดเองที่อธิบายตัวเองได้ว่ามันมีจุดประสงค์มาก

ทั้งเบราว์เซอร์ที่ทันสมัยและแม้แต่ IE 6+ (w / shim) สามารถรองรับสิ่งต่าง ๆ เช่น:

<icon class="plus">

หรือ

<icon-add>

เพียงตรวจสอบให้แน่ใจว่าแท็กกลับสู่มาตรฐาน:

 icon { display:block; margin:0; padding:0; border:0; ... }

และใช้ shim หากคุณต้องการรองรับ IE9 หรือเก่ากว่า (ดูโพสต์ด้านล่าง)

ลองดูโพสต์ StackOverflow นี้:

มีวิธีสร้างแท็ก html ของคุณเองใน HTML5 หรือไม่

เพื่อโต้แย้งของฉันทั้ง Angular Directives ของ Google และโครงการโพลิเมอร์ใหม่ใช้แนวคิดของแท็ก HTML ที่กำหนดเอง

ฉันคิดว่าสิ่งนี้ดูไม่ดีนัก - เพราะฉันกำลังทำงานกับเทมเพลต Joomla และเมื่อไม่นานมานี้ฉันได้รับเท็มเพลตที่ล้มเหลว W3C เพราะมันใช้ <i>แท็กและเลิกใช้แล้วเนื่องจากการใช้งานเดิมคือการทำให้เป็นเรื่องแปลกซึ่งตอนนี้ทำผ่าน CSS ไม่ใช้ HTML อีกต่อไป

มันทำให้การปฏิบัติที่ไม่ดีจริง ๆ เพราะเมื่อฉันเห็นมันฉันผ่านเทมเพลตและเปลี่ยน<i>แท็กทั้งหมดเป็น<span style="font-style:italic">แทนแล้วสงสัยว่าทำไมเทมเพลตทั้งหมดดูแปลก

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

<img class="icon" src="electricity.jpg" alt="Electricity" title="Electricity">

ด้วยวิธีนี้ฉันได้ไอคอนของฉันทั้งหมดในหนึ่งชั้นเรียนดังนั้นการเปลี่ยนแปลงใด ๆ ที่ฉันทำมีผลกับไอคอนทั้งหมด (กล่าวว่าฉันต้องการให้พวกเขามีขนาดใหญ่ขึ้นหรือเล็กลงหรือมีขอบที่โค้งมนเป็นต้น) ข้อความ alt ให้โอกาสผู้อ่านหน้าจอ ไอคอนแทนที่จะเป็นเพียงแค่ "ข้อความเป็นตัวเอียงจุดสิ้นสุดของตัวเอียง" (ฉันไม่รู้ว่าผู้อ่านหน้าจออ่านหน้าจอได้อย่างไร แต่ฉันคิดว่ามันเป็นอย่างนั้น) และชื่อเรื่องยังเปิดโอกาสให้ผู้ใช้เลื่อนเมาส์ไป ภาพและรับเคล็ดลับเครื่องมือบอกพวกเขาว่าไอคอนอยู่ในกรณีที่พวกเขาไม่สามารถคิดออก ดีกว่าการใช้<i>- และผ่านมาตรฐาน W3C

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

ฉันคิดถึง<img>แท็กเป็นอันดับแรก แต่การกำหนดสไตล์เริ่มต้นของแท็กเหล่านั้นภายในลิงก์มักจะมีการกำหนดสไตล์และ / หรือเงา นอกจากนี้รู้สึกผิดที่จะใช้<img>แท็กโดยไม่ได้กำหนดแอตทริบิวต์ "src" ในขณะที่ฉันใช้การประกาศสไตล์ชีทพื้นหลังภาพเพื่อไม่ให้ภาพผีและลาก

ณ จุดนี้คุณกำลังคิดแท็กเช่น<span>หรือ<i>- ซึ่งในกรณีนี้<i>ทำให้รู้สึกว่าไอคอนประเภทนี้

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