Semantic HTML untuk SEO

TL;DR — Semantic HTML berarti menggunakan tags itu deskripsikan apa konten adalah — <article>, <nav>, <main>, <header> — alih-alih wrapping semuanya di plain <div>s. ini helps mesin pencari dan screen readers memahami Anda halaman, tetapi ini adalah tidak sebuah peringkat factor. menggunakan <article> tidak akan membuat Anda peringkat lebih tinggi. yang sama aturan applies past landmarks too: <a href> untuk tautan, <button> untuk tindakan, <table> untuk tabular data, nyata teks alt pada images. gunakan right tag untuk job dan Anda’re sebagian besar dari cara di sana.

Apa semantic HTML adalah

setiap bagian dari sebuah halaman web adalah dibangun dari HTML elements. Semantic HTML hanya berarti picking element itu matches apa konten sebenarnya adalah, alih-alih menggunakan sebuah generic wrapper untuk semuanya.

Bandingkan ini dua versi dari yang sama halaman structure:

<!-- Non-semantic: "div soup" -->
<div class="top"> ... </div>
<div class="menu"> ... </div>
<div class="content"> ... </div>
<div class="sidebar"> ... </div>
<div class="bottom"> ... </div>

<!-- Semantic: the tags describe the roles -->
<header> ... </header>
<nav> ... </nav>
<main> ... </main>
<aside> ... </aside>
<footer> ... </footer>

Keduanya dapat look identical pada screen — CSS menangani styling. perbedaan adalah itu kedua versi tells sebuah machine (sebuah mesin pencari, sebuah screen reader, sebuah AI crawler) yang bagian adalah navigation, yang adalah main konten, dan yang adalah sebuah sidebar. pertama versi membuat everyone guess.

elements Anda’ll sebenarnya gunakan

• <header> — introductory konten di top dari halaman (atau top dari sebuah bagian).
• <nav> — sebuah block dari navigation tautan.
• <main> — utama, unique konten dari halaman. Satu per halaman.
• <article> — sebuah self-berisi piece itu dapat stand pada -nya own (sebuah blog post, sebuah product card, sebuah comment).
• <section> — sebuah thematic grouping dari konten itu memiliki -nya own heading.
• <aside> — konten itu’s tangential untuk main konten (sebuah sidebar, sebuah callout).
• <footer> — closing konten (copyright, sekunder tautan).

yang sama “gunakan itu right tag” (terjemahan) “gunakan right tag” idea applies di bawah halaman-layout tingkat too: <a href> untuk tautan, <button> untuk pada-halaman tindakan, <table> untuk sebenarnya tabular data, dan purpose-based alt text pada images. Fake tautan dibangun dari styled <div>s adalah single sebagian besar umum accessibility miss — see Advanced tab untuk penuh list.

hal sebagian besar orang mendapatkan wrong

Wrapping Anda konten di <article> melakukan tidak boost Anda rankings. Google’s John Mueller memiliki mengatakan <article> element memiliki “no particular effect” (terjemahan) “Tidak particular effect” di Google Penelusuran, dan itu semantic HTML adalah “tidak a magical multiplier.” (terjemahan) “tidak sebuah magical multiplier.” Semantic HTML helps mesin pencari memahami Anda halaman — ini hanya tidak sebuah lever Anda pull untuk peringkat lebih tinggi.

nilai adalah nyata, ini adalah hanya tidak “ranking points.” (terjemahan) “peringkat poin.” Bersih semantic markup membuat ini easier untuk mesin pencari untuk tell Anda main konten apart dari boilerplate (menus, footers, ads), ini membuat Anda halaman berfungsi properly untuk orang menggunakan screen readers, dan ini adalah easier untuk AI alat untuk baca. itu adalah semua baik alasan untuk melakukan ini — none dari them adalah “ini a ranking factor.” (terjemahan) “ini adalah sebuah peringkat factor.”

Satu lebih trap: Semantic HTML adalah tidak yang sama sebagai “Semantic SEO.” (terjemahan) “Semantic SEO.” Semantic HTML adalah tentang markup structure. Semantic SEO adalah tentang topics dan entities di Anda konten. sama kata, totally berbeda hal.

ingin penuh picture — apa setiap element sinyal, apa Google dan Bing sebenarnya say, bagaimana ini fits main-konten extraction, dan sebuah retrofit checklist? Switch untuk Advanced tab.

TL;DR — Semantic HTML menggunakan elements untuk mereka yang dimaksud structural meaning (<main>, <article>, <section>, <nav>, <header>, <aside>) so markup communicates apa konten adalah, tidak bagaimana ini looks. ini adalah tidak sebuah peringkat factor — Mueller: “tidak a magical multiplier,” (terjemahan) “tidak sebuah magical multiplier,” dan <article> memiliki “Tidak particular effect.” (terjemahan) “Tidak particular effect.” Apa ini melakukan adalah reduce ambiguity: Google’s centerpiece annotation separates main konten dari boilerplate melalui NLP apakah atau tidak Anda markup adalah semantic, tetapi bersih semantics membuat itu job lebih reliable. Bing’s Fabrice Canel frames ini lebih strongly (“an advantage di SEO” (terjemahan) “sebuah advantage di SEO”) — I note itu kesenjangan honestly alih-alih harmonizing ini away. Google’s own Starter Guide says sebagian besar dari web tidak valid HTML, so ini rarely bergantung pada spec semantics. Correct usage beats presence: satu <main>, <article> untuk self-berisi konten, <section> untuk sebuah themed group dengan sebuah heading — tidak sebuah <div> substitute. yang sama test extends untuk <a href> vs. <button> (navigate vs. act), nyata <table>s untuk tabular data, purpose-based image teks alt, dan <details>/<summary> untuk disclosure widgets — dan jangan rely pada <section> nesting untuk imply sebuah heading tingkat; itu “document outline algorithm” (terjemahan) “document outline algorithm” adalah tidak pernah implemented dan spec Tidak lebih lama defines outlines itu cara. jangan confuse semantic HTML dengan Semantic SEO.

Apa semantic HTML sebenarnya adalah

Semantic HTML adalah practice dari choosing HTML elements untuk structural meaning mereka adalah designed untuk convey, alih-alih reaching untuk <div> dan <span> untuk semuanya. <article>, <section>, <nav>, <header>, <main>, <aside>, dan <footer> setiap declare sebuah role. markup mendeskripsikan apa sebuah chunk dari halaman adalah; CSS decides bagaimana ini looks. Google’s own developer style guide puts aturan sebagai sekadar sebagai ini mendapatkan: “Use HTML elements for the purposes that they were designed for.” (terjemahan) “gunakan HTML elements untuk purposes itu mereka adalah designed untuk.”

Satu hal itu trips orang up: sebuah class name tidak buat semantics. Naming sebuah <div> class="article" atau class="main-nav" tidak memberikan ini <article> element’s konten model atau <nav> element’s implicit navigation role — ini adalah masih sebuah generic <div> sebagai far sebagai sebuah browser, screen reader, atau crawler adalah concerned. Semantics langsung di element Anda choose, tidak di bagaimana Anda style atau label ini.

ini artikel adalah tentang semantic elements secara khusus. lebih luas “bagaimana Google parses Anda HTML, heading hierarchy, validity” (terjemahan) “bagaimana Google parses Anda HTML, heading hierarchy, validity” picture belongs untuk HTML SEO hub ini halaman sits di bawah — I’ll cross-reference ini alih-alih re-litigate ini di sini.

melakukan semantic HTML sebenarnya help SEO?

pendek jawaban: ini helps understanding, ini tidak sebuah peringkat factor, dan dua mesin frame ini sebuah little differently. Di sini’s honest versi.

Apa Google says

Google’s line, repeated oleh John Mueller, adalah itu semantic HTML adalah worth melakukan tetapi tidak sebuah peringkat lever. sebagai mesin pencari Journal reported, Mueller mengatakan “Semantic HTML melakukan help untuk understand a halaman. Namun, ini tidak a magical multiplier untuk membuat a website rank lebih tinggi,” (terjemahan) “Semantic HTML melakukan help untuk memahami sebuah halaman. Namun, ini adalah tidak sebuah magical multiplier untuk membuat sebuah situs web peringkat lebih tinggi,” dan secara terpisah: “Please gunakan semantic HTML. ini tidak a ranking factor, tetapi it dapat help our sistem untuk understand Anda konten better.” (terjemahan) “Please gunakan semantic HTML. ini adalah tidak sebuah peringkat factor, tetapi ini dapat help kami sistem untuk memahami Anda konten better.”

pada <article> element secara khusus — satu everyone menanyakan tentang — Mueller adalah blunt di sebuah Office Hours session: <article> element “melakukan tidak memiliki any particular effect di Google Search,” (terjemahan) “melakukan tidak memiliki apa pun particular effect di Google Search,” dan he ditambahkan alasan untuk gunakan ini anyway: “Sometimes di sana adalah accessibility atau semantic reasons untuk gunakan a specific kind dari markup, so jangan hanya focus pada SEO.” (terjemahan) “Sometimes ada accessibility atau semantic alasan untuk gunakan spesifik jenis dari markup, so jangan hanya focus pada SEO.”

«Google also explicitly says it doesn’t depend on perfect semantics. Its SEO Starter Guide notes that “Having your headings in semantic order is fantastic for screen readers, but from Google Search perspective, it doesn’t matter if you’re using them out of order. The web in general is not valid HTML, so Google Search can rarely depend on semantic meanings hidden in the HTML specification.” That’s an important nuance, not a contradiction: semantic HTML helps at the margins, it doesn’t require perfection, and it isn’t a scored signal. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tiga puluh dua, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Bagaimana ini fits Google finding Anda main konten

Di sini’s mechanism itu membuat semantic HTML berguna bahkan though ini tidak sebuah peringkat factor. Google memiliki untuk terpisah main konten dari sebuah halaman dari boilerplate (nav, header, footer, sidebars, ads) sebelum ini dapat decide apa sebuah halaman adalah tentang. Martin Splitt memiliki described machinery: “We memiliki a hal called itu Centerpiece Annotation, untuk instance, dan ada beberapa other annotations itu we memiliki di mana we look di itu semantic konten.” (terjemahan) “kami memiliki sebuah hal called Centerpiece Annotation, misalnya, dan ada sebuah sedikit lainnya annotations itu kami memiliki di mana kami lihat semantic konten.” cara Google figures out topic adalah natural language processing di atas konten, tidak tag names: “Ini looks like dari all itu natural language processing itu we melakukan pada ini entire text konten di sini itu we mendapat, it looks like ini adalah primarily tentang topic A, dog food.” (terjemahan) “ini looks like dari semua natural language processing itu kami melakukan pada ini entire text konten di sini itu kami mendapat, ini looks like ini adalah primarily tentang topic sebuah, dog food.” dan ini down-weights rest: “We figure out apa looks like boilerplate dan lalu, itu mendapatkan weighted differently juga.” (terjemahan) “kami figure out apa looks like boilerplate dan lalu, itu mendapatkan weighted differently sebagai well.”

key poin: itu extraction berfungsi apakah atau tidak Anda markup adalah semantic. Google dapat untangle sebuah halaman dibangun entirely dari <div>s. tetapi ditanyakan secara langsung apakah semantic HTML5 helps, Splitt’s jawaban adalah “It melakukan help us, tetapi ini tidak itu hanya hal itu we look untuk. Ya.” (terjemahan) “ini melakukan help us, tetapi ini adalah tidak satu-satunya hal itu kami cari. Ya.” So semantic HTML tidak score Anda lebih tinggi — ini reduces guesswork di sebuah langkah Google sudah melakukan, yang adalah persis mengapa ini adalah sebuah confidence dan efficiency sinyal rather daripada sebuah peringkat satu. untuk menjadi precise tentang apa ini tidak melakukan: correct semantic markup melakukan tidak jaminan apa pun spesifik penelusuran presentation either — ini adalah sebuah terpisah layer dari eligibility aturan itu govern rich hasil (lebih pada itu di bawah).

Apa Bing says (dan mengapa ini differs)

«Bing frames this more strongly than Google, and I’m going to leave that difference intact rather than paper over it. Microsoft’s Fabrice Canel has said that pages with correctly implemented semantic HTML5 have “an advantage in SEO” over those that don’t. That’s a stronger claim than Google’s “helps us understand” — Bing ties semantic HTML5 directly to an SEO advantage. Both engines converge on “it helps mechanically,” but they don’t use the same words, and you should know that when you read competing guidance. Neither, to be clear, describes it as a scored ranking factor the way links or relevance are. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tiga puluh tujuh, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

core semantic elements dan cara gunakan them correctly

Presence tidak poin — correct usage adalah. paling umum failure mode adalah sprinkling semantic tags sekitar like decoration, atau swapping <div> untuk <section> dengan Tidak thought tentang apa setiap element berarti.

<header> dan <footer>

<header> holds introductory konten dan <footer> holds closing konten — dan keduanya adalah contextual. di document tingkat, <header> adalah Anda situs banner dan <footer> adalah Anda situs footer. tetapi mereka dapat juga nest di dalam sebuah <article> atau <section> untuk mark itu block’s own intro dan outro (sebuah artikel’s judul/byline di sebuah <header>, -nya tags di sebuah <footer>). Anda dapat memiliki banyak dari them; hanya pastikan setiap satu wraps intro atau closing konten untuk -nya context, tidak arbitrary boxes.

<nav>

<nav> adalah untuk major blocks dari navigation tautan — Anda utama menu, breadcrumb trail, atau di-halaman table dari contents. ini adalah tidak untuk setiap group dari tautan pada halaman (sebuah list dari related posts di body tidak perlu untuk menjadi sebuah <nav>). Wrapping setiap tautan cluster di <nav> dilutes sinyal; reserve ini untuk genuine navigation.

<main>

<main> wraps halaman’s utama, unique konten — bagian itu tidak repeated di seluruh situs. aturan itu trips orang up: di sana seharusnya menjadi persis satu <main> per halaman, dan ini seharusnya tidak menjadi nested di dalam <article>, <aside>, <header>, <footer>, atau <nav>. ini adalah single clearest sinyal Anda dapat memberikan tentang “ini adalah itu konten itu matters di sini.” (terjemahan) “ini adalah konten itu penting di sini.”

<article> vs <section> ( satu everyone mendapatkan wrong)

ini adalah pembedaan untuk mendapatkan right:

• <article> adalah untuk self-berisi, independently distributable konten — sesuatu itu akan masih membuat sense pulled out dari halaman dan dropped ke sebuah feed. sebuah blog post, sebuah news story, sebuah product card, sebuah forum post, sebuah single pengguna comment. jika ini dapat syndicate pada -nya own, ini adalah sebuah <article>.
• <section> adalah sebuah thematic grouping dari konten itu seharusnya memiliki -nya own heading. sebuah “Reviews” (terjemahan) “Reviews” block, sebuah “Specifications” (terjemahan) “Specifications” block, sebuah chapter. test: jika konten tidak membuat sense dengan sebuah heading, ini adalah probably tidak sebuah <section> — dan jika Anda’re hanya menggunakan ini untuk hang beberapa CSS pada, ini seharusnya menjadi sebuah <div>.

<section> adalah tidak sebuah generic wrapper. Ketika Anda perlu sebuah styling hook dengan Tidak semantic meaning, gunakan <div> — itu’s persis apa ini adalah untuk. Reaching untuk <section> karena ini “feels more modern” (terjemahan) “feels lebih modern” adalah single sebagian besar umum misuse.

<aside>

<aside> marks konten itu’s tangential untuk sekitarnya konten — sebuah sidebar, sebuah pull quote, sebuah related-tautan box, sebuah set dari ads. ini sinyal “this is related but not the main thread,” (terjemahan) “ini adalah related tetapi tidak main utas,” yang adalah precisely boilerplate-vs-main-konten pembedaan Google adalah trying untuk draw anyway. jangan gunakan ini hanya karena sesuatu sits visually untuk side; gunakan ini ketika konten adalah genuinely sekunder.

Getting landmark peran right (dan outline myth)

setiap landmark element maps untuk sebuah spesifik implicit ARIA role itu assistive tech membaca secara langsung — ini adalah yang sama computed structure sebuah non-visual pengguna navigates oleh, dan ini adalah worth knowing sebenarnya mapping alih-alih assuming:

Satu piece dari folklore worth retiring: nesting sebuah <section> melakukan tidak memberikan -nya heading sebuah implicit lebih rendah peringkat. Early HTML5 didefinisikan sebuah document outline algorithm itu akan memiliki computed sebuah heading’s effective tingkat dari bagaimana deeply ini adalah nested di dalam sectioning elements — so sebuah nested <h1> dapat theoretically “act like” (terjemahan) “act like” sebuah <h2>. Tidak browser atau screen reader ever implemented itu algorithm, dan WHATWG spec memiliki since dropped ini di favor dari sebuah banyak simpler definition: outline adalah hanya semua heading di document, di tree order. Tulis Anda <h1>–<h6> tingkat explicitly dan di order Anda sebenarnya ingin baca — nesting depth tidak melakukan itu berfungsi untuk Anda.

tautan vs. buttons — tindakan-versus-navigation test

ini satu tidak sebuah landmark element, tetapi ini adalah paling umum semantic mistake pada web: menggunakan sebuah styled <div> atau <span> (atau sebuah <button>) di mana sebuah <a href> belongs, atau vice versa. WHATWG spec adalah spesifik — <a> dengan sebuah href attribute adalah native hyperlink mechanism, dan <button> element adalah sebuah labeled interactive control untuk triggering sebuah tindakan. test adalah sederhana: melakukan ini take pengguna untuk sesuatu (sebuah baru URL, sebuah baru halaman, sebuah fragment)? gunakan <a href>. melakukan ini melakukan sesuatu pada saat ini halaman (submit sebuah form, open sebuah modal, toggle sebuah setting)? gunakan <button>. Styling satu untuk look like lainnya tidak perubahan apa ini natively adalah — sebuah <div> dengan sebuah click handler mendapatkan neither native keyboard activation nor correct accessible role unless Anda rebuild semua dari itu yourself dengan role, tabindex, dan key handlers. hanya gunakan right element.

Tables adalah untuk tabular data, tidak layout

jika konten genuinely memiliki rows dan columns — sebuah perbandingan table, sebuah pricing grid, sebuah data set — gunakan sebenarnya <table>, tidak sebuah grid dari styled <div>s. WHATWG tables spec defines sebuah nyata data model: <caption> names table, dan <th> header cells (dengan scope) establish baris/column relationships itu let assistive tech announce “price, $49” (terjemahan) “price, 49 USD” alih-alih hanya sebuah wall dari angka. sebuah visually table-like grid dibangun dari <div>s tidak carry apa pun dari itu hubungan data — ini looks right, ini tidak baca right. jangan gunakan <table> untuk halaman layout, either; itu’s older misuse ini practice replaced.

teks alt bergantung pada apa image adalah untuk

<img> perlu sebuah alt attribute, tetapi WHATWG spec’s requirements adalah purpose-dependent, tidak satu-size-fits-semua: sebuah product photo perlu sebuah deskripsi dari apa ditampilkan; sebuah image itu’s purely decorative seharusnya mendapatkan alt="" (empty, tidak missing) so assistive tech skips ini alih-alih announcing sebuah filename; sebuah image itu’s juga sebuah tautan perlu teks alt describing tautan’s destination atau tindakan, tidak hanya picture. jangan default untuk keyword-stuffed teks alt pada setiap image “untuk SEO” (terjemahan) “untuk SEO” — itu’s wrong test. right test adalah: apa melakukan sebuah screen reader pengguna perlu untuk know itu mereka’d jika tidak miss?

Native disclosure widgets: <details> dan <summary>

untuk “click untuk expand” (terjemahan) “click untuk expand” konten — FAQs, spec sheets, spoiler text — <details>/<summary> pair adalah sebuah native disclosure widget: <summary> adalah selalu-terlihat label, dan konten di dalam <details> menampilkan atau hides berdasarkan element’s open state, tanpa apa pun JavaScript. ini muncul dengan dibangun-di keyboard mendukung dan right accessible semantics untuk free — reaching untuk sebuah custom <div>-plus-JavaScript accordion berarti re-implementing perilaku browser sudah memberikan Anda. Test ini di Anda sebenarnya target browser dan screen readers sebelum shipping, though — rendering dan accessibility-tree exposure untuk <details>/<summary> memiliki secara historis varied oleh browser dan assistive-tech combination, so jangan assume parity Anda haven’t diperiksa.

umum myths tentang semantic HTML dan SEO

1. “Wrapping konten di <article> boosts rankings.” (terjemahan) “Wrapping konten di tidak terdefinisi boosts rankings.” Tidak — Mueller: <article> element “melakukan tidak memiliki any particular effect di Google Search.” (terjemahan) “melakukan tidak memiliki apa pun particular effect di Google Search.”
2. “Semantic HTML adalah a ranking factor.” (terjemahan) “Semantic HTML adalah sebuah peringkat factor.” Tidak — “not a magical multiplier” (terjemahan) “tidak sebuah magical multiplier” dan “It’s not a ranking factor, but it can help our systems to understand your content better.” (terjemahan) “ini adalah tidak sebuah peringkat factor, tetapi ini dapat help kami sistem untuk memahami Anda konten better.”
3. “Google requires valid/strict semantic HTML.” (terjemahan) “Google memerlukan valid/strict semantic HTML.” Tidak — per Starter Guide, sebagian besar dari web tidak valid HTML dan Google “can rarely depend on semantic meanings hidden in the HTML specification.” (terjemahan) “dapat rarely bergantung pada semantic meanings hidden di HTML specification.”
4. “Heading order has to be perfect for SEO.” (terjemahan) “heading order memiliki untuk menjadi perfect untuk SEO.” Screen readers care; Google peringkat tidak (sama Starter Guide line). deeper heading-hierarchy treatment belongs untuk HTML SEO hub — ini adalah hanya brief versi.
5. “Semantic HTML and Semantic SEO are the same thing.” (terjemahan) “Semantic HTML dan Semantic SEO adalah yang sama hal.” Tidak — satu adalah markup structure, lainnya adalah topical/entity konten strategy. Conflating them adalah mengapa so banyak penelusuran hasil untuk “semantic” (terjemahan) “semantic” kueri adalah tentang wrong topic.
6. “Structured data membuat semantic HTML unnecessary.” (terjemahan) “data terstruktur membuat semantic HTML unnecessary.” Tidak — mereka’re complementary. Semantic HTML memberikan Anda data terstruktur sebuah lebih trustworthy foundation; ini tidak replace ini, dan JSON-LD tidak perbaiki div soup. dan neither satu jaminan sebuah outcome: Google’s own structured-data intro adalah jelas itu menggunakan didukung markup tidak jaminan sebuah rich hasil — eligibility untuk sebuah spesifik penelusuran fitur adalah sebuah terpisah set dari aturan dari apakah Anda markup (semantic HTML atau JSON-LD) adalah technically valid.
7. “Nesting a <section> memberikan its headings an implicit lebih rendah rank — Anda jangan perlu untuk drop dari <h1> untuk <h2> di dalam a nested section.” (terjemahan) “Nesting sebuah tidak terdefinisi memberikan -nya heading sebuah implicit lebih rendah peringkat — Anda tidak perlu untuk drop dari tidak terdefinisi untuk tidak terdefinisi di dalam sebuah nested bagian.” Tidak — ini adalah sebuah leftover dari HTML5’s old document outline algorithm, yang akan memiliki computed sebuah implicit heading peringkat dari sectioning-element nesting. Tidak browser atau screen reader ever implemented ini, dan WHATWG HTML spec Tidak lebih lama defines outline computation itu cara — outline hari ini adalah hanya “all headings di itu document, di tree order.” (terjemahan) “semua heading di document, di tree order.” gunakan jelas, correctly-ordered <h1>–<h6> regardless dari bagaimana deep Anda <section>/<article> nesting goes; jangan rely pada nesting untuk melakukan heading-tingkat berfungsi untuk Anda.

Semantic HTML vs. Semantic SEO — jangan confuse them

Karena mereka share sebuah kata, ini mendapatkan mixed up constantly, dan ini pollutes penelusuran hasil untuk keduanya:

• Semantic HTML = markup — yang elements Anda gunakan untuk structure sebuah halaman.
• Semantic SEO = sebuah konten strategy — membangun topical authority sekitar entities dan related concepts ( jenis dari hal itu lives di bawah AI Penelusuran dan konten pillars, tidak di sini).

jika Anda landed di sini dari sebuah “semantic SEO” (terjemahan) “semantic SEO” kueri expecting topic modeling, itu’s sebuah berbeda artikel. ini satu adalah strictly tentang elements.

Semantic HTML dan AI/LLM crawler

ini adalah di mana semantic HTML adalah diam-diam getting lebih relevant, dan I’ll flag ini sebagai industry opinion alih-alih sebuah mesin statement. banyak LLM crawler dan AI jawaban mesin jangan render JavaScript — mereka parse HTML mereka’re disajikan. Bersih semantic markup adalah far easier untuk them untuk berfungsi dengan daripada deeply nested <div> soup. sebagai Barry Adams puts ini, “ini banyak simpler untuk ChatGPT untuk parse beberapa dozen semantic HTML tags rather daripada several hundred (atau even thousand) nested <div> tags,” (terjemahan) “ini adalah banyak simpler untuk ChatGPT untuk parse sebuah sedikit dozen semantic HTML tags alih-alih several hundred (atau bahkan thousand) nested tidak terdefinisi tags,” dan lebih broadly, “Semantic HTML markup pada Anda webpages dapat help machine sistem better understand Anda konten dan its value.” (terjemahan) “Semantic HTML markup pada Anda webpages dapat help machine sistem better memahami Anda konten dan -nya nilai.” Jono Alderson membuat yang sama forward-looking case — itu sebuah situs adalah “an interface. An API. A dataset,” (terjemahan) “sebuah interface. sebuah API. sebuah dataset,” tidak hanya sebuah visual experience — dan his satu-liner adalah seluruh argument untuk correct usage: “Jika semuanya adalah a <div> atau a <span>, lalu tidak ada apa pun adalah bermakna.” (terjemahan) “jika semuanya adalah sebuah tidak terdefinisi atau sebuah tidak terdefinisi, lalu tidak ada apa pun adalah bermakna.” Treat semua dari ini sebagai sebuah baik directional alasan untuk pertahankan markup bersih, tidak sebagai sebuah promise dari Google atau Bing.

cara audit dan retrofit existing halaman

sebagian besar nyata situs adalah sudah div soup, dan Anda tidak rebuild them overnight. sebuah pragmatis retrofit order:

• Establish landmarks pertama. pastikan ada persis satu <main>, sebuah document <header>, <footer>, dan sebuah <nav> untuk utama menu. ini landmark elements melakukan paling berfungsi untuk keduanya main-konten extraction dan accessibility.
• Convert self-berisi blocks untuk <article>. Blog posts, product cards, comments — apa pun itu dapat stand alone di sebuah feed.
• Convert genuine themed groups untuk <section> — tetapi hanya di mana ada sebuah nyata heading. jika di sana tidak satu, leave ini sebuah <div>.
• Move sidebars dan related-konten boxes ke <aside>.
• Perbaiki fake tautan dan fake buttons. sebuah styled <div> dengan sebuah click handler seharusnya become sebuah <a href> (jika ini navigates) atau sebuah <button> (jika ini acts pada halaman) — ini adalah biasanya highest-nilai single perbaiki untuk keyboard dan screen reader pengguna.
• Convert table-like grids dari <div>s untuk nyata <table>s di mana konten adalah genuinely tabular, dengan <caption> dan <th> untuk header cells.
• jangan di atas-convert. sebuah <div> digunakan purely sebagai sebuah styling/layout hook adalah correct. Tidak semuanya perlu sebuah semantic element; forcing satu adalah -nya own mistake.
• Verify, jangan assume. periksa accessibility tree di Anda browser’s DevTools — ini exposes landmark peran Anda markup produces, yang adalah yang sama structure machines baca.

Bagaimana ini fits ke HTML SEO hub

ini artikel adalah satu deep dive di bawah parent HTML SEO hub, yang covers wider pertanyaan dari bagaimana mesin pencari parse dan gunakan Anda HTML — heading hierarchy, HTML validity, dan bagaimana forgiving parsers tangani messy markup. I’ve dengan sengaja dipertahankan ini halaman scoped untuk semantic elements themselves dan left itu topics untuk hub dan -nya sibling artikel. Semantic HTML juga pairs secara langsung dengan data terstruktur: markup memberikan Anda schema sebuah trustworthy foundation, dan dua melakukan complementary jobs.

FAQs

melakukan semantic HTML help SEO atau adalah ini hanya untuk accessibility? Keduanya — ini helps penelusuran mesin identify Anda main konten dan ini adalah essential untuk accessibility. tetapi ini adalah tidak sebuah peringkat factor.

melakukan menggunakan <article> tag meningkatkan rankings? Tidak. Mueller: ini “melakukan tidak memiliki any particular effect di Google Search.” (terjemahan) “melakukan tidak memiliki apa pun particular effect di Google Search.”

apa perbedaan antara <article> dan <section>? <article> adalah self-berisi konten itu dapat stand alone di sebuah feed; <section> adalah sebuah themed grouping dengan -nya own heading. Neither adalah sebuah <div> replacement.

dapat I memiliki lebih daripada satu <main> element pada sebuah halaman? Tidak — satu <main> per halaman.

melakukan Google memerlukan valid HTML untuk peringkat sebuah halaman? Tidak — sebagian besar dari web tidak valid HTML, dan Google “can rarely depend on semantic meanings hidden in the HTML specification.” (terjemahan) “dapat rarely bergantung pada semantic meanings hidden di HTML specification.”

adalah semantic HTML yang sama sebagai semantic SEO? Tidak — satu adalah markup, lainnya adalah topical/entity konten strategy.

seharusnya I gunakan <a> atau <button> untuk sebuah clickable element? Bergantung apa ini melakukan. jika ini navigates untuk sebuah URL atau fragment, gunakan <a href>. jika ini performs sebuah tindakan pada saat ini halaman (submit, toggle, open sebuah modal), gunakan <button>. jangan fake satu dengan sebuah styled <div> dan sebuah click handler.

melakukan nesting <section> perubahan apa heading tingkat I seharusnya gunakan? Tidak. HTML5’s old document outline algorithm — yang akan memiliki computed sebuah implicit heading peringkat dari sectioning nesting — adalah tidak pernah implemented oleh apa pun browser atau screen reader, dan saat ini spec tidak define outlines itu cara. gunakan jelas, correctly-ordered <h1>–<h6> regardless dari nesting depth.

melakukan correct semantic HTML atau data terstruktur jaminan sebuah rich hasil? Tidak. Google’s own structured-data documentation says didukung markup tidak jaminan sebuah spesifik penelusuran presentation — eligibility untuk sebuah fitur adalah terpisah dari apakah Anda markup adalah technically valid.

AI summary

sebuah condensed take pada Advanced versi:

• Semantic HTML = menggunakan elements untuk mereka yang dimaksud meaning (<main>, <article>, <section>, <nav>, <header>, <aside>, <footer>) so markup says apa konten adalah. CSS menangani looks.
• Tidak sebuah peringkat factor. Mueller: “not a magical multiplier” (terjemahan) “tidak sebuah magical multiplier”; <article> element memiliki “no particular effect” (terjemahan) “Tidak particular effect” di Google Search. gunakan ini untuk accessibility/clarity, tidak peringkat poin.
• ini helps main-konten extraction. Google’s centerpiece annotation separates main konten dari boilerplate melalui NLP regardless dari markup (Splitt), so ini berfungsi pada div soup too — tetapi semantic markup reduces guesswork. Splitt: “It melakukan help us, tetapi ini tidak itu hanya hal itu we look untuk.” (terjemahan) “ini melakukan help us, tetapi ini adalah tidak satu-satunya hal itu kami cari.”
• Google tidak memerlukan valid HTML. Starter Guide: sebagian besar dari web tidak valid, so Google “can rarely depend on semantic meanings hidden in the HTML specification.” (terjemahan) “dapat rarely bergantung pada semantic meanings hidden di HTML specification.”
• Bing frames ini lebih strongly. Fabrice Canel: semantic HTML5 memberikan “an advantage di SEO.” (terjemahan) “sebuah advantage di SEO.” Note kesenjangan honestly — Bing’s wording adalah stronger daripada Google’s; neither panggilan ini sebuah scored peringkat factor.
• Correct usage beats presence: satu <main>; <article> = self-berisi; <section> = themed group dengan sebuah heading, tidak sebuah <div> substitute; <nav> = major navigation hanya; <aside> = tangential konten.
• Landmark elements map untuk spesifik implicit ARIA peran (<header>→banner, <nav>→navigation, <main>→main, <aside>→complementary, <footer>→contentinfo — hanya di document tingkat; nested di dalam sebuah bagian mereka’re tidak landmarks). <section> adalah hanya sebuah landmark (region) jika ini memiliki sebuah accessible name; <article> tidak sebuah landmark di semua.
• ** document outline algorithm myth:** nesting sebuah <section> melakukan tidak memberikan -nya heading sebuah implicit lebih rendah peringkat. itu algorithm adalah tidak pernah implemented oleh apa pun browser atau screen reader dan WHATWG spec Tidak lebih lama defines outlines itu cara — tulis jelas <h1>–<h6> tingkat.
• Beyond landmarks: gunakan <a href> untuk navigation vs. <button> untuk pada-halaman tindakan; nyata <table>s (dengan <caption>/<th>) untuk tabular data, tidak <div> grids; purpose-based alt text pada images (alt="" untuk decorative); <details>/<summary> untuk native disclosure widgets — test browser/di rendering sebelum shipping.
• AI/LLM angle (industry opinion): LLM crawler sering jangan render JS, so bersih semantic HTML adalah easier untuk parse daripada nested <div>s (Adams, Alderson).
• jangan confuse ini dengan Semantic SEO (entity/topic strategy) — sama kata, berbeda hal. data terstruktur complements semantic HTML, ini tidak replace ini, dan neither jaminan sebuah rich hasil atau sebuah peringkat gain.

Dokumentasi resmi

Utama-sumber documentation dan style guidance dari mesin pencari dan standards bodies.

Google

• SEO Starter Guide — “things you shouldn’t focus on” (terjemahan) “hal Anda tidak seharusnya focus pada” bagian, including heading-order / semantic-meanings caveat.
• Google Developer Documentation Style Guide — HTML dan semantic tagging — “Use HTML elements for the purposes that they were designed for.” (terjemahan) “gunakan HTML elements untuk purposes itu mereka adalah designed untuk.”
• web.dev — Learn HTML: Semantic HTML — Google’s own learning module pada landmark elements dan mereka accessibility peran.

Standards / reference

• MDN — Semantics (glossary) — canonical definition dari semantic elements vs. non-semantic wrappers.
• WHATWG HTML Living Standard — bagian — <article>, <section>, <nav>, <aside>, <header>, <footer> definitions, konten models, dan saat ini (non-algorithmic) definition dari sebuah document’s outline.
• WHATWG HTML Living Standard — tautan — <a> element dan hyperlink semantics.
• WHATWG HTML Living Standard — button element — native interactive-control semantics.
• WHATWG HTML Living Standard — Tabular data — <table>, <caption>, header-cell dan data-hubungan semantics.
• WHATWG HTML Living Standard — Images — <img> alternative-text requirements oleh purpose/context.
• WHATWG HTML Living Standard — detail dan summary elements — native disclosure widget.
• MDN — ARIA peran reference — implicit landmark role mappings untuk sectioning elements.
• W3C WAI — halaman Structure Tutorial — bagaimana native regions dan heading mendukung assistive-technology navigation.

Bing / Microsoft

• Kalicube — HTML5 Semantic Tags (Fabrice Canel) — sumber untuk Canel’s “advantage in SEO” (terjemahan) “advantage di SEO” position pada semantic HTML5.

Quotes dari sumber

pada—record statements dari Google dan Bing. Di mana sumber halaman mendukung ini, setiap tautan adalah sebuah deep tautan itu jumps untuk quoted passage.

Google — tidak sebuah peringkat factor (John Mueller)

• “Semantic HTML does help to understand a page. However, it’s not a magical multiplier for making a website rank higher.” (terjemahan) “Semantic HTML melakukan help untuk memahami sebuah halaman. Namun, ini adalah tidak sebuah magical multiplier untuk membuat sebuah situs web peringkat lebih tinggi.” — John Mueller, Google, melalui mesin pencari Journal. Baca coverage
• “Please use semantic HTML. It’s not a ranking factor, but it can help our systems to understand your content better.” (terjemahan) “Please gunakan semantic HTML. ini adalah tidak sebuah peringkat factor, tetapi ini dapat help kami sistem untuk memahami Anda konten better.” — John Mueller, Google, sama sumber. Baca coverage

Google — <article> element secara khusus (John Mueller)

• “Itu <article> HTML element melakukan tidak memiliki any particular effect di Google Search.” (terjemahan) “ tidak terdefinisi HTML element melakukan tidak memiliki apa pun particular effect di Google Search.” — John Mueller, Google SEO Office Hours, melalui mesin pencari Journal. Baca coverage
• “Sometimes there are accessibility or semantic reasons to use a specific kind of markup, so don’t only focus on SEO.” (terjemahan) “Sometimes ada accessibility atau semantic alasan untuk gunakan spesifik jenis dari markup, so jangan hanya focus pada SEO.” — John Mueller, Google SEO Office Hours, sama sumber. Baca coverage

Google — main-konten extraction (Martin Splitt)

• “We have a thing called the Centerpiece Annotation, for instance, and there’s a few other annotations that we have where we look at the semantic content.” (terjemahan) “kami memiliki sebuah hal called Centerpiece Annotation, misalnya, dan ada sebuah sedikit lainnya annotations itu kami memiliki di mana kami lihat semantic konten.” — Martin Splitt, Google, melalui mesin pencari Journal. Baca coverage
• “We figure out what looks like boilerplate and then, that gets weighted differently as well.” (terjemahan) “kami figure out apa looks like boilerplate dan lalu, itu mendapatkan weighted differently sebagai well.” — Martin Splitt, sama sumber. Baca coverage
• “It does help us, but it’s not the only thing that we look for. Yes.” (terjemahan) “ini melakukan help us, tetapi ini adalah tidak satu-satunya hal itu kami cari. Ya.” — Martin Splitt, answering secara langsung apakah semantic HTML5 helps Google. Jump untuk quote

Google — tidak bergantung pada valid/spec semantics (SEO Starter Guide)

• “Memiliki Anda headings di semantic order adalah fantastic untuk screen readers, tetapi dari Google Search perspective, it tidak matter jika Anda menggunakan them out dari order. Itu web di general adalah tidak valid HTML, so Google Search dapat rarely bergantung pada semantic meanings hidden di itu HTML specification.” (terjemahan) “Memiliki Anda heading di semantic order adalah fantastic untuk screen readers, tetapi dari Google Search perspective, ini tidak penting jika Anda’re menggunakan them out dari order. web di umum adalah tidak valid HTML, so Google Search dapat rarely bergantung pada semantic meanings hidden di HTML specification.” — Google SEO Starter Guide. Jump untuk quote

Google — gunakan elements untuk mereka purpose (Style Guide)

• “Use HTML elements for the purposes that they were designed for.” (terjemahan) “gunakan HTML elements untuk purposes itu mereka adalah designed untuk.” — Google Developer Documentation Style Guide. Baca sumber

Bing / Microsoft (Fabrice Canel)

«- Fabrice Canel of Microsoft Bing has said that pages with correctly implemented semantic HTML5 have an advantage in SEO over those that don’t — Bing’s framing is stronger than Google’s “helps understanding,” though it still isn’t described as a scored ranking factor. Paraphrased, not quoted verbatim: this is reached via a secondary citation (Kalicube), not a fetched Bing primary source — confirm the exact wording against the original before treating it as a direct quote. Read the source » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus empat belas, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Yang element melakukan ini block perlu?

artikel-vs-bagian-vs-div pertanyaan (dan rest dari landmark choices) adalah sebuah genuine branch, tidak sebuah style preference. jawaban honestly di setiap langkah — test adalah selalu “what does this content actually do,” (terjemahan) “apa melakukan ini konten sebenarnya melakukan,” tidak “what looks more modern.” (terjemahan) “apa looks lebih modern.”

Apa tidak untuk melakukan

ini adalah sebenarnya mistakes myths di atas poin di — setiap dengan mengapa ini adalah wrong dan apa untuk melakukan alih-alih.

• Wrapping konten di <article> expecting sebuah peringkat boost. Mengapa ini adalah wrong: Mueller memiliki mengatakan element “melakukan tidak memiliki any particular effect di Google Search.” (terjemahan) “melakukan tidak memiliki apa pun particular effect di Google Search.” Apa untuk melakukan alih-alih: gunakan <article> ketika konten adalah genuinely self-berisi (dapat stand alone di sebuah feed), untuk accessibility dan clarity — tidak sebagai sebuah SEO lever.

• Treating semantic HTML umumnya sebagai sebuah scored peringkat factor. Mengapa ini adalah wrong: ini adalah “not a magical multiplier” (terjemahan) “tidak sebuah magical multiplier” dan ada Tidak scored sinyal untuk chase. Apa untuk melakukan alih-alih: budget berfungsi sebagai sebuah understanding/accessibility investment dengan sebuah nyata (jika unmeasurable-sebagai-peringkat) payoff, tidak sebuah rankings project dengan sebuah yang diharapkan lift.

«- Obsessing over perfect heading order or strict validity for Google’s sake. Why it’s wrong: Google’s own Starter Guide says “the web in general is not valid HTML, so Google Search can rarely depend on semantic meanings hidden in the HTML specification.” What to do instead: fix heading order and validity for screen readers and users — that’s where it actually matters — not because Google is scoring it. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus dua puluh tujuh, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

• menggunakan <section> sebagai sebuah <div> replacement karena ini “feels more modern.” (terjemahan) “feels lebih modern.” Mengapa ini adalah wrong: <section> tanpa sebuah heading tidak sebuah themed grouping, ini adalah decoration — ini adalah single sebagian besar umum misuse dari element. Apa untuk melakukan alih-alih: jika block tidak membuat sense dengan -nya own heading, gunakan <div>.

• Confusing Semantic HTML dengan Semantic SEO. Mengapa ini adalah wrong: satu adalah markup structure, lainnya adalah topical/entity konten strategy — conflating them berarti optimizing wrong hal untuk goal Anda sebenarnya memiliki. Apa untuk melakukan alih-alih: pertahankan dua terpisah; ini artikel adalah hanya tentang elements.

• Skipping semantic HTML karena data terstruktur sudah ada. Mengapa ini adalah wrong: JSON-LD tidak perbaiki div soup, dan data terstruktur tidak sebuah substitute untuk markup structure. Apa untuk melakukan alih-alih: gunakan keduanya — data terstruktur sits pada top dari sebuah semantic foundation, ini tidak replace ini. Neither satu jaminan sebuah rich hasil, either — itu’s sebuah terpisah eligibility pertanyaan dari markup validity.

• Nesting <section> elements untuk membuat heading “act like” (terjemahan) “act like” sebuah lebih rendah tingkat. Mengapa ini adalah wrong: ini relies pada HTML5’s old document outline algorithm, yang Tidak browser atau screen reader ever implemented dan yang saat ini WHATWG spec Tidak lebih lama defines itu cara. Apa untuk melakukan alih-alih: tulis jelas, correctly-ordered <h1>–<h6> tingkat — jangan let nesting depth stand di untuk heading peringkat Anda sebenarnya berarti.

• menggunakan sebuah <div> dengan sebuah click handler alih-alih <a href> atau <button>. Mengapa ini adalah wrong: Anda lose native keyboard activation dan correct accessible role unless Anda manually rebuild keduanya dengan role, tabindex, dan key handlers. Apa untuk melakukan alih-alih: gunakan <a href> ketika tindakan navigates di suatu tempat, <button> ketika ini melakukan sesuatu pada saat ini halaman — dan mendapatkan native perilaku untuk free.

Landmark elements di sebuah glance

seven elements ini artikel covers, apa setiap adalah sebenarnya untuk, dan misuse pattern untuk hindari.

Quick aturan dari thumb: jika sebuah block dapat syndicate pada -nya own, ini adalah <article>; jika ini perlu sebuah heading untuk membuat sense, ini adalah <section>; jika ini adalah neither, ini adalah sebuah <div>.

Beyond landmarks: interactive dan data elements

Prompts untuk retrofitting HTML

Ready-untuk-copy prompts untuk spesifik task ini artikel covers: finding div soup dan converting ini untuk correct semantic markup. Paste Anda halaman’s HTML (view-sumber, tidak dirender DOM) ke sebuah AI assistant dengan satu dari ini.

Flag div soup dan suggest replacements

Here is the HTML for one of my pages. Identify every <div> or <span> that is standing
in for a semantic landmark, and suggest the correct replacement element from this list:
header, nav, main, article, section, aside, footer. For each suggestion, explain which
test it passes (e.g. "this could stand alone in a feed, so it's an <article>" or "this
has its own heading and one theme, so it's a <section>"). Flag any block that should
stay a <div> because it's purely a styling/layout hook.

[paste HTML here]

periksa untuk landmark structural errors

Review this page's HTML for these specific structural mistakes: more than one <main>
element, a <main> nested inside <article>/<aside>/<header>/<footer>/<nav>, a <nav>
wrapping something that isn't major navigation, or a <section> with no heading. List
each problem found with the line/snippet and the fix.

[paste HTML here]

Prioritize sebuah retrofit order

Given this page's HTML, tell me which landmark to fix first for the biggest
accessibility and main-content-extraction benefit: establishing <main>/<header>/
<footer>/<nav>, converting self-contained blocks to <article>, converting themed
groups to <section>, or moving sidebars to <aside>. Order the fixes and say what
"done" looks like for each.

[paste HTML here]

Landmarks match Anda yang dimaksud structure

Test untuk jalankan: Open Anda browser’s DevTools accessibility tree (Chrome/Edge: DevTools → Elements → Accessibility pane) pada retrofitted halaman. Yang diharapkan hasil: landmark peran listed (banner, navigation, main, complementary, contentinfo) match semantic elements Anda sebenarnya wrote — satu main/“main” (terjemahan) “main” role, satu banner, dan seterusnya. Failure interpretation: sebuah missing atau duplicated landmark role berarti markup tidak produce structure Anda yang dimaksud (e.g. sebuah kedua <main>, atau sebuah <div> itu seharusnya memiliki telah converted). Monitoring window: Immediate — periksa right setelah deploying retrofit. Rollback trigger: Lebih daripada satu main/“main” (terjemahan) “main” landmark, atau sebuah landmark nested di mana ini tidak seharusnya menjadi (e.g. main di dalam article), berarti undo dan re-periksa markup.

Persis satu <main> per halaman

Test untuk jalankan: grep -o "<main" page.html | wc -l terhadap dirender HTML (atau view-sumber), atau penelusuran untuk <main di DevTools’ Elements panel. Yang diharapkan hasil: Persis satu match. Failure interpretation: Zero matches berarti Tidak utama-konten landmark adalah set; lebih daripada satu berarti “single clearest sinyal” (terjemahan) “single clearest sinyal” tentang main konten adalah now ambiguous. Monitoring window: Immediate, di deploy time. Rollback trigger: apa pun count lainnya daripada persis satu.

Non-rendering crawler masih see structure

Test untuk jalankan: Fetch halaman dengan sebuah plain HTTP client (curl atau “view halaman sumber” (terjemahan) “view halaman sumber”, tidak dirender DOM) dan konfirmasi semantic elements adalah present di mentah respons, tidak injected kemudian oleh client-side JavaScript. Yang diharapkan hasil: <header>, <nav>, <main>, <article>/<section>, <aside>, dan <footer> semua muncul di awal HTML payload. Failure interpretation: jika semantic tags hanya muncul setelah JS execution, crawler itu jangan render JavaScript (per AI/LLM-crawler poin di atas) tidak pernah see structure di semua. Monitoring window: Immediate — re-periksa apa pun time templating atau sebuah JS kerangka kerja perubahan bagaimana halaman renders. Rollback trigger: Semantic landmarks present di dirender DOM tetapi absent dari mentah HTML respons.

heading tingkat adalah jelas, tidak inherited dari nesting

Test untuk jalankan: di Anda browser’s DevTools accessibility tree (atau sebuah outline-memeriksa extension), list heading tingkat di document order dan bandingkan them untuk sebenarnya <h1>–<h6> tags di sumber, regardless dari bagaimana deeply setiap heading sits di dalam nested <section>/<article> elements. Yang diharapkan hasil: reported heading tingkat untuk setiap heading matches -nya literal tag (sebuah <h2> reports sebagai tingkat 2 Tidak penting bagaimana banyak bagian ini adalah nested di dalam) — tidak ada implicit demotion dari nesting. Failure interpretation: jika Anda template atau sebuah component library adalah relying pada <section> nesting untuk “secara otomatis” (terjemahan) “secara otomatis” lebih rendah sebuah heading’s peringkat, itu assumption tidak hold — old document outline algorithm adalah tidak pernah implemented dan saat ini spec tidak compute outlines itu cara. Perbaiki sebenarnya heading tags. Monitoring window: Immediate, dan apa pun time sebuah baru template atau component pattern introduces nested bagian. Rollback trigger: sebuah heading’s dirender/announced tingkat tidak match -nya literal <h1>–<h6> tag.

Fake tautan dan fake buttons adalah keyboard-accessible

Test untuk jalankan: Tab melalui halaman menggunakan hanya keyboard dan try untuk activate setiap clickable element dengan Enter/Space; secara terpisah, periksa accessibility tree untuk role setiap clickable element reports. Yang diharapkan hasil: Elements itu navigate report link (native <a href>); elements itu act pada halaman report button (native <button>) dan keduanya adalah reachable dan activatable oleh keyboard tanpa extra role/tabindex/key-handler code. Failure interpretation: sebuah <div> atau <span> dengan sebuah click handler itu tidak keyboard-reachable, atau itu reports sebuah generic role alih-alih link/button, berarti ini perlu untuk menjadi converted untuk native element alih-alih patched dengan ARIA. Monitoring window: Immediate — re-periksa setelah apa pun component-library atau design-sistem perubahan untuk interactive elements. Rollback trigger: apa pun clickable control itu dapat’t menjadi reached atau activated oleh keyboard alone.

Uji pemahaman Anda: Semantic HTML

Five quick pertanyaan pada semantic HTML dan apa ini melakukan (dan tidak) melakukan untuk SEO. Pick sebuah jawaban untuk setiap, lalu periksa.

Log perubahan