Learn HTML5 & CSS3 for Beginners
Part 1: Introduction to Web Development
What is HTML?
HTML (HyperText Markup Language) is the language used to create webpages. It defines the structure
and content of a webpage using tags. These tags tell the browser how to display text, images, links, and
more.
What is CSS?
CSS (Cascading Style Sheets) is used to style and format the appearance of a webpage. CSS controls
colors, fonts, layouts, spacing, and responsiveness.
Tools You Need to Start
Text Editor: VS Code, Sublime Text, Notepad++, or even Notepad
Browser: Chrome, Firefox, Edge, or Safari
Basic knowledge: How to save .html and .css files and open them in your browser
Basic HTML File Structure Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first webpage.</p>
</body>
</html>
Part 2: All Essential HTML5 Tags
<html>
Purpose: Root element of the webpage. All other tags go inside it.
<html lang="en">
<!-- Head and body here -->
</html>
<head>
Purpose: Contains metadata, links to CSS files, scripts, and page title.
<head>
<title>Page Title</title>
<link rel="stylesheet" href="style.css" />
</head>
<title>
Purpose: Defines the page title shown in the browser tab.
<title>My Website</title>
<body>
Purpose: Contains the visible content of the webpage.
<body>
<h1>Welcome!</h1>
<p>This is the body content.</p>
</body>
<h1> to <h6>
Purpose: Headings of different levels; <h1> is the most important.
<h1>Main Title</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<p>
Purpose: Paragraph text.
<p>This is a paragraph.</p>
<br>
Purpose: Inserts a line break (no closing tag).
<p>Line one.<br>Line two.</p>
<hr>
Purpose: Inserts a horizontal line (no closing tag).
<hr />
<strong>
Purpose: Important text (usually bold).
<p>This is <strong>important</strong> text.</p>
<em>
Purpose: Emphasized text (usually italic).
<p>This is <em>emphasized</em> text.</p>
<code>
Purpose: Inline code snippet.
<p>Use the <code>console.log()</code> function.</p>
<span>
Purpose: Inline container for styling parts of text.
<p>This is <span style="color:blue;">blue text</span>.</p>
<div>
Purpose: Block container to group elements.
<div>
<h2>Section Title</h2>
<p>Some content here.</p>
</div>
🔗 <a> — Anchor (Link)
Purpose: Creates a hyperlink to another page, website, file, or email.
<a href="https://example.com">Visit Example</a>
<a href="#section1">Jump to Section 1</a>
🖼️ <img> — Image
Purpose: Embeds an image.
<img src="image.jpg" alt="A description of the image" width="200" height="150">
alt helps screen readers and improves SEO.
width and height control size.
📝 <ul>, <ol>, <li> — Lists
Unordered List:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Ordered List:
<ol>
<li>Wake up</li>
<li>Code</li>
<li>Sleep</li>
</ol>
📊 <table> — Tables
Basic Table Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ali</td>
<td>22</td>
</tr>
</table>
<tr>: Table Row
<th>: Table Header
<td>: Table Data
🧾 Forms and Input Fields
<form> — Start of a form
<form action="/submit" method="POST">
<!-- form elements here -->
</form>
<input> — User Input Field
<input type="text" name="username" placeholder="Enter your name">
<input type="email" name="email">
<input type="password" name="password">
<input type="checkbox" name="subscribe"> Subscribe
<input type="radio" name="gender" value="male"> Male
<textarea> — Multi-line Input
<textarea name="message" rows="4" cols="30">Type here...</textarea>
<select> and <option> — Dropdown
<select name="language">
<option value="html">HTML</option>
<option value="css">CSS</option>
</select>
<button> — Button
<button type="submit">Send</button>
🧠 Semantic HTML5 Tags
These help browsers and developers understand the content better:
<header>Site header</header>
<nav>Navigation bar</nav>
<main>Main content</main>
<article>Blog post or news article</article>
<section>Grouped content</section>
<aside>Sidebar or extra info</aside>
<footer>Footer area</footer>
🎵 Multimedia Tags
<audio> — Embed sound
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
<video> — Embed video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
💡 Other Useful HTML Tags
<abbr> — Abbreviation
<abbr title="HyperText Markup Language">HTML</abbr>
<mark> — Highlighted text
<p>This is <mark>important</mark> text.</p>
<details> & <summary> — Expandable content
<details>
<summary>Show Answer</summary>
<p>The answer is 42.</p>
</details>
<progress> — Progress bar
<progress value="50" max="100"></progress>
Scripting Tags
<script> — Embeds or links JavaScript
<script>
alert("Hello World!");
</script>
<noscript> — Fallback for users without JavaScript
✅ Document Metadata Tags (Inside <head>)
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
🏷️ <label>
Purpose: Labels a form control (like an input), improving accessibility and UX.
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<fieldset> & <legend>
Purpose: Groups form elements together with a title.
<fieldset>
<legend>Personal Info</legend>
<label>Name: <input type="text" name="name"></label>
</fieldset>
<output>
Purpose: Displays the result of a calculation.
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" name="a"> +
<input type="number" name="b"> =
<output name="result"></output>
</form>
<datalist>
Purpose: Provides autocomplete options for <input>.
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
</datalist>
<time>
Purpose: Represents a specific time or date/time.
<time datetime="2025-07-27">July 27, 2025</time>
<meter>
Purpose: Shows a measurement within a range (e.g., a score or disk usage).
<meter value="0.6">60%</meter>
<nav>
Purpose: Container for navigation links.
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
<template>
Purpose: Stores HTML that’s not rendered immediately, but can be used in JS.
<template id="user-card">
<div class="user">
<h2>Name</h2>
<p>Details...</p>
</div>
</template>
<canvas>
Purpose: A space for drawing graphics with JavaScript.
<canvas id="myCanvas" width="300" height="150"></canvas>
<svg>
Purpose: Embeds scalable vector graphics.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" fill="red" />
</svg>
<iframe>
Purpose: Embeds another webpage inside the current one.
<iframe src="https://example.com" width="400" height="300"></iframe>
<embed> / <object> / <param>
Purpose: Embed other files or apps like PDFs, Flash, etc.
<embed src="file.pdf" type="application/pdf" width="600" height="500" />
<bdi> — Bi-directional Isolation
<p>Usernames: <bdi><علی/bdi>, <bdi>Ali</bdi></p>
<bdo> — Bi-directional Override
<bdo dir="rtl">This text is right to left.</bdo>
<wbr> — Word Break Opportunity
Purpose: Tells the browser where to break a long word.
<p>Super<wbr>califragilistic<wbr>expialidocious</p>
<track> — Captions for <video>
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="captions.vtt" kind="subtitles" srclang="en" label="English">
</video>
HTML Structural Tags Summary
Tag Purpose
<html> Root of the HTML document
<head> Metadata and linked resources
<body> Visible content
<section> Logical section of content
<article> Independent content like blogs
<nav> Navigation links
<aside> Sidebars and extra info
<header> Page or section header
<footer> Page or section footer
<main> Main content of the page
🔤 Basic Structure Tags
Tag Type Purpose Example
<!DOCTYPE html> Self-closing Declares document <!DOCTYPE html>
type as HTML5
<html> ... </html> Open & Close Root of HTML <html>...</html>
document
<head> ... </head> Open & Close Container for metadata <head>...</head>
<title> ... </title> Open & Close Title shown in browser <title>My Page</title>
tab
<meta> Self-closing Metadata like charset <meta charset="UTF-
or viewport 8">
<link> Self-closing Link to CSS or favicon <link rel="stylesheet"
href="style.css">
<style> ... </style> Open & Close Internal CSS styles <style>body
{color:red;}</style>
<script> ... </script> Open & Close JS script or link <script
src="app.js"></script>
🧱 Content Structure
Tag Type Purpose Example
<body> ... </body> Open & Close Body content of <body>...</body>
webpage
<header> ... Open & Close Header of page or <header><h1>Title</h1></header>
</header> section
<footer> ... Open & Close Footer of page or <footer>© 2025</footer>
</footer> section
<main> ... </main> Open & Close Main content area <main>Content</main>
<section> ... Open & Close Groups related <section>Blog post</section>
</section> content
<article> ... Open & Close Self-contained <article>News</article>
</article> article
<nav> ... </nav> Open & Close Navigation links <nav><a
href="#">Home</a></nav>
<aside> ... </aside> Open & Close Sidebar or extra <aside>Tips</aside>
content
<div> ... </div> Open & Close Generic container <div class="box">Text</div>
<span> ... </span> Open & Close Inline container <span
style="color:red">Red</span>
🔤 Text Content Tags
Tag Type Purpose Example
<h1> to <h6> Open & Close Headings (biggest to <h1>Main</h1>
smallest)
<p> ... </p> Open & Close Paragraph <p>Hello world</p>
<br> Self-closing Line break Line<br>Break
<hr> Self-closing Horizontal line <hr>
<pre> ... </pre> Open & Close Preformatted text <pre> Code </pre>
<blockquote> Open & Close Quoted text <blockquote>Quote</blockquote>
<code> ... </code> Open & Close Inline code <code>x = 5;</code>
<b> / <strong> Open & Close Bold / Important <strong>Important</strong>
<i> / <em> Open & Close Italic / Emphasis <em>Focus</em>
<mark> Open & Close Highlighted text <mark>Yellow</mark>
<sub> / <sup> Open & Close Subscript / H<sub>2</sub>O
Superscript
<u> Open & Close Underlined text <u>Underline</u>
<small> Open & Close Smaller text <small>Note</small>
<abbr> Open & Close Abbreviation <abbr title="World Health
Org.">WHO</abbr>
📎 List Tags
Tag Type Purpose Example
<ul> ... </ul> Open & Close Unordered list <ul><li>Item</li></ul>
<ol> ... </ol> Open & Close Ordered list <ol><li>One</li></ol>
<li> ... </li> Open & Close List item <li>Item</li>
<dl> ... </dl> Open & Close Description list <dl><dt>HTML</dt><dd>Markup</dd></dl>
<dt> / <dd> Open & Close Term / Description <dt>Tag</dt><dd>Info</dd>
🔗 Links and Media
Tag Type Purpose Example
<a> ... </a> Open & Hyperlink <a href="https://">Link</a>
Close
<img> Self- Image <img src="img.jpg" alt="desc">
closing
<figure> / Open & Image with <figure><img><figcaption>Caption</figcaption></figure>
<figcaption> Close caption
<audio> Open & Audio player <audio controls><source></audio>
Close
<video> Open & Video player <video controls><source></video>
Close
<source> Self- Media <source src="file.mp3" type="audio/mp3">
closing source
📋 Forms and Inputs
Tag Type Purpose Example
<form> ... Open & Close User input form <form action=""></form>
</form>
<input> Self-closing Input field <input type="text">
<textarea> ... Open & Close Multi-line input <textarea></textarea>
</textarea>
<select> ... Open & Close Dropdown <select><option>1</option></select>
</select>
<option> ... Open & Close Dropdown <option value="a">A</option>
</option> option
<label> ... Open & Close Label for input <label for="name">Name</label>
</label>
<button> ... Open & Close Clickable button <button>Click</button>
</button>
<fieldset> ... Open & Close Group form <fieldset><legend>Info</legend></fieldset>
</fieldset> elements
<legend> ... Open & Close Title inside <legend>Contact</legend>
</legend> fieldset
📄 Table Tags
Tag Type Purpose Example
<table> Open & Close Create a table <table>...</table>
<tr> Open & Close Table row <tr>...</tr>
<td> Open & Close Table data cell <td>Data</td>
<th> Open & Close Table header cell <th>Title</th>
<thead> / <tbody> Open & Close Group sections of <thead><tr><th>H</th></tr></thead>
/ <tfoot> table
<caption> Open & Close Table title <caption>My Table</caption>
<col> / <colgroup> Optional Column styling <colgroup><col
span="2"></colgroup>
🌐 Other Useful Tags
Tag Type Purpose Example
<iframe> Open & Embed another <iframe src="page.html"></iframe>
Close page
<canvas> Open & Draw graphics <canvas id="myCanvas"></canvas>
Close via JS
<svg> Open & Scalable vector <svg><circle></circle></svg>
Close graphics
<noscript> Open & Fallback for no <noscript>Enable JS</noscript>
Close JS
<template> Open & Client-side <template><div>Hidden</div></template>
Close template
<details> / Open & Expandable <details><summary>Click</summary>Info</details>
<summary> Close content
<dialog> Open & Modal popup <dialog open>Dialog</dialog>
Close
