< / >
THE COMPLETE
HTML GUIDE
Every core concept, tag, and attribute — with live preview visuals
localhost:7700/[Link]
Hello, World!
This is a paragraph of text rendered from HTML.
Click Me
A KliptoQuanta / Brain Balance Tutorial Reference
2026 Edition
THE COMPLETE HTML GUIDE KliptoQuanta
Table of Contents
1. Introduction to HTML
What HTML is, and how documents are structured
2. Anatomy of an HTML Document
The required skeleton every page starts with
3. Headings & Paragraphs
h1–h6, p, and basic text blocks
4. Text Formatting Tags
bold, italic, underline, strikethrough, etc.
5. Links (Anchor Tag)
Navigating between pages and sites
6. Images
Embedding pictures with the img tag
7. Lists
Ordered, unordered, and description lists
8. Tables
Rows, columns, headers, and merging cells
9. Forms & Inputs
Collecting user data
10. Div vs Span (Block vs Inline)
The layout building blocks
11. Semantic HTML5 Tags
header, nav, main, article, footer, etc.
12. Attributes Reference
id, class, style, src, href, and more
13. The CSS Box Model
margin, border, padding, content
14. Linking CSS & JavaScript
Styling and scripting your page
15. Flexbox Basics
Modern layout with display: flex
16. Comments in HTML
HTML Reference Guide Page 2
THE COMPLETE HTML GUIDE KliptoQuanta
Leaving notes in your code
17. Common Mistakes & Fixes
Why your image/text isn't showing right
18. Full Quick-Reference Tag Table
Every common tag at a glance
HTML Reference Guide Page 3
THE COMPLETE HTML GUIDE KliptoQuanta
1. Introduction to HTML
HTML (HyperText Markup Language) is the standard language used to build every web page on the internet. It is
not a programming language — it has no logic, loops, or calculations. Instead, HTML is a markup language: it
wraps content in tags that tell the browser what each piece of content is (a heading, a paragraph, an image, a link)
so the browser knows how to display it.
Every HTML tag normally comes in a pair: an opening tag and a closing tag, wrapping the content between
them:
HTML
<p>This is a paragraph.</p>
Some tags are self-closing (also called void elements) because they don't wrap any content — for example
<img>, <br>, and <input>.
■ Note: HTML controls structure and content. Visual styling (colors, spacing, layout) is the job of CSS.
Interactivity (click events, calculations) is the job of JavaScript. The three work together, but they are different
languages.
2. Anatomy of an HTML Document
Every HTML file follows the same basic skeleton. This is the minimum structure a valid page needs:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web page.</p>
</body>
</html>
Tag Purpose
<!DOCTYPE html> Tells the browser this is an HTML5 document. Always the first line.
<html> The root element — wraps everything on the page.
<head> Metadata container — not shown on the page itself (title, links, meta tags).
HTML Reference Guide Page 4
THE COMPLETE HTML GUIDE KliptoQuanta
Tag Purpose
<meta charset="UTF-8"> Sets the character encoding so text/symbols display correctly.
<title> Text shown in the browser tab.
<body> Everything visible on the page goes here.
3. Headings & Paragraphs
HTML gives you six levels of headings, <h1> through <h6>, from largest/most important to smallest. Use <p> for
regular paragraph text.
HTML
<h1>Main Title</h1>
<h2>Section Heading</h2>
<h3>Sub-section Heading</h3>
<p>This is a normal paragraph of body text.</p>
preview — headings
This Is An H1 Heading
This Is An H2 Heading
This Is An H3 Heading
This is a normal paragraph of body text.
■ Note: Use headings in order (h1 → h2 → h3) to keep your document structured logically — don't skip levels
just to make text bigger. Use CSS for sizing instead.
4. Text Formatting Tags
HTML
<b>This text is bold.</b>
<i>This text is italic.</i>
<u>This text is underlined.</u>
<s>This text is strikethrough.</s>
HTML Reference Guide Page 5
THE COMPLETE HTML GUIDE KliptoQuanta
preview — formatting
This text is bold.
This text is italic.
This text is underlined.
This text is strikethrough.
Tag Effect
<b> / <strong> Bold text. <strong> also adds semantic importance.
<i> / <em> Italic text. <em> also adds semantic emphasis.
<u> Underlines text.
<s> Strikethrough (marks text as no longer accurate).
<small> Renders text in a smaller font size.
<mark> Highlights text with a yellow background.
<br> Inserts a single line break (self-closing).
<hr> Draws a horizontal divider line (self-closing).
5. Links (Anchor Tag)
The <a> tag creates a hyperlink. The destination goes in the href attribute.
HTML
<a href="[Link] Anthropic</a>
<!-- Opens in a new browser tab -->
<a href="[Link] target="_blank">External Link</a>
<!-- Link to another page in the same site -->
<a href="[Link]">About Us</a>
preview — link
Visit Anthropic
(a clickable hyperlink, underlined & colored by default)
■ Note: A common mistake is forgetting https:// in front of external URLs — without it, the browser treats the
link as a relative path on your own site and it will 404 (not be found).
HTML Reference Guide Page 6
THE COMPLETE HTML GUIDE KliptoQuanta
6. Images
The <img> tag embeds a picture. It is self-closing and requires a src (source URL/path) and should always
include alt text for accessibility.
HTML
<img src="[Link]" alt="A photo of a cat">
<!-- Resize with width/height (in pixels) -->
<img src="[Link]" alt="A cat" width="300" height="200">
preview — image
<img src="[Link]"
alt="A cat">
■ Note: If your image shows a broken-picture icon: check that the src path/URL is correct, that the file actually
exists at that location, and that you have internet access if it's an external link. A working image URL should
point directly to an image file (ending in .jpg, .png, .webp, etc.) — not to a webpage.
7. Lists
HTML
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<ol>
<li>Step one</li>
<li>Step two</li>
<li>Step three</li>
</ol>
HTML Reference Guide Page 7
THE COMPLETE HTML GUIDE KliptoQuanta
preview — lists
First item
Second item
Third item
1. Step one
2. Step two
3. Step three
Tag Meaning
<ul> Unordered list — items get bullet points.
<ol> Ordered list — items get numbers automatically.
<li> A single list item, used inside <ul> or <ol>.
<dl> / <dt> / <dd> Description list — term + definition pairs.
8. Tables
HTML
<table>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Amina</td>
<td>88</td>
</tr>
<tr>
<td>Tunde</td>
<td>92</td>
</tr>
</table>
preview — table
Name Score
Amina 88
Tunde 92
HTML Reference Guide Page 8
THE COMPLETE HTML GUIDE KliptoQuanta
Tag Meaning
<table> Wraps the entire table.
<tr> Table row.
<th> Header cell (bold, centered by default).
<td> Standard data cell.
<thead> / <tbody> Groups header rows separately from body rows.
9. Forms & Inputs
Forms collect input from users — text, choices, files — and send it somewhere (usually to a server) when
submitted.
HTML
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="msg">Message:</label>
<textarea id="msg" name="msg"></textarea>
<button type="submit">Submit</button>
</form>
preview — form
Name:
Message:
Submit
Input Type Use Case
type="text" Single-line free text.
type="email" Validates email format automatically.
type="password" Masks characters as dots.
type="number" Numeric-only input, often with up/down arrows.
HTML Reference Guide Page 9
THE COMPLETE HTML GUIDE KliptoQuanta
Input Type Use Case
type="checkbox" Toggle on/off, multiple selectable.
type="radio" Choose one option from a group.
type="date" Native date picker.
type="submit" Submits the form.
10. Div vs Span (Block vs Inline)
This is one of the most important concepts for controlling layout — and the exact issue behind why an image or
text sometimes sits beside other content instead of on its own line.
Block-level elements
Block elements always start on a new line and take up the full width available. Examples: <div>, <p>,
<h1>–<h6>, <ul>, <table>, <form>.
Inline elements
Inline elements sit within the flow of text, side-by-side, only taking up as much width as their content needs.
Examples: <span>, <a>, <img>, <b>, <i>, <strong>.
preview — block vs inline
<div> / <p> — block: full width, own line
<span> / <img> / <a> — inline: sits within text flow
HTML
<img src="[Link]" alt="Lake">
<p>life is sweet</p>
<!-- The image sits beside the text because <img> is inline by default -->
■ Note: This is exactly why your image showed up beside the words 'life is sweet' — <img> is inline by default,
so it behaves like a big letter sitting in the same line as the text next to it.
Fixing it
HTML Reference Guide Page 10
THE COMPLETE HTML GUIDE KliptoQuanta
HTML
/* Force the image onto its own line */
img {
display: block;
}
/* OR wrap it and center everything */
<div style="text-align:center;">
<img src="[Link]" alt="Lake">
<p>life is sweet</p>
</div>
Span for inline styling
HTML
Life is <span style="color:red; font-weight:bold;">sweet</span> when you code well.
preview — span
Life is sweet when you code well.
(<span> keeps text on the SAME line, only styles a piece of it)
11. Semantic HTML5 Tags
Older HTML relied on generic <div> tags for everything. Modern HTML5 provides semantic tags that describe
the meaning of a section, which helps accessibility tools and search engines understand your page.
HTML
<header>Site logo and navigation</header>
<nav>Menu links</nav>
<main>
<article>Main blog post content</article>
<aside>Related links / sidebar</aside>
</main>
<footer>Copyright and contact info</footer>
preview — semantic layout
<header>
<nav>
<main / article>
<aside>
<footer>
HTML Reference Guide Page 11
THE COMPLETE HTML GUIDE KliptoQuanta
Tag Meaning
<header> Introductory content — logo, site title, nav.
<nav> A block of navigation links.
<main> The primary unique content of the page (one per page).
<article> Self-contained content (a blog post, news story).
<section> A thematic grouping of content.
<aside> Tangential content — sidebars, pull quotes.
<footer> Closing content — copyright, contact links.
12. Attributes Reference
Attributes go inside the opening tag and provide extra information about an element. They follow the pattern
name="value".
HTML
<a href="[Link]" target="_blank" class="nav-link" id="home-link">Home</a>
Attribute Used On Purpose
id Any element Unique identifier for one specific element (used once per page).
class Any element Reusable label for CSS/JS targeting (can repeat).
style Any element Inline CSS applied directly to that element.
src img, script, iframe Path/URL to an external resource.
href a, link Destination URL for a link.
alt img Fallback text description for accessibility.
title Any element Tooltip text shown on hover.
placeholder input, textarea Faint hint text shown before typing.
disabled input, button Greys out and disables the element.
13. The CSS Box Model
HTML Reference Guide Page 12
THE COMPLETE HTML GUIDE KliptoQuanta
Every HTML element is treated as a rectangular box made of four layers, from the inside out: content, padding,
border, and margin.
preview — box model
margin
border
padding
content
HTML
div {
width: 200px;
padding: 20px; /* space inside the border */
border: 2px solid black;
margin: 15px; /* space outside the border */
}
Layer Description
Content The actual text/image inside the box.
Padding Clear space between content and the border.
Border The visible edge/outline of the box.
Margin Space between this box and neighboring elements.
14. Linking CSS & JavaScript
Three ways to add CSS
HTML
<!-- 1. Inline (on one element) -->
<p style="color:blue;">Blue text</p>
<!-- 2. Internal (inside <head>) -->
<style>
p { color: blue; }
</style>
<!-- 3. External (best practice) -->
<link rel="stylesheet" href="[Link]">
HTML Reference Guide Page 13
THE COMPLETE HTML GUIDE KliptoQuanta
Adding JavaScript
HTML
<!-- Internal script -->
<script>
alert("Hello!");
</script>
<!-- External script — place before </body> -->
<script src="[Link]"></script>
■ Note: Place <script> tags just before the closing </body> tag when possible, so the page content loads
first and scripts don't block rendering.
15. Flexbox Basics
Flexbox is the modern, easiest way to align and distribute items in a row or column.
HTML
<div style="display:flex; justify-content:space-between;">
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</div>
preview — flexbox
Box 1 Box 2 Box 3
display:
Property flex; justify-content: space-between;
Effect
display: flex; Turns the container into a flex container.
justify-content Aligns items horizontally (start / center / space-between).
align-items Aligns items vertically (start / center / stretch).
flex-direction row (default) or column.
gap Adds space between flex items.
HTML Reference Guide Page 14
THE COMPLETE HTML GUIDE KliptoQuanta
16. Comments in HTML
Comments are notes in your code that the browser ignores completely — useful for leaving reminders or
temporarily disabling code.
HTML
<!-- This is a comment. It will not be displayed. -->
<p>This paragraph is visible.</p>
<!-- <p>This paragraph is hidden because it is commented out.</p> -->
17. Common Mistakes & Fixes
Symptom Likely Cause & Fix
Broken image icon src path is wrong, file doesn't exist, or the URL points to a webpage instead of a raw
image file. Check the link opens directly to an image.
Image loads once then The URL is a dynamic/temporary link (e.g. a share/proxy link with a random ID)
changes on refresh rather than a permanent file — host the image yourself instead.
Image/text sitting side <img> is inline by default. Add display:block; or wrap in a <div>.
by side unexpectedly
Changes not appearing in Browser cache — hard refresh, or confirm you saved the file before previewing.
preview
Nothing shows at all / A tag was never closed, or file has a syntax error — check for matching
blank page opening/closing tags.
Text overlapping / Missing CSS box-sizing or conflicting width/margin values — inspect with browser
layout broken dev tools.
18. Full Quick-Reference Tag Table
Tag Purpose
<!DOCTYPE html> Declares HTML5 document type.
<html> Root element of the page.
<head> Metadata (not visible on page).
<title> Browser tab title.
<body> Visible page content.
<h1>–<h6> Headings, largest to smallest.
HTML Reference Guide Page 15
THE COMPLETE HTML GUIDE KliptoQuanta
Tag Purpose
<p> Paragraph of text.
<a> Hyperlink.
<img> Embeds an image (self-closing).
<ul> / <ol> / <li> Unordered/ordered lists and list items.
<table> / <tr> / <td> / <th> Table, row, cell, header cell.
<div> Generic block container.
<span> Generic inline container.
<form> Wraps input controls for submission.
<input> A single-line form field (self-closing).
<button> A clickable button.
<header> / <nav> / <main> / Semantic layout sections.
<footer>
<section> / <article> / <aside> Semantic content groupings.
<style> Internal CSS block.
<script> JavaScript block or external script link.
<link> Links external resources (e.g. CSS file).
<meta> Page metadata (charset, viewport, description).
<br> Line break (self-closing).
<hr> Horizontal rule/divider (self-closing).
End of Guide — KliptoQuanta / Brain Balance Tutorial
Keep this as a reference while you build. Practice each tag in your own [Link] file.
HTML Reference Guide Page 16