ทำไมเราควรใช้แท็กเช่น p, span, hx tags เมื่อเราสามารถใช้ CSS แทนได้

ทำไมเราควรใช้แท็กเช่น p, span, hx tags เมื่อเราสามารถใช้ CSS แทนได้ มันสำคัญจากมุมมอง SEO หรือไม่

เวอร์ชันย่อคือแท็กและ CSS ต่างๆมีวัตถุประสงค์ที่แตกต่างกัน

<h1>Whatever</h1>ตัวอย่างเช่นมีความหมายจำนวนหนึ่งพร้อมกับการใช้งาน: "นี่คือส่วนหัวหนึ่งระดับที่สำคัญระดับแรก" และอื่น ๆ ตัวแยกวิเคราะห์บางตัวยังใช้แท็ก hx (และอื่น ๆ ) เพื่อสร้างโครงร่างของโครงสร้างของเอกสารซึ่งสามารถใช้สำหรับทุกอย่างตั้งแต่การประมวลผลข้อมูลไปจนถึงการช่วยในการเข้าถึง (เช่นตัวอ่านหน้าจอกระโดดไปที่คำถามถัดไปในหน้าแรกของเว็บมาสเตอร์ .

คุณไม่สามารถยกเลิกแท็กความหมายตามสิ่งที่คุณสามารถทำได้กับ CSS และในทางกลับกัน
คุณสามารถใช้ CSS กับแท็กอื่นเพื่อให้ดูเหมือนกับ h1 เช่น: <span style="font-weight:bold;font-size:2em">Whatever</span>แต่ก็ยังไม่ได้ทำให้แท็ก span นั้นเป็นส่วนหัวจริงในแง่ของฟังก์ชั่นและซีแมนทิกส์ ในกรณีนี้โครงร่างที่ฉันเชื่อมโยงไปด้านบนนั้นเป็นไปไม่ได้มากนักเพราะช่วงนั้นไม่ใช่ส่วนหัว แต่เป็นเพียงข้อความบางส่วนที่คุณสร้างขึ้นให้ใหญ่และหนาโดยพลการ

มาร์กอัปและการนำเสนอนั้นแตกต่างกัน

มันเหมือนกับถามว่า "ทำไมเราต้องมีกำแพงเมื่อเราทาสี?" :)

แท็ก HTML แสดงว่าเนื้อหาของคุณคืออะไรนี่คือข้อความพาดหัวนี่คือรายการ ฯลฯ

CSS แสดงว่าเนื้อหาของคุณควรมีหน้าตาเป็นอย่างไร - พาดหัวควรเป็นสีน้ำเงินรายการควรมีการเยื้องมาก ๆ เมนูควรอยู่ทางซ้ายมือ ฯลฯ

Javsascript บอกว่าหน้าเว็บของคุณควรมีพฤติกรรมอย่างไรเช่นภาพเคลื่อนไหว ฯลฯ

ดังนั้นหากไม่มีเนื้อหา HTML, CSS และ Javascript จริงๆไม่มีอะไรจะทำงาน

หมวดหมู่เหล่านี้ไม่ใช่ขาวดำ 100% - ตัวอย่างเช่น CSS สามารถระบุ "ช่วงการเปลี่ยนภาพ" ตอนนี้ซึ่งเป็นภาพเคลื่อนไหว - แต่เป็นแนวคิดพื้นฐาน

โปรดดูการอภิปรายก่อนหน้านี้เกี่ยวกับหัวข้อนี้ใน StackOverflow ที่นี่และที่นี่

มาร์คอัปที่ดีจะช่วยประหยัดความพยายามและทำงานได้ดีขึ้น

หากคุณต้องการให้บางสิ่งบางอย่างทำงานเหมือนลิงก์คุณสามารถใช้<span class="mylink">และใช้ CSS และ JS เป็นจำนวนมากเพื่อทำให้มันดูและรู้สึกถูกต้อง หรือคุณสามารถใช้<a>องค์ประกอบและรับสิ่งเหล่านั้นได้ฟรีโดยไม่ต้องมีรหัสเพิ่มเติมให้ดาวน์โหลดเพราะเบราว์เซอร์รู้อยู่แล้วว่าจะต้องทำอะไรและมีการนำตรรกะมาใช้ในโค้ดที่รวดเร็วและเนทีฟ นอกจากนี้ยังมีแนวโน้มที่จะทำงานได้อย่างถูกต้องสำหรับโปรแกรมอ่านหน้าจอเบราว์เซอร์มือถือเครื่องมือค้นหาตัวรวบรวมและกรณีการใช้งานอื่น ๆ ที่คุณไม่ได้คิด

นี่คือเหตุผลที่คุณควรใช้<button>สำหรับการกระทำที่คลิกได้<label>เพื่อa ป้ายกำกับ<input>และ<main>สำหรับส่วนหลักของหน้าของคุณ

มาร์กอัปที่ดีมีผลต่อ SEO อย่างไร

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

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

และเฮ้ดูสิ! เรามีภาษาทั้งหมดนี้เรียกว่า HTML ซึ่งมีวัตถุประสงค์เพื่อติดป้ายกำกับเนื้อหาของคุณในแบบที่เครื่องสามารถเข้าใจได้! :)

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

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

โปรดคิดถึงคนที่มีความบกพร่องบางอย่างซึ่ง (เป็นตัวอย่าง) ต้องใช้เครื่องอ่านอักษรเบรลล์ ในกรณีเช่นนี้แท็ก html นั้นมีความสำคัญยิ่งกว่า visual css stylings

ซูตอบส่วนที่มีความหมาย เกี่ยวกับ SEO คุณจะพบว่าองค์ประกอบ h1 นั้นให้น้ำหนักกับเครื่องมือค้นหามากกว่าแท็กอื่น ๆ แท็ก h2 / b / strong จะได้รับน้ำหนักมากกว่าข้อความปกติเล็กน้อย

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

สำหรับ HTML5 ตรวจสอบหนาและตัวเอียงใน HTML5

สรุป:

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

ใช้<i>เพื่อชดเชยอารมณ์ของข้อความ แต่ใช้<em>เพื่อทำให้ข้อความเน้น

นอกจากนี้อย่าลืมความสำคัญของความหมายสำหรับผู้ใช้ที่มีความพิการ ซอฟต์แวร์ Screenreader ขึ้นอยู่กับความหมายเหล่านี้เพื่อนำเสนอคนตาบอดถึงบริบทที่พวกเขาขาดหายไปเนื่องจากความพิการ

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

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

<span>ในทางกลับกันส่วนใหญ่จะเป็น<div>แท็กเวอร์ชันอินไลน์และถ้ามีอะไรก็สามารถช่วยให้คุณไม่ต้องพิมพ์คลาสพิเศษใน (ด้วยการที่ถูกกล่าวว่าคุณต้องการที่จะใช้<span class="italic">แทน<i>สำหรับทุกกรณีตัวเอียง คุณมี? มันทำให้การอ่านโค้ดยากขึ้น, เป็นมาตรฐานน้อยกว่า (ภายใต้สมมติฐานกว้าง ๆ ที่ว่าคนส่วนใหญ่จะใช้อันหลังในอดีต) และไม่ปรับปรุงเอกสาร

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

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