The HTML section Tag: How to Structure a Web Page

Look at the homepage of almost any business and you will see clear blocks: about us, services, testimonials, FAQ, contact. But what the eye sees does not always exist in the code. On many websites all of those blocks are just a long row of identical containers with no meaning at all, and a search engine, a screen reader or an AI model has to guess where one topic ends and the next one begins.

The section tag is one of the simplest tools for fixing that. It tells the browser, and anyone else reading the code, "a self-contained part about a specific topic starts here". In this guide we cover:

• what the section tag is and when to use it;
• how to write it and which attributes are worth knowing;
• how it differs from div, article, main and the other semantic tags;
• how it affects accessibility, SEO and AI-driven search;
• how to set semantic tags in Webflow, WordPress and Wix;
• which common mistakes to avoid and how to audit your page structure.

What the section tag is and why you need it

The section tag marks a thematic part of a page: a group of content held together by one topic, which usually has its own heading. It belongs to the family of semantic elements introduced with HTML5, alongside header, nav, main, article, aside and footer.

Typical blocks on a business website that are a good fit for a section:

• a description of the company or the project;
• a list of services;
• a block of client testimonials;
• a step-by-step outline of how you work;
• frequently asked questions;
• contact details and a map.

In other words, section is the right choice whenever you want to group content by meaning and mark a part of the page that stands on its own logically. The single most important rule: every section should have a heading, usually an H2 or H3. If the design does not show a heading on screen, it should still be present in the code, because without it the section loses its meaning. We cover how to build the heading hierarchy itself in detail in our guide to H1–H6 headings and SEO.

Syntax and attributes of the section tag

section is a paired tag: you open it, put a heading and content inside, and close it. In the browser it behaves like any other block element: it takes the full width of its parent and starts on a new line. It has no built-in styling, so without CSS a visitor will not see any difference between a section and a div. The whole difference lies in meaning.

Useful attributes

The tag supports all global HTML attributes. Three of them are especially useful:

• id – a unique identifier you can link to. This is how an anchor menu on a landing page works: clicking "Pricing" scrolls to the section with id="pricing". A clear, readable id also makes tracking in analytics easier.
• class – a class name for styling in CSS. In methodologies such as Finsweet's Client-First, each section usually gets a class that describes its role, for example section_testimonials.
• aria-labelledby or aria-label – give the section an accessible name for screen readers. aria-labelledby points to the id of an existing heading inside the section, while aria-label adds a text name when there is no visible heading. A real heading is always the better option; keep aria-label for cases where there is no alternative.

section and page language

The section tag works the same way in any language. The language and text direction are set at page level, through the lang attribute on the html tag (and dir="rtl" for right-to-left scripts such as Arabic), and every section inherits them. If part of the page is in another language, for example a client quote in Portuguese or Greek on an English site, you can set lang="pt" or lang="el" on that specific section, and a screen reader will switch to the correct pronunciation. On a right-to-left fragment, add dir="rtl" as well.

Styling a section with CSS

As far as CSS is concerned, a section is an ordinary block. You can give it a background, spacing, borders, shadows and any other styling. A few habits that help on real projects:

• Style by class, not by tag. A CSS rule that targets every section on the site will break something the next time someone adds a new block. A class such as section_services is much safer.
• Separate the section from the container. The common pattern: the section spans the full width of the screen and carries the background, and inside it a div with a maximum width centres the content. That way the background reaches the edges while the text stays readable on wide screens.
• Consistent spacing. Define three or four vertical spacing sizes for sections up front and use only those. The page then stays tidy even as you add blocks later.
• Logical properties. Use padding-inline and margin-inline-start instead of left and right. The same styles will then work correctly if the site ever gets a right-to-left language version.
• Hide headings the right way. If you need a heading that is not visible on screen, do not use display:none, because then screen readers will not read it either. Use a well-known utility class such as visually-hidden or sr-only, which hides the text visually but keeps it available to assistive technology.

section, div, article or main: what is the difference

These tags are where most of the confusion happens. Here is the practical breakdown:

• div – a container with no meaning. It says nothing about its content and is used to group elements for layout: a wrapper for a card, a grid or a column.
• section – a thematic part of the page. It groups content around one topic and should always have a heading.
• article – a self-contained unit of content that you could take out of the page, place somewhere else and it would still make sense. A good fit for a blog post, a product card, a single testimonial or a news item.
• main – the main content of the page, the reason the visitor came. A page has only one visible main element, and the sections and articles live inside it.

The simple test

Can you give the block a heading that describes its content? It is probably a section. Does the block exist only for layout, like a grid column or an animation wrapper? That is a div. Could the block be published on its own, say in a feed or a newsletter? That is an article.

What about header, footer, nav and aside

• header – the opening part of the page, or of a section within it: logo, main menu, title.
• nav – a major navigation block: the main menu, breadcrumbs, a table of contents. Not every group of links needs a nav, only meaningful navigation.
• aside – supplementary content related to the page but not part of its main flow: links to related articles, a sidebar banner, a side note.
• footer – the closing part: contact details, legal links, an accessibility statement, copyright. An article can also have its own footer, for example with the date and the author's name.

The site-wide header and footer only count as landmarks when they are not nested inside main, section or article. It is a technical detail, but it changes what a screen reader presents to the user.

What a semantic structure for a business page looks like

Let us take a typical landing page for a clinic or a law firm and see how it breaks down:

• header with the logo, and inside it a nav with the main menu and a WhatsApp button;
• main, containing:
• a section "About us" with an H2 heading;
• a section "Our services" with service cards inside. Each card can be an article if it leads to a separate service page, or a plain div if it is just part of the list;
• a section "What our clients say", where each testimonial is an article;
• a section "Frequently asked questions" with the questions as H3 headings;
• a section "Contact us" with a form;
• footer with the address, phone number and links to the accessibility statement and the privacy policy.

This structure changes nothing in how the page looks, but now every reader, human or machine, knows exactly what is where. And when it is time to change the design or add a block, developers find their way around the code faster too. It is worth planning this breakdown as early as the wireframe stage, when you decide which blocks the page will have and in what order.

How section affects accessibility

Screen reader users almost never read a page from top to bottom. They jump between headings and landmarks, much like sighted visitors scan a page with their eyes. NVDA, JAWS and VoiceOver all have keyboard shortcuts and navigation lists for exactly this purpose.

Headings are the foundation

The main way a section helps accessibility is through the heading inside it. A page where every part has a clear H2 turns into a table of contents a screen reader can announce. A page where every "heading" is just bold text inside a div is one long wall of content.

When a section becomes a landmark

A section on its own, without an accessible name, does not appear in the list of landmarks. Once you give it a name through aria-labelledby or aria-label, it gets the region role and becomes an area users can jump to directly. Do not do this for every section on the page: twenty landmarks all announced as "region" only add confusion. Save it for the parts that really matter, such as a contact form or a pricing calculator.

What the law says in Europe

In the European Union, the European Accessibility Act has applied since June 2025 to a range of consumer-facing digital services, including many online shops and booking services, while public sector websites have been covered by the Web Accessibility Directive for several years. In practice, compliance is usually measured against the harmonised standard EN 301 549, which builds on WCAG at level AA. Semantic structure, correct headings and landmarks are exactly what accessibility auditors look for under the criteria on info and relationships and on navigation. An accessibility overlay that adds a widget button to the page does not fix code built entirely from divs. This is a general overview, not legal advice: check with a specialist which obligations apply to your business. We go deeper into the topic in our guide to website accessibility.

Do semantic tags affect SEO

The honest answer: Google does not present the section tag as a ranking factor in its own right. Swapping every div for a section will not shoot you to the first page. But semantic structure has a meaningful indirect effect:

• Understanding the content. Search engines break a page into parts to work out what each one is about. A clear heading at the top of each section, with the relevant content beneath it, makes that job easier.
• Rich results. Content organised into sections with question-and-answer headings is easier to turn into structured data, for example FAQPage schema. We wrote about controlling what appears in search results in our guide to the search snippet.
• Anchor links. A section with a clear id lets you link directly to a specific part of the page, both from within the site and from outside it.
• User experience. A well-organised page is easy to read, so visitors stay and find what they came for. That is exactly what search engines try to reward.

AI search and GEO

Systems such as Google's AI Overviews, ChatGPT and Perplexity pull short passages from pages and use them in their answers. It is harder to extract a passage from a page where everything is mixed together. A page where each part answers one question, with a clear heading and the answer right below it, hands these tools ready-made passages. There is no guarantee this will earn you a citation, but it is a solid foundation. More on this in our guide to GEO, optimising for AI search.

How to set semantic tags in Webflow, WordPress and Wix

Most business websites are not hand-coded, so it helps to know where this setting lives in the popular site builders.

Webflow

Webflow has a built-in Section element that outputs a section tag. For any Div Block you can also choose a different tag in the element settings: header, footer, nav, main, section, article, aside and more. The common problem is that designers build the whole page out of Div Blocks and never change the tag. A quick look at the page structure in the Navigator shows where semantics are missing. On our Webflow projects we set this up during the build, together with the Client-First structure.

WordPress

In the WordPress block editor, the Group block has a field in its Advanced settings for choosing the HTML element: div, header, main, section, article, aside or footer. In Elementor, the container has an HTML Tag setting that lets you pick section, article, header, footer and others. Block themes already output header, main and footer in their templates, but the parts inside your content you need to set yourself. More about building a site on this platform in our WordPress guide.

Wix

In Wix Studio you can assign a semantic tag to sections and containers through the element's accessibility settings. The options are more limited than in Webflow, so it is worth checking the live page code after publishing to see what was actually output.

Common mistakes with section

• section instead of every div. When every wrapper becomes a section, the tag loses its meaning. A section without a heading is usually a div in disguise.
• section without a heading. Tools such as the W3C validator will flag it, and a screen reader gets no hint of what the part is about.
• Headings chosen by size. An H4 in the first section because "it looks nicer smaller". Size is set in CSS; the level is set by the structure.
• Several main elements on one page. This tends to happen with templates that blocks get copied from. There should be only one visible main.
• section as a wrapper for the whole page. That is the job of main. A section that wraps everything adds no information.
• Relying on the old outline algorithm. The specification once described a model where every section started a new heading level, so each part could open with an H1. Browsers and screen readers never implemented it, and it was removed from the specification in 2022. Today the hierarchy is determined only by the heading levels themselves: one H1, then H2s, and so on.
• aria-label on every section. It creates clutter instead of order. Give an accessible name only to the parts users genuinely need to jump to.

How to audit your site's semantic structure

You do not need to be a developer to check where things stand. Here is a short process:

• Look at the code. Right-click the page and choose Inspect in Chrome. If you see a long run of divs with no header, main, section or footer, there is room to improve.
• The accessibility tree. Chrome DevTools has an Accessibility pane that shows the page the way a screen reader understands it, including landmarks and headings.
• Heading structure. Extensions such as HeadingsMap display all the headings on a page as a tree. Skipped levels or sections without headings stand out immediately.
• Validation. The W3C checking service at validator.w3.org flags sections without headings and structural errors.
• Automated accessibility checks. Lighthouse in Chrome, axe DevTools and WAVE catch a large share of the issues. They do not replace a manual review, but they give you a good starting point.
• Try it for real. Turn on NVDA on Windows or VoiceOver on a Mac or iPhone and try to navigate the page using the heading and landmark shortcuts. Five minutes of this teaches you more than any report.

An action plan for an existing site

• start with the main template: getting header, nav, main and footer right once affects every page;
• move on to the pages that matter most for leads: the homepage, service pages and landing pages;
• on each page, mark the thematic parts as sections and check that each one has a heading at the right level;
• in blog and product templates, make sure each item is an article;
• after the changes, run the checks again and update your accessibility statement if needed.

How RJL Studio builds websites with a sound semantic structure

At RJL Studio, semantic structure is part of the build, not an afterthought. At the planning stage we break every page into parts with clear headings, and during development we set the right tags in Webflow, WordPress or Wix. Before launch we check the heading structure, the landmarks and the accessibility tree, so the site makes sense to visitors, screen readers, Google and AI-driven search tools alike.

If your current site is built from layers of divs with no structure, we will audit it, show you where that hurts accessibility and search visibility, and propose a clear remediation plan as part of our SEO service. Get in touch and we will get back to you.

Frequently asked questions

Does every section need a heading?

Almost always, yes. The heading is what makes the part thematic and explains what it is about. If the design has no visible heading, add a visually hidden one using a class such as visually-hidden. If there is no sensible heading for the block at all, it should probably be a div.

What is the difference between section and div in one word?

Meaning. A div is a container for layout only and says nothing about its content. A section marks a thematic part with a topic and a heading. They look identical on screen, but to screen readers and search engines they are different things.

Will replacing divs with sections improve my Google rankings?

Not directly. Google does not treat the tag itself as a ranking factor. But a clear structure with correct headings helps search engines and AI tools understand the content, improves the user experience and makes it easier to appear in rich results. All of that affects traffic indirectly.

Can you put a section inside another section?

Yes, if the content calls for it. For example, an "Our services" section with an H2, and inside it a separate section for each service with an H3. What matters is that the heading hierarchy matches the nesting. If you are nesting only for layout, use a div.

Do semantic tags matter for accessibility compliance?

Yes. European accessibility requirements generally rely on EN 301 549 and WCAG, which require the structure of the content and the relationships between its parts to be available to assistive technology as well. Correct headings and landmarks such as header, nav, main and footer are a core part of that. An accessibility overlay on its own does not fix structural problems in the code. This is general information, not legal advice.