เป็นสิ่งที่ถูกต้องวิธีที่จะทำให้ตัวเอียงข้อความ? ฉันได้เห็นสี่แนวทางต่อไปนี้:

<i>Italic Text</i>

<em>Italic Text</em>

<span class="italic">Italic Text</span>

<span class="footnote">Italic Text</span>

<i>

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

<em>

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

<span class="italic">

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

<span class="footnote">

สิ่งนี้ใช้คลาส CSS สำหรับซีแมนทิกส์ จนถึงตอนนี้ดูเหมือนจะเป็นวิธีที่ดีที่สุด แต่จริงๆแล้วมันมีสองปัญหา

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

2. ความหมายทางความหมายสามารถเปลี่ยนแปลงได้เมื่อไม่มีความแข็งแรงเพียงพอ ให้บอกว่าฉันไปพร้อมกับ "เชิงอรรถ" ตามอะไรมากกว่าข้อความที่อยู่ด้านล่างของหน้า จะเกิดอะไรขึ้นเมื่อสองสามเดือนต่อมาฉันต้องการเพิ่มข้อความที่ด้านล่าง มันไม่ได้เป็นเชิงอรรถ เราจะเลือกคลาสความหมายที่น้อยกว่าทั่วไป<em>แต่หลีกเลี่ยงปัญหาเหล่านี้ได้อย่างไร

สรุป

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

นอกจากนี้ความปรารถนาที่จะแยกสไตล์ออกจากโครงสร้างทำให้ CSS ถูกโน้มน้าวแทน<i>เมื่อมีโอกาสที่จริงจะมีประโยชน์น้อยกว่า ดังนั้นสิ่งนี้ทำให้ฉันกลับมาพร้อมกับ<i>แท็กที่อ่อนน้อมถ่อมตนและสงสัยว่ารถไฟแห่งความคิดนี้เป็นสาเหตุที่ทำให้มันเหลืออยู่ในสเป็ค HTML5 หรือไม่?

มีโพสต์บล็อกหรือบทความที่ดีในเรื่องนี้ด้วยหรือไม่ บางทีผู้ที่เกี่ยวข้องในการตัดสินใจที่จะรักษา / สร้าง<i>แท็ก?

คุณควรใช้วิธีการที่แตกต่างกันสำหรับกรณีการใช้ที่แตกต่างกัน:

1. หากคุณต้องการเน้นวลีให้ใช้ <em>หากคุณต้องการที่จะเน้นวลีที่ใช้
2. <i>แท็กมีความหมายใหม่ใน HTML5 , แทน "ช่วงข้อความในเสียงอื่นหรืออารมณ์" ดังนั้นคุณควรใช้แท็กนี้สำหรับสิ่งต่าง ๆ เช่นความคิด / asides หรือสำนวนโวหาร ข้อมูลจำเพาะยังแนะนำชื่อเรือ (แต่ไม่แนะนำชื่อหนังสือ / เพลง / ภาพยนตร์;<cite>สำหรับสิ่งนั้นแทน)
3. หากข้อความตัวเอียงเป็นส่วนหนึ่งของบริบทที่ใหญ่กว่าให้พูดย่อหน้าเบื้องต้นคุณควรแนบสไตล์ CSS กับองค์ประกอบที่มีขนาดใหญ่กว่าเช่น p.intro { font-style: italic; }

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

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

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

ฉันไม่มีความเชี่ยวชาญ แต่ฉันจะบอกว่าถ้าคุณต้องการความหมายคุณควรใช้คำศัพท์ (RDFa)

สิ่งนี้จะส่งผลดังนี้:

<em property="italic" href="http://url/to/a/definition_of_italic"> Your text </em>

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

คุณควรตรวจสอบว่ามีคำศัพท์สำหรับสิ่งนั้นหรือไม่อาจมีคุณสมบัติอยู่แล้ว

ข้อมูลเพิ่มเติมเกี่ยวกับ RDFa ที่นี่: http://www.alistapart.com/articles/introduction-to-rdfa/

TLDR

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

คำอธิบายอีกต่อไป

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

เมื่อคุณเข้าสู่ CSS คุณอาจมีองค์ประกอบความหมายที่เหมาะสมที่จะใส่ตัวเอียงสำหรับเหตุการณ์ทั้งหมดในไซต์ของคุณ emเป็นตัวอย่างที่ดี แต่บางทีคุณอาจต้องการทั้งหมดaside > ul > liในเว็บไซต์ของคุณเป็นตัวเอียง คุณต้องแยกความคิดเกี่ยวกับมาร์กอัปจากการคิดเกี่ยวกับงานนำเสนอ

ดังกล่าวโดยDisgruntledGoat , iเป็นความหมายใน HTML5 ความหมายดูเหมือนจะแคบสำหรับฉันแม้ว่า การใช้อาจจะหายาก

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

class="italic"ไม่ดี. อย่าใช้มัน มันไม่ได้มีความหมายและไม่ยืดหยุ่นเลย การนำเสนอยังคงมีความหมายเพียงแค่แตกต่างจากมาร์กอัป

class="footnote"กำลังเลียนแบบซีแมนติกมาร์กอัปและไม่ถูกต้องเช่นกัน CSS สำหรับเชิงอรรถของคุณไม่ควรจะไม่ซ้ำกับเชิงอรรถ ไซต์ของคุณจะดูยุ่งเกินไปหากทุกส่วนมีสไตล์แตกต่างกัน คุณควรมีรูปแบบการกระจายของหน้าเว็บที่คุณสามารถเปลี่ยนเป็นคลาส CSS ได้ หากสไตล์เชิงอรรถและบล็อกบล็อกของคุณมีความคล้ายคลึงกันมากคุณควรใส่ความคล้ายคลึงลงในคลาสเดียวกันแทนที่จะทำซ้ำตัวเองซ้ำแล้วซ้ำอีก คุณอาจพิจารณาใช้แนวทางปฏิบัติของ OOCSS (ลิงก์ด้านล่าง)

การแยกข้อกังวลและความหมายมีขนาดใหญ่ใน HTML5 ผู้คนมักไม่ทราบว่ามาร์กอัปไม่ใช่สถานที่เดียวที่มีความหมายสำคัญ มีความหมายของเนื้อหา (HTML) แต่ยังมีความหมายในการนำเสนอ (CSS) และความหมายของพฤติกรรม (JavaScript) เช่นกัน พวกเขาทุกคนมีความหมายแยกต่างหากของตัวเองที่มีความสำคัญที่จะต้องใส่ใจกับการบำรุงรักษาและการอยู่แห้ง

ทรัพยากร OOCSS

• CSS เชิงวัตถุ
• บทนำสู่ CSS เชิงวัตถุ (OOCSS)
• วิธีการเขียน CSS เชิงวัตถุ
• เริ่มต้นใช้งานด้วย Object-Orientated CSS (OOCSS)
• CSS เชิงวัตถุ: อะไรอย่างไรและทำไม
• ดำน้ำใน CSS เชิงวัตถุ

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

หากไม่มีความหมายพิเศษทำไมต้องแยกการนำเสนอออกจากข้อความก่อนหน้า? ข้อความนี้ดูค่อนข้างแปลกเพราะฉันได้ทำให้มันเอียงโดยไม่มีเหตุผล

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

เพราะเหล่านี้มีรูปแบบที่ซับซ้อนพอสมควร (มีประเด็นที่เกี่ยวข้อง Internet Explorer) อีกครั้งใช้ในสถานที่แตกต่างกันเราสร้างชั้นเรียนเช่นbox-1, box-2เพื่อให้เราสามารถกลับมาใช้รูปแบบ

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

ข้อความตัวเอียง HTML แสดงข้อความในรูปแบบตัวเอียง

<i>HTML italic text example</i>

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

<p>This is <em>emphasized </em> text format <em>example</em></p>

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

ดูคู่มือนี้สำหรับเพิ่มเติม: การจัดรูปแบบข้อความ HTML

iองค์ประกอบไม่เป็นความหมายดังนั้นสำหรับผู้อ่านที่หน้าจอ Googlebot ฯลฯ มันควรจะเป็นชนิดของความโปร่งใส (เช่นเดียวspanหรือdivองค์ประกอบ) แต่ไม่ใช่ทางเลือกที่ดีสำหรับนักพัฒนาเพราะมันเข้าร่วมชั้นนำเสนอกับชั้นโครงสร้าง - และนั่นเป็นวิธีปฏิบัติที่ไม่ดี

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

<span class="italic">Italic Text</span>เป็นวิธีที่ผิดที่สุด ก่อนอื่นมันใช้งานไม่สะดวก ประการที่สองมันแนะนำว่าข้อความควรเป็นตัวเอียง และเลเยอร์โครงสร้าง (HTML, XML, ฯลฯ ) ไม่ควรทำเช่นนั้น ควรแยกงานนำเสนอออกจากโครงสร้างเสมอ

<span class="footnote">Italic Text</span>น่าจะเป็นวิธีที่ดีที่สุดสำหรับเชิงอรรถ ไม่แนะนำให้นำเสนอใด ๆ และเพียงอธิบายถึงมาร์กอัป คุณไม่สามารถคาดการณ์ได้ว่าจะเกิดอะไรขึ้นในฟีเจอร์นี้ หากเชิงอรรถจะเติบโตขึ้นในคุณลักษณะนี้คุณอาจถูกบังคับให้เปลี่ยนชื่อคลาส (เพื่อเก็บตรรกะบางอย่างในรหัสของคุณ)

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

ใช้ CSS หากคุณสนใจว่าจะมีหน้าตาเป็นอย่างไรและพยายามหลีกเลี่ยงมาร์กอัปใด ๆ

ฉันคิดว่าคำตอบคือการใช้<em>เมื่อคุณตั้งใจเน้น

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

ถ้ามันเป็นสไตล์อย่างหมดจดเช่นผู้ออกแบบของคุณได้ตัดสินใจว่า<h2>ส่วนหัวทั้งหมดของคุณจะดูดีกว่าในตัวอักษรตัวเอียง Garamond แล้วไม่มีเหตุผลทางความหมายที่จะรวมไว้ใน HTML และคุณควรเปลี่ยน CSS สำหรับองค์ประกอบที่เหมาะสม

ฉันไม่เห็นเหตุผลที่จะใช้<i>เว้นแต่คุณจะต้องการสนับสนุนเบราว์เซอร์รุ่นเก่าที่ไม่มี CSS

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

หากคุณเน้นข้อความด้วยเหตุผลใดก็ตามคุณสามารถใช้<em>หรือคลาสที่ทำให้ข้อความของคุณเป็นตัวเอียง

มันก็โอเคที่จะทำลายกฎบางครั้ง!

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

ดังนั้นตอนนี้เรามีสองวิธีที่แท้จริงของการทำสิ่งที่: และ<em> <span class="footnote">โปรดจำไว้ว่าemหมายถึงความสำคัญ เมื่อคุณต้องการใช้การเน้นคำวลีหรือประโยคติดไว้ใน<em>แท็กโดยไม่คำนึงว่าคุณต้องการตัวเอียงหรือไม่ หากคุณต้องการที่จะเปลี่ยนจัดแต่งทรงผมในทางอื่น ๆ บาง CSS em { font-weight: bold; font-style: normal; }ใช้: แน่นอนคุณยังสามารถใช้คลาสกับ<em>แท็ก: ถ้าคุณตัดสินใจว่าคุณต้องการให้วลีที่เน้นสีปรากฏขึ้นเป็นสีแดงให้พวกเขามีคลาสและเพิ่มลงใน CSS:

Fancy some <em class="special">shiny</em> text?

em { font-weight: bold; font-style: normal; }
em.special { color: red; }

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

ใช้ <em> หากคุณต้องการคำ / ตัวอักษรที่เป็นตัวเอียงในเนื้อหาที่ไม่มีสไตล์อื่น นอกจากนี้ยังช่วยทำให้เนื้อหามีความหมาย

text-style เหมาะสำหรับหลากหลายสไตล์และไม่ต้องการความหมาย

ทำ

1. ให้ค่าแอตทริบิวต์ class ที่ระบุลักษณะของข้อมูล (เช่นclass="footnote"ดี)

2. สร้างสไตล์ชีต CSS สำหรับหน้า

3. กำหนดสไตล์ CSS ที่แนบมากับคลาสที่คุณกำหนดให้กับองค์ประกอบ

   .footnote { font-style:italic; }

อย่า

1. อย่าใช้<i>หรือ<em>องค์ประกอบ - พวกเขาไม่ได้รับการสนับสนุนและผูกข้อมูลและงานนำเสนอใกล้เกินไป
2. อย่าให้ค่าคลาสที่ระบุกฎการนำเสนอ (เช่นไม่ใช้class="italic")