HTML Resources
Everything you need to write, generate, clean up and reference HTML in one place — 32 free tools for markup, meta and structured data, plus fast, practical cheat sheets for tags, semantic structure, forms, attributes, entities, SEO meta tags and HTTP status codes. No sign-up, no paywall.
HTML Tools
Generate, convert, clean up and analyse HTML — all free and running right in your browser.
Generators & Builders
Generate meta tags for HTML pages.
JSON-LD Schema Markup GeneratorGenerate JSON-LD schema markup for Article, Product, LocalBusiness, FAQ, Event, Recipe, Review, Person, Org…
Breadcrumb Schema GeneratorGenerate JSON-LD breadcrumb schema markup for rich results.
FAQ Schema BuilderConvert Q/A text into FAQPage JSON-LD schema and HTML.
Table of Contents GeneratorGenerate a table of contents from HTML or Markdown headings — nested HTML and Markdown output with clean an…
Open Graph Image GeneratorCreate perfect OG images for social sharing. 6 templates, custom text, logo upload, 1200×630px. Perfect for…
Favicon GeneratorGenerate favicons in all sizes from your image. Get PNG files and HTML code.
Formatters, Minifiers & Converters
Minify HTML to shrink file size, or beautify messy HTML into clean, readable code — with live byte savings.…
Markdown to HTML ConverterConvert basic Markdown into clean HTML.
Markdown Table GeneratorBuild Markdown tables visually — fill a grid, set column alignment, or paste CSV/Excel data to import — the…
Text to Clean HTML ParagraphsConvert plain text into clean <p> paragraphs and HTML-friendly output.
CSS Minifier & BeautifierMinify CSS to shrink file size, or beautify minified/messy CSS into clean code — with live byte savings. Ru…
JavaScript Minifier & BeautifierSafely minify JavaScript (comments + whitespace) or beautify messy code — preserves strings, regex, and tem…
Encoders & Entities
Encode and decode HTML entities.
URL Encoder/DecoderEncode and decode URLs.
Base64 Encoder/DecoderEncode and decode Base64 strings.
Image to Base64 EncoderConvert an image (PNG, JPG, GIF, WebP, SVG) to a Base64 data URI — drag and drop, preview, and copy as a da…
JSON Escape / UnescapeEscape text into a safe JSON string, or unescape a JSON string back to plain text — quotes, tabs, and newli…
Analysis & Validation
Detect invalid HTML nesting patterns and common markup mistakes.
HTML Tag Distribution AnalyzerAnalyze a webpage and count HTML tags (headings, links, images, lists, tables) for quick structure insights.
DOM Size AnalyzerAnalyze DOM size and detect excessive HTML elements that can slow down your website.
Text to HTML Ratio CalculatorCalculate text to code ratio. Get grade and optimization tips.
HTML Payload AnalyzerCheck raw HTML size and compression to improve speed and SEO.
View Source CodeView HTML source code of any webpage.
HTTP Response Headers ViewerView every HTTP response header a URL returns — status code, HTTP version, full redirect chain, and notes o…
HTTP Status Code MapperMap HTTP status codes across redirects and final URLs to identify SEO and technical issues.
Meta, Social & Structured Data
Extract and analyze meta tags from web pages.
Meta Tag Length OptimizerOptimize meta title and description length with pixel-based SERP preview.
Social Share Preview (Open Graph & Twitter Card)See how your link looks when shared on Facebook, X (Twitter), and LinkedIn — previews built from your Open …
OpenGraph Completeness CheckerValidate Open Graph meta tags and ensure complete social sharing previews.
Schema ValidatorValidate JSON-LD schema markup. Check syntax, required fields, data types, and Google rich results eligibil…
Schema Presence DetectorDetect which schema.org structured data types are used on a page.
HTML5 Boilerplate
Every modern page starts here — a valid document skeleton with the right meta tags for encoding, responsiveness and SEO.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page title — Brand</title>
<meta name="description" content="A concise, 150-char summary.">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, world</h1>
<script src="main.js"></script>
</body>
</html>charset and viewport tags must appear early in the <head>. Missing the viewport tag is the most common reason a site looks zoomed-out on mobile.Semantic Structure
Semantic landmarks describe the meaning of a region — better for accessibility and SEO than nesting div after div.
| Element | Represents |
|---|---|
<header> | Introductory content or a logo/nav bar |
<nav> | A block of navigation links |
<main> | The primary content (one per page) |
<article> | Self-contained, reusable content |
<section> | A thematic grouping with a heading |
<aside> | Tangential content (sidebars) |
<footer> | Footer for its nearest section/page |
<figure> / <figcaption> | Media with a caption |
<body>
<header>Logo + nav</header>
<main>
<article>
<h1>Post title</h1>
<section>…</section>
</article>
<aside>Related links</aside>
</main>
<footer>© 2026</footer>
</body>Forms & Inputs
Forms collect user input. Pick the right input type to get the correct keyboard, validation and accessibility for free.
| Input type | Best for |
|---|---|
text | General single-line text |
email | Email addresses (validates format) |
password | Masked secret entry |
number | Numeric values with steppers |
tel / url | Phone numbers / web addresses |
date / time | Native date & time pickers |
checkbox / radio | Multiple / single choice |
file | Uploading files |
<form action="/subscribe" method="post">
<label for="email">Email</label>
<input id="email" type="email" name="email" required>
<button type="submit">Sign up</button>
</form><label> using matching for and id. It is essential for screen readers and lets users tap the label to focus the field.Global Attributes
Global attributes can be used on any HTML element to identify, configure or enhance it.
| Attribute | What it does | Example |
|---|---|---|
id | Unique identifier for an element | id="hero" |
class | One or more style/JS hooks | class="btn primary" |
style | Inline CSS (use sparingly) | style="color:red" |
title | Advisory tooltip text | title="Save" |
data-* | Custom data for scripts | data-id="42" |
hidden | Hides the element | <div hidden> |
aria-* | Accessibility information | aria-label="Close" |
role | Semantic role for assistive tech | role="dialog" |
Check forms for safe attributes with the Form Security Attribute Checker.
HTML Entities & Character Codes
Entities let you show reserved or special characters as text instead of having the browser parse them as markup.
| Character | Entity | Name |
|---|---|---|
| < | < | Less-than |
| > | > | Greater-than |
| & | & | Ampersand |
| " | " | Double quote |
| · | | Non-breaking space |
| © | © | Copyright |
| — | — | Em dash |
| → | → | Right arrow |
| ★ | ★ | Star (numeric code) |
Convert text both ways with the HTML Entity Encoder.
SEO & Social Meta Tags
These tags in your <head> control how pages appear in search results and when shared on social platforms.
<!-- Core SEO -->
<title>Page title — Brand</title>
<meta name="description" content="Up to ~155 characters.">
<link rel="canonical" href="https://example.com/page">
<!-- Open Graph (Facebook, LinkedIn) -->
<meta property="og:title" content="Page title">
<meta property="og:image" content="https://example.com/og.png">
<!-- Twitter / X Card -->
<meta name="twitter:card" content="summary_large_image">Build these automatically with the Meta Tags Generator and preview them with the Social Share Preview.
HTTP Status Codes
Servers reply to every request with a status code. Knowing the common ones speeds up debugging and SEO fixes.
| Code | Meaning | When you see it |
|---|---|---|
200 | OK | The request succeeded |
301 | Moved Permanently | Permanent redirect (passes SEO value) |
302 | Found | Temporary redirect |
304 | Not Modified | Cached copy is still fresh |
404 | Not Found | The URL does not exist |
410 | Gone | Removed on purpose, permanently |
500 | Internal Server Error | Something broke on the server |
503 | Service Unavailable | Down or overloaded (often temporary) |
Look up any code with the HTTP Status Code Mapper or inspect live headers with the HTTP Response Headers Viewer.
Frequently Asked Questions
Quick answers about these HTML resources and how to use them.
What is this HTML resources page?
It is a single hub that brings together free HTML and markup tools on SEOlust alongside practical quick-reference cheat sheets for tags, semantic structure, forms, global attributes, entities, SEO meta tags and HTTP status codes. Use the tools to generate and clean up code, and the references to look up syntax fast.
Are these HTML tools free to use?
Yes. Every tool and reference here is completely free, runs in your browser, and requires no account or sign-up.
What is semantic HTML and why does it matter?
Semantic HTML uses elements that describe their meaning — such as header, nav, main, article, section and footer — instead of generic divs. It improves accessibility for screen readers, helps search engines understand your page structure, and makes your markup easier to maintain.
What is the difference between an HTML element and an attribute?
An element is a building block of the page, written with tags such as <p> or <img>. An attribute is extra information added inside the opening tag, such as class, id, href or alt, that configures how the element behaves or is styled.
What HTML do I need for good SEO?
At minimum: a descriptive <title>, a meta description, one clear <h1>, logical heading order, alt text on images, semantic landmarks, and Open Graph and Twitter Card meta tags for social sharing. Structured data (JSON-LD) further helps search engines understand your content.
Do I still need to close tags and validate HTML?
HTML5 is forgiving, but well-formed, validated markup avoids rendering bugs across browsers and is easier to debug. Closing tags properly, quoting attributes, and running a quick validation check keeps your pages reliable.
What are HTML entities?
HTML entities are codes that represent characters which are reserved in HTML or hard to type, such as &lt; for the less-than sign, &amp; for an ampersand, or &copy; for the copyright symbol. They ensure the character displays as text rather than being parsed as markup.