What semantic HTML means in practice
Picture two online shop pages that look identical in a browser. One is built from anonymous div blocks. In the other, every piece has a tag that names its job: heading, list, menu, button. Shoppers notice no difference. A crawler does, because the code is its only way to tell the main text from the menu and the repeated footer.
Screen readers used by blind and low-vision people read the same code, so accessibility and technical SEO overlap heavily. Do not expect miracles, though. Tags alone do not push you up the rankings. They remove confusion and help search engines interpret the page correctly.
Headings: the outline of your page
H1 is the main topic, H2 marks sections, H3 marks subsections inside them. On a page called “Flower delivery in Tashkent”, the H1 is the service name, while H2s might be delivery terms, paying with Click or Payme, and common questions.
These mistakes show up often on small-business sites:
- a bold paragraph stands in for a real heading
- H2 or H3 is used just to get a bigger font, often in the footer or sidebar
- levels jump, for example from H1 straight to H4
- there is no H1, or several with unrelated meanings
Page landmarks and what they do
HTML5 offers tags for the large areas of a page. Search engines do not hand out a bonus for them, but they help separate the core content from elements that repeat on every page.
- header: site or section intro, logo, menu
- nav: main menu and breadcrumbs
- main: the primary content, one per page
- article: a self-contained piece such as a post or product card
- section: a themed block, usually with its own heading
- aside: sidebar or related material
- footer: contacts and legal details
Links versus buttons
A link takes you to another address and needs an a tag with an href. A button performs an action on the current page, such as sending a request or opening a pop-up. If navigation between sections relies on a div or span with a JavaScript click handler and no href, crawlers do not treat it as a link and may never find the pages behind it, such as catalogue categories.
For a business this is a direct loss: a page that search cannot discover will not bring a customer from Google.
Lists, tables, images and forms
Use ul and ol for enumerations and a real table with header cells for comparisons. Search engines can pull short answers from them: steps of a process, what each service package includes, product specifications. A table faked with bordered divs gives them nothing to work with.
Insert meaningful images with an img tag and a clear alt text, and use figure with figcaption for captions. If a product photo exists only as a CSS background, image search will not see it. Purely decorative graphics belong in CSS.
Every form field needs a label, not just grey placeholder text that vanishes as you type. Such forms are easier on a phone, read correctly by screen readers, and tracked more accurately by analytics. Also set the lang attribute on the html tag, for example uz or ru, so the page language is stated clearly.
How to check your own markup
You do not need to read code to run a first check:
- turn off styles or use reader mode; the page should still read like a logical document
- install a browser extension that shows the H1 to H6 structure
- run the Lighthouse accessibility audit
- crawl the site and export headings for every page to spot gaps and duplicates
Where to start on a live website
You do not have to rewrite everything. Begin with the templates that bring search traffic: service pages, categories, product cards and articles. Fix the heading hierarchy, replace fake links with real ones, and check alt text on key images. A template is fixed once and the improvement spreads across the whole site.
If you want to know what is holding your site back in search, the markdev team can run a technical review and point out which fixes will pay off fastest. You can discuss your task with us via Telegram or the form on our website.
FAQ
Does semantic HTML improve rankings by itself?
Not directly. Search engines do not award points for a tag alone. But a clear structure helps crawlers understand the page, find every section and pick fragments for short answers, so the indirect effect is real.
How many H1 tags should a page have?
Usually one, describing the main topic of the page. Other sections should use H2 and H3 according to meaning, not font size.
Do I need to rebuild the whole site?
No. Start with templates for service pages, categories, product cards and articles. A fix in a template applies to every page that uses it.
How can I check semantics without a developer?
Disable styles or switch on reader mode, view the heading structure with a browser extension, and run a Lighthouse audit.
Let’s look at your task for free
Leave your contact — in a 15-minute call we’ll show where leads get lost and what to fix first.