diff --git a/static/img/tutorials/html/browser-developer-tools.png b/static/img/tutorials/html/browser-developer-tools.png
new file mode 100644
index 000000000..033988b46
Binary files /dev/null and b/static/img/tutorials/html/browser-developer-tools.png differ
diff --git a/static/img/tutorials/html/create-your-first-html-page.png b/static/img/tutorials/html/create-your-first-html-page.png
new file mode 100644
index 000000000..1cac1539d
Binary files /dev/null and b/static/img/tutorials/html/create-your-first-html-page.png differ
diff --git a/static/img/tutorials/html/elements.png b/static/img/tutorials/html/elements.png
new file mode 100644
index 000000000..bd4002d49
Binary files /dev/null and b/static/img/tutorials/html/elements.png differ
diff --git a/static/img/tutorials/html/getting-started.png b/static/img/tutorials/html/getting-started.png
new file mode 100644
index 000000000..077733174
Binary files /dev/null and b/static/img/tutorials/html/getting-started.png differ
diff --git a/static/img/tutorials/html/how-the-web-works.png b/static/img/tutorials/html/how-the-web-works.png
new file mode 100644
index 000000000..33b27b81a
Binary files /dev/null and b/static/img/tutorials/html/how-the-web-works.png differ
diff --git a/static/img/tutorials/html/html-document-structure.png b/static/img/tutorials/html/html-document-structure.png
new file mode 100644
index 000000000..91f67fbd1
Binary files /dev/null and b/static/img/tutorials/html/html-document-structure.png differ
diff --git a/static/img/tutorials/html/html-syntax.png b/static/img/tutorials/html/html-syntax.png
new file mode 100644
index 000000000..f8d0a9360
Binary files /dev/null and b/static/img/tutorials/html/html-syntax.png differ
diff --git a/static/img/tutorials/html/html-vs-html5.png b/static/img/tutorials/html/html-vs-html5.png
new file mode 100644
index 000000000..673db17f1
Binary files /dev/null and b/static/img/tutorials/html/html-vs-html5.png differ
diff --git a/static/img/tutorials/html/tags.png b/static/img/tutorials/html/tags.png
new file mode 100644
index 000000000..8615dbb91
Binary files /dev/null and b/static/img/tutorials/html/tags.png differ
diff --git a/tutorials/html/02-html-syntax/attributes.mdx b/tutorials/html/02-html-syntax/attributes.mdx
index 7ccb507b8..32ff9dd3a 100644
--- a/tutorials/html/02-html-syntax/attributes.mdx
+++ b/tutorials/html/02-html-syntax/attributes.mdx
@@ -1,15 +1,423 @@
---
id: attributes
-title: "HTML Attributes: Name-Value Pairs and Boolean Attributes"
+title: "HTML Attributes"
sidebar_label: "Attributes"
sidebar_position: 4
slug: /html/html-syntax/attributes
-description: "Master HTML attributes, syntax conventions, quoted vs unquoted values, boolean flags, and custom data attributes."
+description: "Learn how HTML attributes work: syntax and quoting rules, required vs optional attributes, boolean attributes, data-* attributes, and common mistakes. A clear, example-driven guide for beginners."
keywords:
- HTML attributes
- - boolean attributes
- - data attributes
- - attribute value syntax
+ - what are HTML attributes
+ - HTML attribute syntax
+ - boolean attributes HTML
+ - data attributes HTML
+ - HTML href src alt
+ - HTML quoting rules
+ - required HTML attributes
+ - custom data attributes
+ - learn HTML attributes
- CodeHarborHub HTML
-tags: [html, attributes, syntax, frontend]
----
\ No newline at end of file
+tags: [html, web-development, beginner, syntax, attributes]
+image: /img/tutorials/html/attributes.png
+last_update:
+ author: CodeHarborHub
+---
+
+Tags tell the browser *what* something is. **Attributes** tell the browser *more details* about it. An `` tag says "there's an image here," but it's the attributes that say *which* image file, *how big*, and *what to describe it as* if it fails to load.
+
+If elements are the nouns of HTML, **attributes are the adjectives**. They add detail, behavior, and meaning to the tags you already know.
+
+:::info Quick definition
+An **attribute** is extra information added inside an element's **start tag**, always written as a **name**, usually followed by an **equals sign** and a **value** in quotes.
+:::
+
+
+
+
+## Anatomy of an Attribute
+
+```html
+Visit CodeHarborHub
+```
+
+```mermaid
+flowchart LR
+ A["href"] --> B["="]
+ B --> C["https#58;//codeharborhub.github.io"]
+ A -.- D(["Attribute name"])
+ C -.- E(["Attribute value, in quotes"])
+```
+
+| Part | Example | Meaning |
+|------|---------|---------|
+| **Name** | `href` | What kind of information this is. |
+| **Equals sign** | `=` | Connects the name to its value. |
+| **Value** | `"https://codeharborhub.github.io"` | The actual information, wrapped in quotes. |
+
+An element's start tag can carry **as many attributes as it needs**, separated by spaces:
+
+```html
+
+```
+
+:::tip Where do attributes go?
+Attributes only ever appear in the **start tag**. A closing tag, like `` or ``, never carries attributes.
+:::
+
+## Quoting Rules
+
+HTML gives you some flexibility in how you quote attribute values, but one option is clearly the professional standard.
+
+
+
+
+```html
+Link
+```
+
+This is the convention used across virtually every style guide, framework, and real-world codebase. Use this by default.
+
+
+
+
+```html
+Link
+```
+
+Technically valid HTML, but far less common. Useful in rare cases where your value itself contains double quotes.
+
+
+
+
+```html
+Link
+```
+
+This works **only** if the value has no spaces or special characters, but it's fragile, inconsistent, and considered bad practice. Never rely on it.
+
+
+
+
+:::warning Always quote your attribute values
+Even when HTML technically allows skipping quotes, a single space or special character in an unquoted value can silently break your markup. Quoting every value removes this entire category of bugs.
+:::
+
+## Categories of Attributes
+
+Not all attributes behave the same way. Let's group them by how they work.
+
+### 1. Required attributes
+
+Some attributes are essential for an element to function correctly, even though HTML won't stop you from omitting them.
+
+```html
+
+Click here
+```
+
+Without `src`, an `` has nothing to display. Without `href`, an `` isn't really a link at all, just plain text.
+
+### 2. Optional attributes
+
+These add extra behavior or refinement but are not strictly necessary for the element to work.
+
+```html
+
+```
+
+Here, `width` and `loading` are helpful, but the image would still display without them.
+
+### 3. Boolean attributes
+
+These are special: their **mere presence** turns a feature on. They don't need a value at all, and writing them any of these ways means the same thing:
+
+
+
+
+```html
+
+```
+
+
+
+
+```html
+
+```
+
+
+
+
+```html
+
+```
+
+
+
+
+All three examples disable the input. The first style, just the bare attribute name, is the cleanest and most widely used.
+
+| Boolean attribute | What it does |
+|--------------------|--------------|
+| `disabled` | Disables a form field or button |
+| `checked` | Pre-checks a checkbox or radio button |
+| `required` | Makes a form field mandatory |
+| `readonly` | Prevents editing, but still submits the value |
+| `autofocus` | Focuses the field automatically on page load |
+| `multiple` | Allows selecting multiple values |
+
+:::note If you don't want the feature, remove the attribute entirely
+Unlike other attributes, you cannot "turn off" a boolean attribute by setting it to `"false"`. Writing `disabled="false"` is still treated as **present**, and the field stays disabled. To disable the behavior, delete the attribute completely.
+:::
+
+
+
+
+## Global vs. Specific Attributes
+
+Some attributes work on **almost any element** (`id`, `class`, `title`, `style`), while others only make sense on specific tags.
+
+
+
+
+```html
+
+
+```
+
+
+
+
+```html
+Only links use href
+
+
+```
+
+
+
+
+The "works almost everywhere" group is called **global attributes**, and they deserve their own full lesson because there is quite a bit to cover.
+
+👉 See the next lesson: **[Global Attributes](./global-attributes.mdx)**
+
+## A Field Guide to Common Attributes
+
+
+
+
+| Attribute | Used on | Purpose |
+|-----------|---------|---------|
+| `href` | ``, `` | The destination URL |
+| `src` | ``, `
+```
+
+:::tip Where do attributes go?
+Attributes only ever appear in the **start tag**. A closing tag, like `` or ``, never carries attributes.
+:::
+
+## Quoting Rules
+
+HTML gives you some flexibility in how you quote attribute values, but one option is clearly the professional standard.
+
+
+```
+
+Here, `width` and `loading` are helpful, but the image would still display without them.
+
+### 3. Boolean attributes
+
+These are special: their **mere presence** turns a feature on. They don't need a value at all, and writing them any of these ways means the same thing:
+
+
+
+```
+
+