diff --git a/frontend/content/html.mdx b/frontend/content/html.mdx
new file mode 100644
index 0000000..e7e6ae8
--- /dev/null
+++ b/frontend/content/html.mdx
@@ -0,0 +1,268 @@
+---
+title: "HTML"
+description: "The standard markup language for building web pages. Learn semantics, structure, forms, media, and modern best practices."
+category: "Core Programming"
+---
+
+## Getting Started
+
+HTML (HyperText Markup Language) is the foundation of every web page. It provides the structure and meaning of content, while CSS handles presentation and JavaScript adds interactivity. A good HTML document is semantic, accessible, and easy to maintain.
+
+### Basic Document Structure
+
+```html
+
+
+
+
+
+ My Page
+
+
+
Hello, World!
+
This is a simple HTML document.
+
+
+```
+
+### Common HTML Elements
+
+```html
+
Heading 1
+
Heading 2
+
This is a paragraph.
+Visit Example
+
+
+```
+
+---
+
+## Semantic Structure
+
+Semantic HTML improves readability for humans and machines. It helps search engines, assistive technologies, and developers understand the purpose of each section.
+
+```html
+
+
+
Article Title
+
Published on April 8, 2026
+
+
+
+
Overview
+
This content belongs to a specific article.
+
+
+
+
+```
+
+### Common Semantic Tags
+
+```html
+Site header
+
+Main content
+Grouped content
+Independent content block
+
+
+```
+
+---
+
+## Text Content & Formatting
+
+HTML provides tags for formatting text, though visual styling is usually handled by CSS.
+
+```html
+
This is important text.
+
This is emphasized text.
+
Use highlighted text for emphasis.
+
Here is inline code.
+
Line break: This continues on the next line.
+```
+
+### Lists
+
+```html
+
+
Unordered list item
+
Another item
+
+
+
+
First item
+
Second item
+
+```
+
+---
+
+## Links, Images & Media
+
+### Anchor Links
+
+```html
+Jump to a section
+Go to About Page
+Email us
+Call us
+```
+
+### Images
+
+```html
+
+
+
+
+```
+
+### Audio and Video
+
+```html
+
+
+
+```
+
+---
+
+## Forms
+
+Forms are essential for collecting user input. They should use appropriate labels and accessible attributes.
+
+```html
+
+```
+
+### Common Input Types
+
+```html
+
+
+
+
+
+
+
+
+```
+
+### Select and Option
+
+```html
+
+
+```
+
+---
+
+## Tables
+
+Tables are used for displaying tabular data, not for visual layout.
+
+```html
+
+
+
+
Name
+
Role
+
+
+
+
+
Alice
+
Developer
+
+
+
Bob
+
Designer
+
+
+
+```
+
+---
+
+## Accessibility Basics
+
+Accessible HTML ensures your content is usable by everyone, including people using assistive technologies.
+
+```html
+
+
+
+
+
+
+```
+
+### Accessibility Tips
+
+- Use meaningful `alt` text for images.
+- Always associate labels with form controls.
+- Use semantic elements like `header`, `main`, and `footer`.
+- Ensure buttons and links have clear purpose.
+- Avoid relying on color alone for meaning.
+
+---
+
+## Best Practices
+
+```html
+
+
+
+
Products
+
Browse our latest offerings.
+
+
+
+
+
+
+
Products
+
Browse our latest offerings.
+
+
+```
+
+### Recommended Practices
+
+- Use semantic tags whenever possible.
+- Keep markup clean and well-indented.
+- Use lowercase tag names and attribute names.
+- Add `alt` text to images.
+- Prefer native form controls over custom ones when possible.
+- Validate your HTML to catch structural issues early.
+
+```
+
+---
+
+## Semantic Structure
+
+Semantic HTML improves readability for humans and machines. It helps search engines, assistive technologies, and developers understand the purpose of each section.
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+### Accessibility Tips
+
+- Use meaningful `alt` text for images.
+- Always associate labels with form controls.
+- Use semantic elements like `header`, `main`, and `footer`.
+- Ensure buttons and links have clear purpose.
+- Avoid relying on color alone for meaning.
+
+---
+
+## Best Practices
+
+```html
+
+