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.

Development
AEO
Webflow HTML Guide

HTML: The foundation of every website

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

An analogy for a better understanding:
Think of a website as a human body: HTML is the skeleton — it provides the basic structure and form. CSS is the outer appearance Like skin, hair and nails — it makes everything beautiful and appealing. JavaScript is the muscles and ligaments — they provide movement and interactivity.

Without HTML, the modern web wouldn't be possible. It is the foundation upon which CSS (for design) and JavaScript (for interactivity) are built. Clean, semantic HTML is essential for SEO and accessibility.

HTML is an integral part of Webflow

Webflow automatically generates HTML code in the background as you design visually. Every element that you drag onto the canvas — be it 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, but work visually. Webflow takes care of the technical implementation and ensures that the generated code complies with modern web standards. At the same time, you have full control over the semantic structure of your site.

How to edit the HTML in Webflow

In Webflow, you don't edit HTML directly in the code editor, but via the visual element settings. Each element has specific properties that you can adjust in the right panel.

There are several options available for advanced adjustments:

  • Item settings: Change HTML tags and IDs directly in the element settings panel
  • Custom HTML element: Integrate complex HTML directly into your site with the embed element
  • Site settings custom code: Add custom code in the head or footer in site settings or at page level

Correct HTML <body>structure in Webflow

A clean HTML structure is the backbone of every professional website. It consists of semantic landmarks that logically structure the structure of your site and make it understandable to both search engines and screen readers.

The main structural elements:

  • <header>: Header area with logo, navigation and important information
  • <nav>: Site's main navigation menu
  • <main>: The main content of the page — your sections belong here
  • <section>: Thematically related 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 layout in Webflow:

A correctly structured Webflow page follows this pattern: The <header> includes navigation (<nav>). Among them is that <main>-Element that all <section>-Encloses areas. Optionally, a <aside> used for secondary content. In the end, there is <footer>.
‍

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

More about the HTML structure: A detailed explanation of HTML layouts and semantic elements can be found at W3Schools HTML Layout.

The ideal structure of headings in Webflow

Headings (H1-H6) structure 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: H1 describes the main topic of the page
  • Logical hierarchy: H2 follows H1, H3 follows H2 — don't skip any levels
  • Significant wording: Headings should describe the content precisely
  • Integrate keywords: Use relevant search terms in headings, of course
  • Not just for design: Choose heading levels by structure, not by visual size

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

Hidden headings for better accessibility

Hidden headings are a powerful tool to improve the accessibility of your website without affecting the visual design. They allow screen reader users to navigate better, while sighted visitors don't see any additional headlines.

When do hidden headings make sense?

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

Correct 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.

Practical example from my work:

I regularly use hidden headings in the footer of my Webflow projects. That's where I put H2 element with the text “footer” one that is only visible to screen readers. The implementation:

  1. Create an H2 element with the text “footer” in the footer area
  2. Add a CSS class (e.g. “sr-only” for Screen Reader Only)
  3. Define the class with position: absolute; left: -10000px; in custom code

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

Important warning

Google views hidden headings critically if they are used exclusively for keyword manipulation. Hidden headings should never be used for keyword stuffing, irrelevant content, or intent to deceive. Only use them for real accessibility purposes.

The semantic tags in Webflow

HTML5 semantic tags give meaning to the code. Instead of just <div>-To use elements, do you use meaningful tags such as <header>, <nav>, <article> or <footer>.

Webflow supports a wide range of semantic tags:

  • Section: Uses <section> for thematic areas
  • Header/footer: For head and foot areas
  • Nav: For navigation items
  • Article: For self-contained content such as blog articles
  • Aside: For secondary content, such as 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

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

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

Important: Custom HTML is only visible after publishing. In the designer, you only see a placeholder. Make sure that your code is valid and doesn't contain any security vulnerabilities.

For dynamic content, you can also use CMS fields in custom HTML to generate personalized code per collection item.

The difference between links and buttons

A common misconception: The Webflow “button” element is not <button> in the HTML sense, but a link (<a>-day) with button styling.

Semantic difference:

  • Links (<a>): Lead to another page or area. They have a hrefattribute and are used for navigation.
  • Buttons (<button>): Trigger actions, such as opening a modal, submitting a form, or launching a JavaScript function. You're not navigating away from the page.

Why is that important?

  • 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 function of the element
  • Keyboard navigation: Links are created with Enter activated, buttons with Enter and Space

Practical example: Real buttons with custom HTML

I regularly use the custom HTML element to real <button>-Elements to create when no navigation should take place. Typical use cases:

  • Open/close modals or overlays
  • Switch tabs or accordion areas
  • trigger 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 the accessibility of your website.
‍

Most common HTML mistakes I see

In my work as a Webflow developer, I see the same structural errors over and over again, which have a negative impact on accessibility and SEO performance. Here are the four most common mistakes:

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

Many Webflow projects use a <section>-Element for the foot area. That is semantically wrong. The footer should always <footer>Use the tag so that screen readers and search engines can correctly identify the area as a footer area.

Wrong: <section class="footer">...</section>
That's right: <footer>...</footer>

2. Sections don't have a <section> tag, only <div> tags

The most common mistake of all: Content areas are considered simple <div>-Blocks instead of as <section>-Structured elements. As a result, the page loses its semantic structure and screen readers cannot recognize the structure.

Wrong: <div class="hero">...</div>
That's right: <section class="hero">...</section>

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

A critical structural flaw: The content areas (<section>) are located directly in <body>, without <main>element to be surrounded. that <main>-Tag is essential to identify the main content of the page and to separate it from the header and footer.

Wrong:

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

That's right:

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

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

Sometimes the <footer> erroneously within the <main>-Elements placed. However, the footer belongs on the same level as <header> and <main> — namely as a direct child of <body>-Elements.

Wrong:

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

That's right:

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

Conclusion: These four mistakes are easy to avoid if you consciously choose the right HTML tags in Webflow. Use the element settings to convert div blocks into semantic tags such as <section>, <main> and <footer> to transform. This not only makes your website more technically correct, 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:

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

  1. Question-based H2s: Formulate H2 headings as specific questions that users could ask (e.g. “How do I create...? “)
  2. Clear hierarchy: H1 → H2 → H3 without jumps. LLMs use this structure for context understanding
  3. Precise formulations: Avoid vague headings such as “Introduction” — use descriptive titles such as “HTML Basics in Webflow”
  4. Include keywords naturally: Use search terms but prioritize readability
  5. Content provides the answer: The text under the heading should answer the implicit question directly
  6. 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.