Headings, Alt Text and Semantic HTML for SEO

Headings, image alt text and semantic HTML are the three on-page basics that tell both people and search engines what a page contains, and they are cheap to get right when a developer builds them in from the start and expensive to retrofit across fifty pages later. A page needs one clear main heading, subheadings that follow the real structure of the content, descriptive alt text on every image that carries meaning, and HTML elements that say what they are (a button that is a button, a navigation that is a navigation). If you are hiring a web development company in Pune, or checking the work of one you already have, this guide is the specification: what each element should look like, what Google and the accessibility standards actually say, the mistakes we see most often on small business sites, and a short audit you can run yourself in an afternoon.

We are deliberately careful in this article about what is established and what is folklore. On-page SEO attracts a great deal of superstition: exact heading counts, keyword quotas for alt text, magic ratios. Where Google's own documentation or a W3C standard says something, we cite it. Where the honest answer is "it depends" or "nobody outside Google knows", we say so, and we do not quote ranking-impact percentages because none can be defended.

Why These Three Basics Matter More Than They Look

A search engine reads your page as a stream of markup. It does not see the layout that you see. It sees a title, some headings, paragraphs, links and images, and it has to work out what the page is about and which parts matter. Headings are one of the clearest signals of structure that you control. Alt text is the only way a crawler can learn what a picture shows, because it cannot reliably infer meaning from pixels for every image on your site. Semantic elements tell assistive technology, and automated systems of every kind, what each part of the page is for.

The same three things serve a second audience that is easy to forget: people who use screen readers, keyboard navigation or voice control. A screen reader user can pull up a list of all the headings on a page and jump between them, much as a sighted visitor scans bold text. The same user relies on alt text to know what an image conveys. When you build these properly, you improve the experience for those visitors and you give search engines cleaner signals in one piece of work, which is why we treat them together. Our guide to IS 17802 and website accessibility covers the wider accessibility picture; here we stay with the on-page structure.

There is also a practical business reason. A site whose headings are chosen for their visual size rather than their meaning is hard to maintain: the next editor cannot tell why a line of text is an H4, changes it for appearance and quietly breaks the hierarchy. A site that uses semantic structure consistently is easier to hand over, to redesign and to extend.

Headings: Build the Outline First

What an H1 is and how many to use

The H1 is the main heading of the page: the answer to "what is this page?" Our own content standards use exactly one H1 per article, and for service pages and blog posts we recommend the same. Google's documentation does not forbid multiple H1 elements on a page, and Google's search representatives have said repeatedly that more than one is not a problem for ranking. The reason to use one is not a penalty; it is clarity. A page that has one main subject has one main heading, and a single H1 keeps the outline simple for screen reader users, editors and any tool that reads the structure.

The H1 should describe the page, in words a visitor would recognise. For a service page that might be "Website design in Pune for clinics and coaching classes". It should not be your company name, a slogan like "Welcome" or a line of decorative copy, which is the commonest mistake on small business home pages. The H1 and the title tag do not need to match word for word, but they should clearly be about the same thing; the title tag is what appears in search results, and our article on page titles and meta descriptions shows how to write it.

H2 and H3: follow the content, not the font size

Below the H1, headings should mirror how the content is actually organised. An H2 marks a main section. An H3 marks a subsection of the H2 above it. You should not skip levels for convenience (an H2 followed directly by an H4 because the H4 looks smaller), and you should not choose a heading level because of how large the theme renders it. Size is the job of CSS. The level is the job of the document structure.

A reliable test is the outline test. Copy only the headings of your page into a plain list, indented by level. Read it. If the outline reads like a sensible table of contents for the page, the structure is sound. If it reads as "Welcome / Our services / Why choose us / Call now / Testimonials / Follow us" with every item at the same level and no real hierarchy, or if the outline contains headings that are really slogans, the structure needs work. Browser extensions that list headings, or the accessibility tree in your browser's developer tools, make this a two-minute check.

Common heading mistakes on small business sites

The logo is the H1. Many themes wrap the site name in an H1 on every page, so every page starts with the same heading and none says what it is about. The site name belongs in a header element or a paragraph, with the H1 reserved for the page's own subject on inner pages. (Some themes use the site name as H1 on the home page only, which is acceptable.)
Headings used for styling. A line of text turned into an H3 so that it appears bold and large, with no section following it.
Page builders that cannot set levels. Some builders let editors choose a heading level only by appearance. Insist on a builder or theme setting where the level and the style are separate.
Empty headings. A heading element with only an image or an icon inside and no text, which a screen reader announces as "heading" with nothing following.
Headings in sidebars and footers. Widget titles in a sidebar being H2 or H3 elements can clutter the outline. Where the theme allows, make them plain text or lower the level so that the main content's structure stays clear.

Image Alt Text: Say What the Image Is For

What alt text actually does

The alt attribute provides a text alternative for an image. It is read aloud by screen readers, displayed if the image fails to load, and used by search engines to understand the image and its relevance to the page. Google's image guidance recommends descriptive, useful alt text that is relevant to the content of the page, and warns against stuffing the attribute with keywords. The W3C's Web Accessibility Initiative gives a more precise rule: the right alt text depends on the image's purpose in context, not simply on what it depicts.

A simple decision process

The W3C's alt decision tree boils down to a few questions that you can apply to every image.

Is the image purely decorative? A divider line, a background flourish or a stock texture that adds nothing to the content should have an empty alt attribute, written as alt="" . This is not the same as omitting the attribute. An empty alt tells assistive technology to skip the image; a missing alt makes a screen reader read out the file name, which is noise. Even better, decorative images can often be CSS backgrounds rather than image elements.
Does the image convey information? Describe the information, briefly. A photograph of your Pune clinic's reception for a "Visit us" section might use "Reception area of the clinic on Satara Road with a seating area and a front desk" if that is relevant to the content. A chart should be described by its message, with the data in text nearby.
Is the image a link or a button? Then the alt text should describe the destination or action, not the picture. A logo that links to the home page should read like "Govindani Infotech, home" rather than "logo". An icon-only button needs an accessible name such as "Open menu" or "Call us".
Does the image contain text? Reproduce that text in the alt, or better, avoid putting essential text in images at all. Text in images cannot be resized, translated or searched.
Is the information already in the surrounding text? If a caption or paragraph fully conveys what the image shows, the image can have a short alt or an empty one, so screen reader users do not hear the same thing twice.

Good and poor examples

A product photograph on an online store: "Blue cotton kurta, front view, with mandarin collar" is useful. "kurta" is too little. "best cheap blue cotton kurta online Pune buy kurta kurti" is keyword stuffing and reads as spam to a screen reader user. A photograph of a team: "Three members of the support team at their desks" is fine; "team" says nothing; "IMG_4023.jpg" is a failure.

Length matters. Most alt text works best at one short sentence or a phrase. There is no official character limit in the HTML standard, but screen readers handle very long strings poorly, and a paragraph belongs in visible text or a caption rather than in an attribute. If an image needs a long explanation, as with a complex infographic, put the explanation in the page text and keep the alt to the essentials.

Alt text and SEO: what to expect

Alt text helps Google understand an image, and so it can contribute to appearing in image search results, and it provides context for the page overall. It is not a lever for ranking a page for an unrelated term. The proper approach is to write for the user, mention the relevant words only when they are genuinely part of the description, and let the page's actual content do the ranking work. Because Google generates no promise of ranking effect, any agency that sells "alt text optimisation" as a standalone ranking service is overselling; it is a hygiene task that supports accessibility and image search.

File names and dimensions

Use descriptive file names (blue-cotton-kurta-front.webp rather than IMG_4023.jpg), set width and height so the browser reserves space, and keep important images as real image elements rather than CSS backgrounds, which search engines index less reliably. Our guide to AVIF, WebP and LCP covers the speed side.

Semantic HTML: Use the Element That Says What It Is

Landmarks and page regions

HTML has elements whose names announce their role: header, nav, main, article, section, aside and footer. Used properly they give each page a map. A screen reader user can jump straight to the main content, skip repeated navigation, or list all the navigation regions. A page built entirely from generic div elements has none of this, and the user must read through everything in order. A good page has exactly one main element wrapping the unique content, a nav element around each major set of navigation links (with a label if there are several, such as "Main" and "Footer"), and header and footer elements for the page and site.

Buttons, links and forms

Use a link (an anchor element with an href) when the action goes to another page or location, and a button element when the action does something on the current page, such as opening a menu or submitting a form. Developers sometimes make a clickable div that looks like a button. It will not receive keyboard focus, will not respond to the Enter or Space keys and will not be announced as a button unless a great deal of extra work is done. The native element gives all of this for free. In forms, every field needs a label that is programmatically linked to it; our guide to enquiry form design shows how labels, input types and validation work together.

The language attribute

The lang attribute on the html element tells browsers, translation tools and screen readers which language the page is in. For a bilingual site, the attribute should change on sections written in another language, such as a Marathi quotation inside an English page. Without it, a screen reader may pronounce Marathi or Hindi text with English rules, making it unintelligible. For multilingual sites you also need proper alternate-language links; see our NGO example in building a multilingual Hindi and Marathi donation site for the principles.

Skip links and focus

A "Skip to main content" link at the very top of the page, visible when it receives keyboard focus, lets keyboard users bypass the navigation on every page. It corresponds to the WCAG requirement for a way to bypass repeated blocks. Equally important is that focus is visible: the outline that shows which element is selected should not be removed by CSS without a clear replacement.

How This Connects to Structured Data and Internal Links

Structured data describes your page to search engines in a separate, machine-readable layer; it does not replace good HTML structure. A page whose visible headings and content are messy will not be rescued by schema markup. Our article on structured data and schema markup explains which types a small business needs. The two layers should agree: if the schema says the page is an Article with a certain headline, the H1 should say the same thing.

Internal links also depend on structure. Descriptive link text, such as "website design services in Pune" rather than "click here", gives users and crawlers context, and a sensible heading hierarchy makes a long page navigable with a table of contents. We cover the wider picture in internal linking, breadcrumbs and site architecture.

Special Cases That Cause Trouble

Page builders and themes

WordPress page builders and many themes produce markup that is heavier and less semantic than hand-built templates. That does not make them unusable: many produce acceptable output if configured carefully. The checks to make are whether heading levels can be set independently of style, whether images allow alt text on every widget (some background and slider widgets do not), and whether the builder wraps everything in nested divs without landmarks. If your site is built on a builder, request an audit of the actual output rather than the editing screen.

Online stores

Product listings multiply every problem: hundreds of images, product names as headings, filters as links. Product image alt text should describe the product and variant. Product names in listing grids are normally H2 or H3 elements within the category page's structure, under a single H1 for the category. For platform specifics, see how structure intersects with collections in our article on collection page SEO content.

A One-Afternoon Audit You Can Run Yourself

You do not need paid tools to find the biggest faults. Take your five most important pages (home page, your main service page, contact page, and two others) and run these checks.

Headings outline. Use a headings-list browser extension or the accessibility tree. Is there one H1 describing the page? Do H2 and H3 follow the content? Note any skipped levels, empty headings and headings used only for styling.
Images without alt. In your browser's developer tools, search the page source for img elements and check each for an alt attribute. Note images with missing alt, file-name alt text, and alt text that is stuffed with keywords.
Landmarks. In the accessibility tree, check for one main element and clear navigation regions.
Keyboard test. Press Tab repeatedly from the top of the page. Can you reach every link, button and form field? Is the focus visible? Can you open the menu and submit the form without a mouse?
Automated scan and screen reader. Run the accessibility audit built into Chrome Lighthouse, which reliably catches missing alt attributes, missing labels and empty links (treat a clean report as a floor, not a finish), then spend ten minutes listening to your home page with a free screen reader such as NVDA or VoiceOver. Nothing teaches the problem faster than hearing it.

Record what you find in a simple table: page, issue, effort to fix, and priority. Fix the template-level problems first, such as the theme's header markup and a missing skip link, because one fix spreads across every page.

What to Ask a Developer or Agency

Will each page have one H1, with H2 and H3 following the content's structure, and can editors set heading levels independently of appearance?
How is alt text entered for images, including images in sliders and page-builder widgets, and who will write it for the existing library?
Will the templates use landmark elements and native buttons, links and form labels?
Will you test with keyboard-only navigation and a screen reader before launch, and give us the results?
How will you handle the language attribute on bilingual pages?
Do you provide a list of known limitations of the theme or builder in this respect?

A developer who answers these with specifics has done the work before. One who says "SEO is handled by the plugin" has not understood the question, because a plugin cannot fix markup that the theme generates.

Worked Example: A Pune Dental Clinic Home Page (Illustrative)

Consider an illustrative home page for a dental clinic in Pune, built years ago on a multipurpose theme. The theme wraps the clinic's name in an H1 on every page. The hero is a slider with three images, each with the promotional text baked into the picture and no alt attribute. Section titles ("Our Services", "Why Us", "Testimonials") are H4 elements chosen because they look right. The phone number is a div styled like a button. Team photographs have file-name alt text such as DSC_1187.

A repair would proceed in order of leverage. First, the template: change the H1 on the home page to a real descriptive heading ("Family and cosmetic dentistry in Pune") and move the clinic name into the header outside the heading hierarchy on inner pages. Second, replace the slider with a single static hero containing real text. Third, correct the section headings to H2 with H3 subsections for individual treatments. Fourth, replace the phone div with a proper link using a tel: address. Fifth, rewrite alt text for the team photographs ("Dr. A. Patil, orthodontist, at the clinic reception") using the names actually on the clinic's own staff page, and mark decorative images as such. Sixth, add a skip link and a visible focus style.

None of this guarantees a ranking change, and we would not promise one. It makes the page accurately readable to search engines and usable by everyone, and it gives the next developer a clean base.

Frequently Asked Questions

How many H1 tags should a page have?

Use one. Google does not penalise multiple H1 elements, but a single H1 that describes the page keeps the structure clear for visitors using screen readers, for editors and for any tool that reads the outline.

Does alt text help SEO?

It helps Google understand an image, which can support image search visibility and gives context to the page. It is not a way to rank for unrelated keywords. Write it for the user, describe what the image shows or does, and avoid stuffing keywords.

What should I write as alt text for a decorative image?

Leave it empty, as alt="" , so screen readers skip it. If the image is purely decorative, a CSS background is often better. Do not leave the attribute out entirely, because some screen readers then read the file name.

Is semantic HTML a ranking factor?

Google has not described semantic elements as a direct ranking factor. They make the page easier for crawlers and assistive technology to interpret, and they improve accessibility and maintainability. Treat them as good engineering, not as a shortcut.

Can I fix headings and alt text without rebuilding my website?

Usually, yes. Most fixes are template and content edits: change the heading levels in the theme or builder, add alt text in the media library and widgets, replace non-semantic buttons. Sites on very rigid page builders may need a partial rebuild of some templates.

Where to Start

Pick your home page and your main service page, list their headings and check every image for alt text. That one exercise will show you whether the structure is sound, and the fixes will usually be a matter of hours, not weeks. If you would rather have it done for you, Govindani Infotech, a website design and development company at 2nd Floor, Landmark Plaza, 206 Satara Road, Parvati Paytha, Pune 411009, builds and audits business websites with this structure from the start; see our website creation services and SEO services, then contact us or call 092019 58274.

Once headings and alt text are right, the next layer is markup: see our guide to structured data for a local business website.

Sources:

About the author: written by the Govindani Infotech web development team in Pune.

Web Development Company in Pune: Headings, Image Alt Text and Semantic HTML — The On-Page Basics Your Developer Should Build In and a One-Afternoon Audit