Semantic HTML for extraction
Semantic HTML is how a crawler finds the edges of an answer: one heading tree, a section per topic, and elements that already mean list, table, or quote.
One heading tree
Each page has a single h1. The next heading is an h2. Under that, h3. Do not skip. Write the heading as the question or the topic, not as a clever label.
<h1>Semantic HTML for extraction</h1>
<h2>One heading tree</h2>
<h3>A good fit for a section</h3>Chunks a model can lift
Use article for the piece, section for each topic, and aside only for material that is not the answer. Put the answer in the first paragraph or list. Put the explanation after it.
- ol for steps and rankings
- ul for a set of facts that has no order
- blockquote and cite for a source
- time with a datetime attribute for a published date
Tables, not CSS grids pretending to be tables
A comparison is a table with thead, tbody, th, and td. A grid of divs has no rows a model can trust. Keep the source order equal to the reading order. Do not move a block visually with the order property.
Images that do not shift the page
Give every image a factual alt, a width, and a height. Use picture when you have AVIF or WebP, and keep a JPEG or PNG fallback. Load the hero eagerly and everything below the fold lazily. The alt describes the image. It does not repeat the keyword list.
See also how AI crawlers read HTML and technical SEO.
Questions about semantic HTML
Can I skip from h2 to h4 if the design looks tighter?
No. Skipped levels break the outline both people and crawlers use. Change the design, not the heading order.
Are div elements forbidden?
No. Use them for layout hooks. Do not use them as a substitute for a heading, a list, a table, a link, or a paragraph.
Request a free AI-extraction audit
Send one public URL. A person reads the HTML your server returns and writes back what AI crawlers can quote, and what they never see.