This repository is a roadmap to learning HTML from scratch.
It covers the essentials, from basic tags to semantic elements, and includes mini-projects to apply your knowledge.
<!DOCTYPE html>,<html>,<head>,<body>- Metadata:
<title>,<meta charset="UTF-8">
- Headings:
<h1>…<h6> - Paragraph:
<p> - Line breaks:
<br> - Horizontal line:
<hr>
<b>,<i>,<u><strong>,<em><sup>,<sub>
- Ordered list:
<ol> <li> - Unordered list:
<ul> <li> - Definition list:
<dl> <dt> <dd>
<a href="...">target="_blank"- Anchor links with
id
<img src="..." alt="...">- Attributes:
width,height,title
<table>,<tr>,<th>,<td>- Attributes:
border,rowspan,colspan
<form action="" method="">- Input types:
text,email,password,number,date <textarea><select> <option>- Checkboxes & Radio buttons
- Submit & Reset buttons
<video>,<audio>, with controls<iframe>(YouTube, maps)
<header>,<footer>,<nav><main>,<article>,<section><aside>,<figure>,<figcaption><mark>,<time>,<progress>
id&class- Accessibility:
alt,title - Form attributes:
placeholder,value,required
- Indentation & clean code
- Accessibility (
alt, labels for forms) - SEO basics (headings, meta tags)
- 📝 Resume Page (text + headings + links)
- 🌍 Personal Website (multi-page)
- 📊 Timetable (practice tables)
- 🔐 Login & Signup Form (forms practice)
- 📰 Blog Page (semantic HTML + media)
color → text color background-color → background fill background-image → set an image as background background-repeat → repeat / no-repeat background-size → cover / contain
font-size → size of text (px, em, rem, %) font-family → font (Arial, Verdana, etc.) font-weight → normal / bold / lighter font-style → normal / italic text-align → left / center / right / justify text-decoration → underline / line-through / none line-height → spacing between lines letter-spacing → space between letters word-spacing → space between words
Every HTML element is treated as a box: width / height margin → space outside the element padding → space inside the element border → outline of the element (style, width, color)
display → block, inline, inline-block, none position → static, relative, absolute, fixed, sticky top, left, right, bottom → move elements (with position) z-index → stack order (higher = in front)
width, height → resize images object-fit → cover / contain (when resizing images in a box) border-radius → rounded corners / circles
cursor → pointer, text, move, etc. opacity → transparency (0 = invisible, 1 = normal) visibility → visible / hidden
transition → smooth effect for changes transform → rotate, scale, translate animation → run keyframe animation
⚡ By completing this syllabus, you’ll be an Intermediate HTML Developer, ready to move into CSS for styling & layouts.