HTML Tutorial (Basic to Advanced)
Introduction to HTML
HTML (HyperText Markup Language) is the standard language for creating web pages.
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first webpage.</p>
</body>
</html>HTML Basic Tags
Headings
<h1>Main</h1> to <h6>Smallest</h6>Paragraphs
<p>This is a paragraph.</p>Line Break & Horizontal Rule
<br> <!-- Line break -->
<hr> <!-- Horizontal line -->Formatting Tags
<b>Bold</b> <strong>Strong</strong>
<i>Italic</i> <em>Emphasis</em>
<u>Underline</u> <mark>Highlight</mark>
<small>Small</small> <del>Deleted</del> <ins>Inserted</ins> <sub>Sub</sub> <sup>Sup</sup>Links
<a href="https://example.com" target="_blank">Visit</a>target="_blank"opens in a new tab.
Images
<img src="image.jpg" alt="Description" width="300">Lists
Unordered
<ul>
<li>Item</li>
</ul>Ordered
<ol>
<li>Item</li>
</ol>Tables
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>Forms
<form action="/submit" method="post">
<input type="text" name="name" placeholder="Your Name">
<input type="email" name="email" required>
<textarea name="message"></textarea>
<button type="submit">Send</button>
</form>Input Types
<input type="text">
<input type="password">
<input type="checkbox">
<input type="radio">
<input type="submit">
<input type="date">
<input type="file">Div & Span
<div>This is a block element</div>
<span>This is inline</span>Semantic Elements
<header>Top</header>
<nav>Menu</nav>
<main>Content</main>
<article>Post</article>
<aside>Sidebar</aside>
<footer>Bottom</footer>Meta Tags
<meta charset="UTF-8">
<meta name="description" content="HTML tutorial">
<meta name="viewport" content="width=device-width, initial-scale=1.0">HTML Entities
< = <
> = >
= space
" = "
' = '
© = ©Media
Audio
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
</audio>Video
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>Iframe
<iframe src="https://example.com" width="400" height="300"></iframe>Advanced Concepts
Custom Data Attributes
<div data-user-id="1234">User Info</div>HTML5 Input Validation
<input type="email" required>
<input type="text" pattern="[A-Za-z]{3,}">Form Autofill & Autocomplete
<input name="email" autocomplete="email">Accessibility
<img src="img.jpg" alt="Descriptive text">
<label for="email">Email</label>
<input id="email" type="email">Use alt, label, role, and semantic tags to improve accessibility.
Best Practices
- Use semantic HTML.
- Keep structure clean.
- Use comments to explain code.
<!-- This is a comment -->HTML + CSS + JS Integration
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello</h1>
<script src="script.js"></script>
</body>
</html>Final Project Idea
Build a portfolio site using:
<nav>,<main>,<section>,<footer>- Images, forms, and links
- CSS for layout and styling
- JavaScript for interactivity