Blog HTML Template 2026

Blog Design — Readability and Return Visits

A blog's primary design metric is time on page — if readers leave before finishing an article, the content has failed to do its job regardless of how good the writing is. Readability engineering: maximum 65 characters per line (line length that prevents eye fatigue on long reads), 1.65–1.75 line height for comfortable paragraph spacing, sufficient paragraph breaks (no wall-of-text blocks exceeding 5 lines), and a font size of at least 17px for body text. Navigation that does not distract from reading — a sticky header with only the logo and subscribe CTA, not a full menu that competes with the content for attention.

List

Post Listing Grid

Card grid: featured image, post title (2 lines max — truncate with ellipsis), excerpt (2–3 lines), author name + avatar, publication date (relative for recent: "3 days ago", absolute for older: "15 Jun 2025"), read time estimate ("8 min read"), and category tag. 3-column grid on desktop, 2-column on tablet, 1-column on mobile. A featured post at full width at the top of the listing page for the most recent or most important article. Pagination or infinite scroll — pagination is better for SEO (each page is independently indexable), infinite scroll is better for engagement (fewer clicks to continue browsing).

Article

Article Page Typography and Layout

Single-column article body: max-width 680px, centred — this is the optimal line length for long-form reading. H1: 32–40px on desktop. H2: 24px for primary section headers. H3: 20px for subsections. Body: 17–18px, line-height 1.7. Pull quotes: larger text (20px) in a left-border-highlight style — for the most quotable sentences. Code blocks: monospace font, slightly darker background, horizontal scroll for long lines. Images: full-width (up to 680px content width) with optional caption below. A progress bar at the top of the page shows reading progress — optional but increases engagement signals.

TOC

A table of contents generated from the article's H2 and H3 headings — linked to anchor IDs on each heading. For articles over 1,500 words: a TOC is standard practice. Position: sticky in a right sidebar on desktop (visible as the reader scrolls), collapsible at the top of the article on mobile. The TOC serves two conversion purposes: it helps readers navigate to the section most relevant to their query (reducing bounce from visitors who came from a search for a specific sub-topic), and it signals article depth and quality to visitors evaluating whether to invest time reading.

Schema

Article Schema and SEO

Article schema for each post: datePublished, dateModified, author (Person or Organization), headline, description, image. BreadcrumbList: Home → Blog → Category → Post title. Canonical URL on every article — especially important if the blog has tag pages, category pages, or paginated archives that might create duplicate content. Open Graph and Twitter Card meta tags: og:title, og:description, og:image (1200×630px) — for accurate social media previews when articles are shared. Next/prev link tags for paginated article series. hreflang if publishing in multiple languages.

Blog Template — Performance and SEO Checklist

Featured image: WebP format, 1200×630px, lazy loaded below the fold
Article schema with datePublished, author, and headline — enables rich results
Table of contents on articles over 1,500 words — anchor-linked H2/H3s
Reading time estimate ("8 min read") — sets expectation, reduces bounce
Related posts section — 3 articles that keep the reader on site
Email subscribe form within the article body (around the 50% mark)
Social share buttons: Twitter, LinkedIn, copy-link — floating sidebar on desktop
Canonical URL set correctly — especially for paginated or tag-archive pages

Get All 180+ Templates — $35 One-Time

Commercial licence · No subscription · Instant download · Lifetime updates

Download All 180+ Templates — $35

One payment · Own the files forever · Used by 500+ agencies worldwide

Frequently Asked Questions

What should a blog HTML template include?

A blog template needs: a post listing page with cards (image, title, excerpt, author, date, read time), a single article page with optimal typography (17px+ body, 65-char line length, 1.7 line height), a table of contents for long articles, author bio section, related posts, a mid-article email subscribe form, social share buttons, category archive pages, and Article schema markup. Readability and the email subscribe form are the two most impactful elements for long-term blog success — readable articles get shared, email subscribers return.

How wide should blog article text be for readability?

65–75 characters per line is the research-backed optimal reading width for comfortable long-form reading. This translates to approximately 600–720px of content width at 17–18px font size. A maximum content width of 680px is the standard for article bodies. Side margins push the content to the centre on wide screens. On mobile: the full viewport width with 16–20px horizontal padding. The risk of too-narrow content (under 50 chars/line): readers make too many line-break eye movements. Too wide (over 80 chars/line): readers lose their place when moving from one line to the next.

How do I add a table of contents to an HTML blog post?

Add an id attribute to each heading in the article:

Introduction

. Build the TOC as a nav element with anchor links: . To generate automatically with JavaScript: const headings = document.querySelectorAll('article h2, article h3'); const toc = document.getElementById('toc'); headings.forEach(h => { const li = document.createElement('li'); const a = document.createElement('a'); a.href = '#' + h.id; a.textContent = h.textContent; li.appendChild(a); toc.appendChild(li); }). Use slugify logic to generate heading IDs from the heading text if not set manually.

What is Article schema and how do I add it to a blog post?

Article schema marks up a blog post with structured data so Google understands the content type, author, and dates — enabling rich results (author bylines in search, 'Top Stories' carousel eligibility). Add to the blog post page head: { '@type':'Article', 'headline':'Post Title', 'description':'Post excerpt...', 'image':'https://domain.com/image.jpg', 'datePublished':'2026-06-01T09:00:00Z', 'dateModified':'2026-06-15T11:00:00Z', 'author':{ '@type':'Person','name':'Author Name' }, 'publisher':{ '@type':'Organization','name':'Site Name','logo':{ '@type':'ImageObject','url':'https://domain.com/logo.png' } } }. Test with Google's Rich Results Test tool.

How many blog HTML templates are in UIXDraft?

UIXDraft includes 180+ general-purpose HTML/CSS business templates — not built specifically for blog template, but plain HTML/CSS you can freely edit and adapt with your own services, pricing and content. One $35 purchase, commercial licence.

HTML Templates for Blogs and Content Sites