News Website HTML Template 2026

News Website Template — Speed and Scannability

News readers scan before they read. A news website template must be optimized for scanning first and reading second. The homepage communicates the hierarchy of stories through visual weight: lead story (large), supporting stories (medium), brief items (small). Readers assess whether a story is worth clicking in under 1 second — headline typography and thumbnail quality are the two design variables that determine click-through from the homepage to article pages.

Homepage

News Homepage Grid

Lead story: full-width hero with headline, byline, and image. Featured stories row: 3-column grid with smaller images. Recent articles: card grid 4-column. Breaking news ticker at the top. Category navigation bar. Trending sidebar on desktop. The visual hierarchy must communicate story importance instantly — the lead story gets 60% of the visual weight, supporting stories 25%, and brief items 15%.

Article

Article Page Layout

Headline (h1, large), byline with author photo + name + date + read time, featured image with caption, article body (optimal reading typography: 17px, 1.7 line height, 680px max-width), inline pull quotes, related articles section at the end, share buttons, and author bio. News article SEO: Article schema, datePublished, author, headline, image. AMP-compatible HTML if Google News submission is planned.

Category and Tag Pages

Category index pages: Politics, Technology, Sport, Entertainment, Business, Local — each showing the latest articles in that category. Tag pages for trending topics. Category pages build topical authority for each subject area and rank for "[category] news [location]" searches. A category structure also helps readers who follow specific topics navigate without depending on the homepage.

Ads

Ad Slot Containers

Google AdSense or direct ad slots: leaderboard (728×90) in the header, rectangle (300×250) in the sidebar, in-article (320×50 mobile, 728×90 desktop) after the third paragraph, and footer banner. Ad containers with defined sizes prevent layout shift when ads load. A news site's monetization depends on ad placement — well-positioned slots that do not disrupt reading generate more revenue than intrusive placements that increase bounce rate.

News Website — Technical SEO Checklist

Article schema: @type NewsArticle, datePublished, author, image, publisher
XML sitemap with all article URLs — news sitemap for Google News
Open Graph + Twitter Card meta tags for social sharing previews
Canonical URL on every article — prevents duplicate content from tag pages
Core Web Vitals: LCP under 2.5s — compress article images to WebP
Pagination with rel=prev/next for multi-page category archives
Breadcrumbs on every article: Home > Category > Article title
Author profile pages with biography for E-E-A-T (expertise signals)

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 an HTML news website template include?

A news website template needs: a homepage with lead story hero and article grid, category navigation, breaking news ticker, individual article page template with optimal reading typography, category and tag index pages, author profile pages, search functionality, comment section placeholder, and ad slot containers. Article schema markup and a news-specific XML sitemap are essential technical SEO elements for Google News submission.

How do I build a news website as a static HTML site?

Use Eleventy (11ty) or Hugo as a static site generator — both build news sites from Markdown article files at very high speed (Hugo: 1,000 articles in under 1 second). Articles are written as Markdown with YAML frontmatter (title, date, author, category, tags, image). The SSG generates the homepage grid, category pages, tag pages, and sitemap automatically from the article metadata. Deploy to Cloudflare Pages for free with global CDN.

How do I submit a news website to Google News?

Submit via Google Publisher Center (publishercenter.google.com). Requirements: original reporting or curated news content, clear publication dates on all articles, author bylines, About Us and Contact pages, Editorial Guidelines page, no deceptive content or clickbait. Use NewsArticle schema markup on every article. A Google News XML sitemap submitted to Google Search Console accelerates indexing of new articles. Approval typically takes 2–4 weeks.

How do news websites make money with HTML templates?

Google AdSense: embed ad unit code in pre-defined ad slot containers. Direct advertising: sell leaderboard and sidebar slots directly to local businesses. Sponsored content: labeled native articles from local advertisers. Newsletter subscriptions: ConvertKit email capture integrated in the sidebar and article footer. Membership: Memberful or Patreon paywall for premium content. Local news sites that combine AdSense with direct local advertising typically achieve higher RPMs than pure programmatic alone.

How many news website HTML templates are in UIXDraft?

UIXDraft includes 180+ general-purpose HTML/CSS business templates — not built specifically for news website, but plain HTML/CSS you can freely edit and adapt with your own services, pricing and content. One $35 purchase, commercial licence — use for local news sites, industry newsletters, and niche online publications.

HTML Templates for News Websites & Online Magazines