Modern HTML Templates in 2026: Header, Hero, Services, FAQ, and Contact Patterns Built for Ranking
A template is not a design. It is a structure—a set of HTML patterns that define where content goes, how sections relate to each other, and what machines can understand about the page. The visual appearance is CSS. The structure is HTML. And the structure matters more than most people realise, because search engines, screen readers, and browsers all use HTML semantics to interpret the page. A <section> with a heading communicates differently than a <div> with a class name. A <nav> tells crawlers where the navigation is. An FAQ section using <details> and <summary> elements gives Google a structured answer to surface in search results.
These patterns are the sections that appear on almost every small business or portfolio site: header with navigation, hero section, services or features grid, FAQ, and contact form. Each one is written for 2026—using current semantic HTML, accessibility requirements from WCAG 2.2, and markup patterns that search engines reward. Copy them, adapt them, put your content in. The structure is the part that is hard to get right; the styling is the part that is easy to change.
Pattern 1: The Header
The header is the first thing every user encounters and the first thing search engine crawlers parse. A well-structured header contains a site identifier (logo or site name), primary navigation, and optionally a call-to-action. It must include a skip link for keyboard users.
<a href="#main-content" class="skip-link">Skip to main content</a>
<header class="site-header">
<a href="/" class="site-logo" aria-label="Homepage">
<img src="/images/logo.svg" alt="Company Name" width="180" height="40">
</a>
<nav aria-label="Main navigation">
<ul role="list">
<li><a href="/">Home</a></li>
<li><a href="/features/">Features</a></li>
<li><a href="/templates/">Templates</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
<a href="/download/" class="cta-button">Download Free</a>
</header>
What Makes This Pattern Work
Skip link first. The skip link is the first focusable element on the page, before the logo or navigation. Keyboard users who do not need the nav can jump directly to content. The WCAG 2.2 checklist covers the implementation details and styling for skip links.
<header> landmark. Screen readers announce this as a banner landmark, letting users jump to it directly. Do not use <div class="header">—the semantic element provides meaning that the class name does not.
<nav> with aria-label. The aria-label distinguishes this navigation from any other <nav> on the page (footer navigation, sidebar navigation). If you only have one <nav>, the label is optional but still good practice.
Logo with aria-label. The logo link goes to the homepage. The aria-label="Homepage" overrides the image alt text for the link’s accessible name, making it clear that the link’s purpose is homepage navigation, not just “Company Name.”
Explicit image dimensions. The width and height on the logo image prevent layout shift during page load. The browser reserves space before the image loads.
Sticky Header Considerations
If you make the header sticky with position: sticky, add scroll-padding-top to prevent it from obscuring focused elements or anchor-linked content:
.site-header {
position: sticky;
top: 0;
z-index: 10;
background: #fff;
}
html {
scroll-padding-top: 80px; /* match header height */
}
Pattern 2: The Hero Section
The hero section establishes what the page is about. It typically contains the <h1>, a supporting paragraph, and one or two call-to-action links. On the homepage, the hero sets the topic for the entire site. On inner pages, it introduces the specific page content.
<section class="hero" aria-labelledby="hero-heading">
<div class="hero-content">
<h1 id="hero-heading">Build Beautiful Websites Without Writing Code</h1>
<p>
A desktop HTML editor for Windows that gives you visual design tools
with clean, standards-compliant output.
</p>
<div class="hero-actions">
<a href="/download/" class="btn btn-primary">Download Free Trial</a>
<a href="/features/" class="btn btn-secondary">See Features</a>
</div>
</div>
<div class="hero-image">
<img
src="/images/hero/editor-screenshot.jpg"
alt="DFM2HTML editor interface showing a website being designed visually"
width="800"
height="500"
loading="eager"
fetchpriority="high"
>
</div>
</section>
What Makes This Pattern Work
<section> with aria-labelledby. This creates a labelled landmark. Screen reader users navigating by landmarks hear “Build Beautiful Websites Without Writing Code, region”—immediately understanding what this section contains.
Single <h1>. Every page gets one <h1>. The hero is the natural place for it because it introduces the page’s primary topic. Search engines weight the <h1> heavily for page-topic relevance.
loading="eager" and fetchpriority="high" on the hero image. The hero image is typically the Largest Contentful Paint element. Explicitly marking it as high-priority tells the browser to fetch it immediately rather than waiting for lazy-loading heuristics. Do not use loading="lazy" on above-the-fold images—it delays LCP.
Call-to-action links, not buttons. These navigate to other pages, so they are <a> elements, not <button> elements. The distinction matters for accessibility: links navigate, buttons perform actions.
Responsive Hero with Container Queries
If the hero appears in a layout region that is not full-width—inside a content area beside a sidebar, for example—wrap it in a container query context and let the layout adapt to the available space, as covered in the container queries pattern library:
.hero-wrapper {
container-type: inline-size;
}
.hero {
display: flex;
flex-direction: column;
gap: 2rem;
}
@container (min-width: 700px) {
.hero {
flex-direction: row;
align-items: center;
}
.hero-content { flex: 1; }
.hero-image { flex: 1; }
}
Pattern 3: The Services / Features Grid
A grid of services or features is on nearly every business site. The pattern needs semantic markup that communicates what each item is, and optional Schema.org structured data that helps search engines understand the page’s offerings.
<section class="services" aria-labelledby="services-heading">
<h2 id="services-heading">What We Offer</h2>
<p>Three core services to get your business online.</p>
<div class="services-grid">
<article class="service-card">
<div class="service-icon" aria-hidden="true">
<svg><!-- icon SVG --></svg>
</div>
<h3>Web Design</h3>
<p>
Custom designs built with clean HTML and CSS.
Responsive layouts that work on every device.
</p>
<a href="/services/design/">Learn more<span class="visually-hidden"> about web design</span></a>
</article>
<article class="service-card">
<div class="service-icon" aria-hidden="true">
<svg><!-- icon SVG --></svg>
</div>
<h3>Hosting</h3>
<p>
Fast, reliable hosting with automatic backups
and free SSL certificates.
</p>
<a href="/services/hosting/">Learn more<span class="visually-hidden"> about hosting</span></a>
</article>
<article class="service-card">
<div class="service-icon" aria-hidden="true">
<svg><!-- icon SVG --></svg>
</div>
<h3>SEO</h3>
<p>
Technical SEO audits and on-page optimisation
to improve your search rankings.
</p>
<a href="/services/seo/">Learn more<span class="visually-hidden"> about SEO</span></a>
</article>
</div>
</section>
What Makes This Pattern Work
<article> for each service. Each service is a self-contained piece of content. Using <article> rather than <div> communicates this to assistive technology and provides better document outline parsing.
aria-hidden="true" on decorative icons. The icons are visual decoration alongside descriptive text. Hiding them from screen readers avoids redundant announcements.
Visually hidden link context. The “Learn more” links all look the same visually, but screen reader users hear “Learn more about web design,” “Learn more about hosting,” etc. The .visually-hidden span provides context without cluttering the visual design.
Heading hierarchy. The section heading is <h2>, service headings are <h3>. No levels skipped.
Adding Schema Markup
For services that Google might feature in search results, add JSON-LD structured data in a <script> tag at the bottom of the section or in the <head>:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ItemList",
"name": "Our Services",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@type": "Service",
"name": "Web Design",
"description": "Custom designs built with clean HTML and CSS.",
"url": "https://example.com/services/design/"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@type": "Service",
"name": "Hosting",
"description": "Fast, reliable hosting with automatic backups.",
"url": "https://example.com/services/hosting/"
}
}
]
}
</script>
This does not guarantee rich results, but it gives Google structured information about your services. For a small business site, this is low effort with potential upside.
CSS Grid for the Layout
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
The auto-fit with minmax pattern creates a responsive grid without media queries. Three columns on wide viewports, two on medium, one on narrow. Pair with container queries on the cards themselves for internal layout adaptation.
Pattern 4: The FAQ Section
FAQ sections serve double duty: they answer common questions for visitors and provide structured content that Google can surface as rich results. The markup pattern matters significantly here.
Using <details> and <summary>
<section class="faq" aria-labelledby="faq-heading">
<h2 id="faq-heading">Frequently Asked Questions</h2>
<details>
<summary>How long does a website project take?</summary>
<div class="faq-answer">
<p>
A typical five-page brochure site takes two to three weeks
from initial design to launch. Complex sites with custom
functionality take longer.
</p>
</div>
</details>
<details>
<summary>Do you provide hosting?</summary>
<div class="faq-answer">
<p>
Yes. We offer managed hosting plans starting at £10 per month,
including automatic backups, SSL certificates, and 99.9% uptime.
</p>
</div>
</details>
<details>
<summary>Can I edit my site after launch?</summary>
<div class="faq-answer">
<p>
Absolutely. Sites built with DFM2HTML are standard HTML files.
You can edit them in any text editor or continue using the
DFM2HTML visual editor.
</p>
</div>
</details>
</section>
The <details> and <summary> elements are natively interactive—they expand and collapse without JavaScript. Keyboard users can toggle them with Enter or Space. Screen readers announce them as disclosure widgets with expanded/collapsed state. This is the most accessible accordion implementation available.
Adding FAQPage Structured Data
Google recognises FAQPage schema and may display your questions and answers directly in search results:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "How long does a website project take?",
"acceptedAnswer": {
"@type": "Answer",
"text": "A typical five-page brochure site takes two to three weeks from initial design to launch."
}
},
{
"@type": "Question",
"name": "Do you provide hosting?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. We offer managed hosting plans starting at £10 per month, including automatic backups, SSL certificates, and 99.9% uptime."
}
},
{
"@type": "Question",
"name": "Can I edit my site after launch?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Sites built with DFM2HTML are standard HTML files. You can edit them in any text editor or continue using the DFM2HTML visual editor."
}
}
]
}
</script>
Keep the JSON-LD answers concise—Google truncates long answers in rich results. Match the JSON-LD text to the visible page content; mismatches can result in manual actions.
Styling the FAQ
details {
border-bottom: 1px solid #e5e7eb;
padding: 1rem 0;
}
summary {
cursor: pointer;
font-weight: 600;
font-size: 1.125rem;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
summary::after {
content: '+';
font-size: 1.5rem;
transition: transform 0.2s ease;
}
details[open] summary::after {
content: '−';
}
.faq-answer {
padding: 0.75rem 0 0.5rem;
color: #4b5563;
}
The list-style: none on summary removes the default disclosure triangle, replaced by the + / − indicator via ::after. The details[open] selector applies when the item is expanded.
Pattern 5: The Contact Section
The contact section contains either a form, contact details, or both. The form must be accessible—labelled fields, error handling, and appropriate input types.
<section class="contact" aria-labelledby="contact-heading">
<h2 id="contact-heading">Get in Touch</h2>
<p>Have a question or ready to start a project? Send us a message.</p>
<form action="/api/contact" method="post" novalidate>
<div class="form-group">
<label for="contact-name">Your Name</label>
<input
type="text"
id="contact-name"
name="name"
required
autocomplete="name"
aria-required="true"
>
</div>
<div class="form-group">
<label for="contact-email">Email Address</label>
<input
type="email"
id="contact-email"
name="email"
required
autocomplete="email"
aria-required="true"
>
</div>
<div class="form-group">
<label for="contact-message">Message</label>
<textarea
id="contact-message"
name="message"
rows="5"
required
aria-required="true"
></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</section>
What Makes This Pattern Work
<label> elements with for attributes. Every input is explicitly linked to its label. Clicking the label focuses the input. Screen readers announce the label when the input receives focus.
autocomplete attributes. The name and email fields include autocomplete hints. Browsers use these to autofill correctly, and WCAG 2.1 (1.3.5) requires them for fields that collect personal information.
aria-required="true". Supplements the HTML required attribute by ensuring screen readers announce the field as required. Some assistive technologies rely on the ARIA attribute rather than the native one.
novalidate with custom validation. The novalidate attribute disables browser default validation UI (which varies wildly between browsers and is often inaccessible). Instead, implement validation in JavaScript with proper error messages linked via aria-describedby, as described in the accessibility checklist.
<button type="submit"> instead of <input type="submit">. The <button> element is more flexible for styling and can contain child elements (icons, spans). It also has consistent keyboard behaviour across browsers.
Contact Details Alongside the Form
If you include contact information—address, phone, email—use semantic markup:
<address>
<p>Email: <a href="mailto:hello@example.com">hello@example.com</a></p>
<p>Phone: <a href="tel:+441234567890">01onal 234 567890</a></p>
<p>123 High Street, London, EC1A 1BB</p>
</address>
The <address> element signals contact information for the nearest <article> ancestor or, if there is no <article>, for the page. Search engines use this to associate contact details with the business.
Pattern 6: The Footer
The footer is often an afterthought, but it serves important roles: secondary navigation, legal links, and reinforcing site identity. A well-structured footer also gives search engines additional internal link signals.
<footer class="site-footer">
<div class="footer-grid">
<div class="footer-about">
<p class="footer-brand">Company Name</p>
<p>Building fast, accessible websites since 2010.</p>
</div>
<nav aria-label="Footer navigation">
<h3>Quick Links</h3>
<ul role="list">
<li><a href="/features/">Features</a></li>
<li><a href="/templates/">Templates</a></li>
<li><a href="/download/">Download</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
<nav aria-label="Legal">
<h3>Legal</h3>
<ul role="list">
<li><a href="/privacy/">Privacy Policy</a></li>
<li><a href="/terms/">Terms of Service</a></li>
</ul>
</nav>
</div>
<div class="footer-bottom">
<p>© 2026 Company Name. All rights reserved.</p>
</div>
</footer>
What Makes This Pattern Work
Separate <nav> elements with aria-label. The footer has its own navigation, distinct from the header. Each <nav> gets a descriptive label so screen reader users can distinguish them when navigating by landmarks. “Footer navigation” and “Legal” communicate what each section contains.
<footer> landmark. The <footer> element is automatically announced as a contentinfo landmark by screen readers. Users can jump directly to it from anywhere on the page. Do not nest <footer> inside <main>—it belongs as a direct child of <body> to serve as the page-level footer landmark.
Heading hierarchy maintained. The footer headings are <h3> if your last main-content heading was <h2>. If the footer is complex enough to warrant its own structure, keep the heading levels consistent with the document outline.
Internal links for SEO. Footer links that point to your key pages reinforce internal link structure. Search engines see these links on every page, which distributes link equity across your site. Do not stuff dozens of links in the footer—include the ones that matter for navigation and site structure.
Footer Grid Layout
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
padding: 3rem 1.5rem;
}
.footer-bottom {
border-top: 1px solid #e5e7eb;
padding: 1.5rem;
text-align: center;
font-size: 0.875rem;
color: #6b7280;
}
The same auto-fit with minmax pattern used in the services grid. Three columns on wide viewports, stacked on narrow. Consistent grid behaviour across sections.
SEO Considerations Across All Patterns
These HTML patterns are not SEO tricks—they are semantic markup that happens to align with what search engines reward. The distinction matters. Google’s algorithms parse HTML structure to understand page content. When that structure is semantically correct, the algorithms extract meaning more accurately. When the structure is meaningless <div> elements with visual-only class names, the algorithms have less to work with.
Specific SEO benefits of these patterns:
- Heading hierarchy signals content structure and topic hierarchy to crawlers. The
<h1>establishes the page topic. Subsequent headings create subtopics. - Schema.org structured data provides explicit machine-readable information about services, FAQs, and business details. Rich results in search are the visible benefit.
- Internal linking through navigation, footer, and call-to-action links distributes PageRank and helps crawlers discover all pages.
- Semantic landmarks help crawlers identify the main content versus navigation and boilerplate. Google’s algorithms can focus on
<main>content for ranking signals. - Image optimisation with explicit dimensions prevents layout shift, and descriptive alt text gives images a chance to appear in image search results.
None of these require any special tooling. They are properties of well-written HTML. A site built with these patterns ranks better not because of tricks but because search engines can understand it clearly.
How DFM2HTML Templates Use These Patterns
DFM2HTML’s template gallery includes starting designs that implement these structural patterns. Template 1 uses a classic header-hero-content-footer layout. Template 2 adds a sidebar variation. Both generate clean, semantic HTML with the landmark elements, heading hierarchy, and form structure described in this guide.
The features page details the editor’s output: no inline styles, no presentational markup, no <div> wrappers where semantic elements belong. When you customise a template in DFM2HTML, the structural patterns remain intact—you change the content and styling, not the underlying markup quality. If you want to start from scratch rather than a template, download the editor and build up from a blank page using these patterns as your structural reference.
Putting It All Together
A complete page using all five patterns follows this document outline:
<html lang="en">
<head>
<!-- meta, title, stylesheet, structured data -->
</head>
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<header>
<!-- logo, nav, CTA -->
</header>
<main id="main-content">
<section class="hero">
<h1>...</h1>
</section>
<section class="services">
<h2>...</h2>
<!-- service cards -->
</section>
<section class="faq">
<h2>...</h2>
<!-- details/summary items -->
</section>
<section class="contact">
<h2>...</h2>
<!-- form -->
</section>
</main>
<footer>
<!-- footer nav, copyright -->
</footer>
</body>
</html>
Headings descend from <h1> to <h2> to <h3> without skipping. Landmarks are clearly defined. Each section is labelled via aria-labelledby. Interactive elements are keyboard-accessible. Images have dimensions specified. The hero image is prioritised for fast LCP.
This structure passes automated accessibility audits, gives search engines clear signals about page content, and provides a solid foundation for any visual design you apply with CSS. The markup is the skeleton that makes everything else work. Get it right, and the performance, accessibility, and ranking benefits follow naturally.