A complete HTML handbook for Frontend Developers covering beginner to advanced concepts, accessibility, SEO, performance, and modern frontend integration.
- HTML5 Doctype
- Basic Structure
- Meta Tags
- Comments
- Global Attributes
- Block vs Inline Elements
- Headings
- Paragraphs
- Formatting Tags
- Line Break & Horizontal Rule
- Pre & Code
- Blockquote & Quote
- Abbreviation & Citation
- Address & Time
- Anchor Tag
- Absolute URL
- Relative URL
- Target Attribute
- Rel Attribute
- Email Links
- Phone Links
- Download Links
- Hash Navigation
- Navigation Structure
- Ordered Lists
- Unordered Lists
- Description Lists
- Nested Lists
- Images
- Responsive Images
- Picture Element
- Figure & Figcaption
- Audio
- Video
- Iframe
- Lazy Loading
- Table Structure
- Thead
- Tbody
- Tfoot
- Colspan
- Rowspan
- Accessibility
- Form Element
- Input Types
- Textarea
- Select
- Label
- Fieldset
- Legend
- Validation
- Autocomplete
- GET vs POST
- Enctype
- Header
- Footer
- Main
- Section
- Article
- Aside
- Nav
- Details
- Summary
- Time
- Mark
- ARIA Roles
- aria-label
- aria-describedby
- Keyboard Navigation
- Tabindex
- Screen Readers
- Alt Text
- Meta Title
- Meta Description
- Open Graph
- Canonical Tag
- Structured Data
- Heading Hierarchy
- Drag & Drop
- Geolocation
- Local Storage
- Session Storage
- Web Workers
- Content Editable
- Lazy Loading
- Async
- Defer
- Preload
- Prefetch
- DOM Optimization
- Template
- Slot
- Noscript
- Data Attributes
- SVG
- Canvas
- Microdata
- JSX Differences
- Forms in React
- Accessibility
- SSR
- Hydration
- Metadata API
- Semantic HTML
- Accessibility
- SEO
- Performance
- Maintainability
- Beginner
- Intermediate
- Advanced
- Scenario Based
Purpose: Defines HTML5 document type.
<!DOCTYPE html>Example 1
<!DOCTYPE html>
<html>
</html>Example 2
<!DOCTYPE html>
<html lang="en">
</html>Example 3
<!DOCTYPE html>
<html lang="hi">
</html>Example 4
<!DOCTYPE html>
<html lang="fr">
</html>Example 5
<!DOCTYPE html>
<html lang="de">
</html>Purpose: Defines page structure.
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
</head>
<body>
Content
</body>
</html>Examples:
- Portfolio Page
- Blog Page
- E-Commerce Home
- Dashboard
- Landing Page
Purpose: Provide browser and SEO information.
<meta charset="UTF-8"><meta
name="viewport"
content="width=device-width, initial-scale=1.0"><meta
name="description"
content="Frontend Developer Portfolio"><meta
name="keywords"
content="HTML,CSS,React"><meta
name="author"
content="Dalveer Singh"><div id="card"></div>
<div class="card"></div>
<div title="Profile"></div>
<div data-id="101"></div>
<div hidden></div><div>Container</div>
<section>Section</section>
<article>Article</article>
<p>Paragraph</p>
<h1>Heading</h1><span>Text</span>
<a href="#">Link</a>
<strong>Important</strong>
<em>Emphasis</em>
<img src="image.jpg"><h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section</h3>
<h4>Topic</h4>
<h5>Point</h5>
<h6>Small Heading</h6><p>This is paragraph.</p><b>Bold</b>
<strong>Important</strong>
<i>Italic</i>
<em>Emphasis</em>
<mark>Highlight</mark>
<small>Small Text</small>Line 1<br>
Line 2<hr><code>
const name = "Dalveer";
</code><pre>
npm install
npm start
</pre><blockquote>
Learning never stops.
</blockquote><abbr title="HyperText Markup Language">
HTML
</abbr><time datetime="2026-05-27">
May 27 2026
</time>