Ultimate HTML Guide
Learn HTML from scratch with this complete beginner‑friendly guide. No prior coding experience needed.
📖 Table of Contents
1.1 Building Your First Header
Every web page starts with a simple set of tags that tell the browser what is a header and what is a paragraph.
<h1>Hello World</h1>
<p>This is my first web page.</p><h1>– Heading level 1 (the most important heading).<p>– Paragraph tag.- Most HTML elements have an opening tag
<tag>and a closing tag</tag>.
1.2 Links & Navigation
Links are what make the web interconnected. The <a> anchor tag creates hyperlinks.
<a href="https://example.com">Visit Example</a>href– the destination URL.- Absolute URL – full web address (
https://google.com). - Relative URL – points to a file within your site (
about.html). target="_blank"– opens link in a new tab.
1.3 Images & Multimedia
The <img> tag embeds images. The alt attribute is essential for accessibility.
<img src="photo.jpg" alt="A description of the photo" />src– image source (URL or file path).alt– alternative text (shown if image fails to load, read by screen readers).width/height– optional dimensions.
1.4 Lists & Tables
Lists and tables help organise information clearly.
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
<ol>
<li>Wake up</li>
<li>Brush teeth</li>
</ol>
<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Alice</td><td>25</td></tr>
</table><ul>– unordered list (bullet points).<ol>– ordered list (numbers).<table>– rows (<tr>), headers (<th>), data (<td>).
1.5 Forms & Inputs
HTML forms collect user input – search boxes, login fields, contact messages.
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<button type="submit">Send</button>
</form><form>– container for inputs.action(where data goes),method(GET or POST).<label>– text description linked to an input viafor.<input>– the field itself.typedefines behaviour (text, email, password, etc.).<button type="submit">– submits the form.
1.6 Semantic HTML
Semantic HTML elements describe their meaning to both the browser and the developer.
<header>Logo & navigation</header>
<nav>Links</nav>
<main>Main content</main>
<article>Blog post</article>
<footer>Copyright</footer><header>– introductory content, logo, navigation.<nav>– major navigation links.<main>– the dominant content of the page (only one).<article>– self‑contained composition.<section>– thematic grouping of content.<aside>– sidebar, tangentially related content.<footer>– footer with copyright, links, contact info.
1.7 CSS Basics
CSS (Cascading Style Sheets) controls the look and feel of your web pages.
<style>
h1 { color: #3b82f6; font-size: 2rem; }
p { color: #475569; }
</style>- Inline CSS –
styleattribute inside an HTML tag. - Internal CSS –
<style>tag inside<head>. - External CSS – separate
.cssfile linked via<link>.
1.8 CSS Box Model
Every element is a rectangular box: content + padding + border + margin.
.box {
width: 200px;
padding: 20px;
border: 5px solid #ef4444;
margin: 30px;
}padding– space inside the border.border– border around padding.margin– space outside the border.box-sizing: border-box– includes padding and border in width/height.
1.9 Flexbox & Grid
Flexbox and Grid are modern CSS layout systems for building responsive designs.
.flex-container {
display: flex;
flex-direction: row;
justify-content: center;
gap: 1rem;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}- Flexbox – one‑dimensional (row or column).
- Grid – two‑dimensional (rows AND columns).
1.10 Project: Personal Bio Page
Apply everything you've learned to build a complete personal bio page.
- Semantic HTML –
<header>,<nav>,<main>,<section>,<footer>. - Navigation – links to Home, About, Projects, Contact.
- About section – heading, paragraph, image.
- Skills list – unordered list of skills.
- Projects section – 2‑3 project cards using flexbox or grid.
- Contact form – name, email, message, submit button.
- CSS styling – colours, padding, margin, border, box‑shadow.
- Responsive – media query for mobile.
🚀 Want to go further?
Explore the full HTML course with interactive demos, code examples, and challenges.
Full HTML Course →