Main story…
<img> (replaced element)
Description: Embeds an image; alt text is required for accessibility.
<img src="https://via.placeholder.com/80" alt="placeholder">Rendered output:
HTML Guide Utilizing only html without anything froo froo fancypants. Thats all.
Salvation is in Jesus Christ alone;
Repent and trust in Jesus Christ alone
for forgiveness of sin and salvation today!
The Gospel Message
Description: Declares HTML 5 and forces standards mode.
<!DOCTYPE html>Rendered output: (none)
Description: Root element; lang sets language, dir defines text flow.
<html lang="en" dir="ltr">
…
</html>Rendered output: (wrapper, invisible)
Description: Metadata container that holds the document title.
<head>
<meta charset="utf-8">
<title>Page</title>
</head>Rendered output: Browser tab shows “Page”.
Description: Main container for all visible page content.
<body>
…
</body>Description: Comments are ignored by the browser. Conditional comments worked only in legacy IE.
<!-- regular comment -->
<!--[if IE]><p>Conditional for IE</p><![endif]-->
<p>Visible paragraph</p>Rendered output:
Visible paragraph
Description: Encode reserved characters with named or numeric entities.
& < > " ' 😀Rendered output: & < > " ' 😀
Description: Legal but inert tags if left empty.
<style></style>
<script></script>Rendered output: (none)
Description: Fallback content for users with JavaScript disabled.
<noscript>Enable JavaScript</noscript>Rendered output: Enable JavaScript
id, class, title, hiddenDescription: Universal attributes used for identification, grouping, tool‑tips, and hiding content.
<div id="note" class="warning" title="tooltip">Visible</div>
<p hidden>Hidden text</p>Rendered output:
Hidden text
contenteditable, dir, translate, spellcheckDescription: Control inline editing, text direction, translation, and spell‑checking.
<div contenteditable spellcheck="false">Edit me</div>
<p dir="rtl">مرحبا</p>
<span translate="no">BrandName</span>Rendered output:
(select the edit me text)
BrandNamedata-*, itemscope, itempropDescription: Attach custom values and semantic metadata without scripting.
<article itemscope itemtype="https://schema.org/Answer" data-score="42">
<span itemprop="text">Forty‑two</span>
</article>Rendered output:
Description: Presence means true; absence means false. Extra values are ignored.
<input type="checkbox" checked> on
<input type="checkbox"> offRendered output:
on offDescription: Sets the page title shown in browser tabs, bookmarks, and search results.
<title>My Page</title>Rendered output: Appears in the browser tab / window title.
Description: charset declares UTF‑8; viewport controls mobile layout.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">Rendered output: No visible output (metadata only).
Description: Improve search snippets and social previews using description and Open Graph/Twitter tags.
<meta name="description" content="Concise page summary.">
<meta property="og:title" content="My Page">
<meta property="og:image" content="https://example.com/cover.jpg">Rendered output: No visible output; search engines/social platforms read these values.
Description: Control browser behaviour (CSP, referrer, refresh redirects, X‑UA‑Compatible for old IE).
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<meta name="referrer" content="no-referrer">
<meta http-equiv="refresh" content="5;url=https://example.com">Rendered output: Invisible; may trigger redirect or tighten security.
Description: Hint the browser to fetch critical assets early or only for print.
<link rel="preload" as="font" href="/fonts/roboto.woff2" type="font/woff2" crossorigin>
<link rel="preconnect" href="https://cdn.example.com">
<link rel="stylesheet" href="print.css" media="print">Rendered output: No visible output; improves loading or applies on print.
Description: Declare canonical URL, PWA manifest, or alternate language versions.
<link rel="canonical" href="https://example.com/page">
<link rel="manifest" href="/site.webmanifest">
<link rel="alternate" hreflang="es" href="/es/page">Rendered output: None; informs search engines and browsers.
Description: Provide icons for browser tabs, bookmarks, and mobile homescreens.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">Rendered output: Icon appears in browser UI (not in-page).
Description: Embed schema.org data using an inert <script type="application/ld+json">.
<script type="application/ld+json">{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "My Page"
}</script>Rendered output: None; consumed by search engines.
Description: Generic container with no semantics.
<div>Block of text</div>Rendered output:
Description: Introductory content for a document or section.
<header>
<h1>Site Title</h1>
</header>Rendered output:
Description: Section containing primary navigation links.
<nav>
<a href="#">Home</a> | <a href="#">About</a>
</nav>Rendered output:
Description: Unique, central content of the page.
<main>
<p>Main story…</p>
</main>Rendered output:
Main story…
Description: Thematic grouping of content, typically with a heading.
<section>
<h2>Features</h2>
<p>Item 1</p>
</section>Rendered output:
Item 1
Description: Self‑contained item that could be distributed independently.
<article>
<h2>Blog Post</h2>
<p>…content…</p>
</article>Rendered output:
…content…
Description: Tangential content such as a sidebar or callout.
<aside>Tip: save your work.</aside>Rendered output:
Description: Closing content for a document or section.
<footer>© 2025</footer>Rendered output:
Description: Contact information block; italic by default in many browsers.
<address>
Email: <a href="mailto:info@example.com">info@example.com</a>
</address>Rendered output:
Email: info@example.comDescription: Wraps multi-level headings as a single heading group (not widely supported).
<hgroup>
<h1>Title</h1>
<h2>Subtitle</h2>
</hgroup>Rendered output:
Description: Native disclosure widget.
<details>
<summary>More</summary>
Extra content…
</details>Rendered output:
Description: Modal dialog element; open attribute makes it visible without JavaScript.
<dialog open>
Hello!<br>
<button>OK</button>
</dialog>Rendered output:
Description: Old contextual menu; retained for backward compatibility.
<menu type="toolbar">
Description: Six levels of section headings, block‑level by default.
<h1>Level 1</h1>
<h2>Level 2</h2>
…
<h6>Level 6</h6>Rendered output:
Description: The primary block for prose.
<p>A plain paragraph.</p>Rendered output:
A plain paragraph.
Description: Unordered, ordered, and description lists.
<ul><li>Red</li><li>Blue</li></ul>
<ol><li>One</li><li>Two</li></ol>
<dl><dt>HTML</dt><dd>Markup</dd></dl>Rendered output:
Description: For long quotations; cite attribute may link source.
<blockquote cite="https://example.com">
<p>Quotation text.</p>
</blockquote>Rendered output:
Quotation text.
Description: Preserve whitespace and show inline code.
<pre>
line 1
line 2 indented
</pre>Rendered output:
line 1 line 2 indented
Description: Horizontal rule indicating a shift of topic; void element.
<hr>Rendered output: (UA renders a horizontal line below)
Description: Inline void element forcing a line break.
First<br>SecondRendered output:
FirstDescription: Generic inline container with no semantics.
<span>Inline text</span>Rendered output: Inline text
Description: <em> indicates stress emphasis; <strong> indicates strong importance.
<em>emphasis</em> and <strong>important</strong>Rendered output: emphasis and important
Description: Presentational inline tags: bold, italic, underline, strike, smaller text.
<b>bold</b> <i>italic</i> <u>underline</u> <s>strike</s> <small>fine print</small>Rendered output: bold italic underline strike fine print
Description: Mark edits: deleted text appears struck-through; inserted text underlined.
<del>old</del> <ins>new</ins>Rendered output: old new
Description: Offset text lower or higher.
H<sub>2</sub>O and E = mc<sup>2</sup>Rendered output: H2O and E = mc2
Description: Expand abbreviation via title attribute.
<abbr title="HyperText Markup Language">HTML</abbr>Rendered output: HTML
Description: Citation, term definition, and variable.
<cite>Moby Dick</cite> <dfn>HTML</dfn> <var>x</var>Rendered output: Moby Dick HTML x
Description: Inline code, user input, and sample output.
<code>printf</code> <kbd>Ctrl+C</kbd> <samp>OK</samp>Rendered output: printf Ctrl+C OK
Description: Machine‑readable date/time via datetime.
<time datetime="2025-07-04">July 4, 2025</time>Rendered output:
dir / <bdo> / <bdi>Description: Manage bidirectional text. dir sets direction; <bdo> overrides; <bdi> isolates.
<bdo dir="rtl">hello</bdo> <bdi>مرحبا</bdi>Rendered output: hello مرحبا
Description: Suggests a potential line‑break point without forcing it.
super<wbr>califragilisticRendered output: super
Description: East‑Asian pronunciation guide: base text with <rt> annotation.
<ruby>漢<rt>kan</rt></ruby>Rendered output: 漢
Description: Highlight text relevant to current context (e.g., search result).
<p>Find <mark>HTML</mark> specs.</p>Rendered output:
Find HTML specs.
Description: Short, inline quotation; browsers add quotation marks automatically.
<q>To be or not.</q>Rendered output: To be or not.
Description: Bind a human‑readable string to a machine‑readable value.
<data value="840">USD</data>Rendered output: USD
Description: Smallest valid table needs <table>, a row <tr>, and data cells <td>.
<table border="1">
<tr><td>A</td><td>B</td></tr>
<tr><td>C</td><td>D</td></tr>
</table>Rendered output:
| A | B |
| C | D |
Description: Group header, body, and footer rows for semantics and print repeating.
<table border="1">
<thead><tr><th>Name</th><th>Age</th></tr></thead>
<tbody><tr><td>Ada</td><td>36</td></tr></tbody>
<tfoot><tr><td colspan="2">Total 1</td></tr></tfoot>
</table>Rendered output:
| Name | Age |
|---|---|
| Ada | 36 |
| Total 1 | |
Description: <caption> gives a table title; <th scope="row/col"> clarifies header range.
<table border="1">
<caption>Scores</caption>
<tr><th scope="col">Player</th><th scope="col">Pts</th></tr>
<tr><th scope="row">Bob</th><td>42</td></tr>
</table>Rendered output:
| Player | Pts |
|---|---|
| Bob | 42 |
Description: Apply styling/widths to column groups (visual only; here shown with span).
<table border="1">
<colgroup><col span="2" style="background:#eef"></colgroup>
<tr><td>X</td><td>Y</td></tr>
</table>Rendered output:
| X | Y |
Description: Groups interactive controls and submits user data. Key attributes: action (destination URL) and method (get/post).
<form action="/search" method="get">
<input name="q">
<button>Search</button>
</form>Rendered output:
Description: Visually and semantically group related controls with an optional caption.
<fieldset>
<legend>Shipping</legend>
<label>City <input name="city"></label>
</fieldset>Rendered output:
Description: Improves accessibility by tying descriptive text to a form control via nesting or for/id.
<label for="email">Email</label>
<input id="email" type="email">Rendered output:
Description: Common <input> type attribute values and their native UIs.
<input type="text" placeholder="text">
<input type="email" placeholder="email">
<input type="number" value="5">
<input type="date">
<input type="range" min="0" max="10" value="3">
<input type="checkbox" checked> agreeRendered output:
Description: Built‑in validation via required, pattern, min, max, step.
<input type="email" required placeholder="required email">
<input type="text" pattern="[A-Za-z]+" placeholder="letters only">
<input type="number" min="0" max="100" step="10" value="30">Rendered output:
Description: Multi‑line input, dropdown, and typed suggestions.
<textarea rows="2" cols="20" placeholder="comments"></textarea>
<select>
<option>Red</option>
<option>Green</option>
</select>
<input list="browsers" placeholder="choose">
<datalist id="browsers">
<option value="Firefox">
<option value="Chrome">
</datalist>Rendered output:
Description: Native status indicators: task progress and scalar measurements.
<progress value="30" max="100">30%</progress>
<meter value="0.7">70%</meter>Rendered output:
Description: Embeds an image; alt text is required for accessibility.
<img src="https://via.placeholder.com/80" alt="placeholder">Rendered output:
Description: Deliver different images based on viewport or format support.
<picture>
<source srcset="small.jpg" media="(max-width:600px)">
<img src="large.jpg" alt="example">
</picture>Rendered output: (image chosen by media query)
Description: Self‑contained media with an optional caption.
<figure>
<img src="pic.jpg" alt="">
<figcaption>A caption</figcaption>
</figure>Rendered output:
Description: Embed audio; controls shows native player.
<audio controls src="audio.mp3"></audio>Rendered output: (browser audio UI)
Description: Embed video; controls displays playback UI.
<video controls width="200" src="video.mp4"></video>Rendered output: (browser video UI)
Description: Embed external resources like webpages, PDFs, or plugins.
<iframe src="https://example.com" width="200" height="80"></iframe>Rendered output:
Description: Define clickable regions on an image.
<img src="planets.jpg" usemap="#m" alt="">
<map name="m">
<area shape="circle" coords="90,60,30" href="#Mercury" alt="Mercury">
</map>Rendered output: (hotspots invisible)
Description: Vector graphics directly in markup.
<svg width="60" height="20" role="img" aria-labelledby="t">
<title id="t">Red bar</title>
<rect width="60" height="20" fill="red"></rect>
</svg>Rendered output:
Description: Mathematical notation; limited browser support.
<math><mi>x</mi><mo>=</mo><mn>5</mn></math>Rendered output:
Description: Bitmap drawing surface; static fallback shows when JS disabled.
<canvas width="80" height="20">Fallback text</canvas>Rendered output:
Description: ARIA landmark roles help screen‑reader users navigate quickly.
<header role="banner">…</header>
<nav role="navigation">…</nav>
<main role="main">…</main>
<aside role="complementary">…</aside>
<footer role="contentinfo">…</footer>Rendered output: (No visual change; landmarks exposed to assistive tech)
role & common aria‑* attributesDescription: Convey widget roles and states without JavaScript.
<button aria‑pressed="false" role="button">Toggle</button>
<ul role="list" aria‑label="Steps">…</ul>Rendered output:
Description: Provide meaningful alt for images; add invisible skip‑link for keyboard users.
<a href="#main" class="visually‑hidden focusable">Skip to content</a>
<img src="logo.png" alt="ACME Corp logo">Rendered output: Skip‑link is visible on focus; image shows normally.
tabindex, accesskey)Description: Manage tab order and shortcut keys.
<div tabindex="0">Focusable region</div>
<button accesskey="s">Save (Alt+S)</button>Rendered output:
Description: Improve performance with loading="lazy"; target print styles via media="print". Validate markup with online validators.
<img src="hero.jpg" alt="" loading="lazy">
<link rel="stylesheet" href="print.css" media="print">Rendered output: (image defers until in‑view; stylesheet applies only when printing)
Description: Two‑space (or tab) indentation keeps markup readable. Collapse redundant spaces in inline content.
<ul>
<li>Item</li>
<li>Item</li>
</ul>Rendered output: Formatting has no visual effect—improves source readability.
Description: Place structural attributes first (id, class), followed by behaviour (type, href); always quote values with double‑quotes.
<a id="home" class="btn" href="/" role="button">Home</a>Description: HTML is case‑insensitive; lower‑case improves diff hygiene.
<section id="intro">…</section>Description: Limit lines to ~80‑100 chars; break attributes on new lines in complex tags.
<img
src="banner.jpg"
alt="decorative banner"
loading="lazy">Description: Void elements (e.g., <br>, <hr>, <img>) never get a closing tag.
<br> Correct
<br /> XHTML‑style (allowed but verbose)Description: Skip default values like type="text" on <input> to reduce bytes.
<input name="q"> <!-- shorter than input type="text" -->Description: Use clear, concise HTML comments for section separation—avoid over‑decorated ASCII art.
<!-- ── Features ── -->Description: Examples should follow best practice: meaningful alt, ARIA labels, etc.
<button aria-label="Close dialog">×</button>Rendered output:
Description: Many email clients support only a subset of HTML 4. Use table‑based layouts, inline style, and avoid modern tags.
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center" bgcolor="#f4f4f4" style="font-family:Arial, sans-serif; font-size:14px;">
Hello, world!
</td>
</tr>
</table>Rendered output:
| Hello, world! |
Description: <template> stores inert markup; Shadow DOM encapsulates style/markup; <slot> defines insertion points for light‑DOM content.
<template id="card-tmpl">
<style>.wrapper{border:1px solid #ccc;padding:8px;}</style>
<div class="wrapper">
<slot name="content">Fallback</slot>
</div>
</template>
<script>
class CardElement extends HTMLElement {
constructor(){super();
const t = document.getElementById('card-tmpl').content.cloneNode(true);
this.attachShadow({mode:'open'}).append(t);
}
}
customElements.define('x-card', CardElement);
</script>
<x-card><p slot="content">Hello</p></x-card>Rendered output: (requires JS; without it, nothing shows)
Description: Define new tags (autonomous) or extend built‑ins with is (customized).
<script>
// autonomous
class FancyBox extends HTMLElement {connectedCallback(){this.innerHTML='★ '+this.textContent}}
customElements.define('fancy-box', FancyBox);
// customized built‑in
class FancyButton extends HTMLButtonElement {connectedCallback(){this.style.borderRadius='12px';}}
customElements.define('fancy-button', FancyButton, {extends:'button'});
</script>
<fancy-box>Web Comp</fancy-box>
<button is="fancy-button">Click</button>Rendered output: (requires JS; placeholders visible if script blocked)