HTML: The Foundation of a Visible Webflow Website

HTML is the invisible framework of every Webflow website. Learn how to use semantic tags correctly and optimize your site for search engines and LLMs.

Last updated:

22.07.2026

Development

AEO

The foundation of every website

HTML (Hypertext Markup Language) is the fundamental language of the web. Every website you see in your browser is based on HTML code. It structures content, defines hierarchies, and provides search engines and assistive technologies with the information they need to understand and correctly display your content.

An analogy to help you understand:
Think of a website like a human body: HTML is the skeleton – it provides the basic structure and form. CSS is the outward appearance like skin, hair, and nails – it makes everything look beautiful and appealing. JavaScript is the muscles and ligaments – they provide movement and interactivity.

The modern web would not be possible without HTML. It is the foundation upon which CSS (for design) and JavaScript (for interactivity) are built. Clean, semantic HTML is essential for SEO and accessibility.

In Webflow, HTML is an integral part

Webflow automatically generates HTML code in the background while you design visually. Every element you drag onto the canvas – whether it's a heading, a paragraph, or a section element – is translated into clean HTML code.

The big advantage: You don't have to write HTML manually; you work visually. Webflow handles the technical implementation and ensures that the generated code meets modern web standards. At the same time, you retain full control over the semantic structure of your site.

How to edit HTML in Webflow

In Webflow, you don't edit HTML directly in a code editor; instead, you use the visual element settings. Each element has specific properties that you can adjust in the right-hand panel.

For advanced customizations, you have several options available:

Element settings: Change HTML tags and IDs directly in the Element Settings panel
Custom HTML element: Integrate complex HTML directly into your page using the Embed element
Site Settings Custom Code: Add custom code to the head or footer in your site settings or on a page-by-page basis

Correct HTML <body> structure in Webflow

A clean HTML structure is the backbone of any professional website. It consists of semantic landmarks that logically organize your page layout, making it understandable for both search engines and screen readers.

The most important structural elements:

<header>: Header area containing the logo, navigation, and key information
<nav>: The website's main navigation menu
<main>: The main content of the page – this is where your sections belong
<section>: Thematically grouped content areas within <main>
<article>: Self-contained content such as blog posts or products
<aside>: Secondary content such as sidebars or related information
<footer>: Footer area with copyright, links, and contact information

Typical page structure in Webflow:

A correctly structured Webflow page follows this pattern: The <header> contains the navigation (<nav>). Below that comes the <main>element, which encloses all <section>areas. Optionally, an <aside> can be used for secondary content. At the end is the <footer>.
‍

This structure helps search engines understand the layout of your page and allows screen reader users to navigate efficiently using landmarks.

More on HTML structure: You can find a detailed explanation of HTML layouts and semantic elements at W3Schools HTML Layout.

The ideal structure for headings in Webflow

Headings (H1-H6) organize your content hierarchically. A clean heading structure is essential for SEO, accessibility, and modern Answer Engine Optimization (AEO).

Best practices for headings:

One H1 per page: The H1 describes the main topic of the page
Logical hierarchy: H2 follows H1, H3 follows H2 – do not skip levels
Meaningful phrasing: Headings should describe the content precisely
Integrate keywords: Use relevant search terms naturally in headings
Not just for design: Choose heading levels based on structure, not visual size

In Webflow, you can control the visual appearance (size, color) via CSS classes while keeping the semantic level (H1-H6) correct.

Hidden headings for better accessibility

Hidden headings are a powerful tool for improving your website's accessibility without compromising the visual design. They allow screen reader users to navigate more effectively, while sighted visitors do not see any additional headings.

When are hidden headings useful?

Structuring sections: Footers, sidebars, or widget areas receive semantic headings
Navigation for screen readers: Users can quickly jump to important sections
Design limitations: When the visual design does not include a visible heading, but the semantic structure is important

Proper implementation in Webflow

Use CSS classes with position: absolute; clip: rect(0,0,0,0); instead of display: none or visibility: hidden, as the latter are ignored by screen readers.

Practical example from my work:

I regularly use hidden headings in the footer of my Webflow projects. There, I place an H2 element with the text "Footer" that is visible exclusively to screen readers. The implementation:

Create an H2 element with the text "Footer" in the footer section
Add a CSS class (e.g., "sr-only" for Screen Reader Only)
Define the class with position: absolute; left: -10000px; in the custom code

This method significantly improves navigation for screen reader users without disrupting the visual design. Screen readers clearly announce the footer section, and users can jump directly to it.

Important warning

Google views hidden headings critically if they are used solely for keyword manipulation. Hidden headings should never be used for keyword stuffing, irrelevant content, or deceptive purposes. Use them exclusively for genuine accessibility purposes.

Semantic tags in Webflow

Semantic HTML5 tags give meaning to the code. Instead of just using <div>elements, use meaningful tags like <header>, <nav>, <article> or <footer>.

Webflow supports a variety of semantic tags:

Section: Use <section> for thematic sections
Header/Footer: For header and footer areas
Nav: For navigation elements
Article: For self-contained content like blog posts
Aside: For secondary content like sidebars
Main: For the main content of the page

These tags help search engines and screen readers better understand and index your content.

Complete list of all Webflow HTML5 tags.

‍

The custom HTML element

The Embed element (custom HTML) in Webflow allows you to insert custom HTML code directly into your page. This is useful for:

Integrating third-party widgets (calendars, forms, etc.)
Complex structures that cannot be implemented visually
Schema.org markup for structured data
Custom JavaScript functionality
SVG code for custom graphics
Real HTML buttons instead of links

Important: Custom HTML is only visible after publishing. You will only see a placeholder in the Designer. Ensure that your code is valid and does not contain any security vulnerabilities.

For dynamic content, you can also use CMS fields within custom HTML to generate personalized code for each collection item.

The difference between links and buttons

A common misconception: The Webflow "Button" element is not a <button> in the HTML sense, but a link (<a>tag) with button styling.

Semantic difference:

Links (<a>): Lead to another page or section. They have an hrefattribute and are used for navigation.
Buttons (<button>): Trigger actions, such as opening a modal, submitting a form, or starting a JavaScript function. They do not navigate away from the page.

Why does this matter?

Accessibility: Screen readers announce links and buttons differently. A link says "Link to...", a button says "Button, [action]"
Semantics: Search engines and browsers correctly understand the element's function
Keyboard navigation: Links are activated with Enter , buttons with Enter and Space

Practical example: Real buttons with custom HTML

I regularly use the custom HTML element to create real <button>elements when no navigation is intended. Typical use cases:

Opening/closing modals or overlays
Switching tabs or accordion sections
Triggering animations or filters
Submitting forms via JavaScript

Code example:‍

<button type="button" class="custom-button" aria-label="Modal öffnen">Open Modal</button>

‍

This approach ensures semantically correct HTML and significantly improves your website's accessibility.
‍

The most common HTML mistakes I see

In my work as a Webflow developer, I repeatedly see the same structural errors that negatively impact accessibility and SEO performance. Here are the four most common mistakes:

1. Footer uses a <section> tag instead of a <footer> tag

Many Webflow projects use a <section>element for the footer area. This is semantically incorrect. The footer should always use the <footer>tag so that screen readers and search engines can correctly identify the section as a footer.

Incorrect: <section class="footer">...</section>
Correct: <footer>...</footer>

2. Sections use <div> tags instead of <section> tags

The most common mistake of all: content areas are created as simple <div>-blocks instead of as <section>-elements. This causes the page to lose its semantic structure, and screen readers cannot identify the layout.

Incorrect: <div class="hero">...</div>
Correct: <section class="hero">...</section>

3. The sections are not inside the <main> tag

A critical structural error: the content areas (<section>) are placed directly inside the <body>, without being wrapped by a <main>-element. The <main>-tag is essential for identifying the page's main content and distinguishing it from the header and footer.

Incorrect:

<body> <header>...</header> <section>...</section> <footer>...</footer> </body>

Correct:

<body> <header>...</header> <main> <section>...</section> </main> <footer>...</footer> </body>

4. The footer is inside the <main> tag instead of outside

Sometimes the <footer> is incorrectly placed inside the <main>element. However, the footer belongs on the same level as <header> and <main> – specifically as a direct child of the <body>element.

Incorrect:

<main> <section>...</section> <footer>...</footer> </main>

Correct:

<main> <section>...</section> </main> <footer>...</footer>

If you are unsure whether your Webflow site has these errors, or if you want to build a website from scratch with a clean HTML foundation, I can support you with technically sound Webflow development.

Conclusion

‍These four errors are easy to avoid if you consciously select the correct HTML tags in Webflow. Use the element settings to change div blocks into semantic tags like <section>, <main> and <footer> to transform them. This not only makes your website technically sound, but also more accessible and SEO-optimized.

Frequently asked questions

What semantic HTML tags are there in Webflow?

Webflow supports all major semantic HTML tags that comply with modern web standards:

Structural tags: <header>, <footer>, <main>, <section>, <article>, <aside>, <nav>
Content tags: <h1> unto <h6>, <p>, <blockquote>, <figure>, <figcaption>
lists: <ul>, <ol>, <li>
Interactive elements: <a>, <button>, <form>, <input>

In Webflow, you don't select these tags manually in code, but via the element settings in the designer. For example, the “Div Block” element can be placed in a <section> or <article> Day to be converted. These semantic tags improve accessibility for screen readers and help search engines better understand the structure and meaning of your content.

When do I use the custom HTML element in Webflow?

You should use the custom HTML element (embed) in the following cases:

Third party integrations: When external services provide an HTML code snippet (e.g. calendar widgets, social media feeds, booking systems)
Structured data: For Schema.org JSON-LD markup, which provides search engines with additional information (e.g. FAQ schema, breadcrumbs, organization)
Custom JavaScript: If you need special features that Webflow doesn't natively offer
SVG code: For inline SVGs that you want to animate or dynamically manipulate
Complex tables: When you need HTML tables with specific requirements

Important: Use custom HTML sparingly and only when necessary. Native webflow elements are more maintainable, responsive, and SEO-optimized. Custom HTML should be the exception, not the rule. Also pay attention to code security and validate foreign code before integration.

Why is HTML important for search engines and LLMs?

HTML is the language that search engines and large language models (LLMs) read and understand. Clean, semantic HTML is essential for a number of reasons:

For search engines (Google, Bing):

Crawling & indexing: Search engine bots scan HTML structure to capture and index content
Relevance rating: Semantic tags and heading hierarchy signal importance and context
Rich snippets: Structured data in HTML enables advanced search results (star ratings, FAQ boxes)
Core Web Vitals: Clean HTML code influences load times and therefore ranking

For LLMs (ChatGPT, Claude, Perplexity):

Content extraction: LLMs use HTML structure to separate main content from minor elements
Context understanding: Headings and semantic tags help LLMs identify topic hierarchies
Citability: Clear structures make it easier for LLMs to reference your content as a source (AEO)

Invest in clean HTML — it pays off for both classic SEO and modern Answer Engine Optimization.

How do I optimally use the correct HTML headings for AEO?

Answer Engine Optimization (AEO) aims for your content to be used as a source by AI tools such as ChatGPT, Claude, or Perplexity. HTML headings play a central role in this:

Best practices for AEO-optimized headings:

Question-based H2s: Formulate H2 headings as specific questions that users could ask (e.g. “How do I create...? “)
Clear hierarchy: H1 → H2 → H3 without jumps. LLMs use this structure for context understanding
Precise formulations: Avoid vague headings such as “Introduction” — use descriptive titles such as “HTML Basics in Webflow”
Include keywords naturally: Use search terms but prioritize readability
Content provides the answer: The text under the heading should answer the implicit question directly
Featured snippet structure: Use H2 for questions and answer them concisely (40-60 words) in the first paragraph

Combine this heading strategy with structured data (FAQ scheme) for maximum visibility in AI answers and search engines.

Can I also use hidden headings on my Webflow website?

Yes, hidden headings are technically possible and can be useful in certain cases — but should be treated with caution:

Legitimate use cases:

Accessibility: Hidden headings can provide screen readers with structure without affecting the visual design
SEO structure: If the design does not provide a visible H1, a hidden H1 can preserve the semantic structure

Implementation in Webflow:

Use CSS classes with position: absolute; clip: rect (0,0,0.0); position: absolute; instead of display: none or Visibility: Hidden, as the latter are ignored by screen readers.

Important warning:

Google views hidden headings critically if they are used exclusively for keyword manipulation. Hidden headings should never:

Do keyword stuffing
Include irrelevant content
Pursue intent to deceive

recommendation: Only use hidden headings for real accessibility purposes. Visible, well-formulated headings are always the better choice for SEO.

Article

About Webflow, SEO and more