HTML Basics
HTML (HyperText Markup Language) is the standard markup language for creating web pages.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
<!-- This is a comment -->
<script src="script.js"></script>
</body>
</html>Element Structure
HTML
<!-- Element with content -->
<tagname attribute="value">Content</tagname>
<!-- Self-closing elements -->
<img src="image.jpg" alt="Description">
<br>
<hr>
<input type="text">
<!-- Global attributes -->
<div id="unique-id" class="class-name" style="color: red;">
<p title="Tooltip text" data-custom="value">Content</p>
</div>Text Elements
HTML
<!-- Headings (h1 most important, h6 least) -->
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<!-- Paragraphs -->
<p>This is a paragraph of text.</p>
<!-- Text formatting -->
<strong>Bold (important)</strong>
<b>Bold (visual only)</b>
<em>Italic (emphasis)</em>
<i>Italic (visual only)</i>
<u>Underline</u>
<s>Strikethrough</s>
<mark>Highlighted</mark>
<small>Small text</small>
<sub>Subscript</sub>
<sup>Superscript</sup>
<!-- Code and preformatted -->
<code>inline code</code>
<pre>
Preformatted
text block
</pre>
<kbd>Keyboard input</kbd>
<!-- Quotations -->
<blockquote cite="source">
Block quotation
</blockquote>
<q>Inline quote</q>
<cite>Citation/Reference</cite>
<!-- Abbreviation -->
<abbr title="HyperText Markup Language">HTML</abbr>
<!-- Line breaks -->
<br> <!-- Line break -->
<hr> <!-- Horizontal rule -->Lists & Tables
HTML
<!-- Unordered list -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!-- Ordered list -->
<ol type="1" start="1">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<!-- Description list -->
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
</dl>
<!-- Table -->
<table>
<caption>Table Title</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td colspan="2">Spans 2 columns</td>
</tr>
<tr>
<td rowspan="2">Spans 2 rows</td>
<td>Data</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer</td>
<td>Footer</td>
</tr>
</tfoot>
</table>Links & Media
HTML
<!-- Links -->
<a href="https://example.com">External Link</a>
<a href="/page.html">Internal Link</a>
<a href="#section-id">Anchor Link</a>
<a href="mailto:email@example.com">Email Link</a>
<a href="tel:+1234567890">Phone Link</a>
<a href="file.pdf" download>Download</a>
<a href="link" target="_blank" rel="noopener">New Tab</a>
<!-- Images -->
<img src="image.jpg" alt="Description" width="300" height="200">
<!-- Responsive images -->
<img src="small.jpg"
srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w"
sizes="(max-width: 600px) 300px, 600px"
alt="Responsive image">
<!-- Figure with caption -->
<figure>
<img src="photo.jpg" alt="Photo">
<figcaption>Photo caption</figcaption>
</figure>
<!-- Video -->
<video controls width="640" height="360" poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser doesn't support video.
</video>
<!-- Audio -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser doesn't support audio.
</audio>
<!-- Iframe -->
<iframe src="https://example.com"
width="600" height="400"
title="Embedded content">
</iframe>
<!-- Picture element for art direction -->
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(min-width: 400px)" srcset="medium.jpg">
<img src="small.jpg" alt="Image">
</picture>Semantic HTML5
Semantic elements clearly describe their meaning to both the browser and the developer. They improve accessibility, SEO, and code readability.
HTML
<!-- Page structure -->
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h1>Article Title</h1>
<time datetime="2024-01-15">January 15, 2024</time>
</header>
<section>
<h2>Section Heading</h2>
<p>Section content...</p>
</section>
<aside>
<p>Related information</p>
</aside>
<footer>
<p>Article footer</p>
</footer>
</article>
</main>
<aside>
<h3>Sidebar</h3>
</aside>
<footer>
<address>
Contact: <a href="mailto:email@example.com">email@example.com</a>
</address>
<p>© 2024 Company Name</p>
</footer>
<!-- Other semantic elements -->
<details>
<summary>Click to expand</summary>
<p>Hidden content</p>
</details>
<dialog open>
<p>Dialog content</p>
<button>Close</button>
</dialog>
<progress value="70" max="100">70%</progress>
<meter value="0.7" min="0" max="1">70%</meter>Forms
HTML
<form action="/submit" method="POST">
<!-- Text inputs -->
<label for="name">Name:</label>
<input type="text" id="name" name="name"
placeholder="Enter name" required>
<input type="email" placeholder="Email" required>
<input type="password" minlength="8">
<input type="tel" pattern="[0-9]{10}">
<input type="url">
<input type="search">
<!-- Number inputs -->
<input type="number" min="0" max="100" step="1">
<input type="range" min="0" max="100">
<!-- Date inputs -->
<input type="date">
<input type="time">
<input type="datetime-local">
<input type="month">
<input type="week">
<!-- Other inputs -->
<input type="color">
<input type="file" accept=".jpg,.png" multiple>
<input type="hidden" name="token" value="abc123">
<!-- Textarea -->
<textarea rows="4" cols="50" maxlength="500"></textarea>
<!-- Select dropdown -->
<select name="country">
<optgroup label="Asia">
<option value="in">India</option>
<option value="jp" selected>Japan</option>
</optgroup>
<optgroup label="Europe">
<option value="uk">UK</option>
</optgroup>
</select>
<!-- Datalist (autocomplete) -->
<input list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
</datalist>
<!-- Checkboxes -->
<input type="checkbox" id="agree" name="agree" checked>
<label for="agree">I agree</label>
<!-- Radio buttons -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<!-- Fieldset for grouping -->
<fieldset>
<legend>Personal Info</legend>
<!-- Form fields here -->
</fieldset>
<!-- Buttons -->
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button">Custom</button>
<input type="submit" value="Submit">
</form>Meta Tags & SEO
HTML
<head>
<!-- Essential meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- SEO -->
<title>Page Title - Brand Name</title>
<meta name="description" content="Page description (150-160 chars)">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="author" content="Author Name">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/page">
<!-- Open Graph (Facebook/LinkedIn) -->
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="https://example.com/image.jpg">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Preload/Prefetch -->
<link rel="preload" href="font.woff2" as="font" crossorigin>
<link rel="prefetch" href="next-page.html">
<link rel="preconnect" href="https://fonts.googleapis.com">
<!-- Theme color (mobile browsers) -->
<meta name="theme-color" content="#ffffff">
</head>
Accessibility Tips:
• Always use alt text for images
• Use semantic elements properly
• Ensure proper heading hierarchy
• Add labels to form inputs
• Use ARIA attributes when needed
• Always use alt text for images
• Use semantic elements properly
• Ensure proper heading hierarchy
• Add labels to form inputs
• Use ARIA attributes when needed