diff --git a/src/data/roadmaps/html/content/abbr@aeovzlUV4oWwZCMcAoRVC.md b/src/data/roadmaps/html/content/abbr@aeovzlUV4oWwZCMcAoRVC.md
index 4d02ba970..cda348d1b 100644
--- a/src/data/roadmaps/html/content/abbr@aeovzlUV4oWwZCMcAoRVC.md
+++ b/src/data/roadmaps/html/content/abbr@aeovzlUV4oWwZCMcAoRVC.md
@@ -1 +1,8 @@
-# abbr
\ No newline at end of file
+# Abbreviation Element
+
+The `<abbr>` tag in HTML represents an abbreviation or acronym. It's useful for providing a full description of the abbreviated term when the user hovers over it, improving accessibility and clarity. The `title` attribute is used to specify the expanded form of the abbreviation.
+
+Visit the following resources to learn more:
+
+- [@article@<abbr>: The Abbreviation element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/abbr)
+- [@video@HTML abbr tag](https://www.youtube.com/watch?v=yN191Pkg4kg)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/accesibility@YHoag7UR40OeIVUjfhQg_.md b/src/data/roadmaps/html/content/accesibility@YHoag7UR40OeIVUjfhQg_.md
index 80e24ad92..669d4237a 100644
--- a/src/data/roadmaps/html/content/accesibility@YHoag7UR40OeIVUjfhQg_.md
+++ b/src/data/roadmaps/html/content/accesibility@YHoag7UR40OeIVUjfhQg_.md
@@ -1 +1,9 @@
-# Accesibility
\ No newline at end of file
+# Accessibility
+
+Accessibility in HTML refers to the practice of designing and developing web content that is usable by people with disabilities. This involves ensuring that websites and web applications are perceivable, operable, understandable, and robust for individuals who may have visual, auditory, motor, or cognitive impairments, allowing them to access information and interact with the web effectively.
+
+Visit the following resources to learn more:
+
+- [@article@HTML: A good basis for accessibility](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/HTML)
+- [@article@HTML Accessibility: Programming with an Inclusive Perspective](https://www.a11y-collective.com/blog/html-accessibility-programming-with-an-inclusive-perspective/)
+- [@video@Accessibility Savvy: Semantic HTML and Accessibility](https://www.youtube.com/watch?v=qSNUi7pRmWg)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/address@PGKWhfXEd3Iv0AIhL7y4_.md b/src/data/roadmaps/html/content/address@PGKWhfXEd3Iv0AIhL7y4_.md
index 8af23ab5d..8e40ae4d2 100644
--- a/src/data/roadmaps/html/content/address@PGKWhfXEd3Iv0AIhL7y4_.md
+++ b/src/data/roadmaps/html/content/address@PGKWhfXEd3Iv0AIhL7y4_.md
@@ -1 +1,8 @@
-# address
\ No newline at end of file
+# Address Element
+
+The `<address>` element in HTML represents contact information for the author or owner of a document or article. This can include physical addresses, email addresses, phone numbers, and social media links. It's typically used within the `<footer>` of a page or section to provide contact details.
+
+Visit the following resources to learn more:
+
+- [@article@<address>: The Contact Address element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/address)
+- [@video@How do you display addresses in HTML?](https://www.youtube.com/watch?v=P1OCt7x5zSA)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/article@99wo0cNHe0sU63_aDBrxY.md b/src/data/roadmaps/html/content/article@99wo0cNHe0sU63_aDBrxY.md
index 9e0c1ccc0..89226c887 100644
--- a/src/data/roadmaps/html/content/article@99wo0cNHe0sU63_aDBrxY.md
+++ b/src/data/roadmaps/html/content/article@99wo0cNHe0sU63_aDBrxY.md
@@ -1 +1,8 @@
-# article
\ No newline at end of file
+# Article Element
+
+The `<article>` element in HTML represents a self-contained composition in a document, page, application, or site. It is intended to independently distributable or reusable, for example, in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, or any other independent item of content.
+
+Visit the following resources to learn more:
+
+- [@article@<article>: The Article Contents element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/article)
+- [@video@HTML article Tag Tutorial (Semantic Element): Easy Guide for Beginners](https://www.youtube.com/watch?v=C7Sp70_TU40)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/aside@VahoGEC6I3jX1916MsmUY.md b/src/data/roadmaps/html/content/aside@VahoGEC6I3jX1916MsmUY.md
index 2c62eabd7..3f6e572b3 100644
--- a/src/data/roadmaps/html/content/aside@VahoGEC6I3jX1916MsmUY.md
+++ b/src/data/roadmaps/html/content/aside@VahoGEC6I3jX1916MsmUY.md
@@ -1 +1,8 @@
-# aside
\ No newline at end of file
+# Aside Element
+
+The `<aside>` element in HTML represents a section of a page that is tangentially related to the main content. It's often used for sidebars, pull quotes, or other content that provides additional information or context but isn't essential to understanding the primary content. Think of it as content that can be removed without significantly impacting the user's comprehension of the main topic.
+
+Visit the following resources to learn more:
+
+- [@article@<aside>: The Aside element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/aside)
+- [@video@HTML aside Tag Tutorial (Semantic Element): Easy Guide for Beginners](https://www.youtube.com/watch?v=2uKbSQ0mXGA)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/audio@k8FZPxFcDPVnXBONWUhME.md b/src/data/roadmaps/html/content/audio@k8FZPxFcDPVnXBONWUhME.md
index 27040b042..b304abbcf 100644
--- a/src/data/roadmaps/html/content/audio@k8FZPxFcDPVnXBONWUhME.md
+++ b/src/data/roadmaps/html/content/audio@k8FZPxFcDPVnXBONWUhME.md
@@ -1 +1,8 @@
-# Audio
\ No newline at end of file
+# Audio
+
+Audio on the web involves incorporating sound files into HTML documents. This allows users to listen to music, podcasts, or other audio content directly within a webpage. The HTML `<audio>` element is used to embed audio, providing attributes for controlling playback, displaying controls, and specifying multiple source files for browser compatibility.
+
+Visit the following resources to learn more:
+
+- [@article@<audio>: The Embed Audio element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/audio)
+- [@article@Learn HTML audio in 5 minutes!](https://www.youtube.com/watch?v=uof_zYxtnp0)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/b--strong@efddQv5AZqvGmIyuYuCr7.md b/src/data/roadmaps/html/content/b--strong@efddQv5AZqvGmIyuYuCr7.md
index 30e480132..31a52bac1 100644
--- a/src/data/roadmaps/html/content/b--strong@efddQv5AZqvGmIyuYuCr7.md
+++ b/src/data/roadmaps/html/content/b--strong@efddQv5AZqvGmIyuYuCr7.md
@@ -1 +1,9 @@
-# b / strong
\ No newline at end of file
+# b / strong
+
+The `<b>` and `<strong>` tags in HTML are used to make text appear bold. While both achieve a similar visual effect, the `<b>` tag is primarily for stylistic purposes, indicating text that should be visually distinguished without necessarily conveying importance. On the other hand, the `<strong>` tag signifies that the enclosed text has strong importance, seriousness, or urgency.
+
+Visit the following resources to learn more:
+
+- [@article@<b>: The Bring Attention To element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/b)
+- [@article@<strong>: The Strong Importance element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/strong)
+- [@article@The Difference Between <b> and <Strong> in HTML – Explained with Examples](https://www.freecodecamp.org/news/difference-between-b-and-strong-in-html/)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/basic-tags@MjGfRzhVZRxu545TbJ1AJ.md b/src/data/roadmaps/html/content/basic-tags@MjGfRzhVZRxu545TbJ1AJ.md
index dcc8ef3a3..0d3cb016a 100644
--- a/src/data/roadmaps/html/content/basic-tags@MjGfRzhVZRxu545TbJ1AJ.md
+++ b/src/data/roadmaps/html/content/basic-tags@MjGfRzhVZRxu545TbJ1AJ.md
@@ -1 +1,7 @@
-# Basic Tags
\ No newline at end of file
+# Basic HTML Tags
+
+HTML documents are structured using fundamental tags that define the document's content and structure. The `<!DOCTYPE html>` declaration informs the browser that the document is an HTML5 document. The `<html>` tag is the root element, encompassing all other HTML elements. Inside `<html>`, the `<head>` tag contains metadata about the document, such as the title and character set, while the `<body>` tag contains the visible content of the webpage. The `<meta>` tag provides metadata like character encoding (`charset="UTF-8"`) to ensure proper text display.
+
+Visit the following resources to learn more:
+
+- [@article@HTML Basic Tags: A Guide for Complete Beginners with Examples](https://www.tutorialspoint.com/html/html_basic_tags.htm)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/basics-of-seo@yEl77JIN5-ixN5Ay247qp.md b/src/data/roadmaps/html/content/basics-of-seo@yEl77JIN5-ixN5Ay247qp.md
index ed74602e9..b8632cc12 100644
--- a/src/data/roadmaps/html/content/basics-of-seo@yEl77JIN5-ixN5Ay247qp.md
+++ b/src/data/roadmaps/html/content/basics-of-seo@yEl77JIN5-ixN5Ay247qp.md
@@ -1 +1,11 @@
-# Basics of SEO
\ No newline at end of file
+# Basics of SEO
+
+Search Engine Optimization (SEO) is the practice of improving a website to increase its visibility in search engine results pages (SERPs). This involves optimizing various elements of a website, such as its content, structure, and HTML code, to make it more appealing to search engines like Google. The goal is to rank higher in search results for relevant keywords, which can drive more organic traffic to the website.
+
+Visit the following resources to learn more:
+
+- [@article@Search Engine Optimization (SEO) Starter Guide](https://developers.google.com/search/docs/fundamentals/seo-starter-guide)
+- [@article@What Is SEO?](https://exposureninja.com/blog/what-is-seo/)
+- [@article@GEO (Generative Engine Optimization) vs SEO (Search Engine Optimization): What’s The Difference?](https://writesonic.com/blog/geo-vs-seo)
+- [@video@SEO In 5 Minutes | What Is SEO And How Does It Work](https://www.youtube.com/watch?v=MYE6T_gd7H0)
+- [@video@Why Generative Engine Optimisation (GEO) is the FUTURE of SEO](https://www.youtube.com/watch?v=FoIc8LkSETo)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/blockquote@B-Bv4aY_tGgWakyT8TgEe.md b/src/data/roadmaps/html/content/blockquote@B-Bv4aY_tGgWakyT8TgEe.md
index 4af5d0a0a..abb61dc03 100644
--- a/src/data/roadmaps/html/content/blockquote@B-Bv4aY_tGgWakyT8TgEe.md
+++ b/src/data/roadmaps/html/content/blockquote@B-Bv4aY_tGgWakyT8TgEe.md
@@ -1 +1,8 @@
-# blockquote
\ No newline at end of file
+# blockquote
+
+The `blockquote` element in HTML represents a section of text that is quoted from another source. It's used to indicate that the enclosed content is an extended quotation, often displayed with indentation or other visual cues to distinguish it from the surrounding text. The `cite` attribute can be used to specify the URL of the source document or message.
+
+Visit the following resources to learn more:
+
+- [@article@<blockquote>: The Block Quotation element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/blockquote)
+- [@video@The Blockquote and Quote Tags](https://www.youtube.com/watch?v=SNEABGfkWhQ)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/body@93tSk4RwWfkfOyaA7I9Gn.md b/src/data/roadmaps/html/content/body@93tSk4RwWfkfOyaA7I9Gn.md
index 109dcbcc5..66a712b9d 100644
--- a/src/data/roadmaps/html/content/body@93tSk4RwWfkfOyaA7I9Gn.md
+++ b/src/data/roadmaps/html/content/body@93tSk4RwWfkfOyaA7I9Gn.md
@@ -1 +1,7 @@
-# body
\ No newline at end of file
+# Body Tag
+
+The `<body>` tag in HTML defines the main content of an HTML document. It contains all the visible elements of a webpage, such as text, images, links, tables, lists, and more. Think of it as the container for everything you actually see and interact with on a website.
+
+Visit the following resources to learn more:
+
+- [@article@<body>: The Document Body element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/body)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/br@cBKw3jiAvdXVwUryV1aJl.md b/src/data/roadmaps/html/content/br@cBKw3jiAvdXVwUryV1aJl.md
index 9232bb4fa..58907bd80 100644
--- a/src/data/roadmaps/html/content/br@cBKw3jiAvdXVwUryV1aJl.md
+++ b/src/data/roadmaps/html/content/br@cBKw3jiAvdXVwUryV1aJl.md
@@ -1 +1,8 @@
-# br
\ No newline at end of file
+# br Tag
+
+The `<br>` tag in HTML creates a line break within a text block. It's used to start a new line without creating a new paragraph, effectively forcing the text that follows to appear on the next line. It is an empty element, meaning it has no closing tag.
+
+Visit the following resources to learn more:
+
+- [@article@<br>: The Line Break element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/br)
+- [@video@hr & br tags in HTML](https://www.youtube.com/watch?v=B1UCE3nfLww)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/case-insensitivity@qXcn_AGcGWjT8GgjaW5WN.md b/src/data/roadmaps/html/content/case-insensitivity@qXcn_AGcGWjT8GgjaW5WN.md
index 077460c18..74b0f56c3 100644
--- a/src/data/roadmaps/html/content/case-insensitivity@qXcn_AGcGWjT8GgjaW5WN.md
+++ b/src/data/roadmaps/html/content/case-insensitivity@qXcn_AGcGWjT8GgjaW5WN.md
@@ -1 +1,3 @@
-# Case Insensitivity
\ No newline at end of file
+# Case Insensitivity
+
+HTML isn't picky about capitalization. You can write tags and attributes using uppercase, lowercase, or a mix of both. For example, `<html>`, `<HTML>`, and `<Html>` all work the same way. While browsers understand all these variations, it's generally considered good practice to stick to lowercase for better readability and consistency in your code.
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/cite@PE_WoH4nbGAJSJT14Qli0.md b/src/data/roadmaps/html/content/cite@PE_WoH4nbGAJSJT14Qli0.md
index 674c44adc..e8a407634 100644
--- a/src/data/roadmaps/html/content/cite@PE_WoH4nbGAJSJT14Qli0.md
+++ b/src/data/roadmaps/html/content/cite@PE_WoH4nbGAJSJT14Qli0.md
@@ -1 +1,8 @@
-# cite
\ No newline at end of file
+# The `<cite>` Element
+
+The `<cite>` element in HTML is used to define the title of a creative work (e.g., a book, article, song, movie, painting, sculpture, etc.). It's typically used to provide a reference or citation for a source. The content inside the `<cite>` element is often rendered in italics by browsers, but this styling can be overridden with CSS.
+
+Visit the following resources to learn more:
+
+- [@article@<cite>: The Citation element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/cite)
+- [@video@How to set work title (cite tag) in HTML | HTML5 Tutorial](https://www.youtube.com/watch?v=nCsUD4h1qC4)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/class@R0mDuO5V5NJI8Yupc_i8i.md b/src/data/roadmaps/html/content/class@R0mDuO5V5NJI8Yupc_i8i.md
index 873c91f98..9a2c1f709 100644
--- a/src/data/roadmaps/html/content/class@R0mDuO5V5NJI8Yupc_i8i.md
+++ b/src/data/roadmaps/html/content/class@R0mDuO5V5NJI8Yupc_i8i.md
@@ -1 +1,9 @@
-# class
\ No newline at end of file
+# Class Attribute
+
+The `class` attribute in HTML is used to specify one or more class names for an HTML element. These class names can then be used by CSS and JavaScript to style and manipulate specific elements or groups of elements that share the same class. Essentially, it's a way to categorize and target elements for styling and scripting purposes.
+
+Visit the following resources to learn more:
+
+- [@article@HTML class global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/class)
+- [@article@HTML Class](https://www.codecademy.com/resources/docs/html/attributes/class)
+- [@video@HTML - Classes | W3Schools](https://www.youtube.com/watch?v=tWIkDOJo0Ts)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/csp@9FAlTHlRj_DVjbpuiGRzD.md b/src/data/roadmaps/html/content/csp@9FAlTHlRj_DVjbpuiGRzD.md
index 06a632ad0..a64bb75a6 100644
--- a/src/data/roadmaps/html/content/csp@9FAlTHlRj_DVjbpuiGRzD.md
+++ b/src/data/roadmaps/html/content/csp@9FAlTHlRj_DVjbpuiGRzD.md
@@ -1 +1,9 @@
-# CSP
\ No newline at end of file
+# Content Security Policy
+
+Content Security Policy (CSP) is a security standard introduced to prevent cross-site scripting (XSS), clickjacking, and other code injection attacks. It works by allowing you to define a whitelist of sources that the browser is permitted to load resources from. This helps to control the origins of scripts, stylesheets, images, and other assets, effectively reducing the attack surface of a web application.
+
+Visit the following resources to learn more:
+
+- [@article@Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP)
+- [@article@Content Security Policy Cheat Sheet¶](https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html)
+- [@video@Content Security Policy Explained](https://www.youtube.com/watch?v=-LjPRzFR5f0)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/css@fX71CXA26cUxY5WX_zABi.md b/src/data/roadmaps/html/content/css@fX71CXA26cUxY5WX_zABi.md
index af63ef9fb..c4b741778 100644
--- a/src/data/roadmaps/html/content/css@fX71CXA26cUxY5WX_zABi.md
+++ b/src/data/roadmaps/html/content/css@fX71CXA26cUxY5WX_zABi.md
@@ -4,7 +4,8 @@ CSS, or Cascading Style Sheets, is a language used to describe the look and form
 
 Visit the following resources to learn more:
 
+- [@official@Visit the Dedicated CSS Roadmap](https://roadmap.sh/css)
+- [@book@HTML & CSS: design and build websites](https://sites.math.duke.edu/courses/math_everywhere/assets/techRefs/HTML%20and%20CSS-%20Design%20and%20Build%20Websites_Jon%20Duckett_2011.pdf)
 - [@article@CSS MDN Docs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS)
 - [@article@CSS | Wikipedia](https://en.wikipedia.org/wiki/CSS)
-- [@video@CSS Tutorial – Full Course for Beginners](https://www.youtube.com/watch?v=OXGznpKZ_sA)
-- [@book@HTML & CSS: design and build websites](https://sites.math.duke.edu/courses/math_everywhere/assets/techRefs/HTML%20and%20CSS-%20Design%20and%20Build%20Websites_Jon%20Duckett_2011.pdf)
\ No newline at end of file
+- [@video@CSS Tutorial – Full Course for Beginners](https://www.youtube.com/watch?v=OXGznpKZ_sA)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/data-attributes@7iDMmYQ-2Q6hrrFnUgRuP.md b/src/data/roadmaps/html/content/data-attributes@7iDMmYQ-2Q6hrrFnUgRuP.md
index 166e12057..7725e0c3a 100644
--- a/src/data/roadmaps/html/content/data-attributes@7iDMmYQ-2Q6hrrFnUgRuP.md
+++ b/src/data/roadmaps/html/content/data-attributes@7iDMmYQ-2Q6hrrFnUgRuP.md
@@ -1 +1,9 @@
-# Data Attributes
\ No newline at end of file
+# Data Attributes
+
+Data attributes are special attributes in HTML that allow you to store extra information directly within HTML elements. These attributes start with `data-` followed by a name of your choosing. They are primarily used to store custom data private to the page or application, meaning they are not intended for use by search engines or other external services. This data can then be accessed and used by JavaScript to enhance the functionality and interactivity of your web pages.
+
+Visit the following resources to learn more:
+
+- [@article@Use data attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Use_data_attributes)
+- [@article@HTML Data Attributes Guide](https://css-tricks.com/a-complete-guide-to-data-attributes/)
+- [@video@Using HTML5 Data Attributes in JavaScript and CSS Tutorial](https://www.youtube.com/watch?v=cTe5vQAm2So)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/definition-lists@pEcxDj3dSgAwxydwKWU7d.md b/src/data/roadmaps/html/content/definition-lists@pEcxDj3dSgAwxydwKWU7d.md
index 2ff274f91..b20911313 100644
--- a/src/data/roadmaps/html/content/definition-lists@pEcxDj3dSgAwxydwKWU7d.md
+++ b/src/data/roadmaps/html/content/definition-lists@pEcxDj3dSgAwxydwKWU7d.md
@@ -1 +1,8 @@
-# Definition lists
\ No newline at end of file
+# Definition Lists
+
+Definition lists in HTML are used to present terms and their corresponding definitions. They are structured using three main elements: `<dl>` (definition list), `<dt>` (definition term), and `<dd>` (definition description). The `<dl>` element acts as the container for the entire list, while each term is marked with `<dt>` and its associated description is enclosed within `<dd>`. This structure allows for a clear and organized presentation of terms and their meanings.
+
+Visit the following resources to learn more:
+
+- [@article@<dl>: The Description List element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dl)
+- [@article@<dd>: The Description Details element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dd)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/del@v3Uf4LTfCbyasNJ-2Vfj9.md b/src/data/roadmaps/html/content/del@v3Uf4LTfCbyasNJ-2Vfj9.md
index b05660254..c82d4bc00 100644
--- a/src/data/roadmaps/html/content/del@v3Uf4LTfCbyasNJ-2Vfj9.md
+++ b/src/data/roadmaps/html/content/del@v3Uf4LTfCbyasNJ-2Vfj9.md
@@ -1 +1,8 @@
-# del
\ No newline at end of file
+# del
+
+The `<del>` element in HTML represents text that has been deleted or removed from a document. Browsers typically render deleted text with a strikethrough, visually indicating that the content is no longer valid or accurate. This element is useful for showing edits and revisions in a clear and understandable way.
+
+Visit the following resources to learn more:
+
+- [@article@<del>: The Deleted Text element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/del)
+- [@video@Deleted Text in HTML (del Tag)](https://www.youtube.com/watch?v=7TuyqBr0eH8)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/dfn@jfC0Og9340AK7b3Fhp4WI.md b/src/data/roadmaps/html/content/dfn@jfC0Og9340AK7b3Fhp4WI.md
index 604ee8eb1..a28ae6006 100644
--- a/src/data/roadmaps/html/content/dfn@jfC0Og9340AK7b3Fhp4WI.md
+++ b/src/data/roadmaps/html/content/dfn@jfC0Og9340AK7b3Fhp4WI.md
@@ -1 +1,8 @@
-# dfn
\ No newline at end of file
+# dfn
+
+The `<dfn>` element in HTML represents the defining instance of a term. It's used to indicate the specific location where a word or phrase is being defined for the first time within a document. Typically, the term being defined is included within the `<dfn>` tags, and often a definition or explanation of the term is provided nearby.
+
+Visit the following resources to learn more:
+
+- [@article@<dfn>: The Definition element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dfn)
+- [@video@HTML dfn Tag](https://www.youtube.com/watch?v=o6pKejnUN9s)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/div@ihP3FIRMr8iQTdOja_CxV.md b/src/data/roadmaps/html/content/div@ihP3FIRMr8iQTdOja_CxV.md
index a261ec91c..7c60b04b5 100644
--- a/src/data/roadmaps/html/content/div@ihP3FIRMr8iQTdOja_CxV.md
+++ b/src/data/roadmaps/html/content/div@ihP3FIRMr8iQTdOja_CxV.md
@@ -1 +1,9 @@
-# div
\ No newline at end of file
+# div
+
+The `<div>` element is a generic container for flow content, which in simpler terms means it's a way to group together other HTML elements. It doesn't inherently represent anything specific on its own, but it's commonly used to structure and style sections of a webpage. It has no effect on the content or layout until styled in some way using CSS (e.g., styling is directly applied to it, or some kind of layout model like Flexbox is applied to its parent element).
+
+Visit the following resources to learn more:
+
+- [@article@<div>: The Content Division element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div)
+- [@article@HTML Div – What is a Div Tag and How to Style it with CSS](https://www.freecodecamp.org/news/html-div-what-is-a-div-tag-and-how-to-style-it-with-css/)
+- [@video@Learn HTML span & div in 4 minutes!](https://www.youtube.com/watch?v=WbnCll6vvw4)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/dns@0Q41Bm_TZqsC7X-MH8uFe.md b/src/data/roadmaps/html/content/dns@0Q41Bm_TZqsC7X-MH8uFe.md
index 90d1bcc07..c7ac9bcb6 100644
--- a/src/data/roadmaps/html/content/dns@0Q41Bm_TZqsC7X-MH8uFe.md
+++ b/src/data/roadmaps/html/content/dns@0Q41Bm_TZqsC7X-MH8uFe.md
@@ -1,6 +1,6 @@
 # DNS
 
-DNS (Domain Name System) translates human-readable domain names into IP addresses through a global, decentralized server network. Enables easy internet navigation by converting names like www.example.com to numeric addresses browsers can connect to.
+DNS (Domain Name System) translates human-readable domain names into IP addresses through a global, decentralized server network. Enables easy internet navigation by converting names like [www.example.com](http://www.example.com) to numeric addresses browsers can connect to.
 
 Visit the following resources to learn more:
 
diff --git a/src/data/roadmaps/html/content/doctype@VscH3rVqpX29vaKmdCMop.md b/src/data/roadmaps/html/content/doctype@VscH3rVqpX29vaKmdCMop.md
index c02cc5821..0f293aefe 100644
--- a/src/data/roadmaps/html/content/doctype@VscH3rVqpX29vaKmdCMop.md
+++ b/src/data/roadmaps/html/content/doctype@VscH3rVqpX29vaKmdCMop.md
@@ -1 +1,9 @@
-# !DOCTYPE
\ No newline at end of file
+# !DOCTYPE Declaration
+
+The `<!DOCTYPE>` declaration is an instruction to the web browser about the HTML version used to write the page. It's placed at the very top of an HTML document, before the `<html>` tag, and ensures that the browser renders the page in "standards mode," following the correct specifications for that HTML version. Technically, It is not an HTML tag itself.
+
+Visit the following resources to learn more:
+
+- [@article@Doctype | DMN docs](https://developer.mozilla.org/en-US/docs/Glossary/Doctype)
+- [@article@What is the DOCTYPE Declaration in HTML?](https://www.freecodecamp.org/news/what-is-the-doctype-declaration-in-html/)
+- [@video@HTML DOCTYPE | Standards vs Quirks mode | HTML 5 Tutorial](https://www.youtube.com/watch?v=G1MOlh5uJYE)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/domain-names@oRjacb1OqAlsP-YB16Nuy.md b/src/data/roadmaps/html/content/domain-names@oRjacb1OqAlsP-YB16Nuy.md
index bb04d4b5d..1f9b7dba0 100644
--- a/src/data/roadmaps/html/content/domain-names@oRjacb1OqAlsP-YB16Nuy.md
+++ b/src/data/roadmaps/html/content/domain-names@oRjacb1OqAlsP-YB16Nuy.md
@@ -1,6 +1,6 @@
 # Domain name
 
-Domain names are human-friendly web addresses (e.g., google.com) substituting numerical IP addresses. Comprise second-level ("google") and top-level (".com") domains. Registered through registrars, essential for branding and online presence. DNS translates names to IP addresses for accessibility.
+Domain names are human-friendly web addresses (e.g., [google.com](http://google.com)) substituting numerical IP addresses. Comprise second-level ("google") and top-level (".com") domains. Registered through registrars, essential for branding and online presence. DNS translates names to IP addresses for accessibility.
 
 Visit the following resources to learn more:
 
diff --git a/src/data/roadmaps/html/content/embedding-media@UevJNi2HHNzpCAx7Icd0k.md b/src/data/roadmaps/html/content/embedding-media@UevJNi2HHNzpCAx7Icd0k.md
index 2ae9bc2de..76fa03ab1 100644
--- a/src/data/roadmaps/html/content/embedding-media@UevJNi2HHNzpCAx7Icd0k.md
+++ b/src/data/roadmaps/html/content/embedding-media@UevJNi2HHNzpCAx7Icd0k.md
@@ -1 +1,7 @@
-# Embedding Media
\ No newline at end of file
+# Embedding Media
+
+Embedding media in HTML involves integrating multimedia content like images, audio, and video directly into a webpage. This allows users to view or listen to these elements without having to download them separately or navigate to another site. HTML provides specific elements, such as `<img>`, `<audio>`, and `<video>`, to facilitate this embedding process, along with attributes to control their appearance and behavior.
+
+Visit the following resources to learn more:
+
+- [@article@Adding Media](https://learn.shayhowe.com/html-css/adding-media/)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/external-css@PhC4amuHcgxujOJisNsIr.md b/src/data/roadmaps/html/content/external-css@PhC4amuHcgxujOJisNsIr.md
index d38c02c19..151e0934b 100644
--- a/src/data/roadmaps/html/content/external-css@PhC4amuHcgxujOJisNsIr.md
+++ b/src/data/roadmaps/html/content/external-css@PhC4amuHcgxujOJisNsIr.md
@@ -1 +1,8 @@
-# External CSS
\ No newline at end of file
+# External CSS
+
+External CSS involves creating separate files (with a `.css` extension) to hold all the styling rules for an HTML document. These CSS files are then linked to the HTML document using the `<link>` tag, allowing you to apply the same styles across multiple pages and keep your HTML code clean and organized. This approach promotes reusability and maintainability of your website's design.
+
+Visit the following resources to learn more:
+
+- [@article@Types of CSS: inline, external and internal definitions and differences explained](https://www.hostinger.com/tutorials/difference-between-inline-external-and-internal-css)
+- [@video@External Style Sheets | CSS](https://www.youtube.com/watch?v=2P_LUPc2HrM)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/file-uploads@-UlDLjC8VsrKB9yexMtlr.md b/src/data/roadmaps/html/content/file-uploads@-UlDLjC8VsrKB9yexMtlr.md
index 54a3d9089..935e1da07 100644
--- a/src/data/roadmaps/html/content/file-uploads@-UlDLjC8VsrKB9yexMtlr.md
+++ b/src/data/roadmaps/html/content/file-uploads@-UlDLjC8VsrKB9yexMtlr.md
@@ -1 +1,10 @@
-# File Uploads
\ No newline at end of file
+# File Uploads
+
+File uploads allow users to send files from their computer to a web server. This is typically achieved through an HTML form that includes an `<input>` element with the `type` attribute set to "file". When the form is submitted, the selected file(s) are sent to the server for processing and storage.
+
+Visit the following resources to learn more:
+
+- [@article@<input type="file">](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file)
+- [@article@How to Upload Files with HTML](https://www.freecodecamp.org/news/upload-files-with-html/)
+- [@video@HTML File Uploads in 5 Minutes (Plus Some JavaScript Features)](https://www.youtube.com/watch?v=iAxUpo0aJSk)
+- [@video@Uploading Files to the Web with HTML](https://www.youtube.com/watch?v=iAxUpo0aJSk)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/footer@rjE1yjFZ6KBWXgXDRIZc1.md b/src/data/roadmaps/html/content/footer@rjE1yjFZ6KBWXgXDRIZc1.md
index 931d6d4b1..b886a1c32 100644
--- a/src/data/roadmaps/html/content/footer@rjE1yjFZ6KBWXgXDRIZc1.md
+++ b/src/data/roadmaps/html/content/footer@rjE1yjFZ6KBWXgXDRIZc1.md
@@ -1 +1,8 @@
-# footer
\ No newline at end of file
+# Footer
+
+The `<footer>` element in HTML represents a container for introductory content or navigation links that typically appear at the end of a section or document. It usually contains information about the author, copyright data, terms of use, contact information, related documents, and sometimes navigation. A footer is not necessarily restricted to the bottom of the page; it can be used within sections to denote the end of that specific content area.
+
+Visit the following resources to learn more:
+
+- [@article@<footer>: The Footer element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/footer)
+- [@video@Learn HTML headers & footers in 5 minutes! 🤯](https://www.youtube.com/watch?v=JNFdCgmMkPk)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/form-validation@6NvYDlYYLZzf4IHXu0dWs.md b/src/data/roadmaps/html/content/form-validation@6NvYDlYYLZzf4IHXu0dWs.md
index cfe51df66..73232da4c 100644
--- a/src/data/roadmaps/html/content/form-validation@6NvYDlYYLZzf4IHXu0dWs.md
+++ b/src/data/roadmaps/html/content/form-validation@6NvYDlYYLZzf4IHXu0dWs.md
@@ -1 +1,9 @@
-# Form Validation
\ No newline at end of file
+# Form Validation
+
+Form validation is the process of checking if the information a user provides in a form is correct and complete before it's submitted. This ensures that the data received is accurate and meets the required format, preventing errors and improving data quality. It can involve checking for things like required fields, correct email addresses, valid date formats, and acceptable password strength.
+
+Visit the following resources to learn more:
+
+- [@article@Client-side form validation](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation)
+- [@article@Using HTML form validation and the Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation)
+- [@article@HTML Form Validation: Techniques, Tips, and Tools](https://www.dhiwise.com/post/html-form-validation-techniques-tips-and-tools)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/grouping-text@Wu3oW_gnjKTYV8QJHdNxi.md b/src/data/roadmaps/html/content/grouping-text@Wu3oW_gnjKTYV8QJHdNxi.md
index 188ea37f3..77563224b 100644
--- a/src/data/roadmaps/html/content/grouping-text@Wu3oW_gnjKTYV8QJHdNxi.md
+++ b/src/data/roadmaps/html/content/grouping-text@Wu3oW_gnjKTYV8QJHdNxi.md
@@ -1 +1,3 @@
-# Grouping text
\ No newline at end of file
+# Grouping Text
+
+`<div>` and `<span>` are HTML elements used to group other elements together. The `<div>` element is a block-level element, meaning it creates a distinct block on the page and typically starts on a new line. It's often used for larger structural groupings. The `<span>` element, on the other hand, is an inline element, meaning it flows within the surrounding text and doesn't create a new line. It's useful for styling or manipulating specific portions of text without disrupting the overall layout.
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/h1-to-h6@AmIRWclu6IYViWHXnGA8U.md b/src/data/roadmaps/html/content/h1-to-h6@AmIRWclu6IYViWHXnGA8U.md
index 94d7fe2fc..8f51e6cd2 100644
--- a/src/data/roadmaps/html/content/h1-to-h6@AmIRWclu6IYViWHXnGA8U.md
+++ b/src/data/roadmaps/html/content/h1-to-h6@AmIRWclu6IYViWHXnGA8U.md
@@ -1 +1,8 @@
-# h1 to h6
\ No newline at end of file
+# Headings
+
+Headings are used to define the titles and subtitles within a document. HTML provides six levels of headings, from `<h1>` (the most important and largest) to `<h6>` (the least important and smallest). They help structure content and improve readability by creating a clear hierarchy.
+
+Visit the following resources to learn more:
+
+- [@article@<h1>–<h6>: The HTML Section Heading elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements)
+- [@video@HTML - Headings | W3Schools](https://www.youtube.com/watch?v=9gHPpwq6IaY)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/head@Ufgy4-kC2drCov4MqEhjy.md b/src/data/roadmaps/html/content/head@Ufgy4-kC2drCov4MqEhjy.md
index cb37d3a58..480fe1959 100644
--- a/src/data/roadmaps/html/content/head@Ufgy4-kC2drCov4MqEhjy.md
+++ b/src/data/roadmaps/html/content/head@Ufgy4-kC2drCov4MqEhjy.md
@@ -1 +1,8 @@
-# head
\ No newline at end of file
+# head
+
+The `<head>` element in HTML acts as a container for metadata (data about data) about the HTML document. This metadata isn't displayed on the page itself, but it provides information like the document's title, character set, linked stylesheets, scripts, and other important configurations that help browsers and search engines understand and process the HTML document correctly.
+
+Visit the following resources to learn more:
+
+- [@article@<head>: The Document Metadata (Header) element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/head)
+- [@video@Head Tag in HTML | An HTML5 Head Element Tutorial](https://www.youtube.com/watch?v=QRvA8Mp-uME)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/header@0AF0Xs2nWVZav9t5Eh9NX.md b/src/data/roadmaps/html/content/header@0AF0Xs2nWVZav9t5Eh9NX.md
index 7b74be4dd..594c90150 100644
--- a/src/data/roadmaps/html/content/header@0AF0Xs2nWVZav9t5Eh9NX.md
+++ b/src/data/roadmaps/html/content/header@0AF0Xs2nWVZav9t5Eh9NX.md
@@ -1 +1,8 @@
-# header
\ No newline at end of file
+# Header
+
+The `<header>` element represents introductory content, typically containing a group of introductory or navigational aids. It might contain a heading, logo, search form, or other relevant content. It's used to define the top section of a document, article, or section.
+
+Visit the following resources to learn more:
+
+- [@article@<header>: The Header element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/header)
+- [@video@Learn HTML headers & footers in 5 minutes!](https://www.youtube.com/watch?v=JNFdCgmMkPk)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/hr@Bdu0_AcAADs7YiCaHte1g.md b/src/data/roadmaps/html/content/hr@Bdu0_AcAADs7YiCaHte1g.md
index 35e7c5de1..4e06fd5af 100644
--- a/src/data/roadmaps/html/content/hr@Bdu0_AcAADs7YiCaHte1g.md
+++ b/src/data/roadmaps/html/content/hr@Bdu0_AcAADs7YiCaHte1g.md
@@ -1 +1,8 @@
-# hr
\ No newline at end of file
+# Horizontal Rule
+
+The `<hr>` tag in HTML creates a thematic break in an HTML page and is most often displayed as a horizontal rule. It's used to separate content visually, like dividing sections of text or indicating a change in topic. The `<hr>` tag is an empty element, meaning it doesn't have a closing tag.
+
+Visit the following resources to learn more:
+
+- [@article@<hr>: The Thematic Break (Horizontal Rule) element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/hr)
+- [@video@hr & br tags in HTML](https://www.youtube.com/watch?v=B1UCE3nfLww)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/html-comments@-ME4w8Bm5krSH14Yno4E5.md b/src/data/roadmaps/html/content/html-comments@-ME4w8Bm5krSH14Yno4E5.md
index 721556ebc..5800e6f53 100644
--- a/src/data/roadmaps/html/content/html-comments@-ME4w8Bm5krSH14Yno4E5.md
+++ b/src/data/roadmaps/html/content/html-comments@-ME4w8Bm5krSH14Yno4E5.md
@@ -1 +1,8 @@
-# HTML Comments
\ No newline at end of file
+# HTML Comments
+
+Comments in HTML are notes that you can add to your code to explain what's going on, make reminders, or temporarily disable parts of your code. These comments are not displayed in the browser, so they're only visible when someone views the source code. To create a comment in HTML, you enclose your text within `<!--` and `-->`. Anything between these tags will be ignored by the browser.
+
+Visit the following resources to learn more:
+
+- [@article@Using HTML comments <!-- … -->](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Comments)
+- [@video@HTML - Comments - W3Schools.com](https://www.youtube.com/watch?v=229HYq40vaA)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/html-entities@Ego3XwBDgqlXOj6jSNvpy.md b/src/data/roadmaps/html/content/html-entities@Ego3XwBDgqlXOj6jSNvpy.md
index b1e9926ae..7c9b29469 100644
--- a/src/data/roadmaps/html/content/html-entities@Ego3XwBDgqlXOj6jSNvpy.md
+++ b/src/data/roadmaps/html/content/html-entities@Ego3XwBDgqlXOj6jSNvpy.md
@@ -1 +1,9 @@
-# HTML Entities
\ No newline at end of file
+# HTML Entities
+
+HTML entities are special codes used to represent reserved characters or characters that are difficult to type directly in HTML. They allow you to display characters like angle brackets (&lt; and &gt;), ampersands (&amp;), and copyright symbols (&copy;) that have special meanings in HTML or are not readily available on a standard keyboard. Using entities ensures that these characters are displayed correctly in a web browser.
+
+Visit the following resources to learn more:
+
+- [@article@Entity | MDN docs](https://developer.mozilla.org/en-US/docs/Glossary/Entity)
+- [@article@Character reference | MDN docs](https://developer.mozilla.org/en-US/docs/Glossary/Character_reference)
+- [@video@What Are HTML Entities, and What Are Some Common Examples?](https://www.youtube.com/watch?v=brTVRzirTGM)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/html@fP2cPskF9KzppZUhfyB8U.md b/src/data/roadmaps/html/content/html@fP2cPskF9KzppZUhfyB8U.md
index 375e06ddd..d05485b3f 100644
--- a/src/data/roadmaps/html/content/html@fP2cPskF9KzppZUhfyB8U.md
+++ b/src/data/roadmaps/html/content/html@fP2cPskF9KzppZUhfyB8U.md
@@ -1 +1,8 @@
-# html
\ No newline at end of file
+# HTML Element
+
+The `<html>` element is the root element of an HTML page. It tells the browser that this is an HTML document. All other HTML elements (except for the `<!DOCTYPE>` declaration) must be descendants of the `<html>` element.
+
+Visit the following resources to learn more:
+
+- [@article@<html>: The HTML Document / Root element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/html)
+- [@article@HTML <html> Tag](https://www.w3schools.com/tags/tag_html.asp)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/i--em@9EGwQalXfVGpVcMpTeD4V.md b/src/data/roadmaps/html/content/i--em@9EGwQalXfVGpVcMpTeD4V.md
index 1703a81dd..da2f655f4 100644
--- a/src/data/roadmaps/html/content/i--em@9EGwQalXfVGpVcMpTeD4V.md
+++ b/src/data/roadmaps/html/content/i--em@9EGwQalXfVGpVcMpTeD4V.md
@@ -1 +1,9 @@
-# i / em
\ No newline at end of file
+# i / em
+
+The `<i>` and `<em>` tags in HTML are used to emphasize text. The `<i>` tag represents text that is set off from the normal prose, such as technical terms, foreign words, or thoughts. The `<em>` tag represents stress emphasis of its contents. While both may render similarly in browsers (often as italicized text), `<em>` has semantic meaning, indicating importance, whereas `<i>` is purely presentational.
+
+Visit the following resources to learn more:
+
+- [@article@<i>: The Idiomatic Text element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/i)
+- [@article@<em>: The Emphasis element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/em)
+- [@video@Learn HTML em and i elements in 6 minutes](https://m.youtube.com/watch?v=yhbzW3y_7KE)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/id@PikSDs0EZ93RauZc_GDEw.md b/src/data/roadmaps/html/content/id@PikSDs0EZ93RauZc_GDEw.md
index b9893e37b..52f5263ae 100644
--- a/src/data/roadmaps/html/content/id@PikSDs0EZ93RauZc_GDEw.md
+++ b/src/data/roadmaps/html/content/id@PikSDs0EZ93RauZc_GDEw.md
@@ -1 +1,9 @@
-# id
\ No newline at end of file
+# id Attribute
+
+The `id` attribute in HTML provides a unique identifier for an element within a document. This identifier allows you to target and manipulate that specific element using CSS styles, JavaScript code, or even link directly to it using fragment identifiers in URLs (e.g., `#section1`). Each `id` value should be unique within the entire HTML document to ensure proper functionality.
+
+Visit the following resources to learn more:
+
+- [@article@HTML id global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/id)
+- [@article@HTML id](https://www.codecademy.com/resources/docs/html/attributes/id)
+- [@video@HTML - Id | W3Schools](https://www.youtube.com/watch?v=rZ0k516qZmc)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/iframe@W0pWVr4cdxSan9Ceu5t7i.md b/src/data/roadmaps/html/content/iframe@W0pWVr4cdxSan9Ceu5t7i.md
index 4a93b1229..7976820fb 100644
--- a/src/data/roadmaps/html/content/iframe@W0pWVr4cdxSan9Ceu5t7i.md
+++ b/src/data/roadmaps/html/content/iframe@W0pWVr4cdxSan9Ceu5t7i.md
@@ -1 +1,9 @@
-# iframe
\ No newline at end of file
+# iframe
+
+An `iframe` (Inline Frame) is an HTML element that allows you to embed another HTML document within the current HTML page. It essentially creates a window within your webpage where you can display content from a different source, such as another website, a video, or even another HTML file on your own server.
+
+Visit the following resources to learn more:
+
+- [@article@<iframe>: The Inline Frame element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe)
+- [@article@What is an iframe, and how do you use it on your website?](https://world.siteground.com/kb/what-is-iframe/)
+- [@video@Learn HTML iframes in 3 minutes](https://www.youtube.com/watch?v=aRGdDy18qfY)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/images@94HB2gvHgcEIeFQTlbVDu.md b/src/data/roadmaps/html/content/images@94HB2gvHgcEIeFQTlbVDu.md
index d14d00086..7cb0f7777 100644
--- a/src/data/roadmaps/html/content/images@94HB2gvHgcEIeFQTlbVDu.md
+++ b/src/data/roadmaps/html/content/images@94HB2gvHgcEIeFQTlbVDu.md
@@ -1 +1,9 @@
-# Images
\ No newline at end of file
+# Images
+
+Images are a way to display visual content on a webpage. They are added to HTML documents using the `<img>` tag, which links to an image file. Attributes like `src` (source), `alt` (alternative text), `width`, and `height` are used to specify the image's location, description, and dimensions.
+
+Visit the following resources to learn more:
+
+- [@article@HTML images](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images)
+- [@article@<img>: The Image Embed element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img)
+- [@video@HTML - Images | W3Schools](https://www.youtube.com/watch?v=FmoYRiepmOE)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/img-vs-figure@f5O_U9dt0b73ZhLrWWz2L.md b/src/data/roadmaps/html/content/img-vs-figure@f5O_U9dt0b73ZhLrWWz2L.md
index 853340ad7..c3a23e79e 100644
--- a/src/data/roadmaps/html/content/img-vs-figure@f5O_U9dt0b73ZhLrWWz2L.md
+++ b/src/data/roadmaps/html/content/img-vs-figure@f5O_U9dt0b73ZhLrWWz2L.md
@@ -1 +1,9 @@
-# img vs figure
\ No newline at end of file
+# img vs. figure
+
+The `<img>` tag in HTML is used to embed a simple image directly into a webpage. It requires a `src` attribute to specify the image source. On the other hand, the `<figure>` element represents self-contained content, like an image, illustration, diagram, code snippet, etc., that is referenced as a single unit. It is typically used with the `<figcaption>` element to provide a caption for the figure.
+
+Visit the following resources to learn more:
+
+- [@article@<figure>: The Figure with Optional Caption element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figure)
+- [@article@The Ultimate Guide to Using HTML Figure Elements](https://www.dhiwise.com/post/the-ultimate-guide-to-using-html-figure-elements)
+- [@video@When to use image, figure and picture tag in html](https://www.youtube.com/watch?v=Xn5_gDQFyJg)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/including-javascript@5Ze6iqSnZLpQWnhUSGQOE.md b/src/data/roadmaps/html/content/including-javascript@5Ze6iqSnZLpQWnhUSGQOE.md
index 933ec85ae..103bf5f4e 100644
--- a/src/data/roadmaps/html/content/including-javascript@5Ze6iqSnZLpQWnhUSGQOE.md
+++ b/src/data/roadmaps/html/content/including-javascript@5Ze6iqSnZLpQWnhUSGQOE.md
@@ -1 +1,9 @@
-# Including JavaScript
\ No newline at end of file
+# Including JavaScript
+
+JavaScript can be added to HTML documents to make web pages interactive. This is done by embedding the JavaScript code directly within the HTML or by linking to external JavaScript files. Embedding uses the `<script>` tag, while linking uses the `<script>` tag with the `src` attribute pointing to the JavaScript file.
+
+Visit the following resources to learn more:
+
+- [@official@Visit the Dedicated JavaScript Roadmap](https://roadmap.sh/javascript)
+- [@article@Add JavaScript to your web page](https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Add_JavaScript_to_your_web_page)
+- [@video@Link JavaScript to HTML: How to run your JavaScript code in the browser](https://www.youtube.com/watch?v=821C5aJ3SLM)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/inline-css@ievbuvgPKo261hM-9F117.md b/src/data/roadmaps/html/content/inline-css@ievbuvgPKo261hM-9F117.md
index 8b3053bc5..44ba25952 100644
--- a/src/data/roadmaps/html/content/inline-css@ievbuvgPKo261hM-9F117.md
+++ b/src/data/roadmaps/html/content/inline-css@ievbuvgPKo261hM-9F117.md
@@ -1 +1,8 @@
-# Inline CSS
\ No newline at end of file
+# Inline CSS
+
+Inline CSS involves applying styles directly to individual HTML elements using the `style` attribute. This method allows you to define specific visual properties for a single element, overriding any styles defined in external stylesheets or internal style blocks. It's useful for quick, element-specific styling, but can become difficult to manage for larger projects due to its lack of reusability and separation of concerns.
+
+Visit the following resources to learn more:
+
+- [@article@Inline Style in HTML – CSS Inline Styles](https://www.freecodecamp.org/news/inline-style-in-html/)
+- [@video@HTML & CSS for Absolute Beginners: Inline CSS and Internal stylesheets](https://www.youtube.com/watch?v=5vf7rtzil9M)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/ins@G_hZBbIGOLn1-sh1jROL3.md b/src/data/roadmaps/html/content/ins@G_hZBbIGOLn1-sh1jROL3.md
index c8ec107cd..6a9ae4c7b 100644
--- a/src/data/roadmaps/html/content/ins@G_hZBbIGOLn1-sh1jROL3.md
+++ b/src/data/roadmaps/html/content/ins@G_hZBbIGOLn1-sh1jROL3.md
@@ -1 +1,8 @@
-# ins
\ No newline at end of file
+# ins Element
+
+The `<ins>` element in HTML represents text that has been inserted into a document. It's used to indicate additions or updates to content, often displayed with an underline to visually distinguish it from the original text. This element helps to clearly communicate revisions and modifications within a webpage.
+
+Visit the following resources to learn more:
+
+- [@article@<ins>: The Inserted Text element -](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ins)
+- [@video@Inserted Text in HTML (ins Tag)](https://www.youtube.com/watch?v=fKWiyfOUs9M)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/internal-css@1uhThwxjHgXPu_i1__1eE.md b/src/data/roadmaps/html/content/internal-css@1uhThwxjHgXPu_i1__1eE.md
index ae8c06992..923fdb7ce 100644
--- a/src/data/roadmaps/html/content/internal-css@1uhThwxjHgXPu_i1__1eE.md
+++ b/src/data/roadmaps/html/content/internal-css@1uhThwxjHgXPu_i1__1eE.md
@@ -1 +1,8 @@
-# Internal CSS
\ No newline at end of file
+# Internal CSS
+
+Internal CSS allows you to add styles directly within an HTML document using the `<style>` tag. This tag is typically placed inside the `<head>` section of your HTML file. Within the `<style>` tag, you can define CSS rules that apply to specific HTML elements on that page, controlling their appearance and layout.
+
+Visit the following resources to learn more:
+
+- [@article@Types of CSS: inline, external and internal definitions and differences explained](https://www.hostinger.com/tutorials/difference-between-inline-external-and-internal-css)
+- [@video@HTML & CSS for Absolute Beginners: Inline CSS and Internal stylesheets](https://www.youtube.com/watch?v=5vf7rtzil9M)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/introduction@JkLec2vSBMFAUc1Dzra-L.md b/src/data/roadmaps/html/content/introduction@JkLec2vSBMFAUc1Dzra-L.md
index cf46e73ed..1a925f899 100644
--- a/src/data/roadmaps/html/content/introduction@JkLec2vSBMFAUc1Dzra-L.md
+++ b/src/data/roadmaps/html/content/introduction@JkLec2vSBMFAUc1Dzra-L.md
@@ -4,7 +4,7 @@ HTML, or HyperText Markup Language, is the standard language for creating web pa
 
 Visit the following resources to learn more:
 
+- [@book@HTML & CSS: design and build websites](https://sites.math.duke.edu/courses/math_everywhere/assets/techRefs/HTML%20and%20CSS-%20Design%20and%20Build%20Websites_Jon%20Duckett_2011.pdf)
 - [@article@HTML MDN Docs](https://developer.mozilla.org/en-US/docs/Web/HTML)
 - [@article@What is HTML – Definition and Meaning of Hypertext Markup Language](https://www.freecodecamp.org/news/what-is-html-definition-and-meaning/)
-- [@video@HTML Tutorial for Beginners: HTML Crash Course](https://www.youtube.com/watch?v=qz0aGYrrlhU)
-- [@book@HTML & CSS: design and build websites](https://sites.math.duke.edu/courses/math_everywhere/assets/techRefs/HTML%20and%20CSS-%20Design%20and%20Build%20Websites_Jon%20Duckett_2011.pdf)
\ No newline at end of file
+- [@video@HTML Tutorial for Beginners: HTML Crash Course](https://www.youtube.com/watch?v=qz0aGYrrlhU)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/labels-and-inputs@9R5WYPxlChmz6bevJUwsT.md b/src/data/roadmaps/html/content/labels-and-inputs@9R5WYPxlChmz6bevJUwsT.md
index dc0303e5c..6b7076b14 100644
--- a/src/data/roadmaps/html/content/labels-and-inputs@9R5WYPxlChmz6bevJUwsT.md
+++ b/src/data/roadmaps/html/content/labels-and-inputs@9R5WYPxlChmz6bevJUwsT.md
@@ -1 +1,9 @@
-# Labels and Inputs
\ No newline at end of file
+# Labels and Inputs
+
+Labels and inputs are fundamental building blocks for creating forms in HTML. Labels provide descriptive text that tells users what information is expected in a corresponding input field. Input elements, on the other hand, are the interactive controls where users can enter data, such as text, numbers, dates, or make selections from options. They work together to create a user-friendly and accessible form experience.
+
+Visit the following resources to learn more:
+
+- [@article@<label>: The Label element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label)
+- [@article@<input>: The HTML Input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input)
+- [@article@HTML Inputs and Labels: A Love Story](https://css-tricks.com/html-inputs-and-labels-a-love-story/)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/limitations@HxgDw9gh1vHiMIMyZW8H2.md b/src/data/roadmaps/html/content/limitations@HxgDw9gh1vHiMIMyZW8H2.md
index c8c7798df..9d616a237 100644
--- a/src/data/roadmaps/html/content/limitations@HxgDw9gh1vHiMIMyZW8H2.md
+++ b/src/data/roadmaps/html/content/limitations@HxgDw9gh1vHiMIMyZW8H2.md
@@ -1 +1,8 @@
-# Limitations
\ No newline at end of file
+# HTML Form Constraints
+
+HTML form constraints are rules you set on form fields to control what kind of data users can enter. These constraints help ensure that the information submitted is valid and meets your requirements. For example, you can specify that a field is required, set a minimum or maximum length for text, or restrict the input to a specific data type like a number or email address. These limitations are defined using HTML attributes directly within the form elements.
+
+Visit the following resources to learn more:
+
+- [@article@Using HTML form validation and the Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation)
+- [@article@The Definitive Guide to the Constraint Validation API](https://dev.to/itxshakil/the-definitive-guide-to-the-constraint-validation-api-3l80)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/links@wmAps9IeAvOxcqBqgUAXN.md b/src/data/roadmaps/html/content/links@wmAps9IeAvOxcqBqgUAXN.md
index 8794cf327..7a5c0db6e 100644
--- a/src/data/roadmaps/html/content/links@wmAps9IeAvOxcqBqgUAXN.md
+++ b/src/data/roadmaps/html/content/links@wmAps9IeAvOxcqBqgUAXN.md
@@ -1 +1,9 @@
-# Links
\ No newline at end of file
+# Links
+
+Links, also known as hyperlinks, are elements that connect one web resource to another. They allow users to navigate between different pages on the same website or to external websites. Links are created using the `<a>` (anchor) tag, and they can point to various types of resources, including HTML pages, images, documents, and more.
+
+Visit the following resources to learn more:
+
+- [@article@<a>: The Anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a)
+- [@article@The HTML <a> Tag – Anchor Tag Example Code](https://www.freecodecamp.org/news/the-html-a-tag-anchor-tag-example-code/)
+- [@video@HTML a Tag Tutorial: Easy Guide for Beginners](https://www.youtube.com/watch?v=J0jqBqFd7Ro)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/lists-and-types@oHbzYpFInyr5aKCe-NWkC.md b/src/data/roadmaps/html/content/lists-and-types@oHbzYpFInyr5aKCe-NWkC.md
index 147504330..5f2ea4017 100644
--- a/src/data/roadmaps/html/content/lists-and-types@oHbzYpFInyr5aKCe-NWkC.md
+++ b/src/data/roadmaps/html/content/lists-and-types@oHbzYpFInyr5aKCe-NWkC.md
@@ -1 +1,8 @@
-# Lists and Types
\ No newline at end of file
+# Lists and Types
+
+Lists in HTML are used to present information in a structured and organized manner. There are primarily two main types: ordered lists (numbered) and unordered lists (bulleted). HTML also supports definition lists, which are used to display terms and their corresponding definitions. Each type of list uses specific HTML tags to define the list structure and its individual items.
+
+Visit the following resources to learn more:
+
+- [@article@HTML Lists](https://www.w3schools.com/html/html_lists.asp)
+- [@video@Learn HTML lists in 4 minutes 📋](https://www.youtube.com/watch?v=-kXZvKxs9oA)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/main@InNY2DPYlnZaeBG9X_sMI.md b/src/data/roadmaps/html/content/main@InNY2DPYlnZaeBG9X_sMI.md
index dbad7d742..a90ecbae5 100644
--- a/src/data/roadmaps/html/content/main@InNY2DPYlnZaeBG9X_sMI.md
+++ b/src/data/roadmaps/html/content/main@InNY2DPYlnZaeBG9X_sMI.md
@@ -1 +1,8 @@
-# main
\ No newline at end of file
+# Main Element
+
+The `<main>` element in HTML defines the primary content of a document's `<body>`. It should contain the central topic of the page, excluding any content that is repeated across multiple pages, such as navigation, headers, or footers. Using `<main>` helps improve accessibility and provides a clear structure for search engines and assistive technologies to understand the page's purpose.
+
+Visit the following resources to learn more:
+
+- [@article@<main>: The Main element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/main)
+- [@video@HTML main Tag Tutorial (Semantic Element): Easy Guide for Beginners](https://www.youtube.com/watch?v=ROahTJeu-Iw)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/mark@9S2IUUWVv_Q7ZfD7VqfhH.md b/src/data/roadmaps/html/content/mark@9S2IUUWVv_Q7ZfD7VqfhH.md
index d426f9782..430a9fe3e 100644
--- a/src/data/roadmaps/html/content/mark@9S2IUUWVv_Q7ZfD7VqfhH.md
+++ b/src/data/roadmaps/html/content/mark@9S2IUUWVv_Q7ZfD7VqfhH.md
@@ -1 +1,8 @@
-# mark
\ No newline at end of file
+# Mark Text
+
+The `<mark>` tag in HTML is used to highlight specific parts of text within a larger block of content. It's primarily intended to draw the reader's attention to these sections, often because they are relevant to the user's current activity or search query. The default styling usually renders the marked text with a yellow background, but this can be customized using CSS.
+
+Visit the following resources to learn more:
+
+- [@article@<mark>: The Mark Text element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/mark)
+- [@video@Mark Tag Example HTML | Master When and How to Use Mark Tag properly!](https://www.youtube.com/watch?v=uJc-UUgZ-UM)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/meta@ceAHMWQeaqURKWy628QBH.md b/src/data/roadmaps/html/content/meta@ceAHMWQeaqURKWy628QBH.md
index b0e6c7c6e..511507d96 100644
--- a/src/data/roadmaps/html/content/meta@ceAHMWQeaqURKWy628QBH.md
+++ b/src/data/roadmaps/html/content/meta@ceAHMWQeaqURKWy628QBH.md
@@ -1 +1,9 @@
-# meta
\ No newline at end of file
+# Meta Tags
+
+Meta tags are HTML elements that provide metadata about a webpage. This data is not displayed on the page itself but is used by browsers, search engines, and other web services to understand the content and purpose of the page. They are placed within the `<head>` section of an HTML document and can specify information like character set, description, keywords, author, and viewport settings.
+
+Visit the following resources to learn more:
+
+- [@article@<meta>: The metadata element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta)
+- [@article@Meta elements | Wikipedia](https://en.wikipedia.org/wiki/Meta_element)
+- [@video@Learn HTML meta tags in 3 minutes](https://www.youtube.com/watch?v=bi5bfH_gVWE)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/nav@4uKQubirOgXz9ZvfR9cWa.md b/src/data/roadmaps/html/content/nav@4uKQubirOgXz9ZvfR9cWa.md
index ed1dd41fc..11e68d98d 100644
--- a/src/data/roadmaps/html/content/nav@4uKQubirOgXz9ZvfR9cWa.md
+++ b/src/data/roadmaps/html/content/nav@4uKQubirOgXz9ZvfR9cWa.md
@@ -1 +1,8 @@
-# nav
\ No newline at end of file
+# Nav
+
+The `<nav>` element in HTML is used to define a section of a page that contains navigation links. It's intended for major navigational blocks, like a site's menu, a table of contents, or a set of breadcrumbs. Using `<nav>` helps structure your content and makes it more accessible to screen readers and search engines by clearly identifying navigation sections.
+
+Visit the following resources to learn more:
+
+- [@article@<nav>: The Navigation Section element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/nav)
+- [@video@HTML nav Tag Tutorial (Semantic Element): Easy Guide for Beginners](https://www.youtube.com/watch?v=FqDFwCQb4yI)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/nested-lists@wDBnbKni0SamOqNhnp87B.md b/src/data/roadmaps/html/content/nested-lists@wDBnbKni0SamOqNhnp87B.md
index 002a1fea2..a187502c5 100644
--- a/src/data/roadmaps/html/content/nested-lists@wDBnbKni0SamOqNhnp87B.md
+++ b/src/data/roadmaps/html/content/nested-lists@wDBnbKni0SamOqNhnp87B.md
@@ -1 +1,7 @@
-# Nested lists
\ No newline at end of file
+# Nested Lists in HTML
+
+Nested lists in HTML allow you to create lists within lists, forming a hierarchical structure. This is achieved by placing one list (either ordered `<ol>` or unordered `<ul>`) inside a list item `<li>` of another list. This creates a sub-list that is visually indented, helping to organize information into related categories and subcategories.
+
+Visit the following resources to learn more:
+
+- [@article@How to Create Nested Lists in HTML: A Simple Guide](https://www.dhiwise.com/post/how-to-create-nested-lists-in-html-a-simple-guide)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/ordered-lists@ePOzN3Sh5tCYlAbsweWU0.md b/src/data/roadmaps/html/content/ordered-lists@ePOzN3Sh5tCYlAbsweWU0.md
index 1cea84e28..c13785e7c 100644
--- a/src/data/roadmaps/html/content/ordered-lists@ePOzN3Sh5tCYlAbsweWU0.md
+++ b/src/data/roadmaps/html/content/ordered-lists@ePOzN3Sh5tCYlAbsweWU0.md
@@ -1 +1,8 @@
-# Ordered lists
\ No newline at end of file
+# Ordered Lists
+
+Ordered lists in HTML are used to display a series of items in a specific order. Each item in the list is typically numbered, allowing readers to easily follow a sequence or ranking. The `<ol>` tag is used to create an ordered list, and each list item is defined using the `<li>` tag.
+
+Visit the following resources to learn more:
+
+- [@article@<ol>: The Ordered List element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ol)
+- [@article@<li>: The List Item element](http://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/li)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/p@czmIvZYONFDxB2UNpT8U1.md b/src/data/roadmaps/html/content/p@czmIvZYONFDxB2UNpT8U1.md
index f95f5d986..2a258e1e0 100644
--- a/src/data/roadmaps/html/content/p@czmIvZYONFDxB2UNpT8U1.md
+++ b/src/data/roadmaps/html/content/p@czmIvZYONFDxB2UNpT8U1.md
@@ -1 +1,8 @@
-# p
\ No newline at end of file
+# p Tag
+
+The `<p>` tag in HTML defines a paragraph. Browsers automatically add a single blank line before and after each paragraph, creating a clear separation between blocks of text. It's a block-level element, meaning it occupies the full width available to it and starts on a new line.
+
+Visit the following resources to learn more:
+
+- [@article@<p>: The Paragraph element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/p)
+- [@video@HTML - Paragraphs | W3Schools](https://www.youtube.com/watch?v=qis4kAOThLw)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/pre@-2BvwJsqa5K8Tb8oSDUC8.md b/src/data/roadmaps/html/content/pre@-2BvwJsqa5K8Tb8oSDUC8.md
index e977222db..9555a1009 100644
--- a/src/data/roadmaps/html/content/pre@-2BvwJsqa5K8Tb8oSDUC8.md
+++ b/src/data/roadmaps/html/content/pre@-2BvwJsqa5K8Tb8oSDUC8.md
@@ -1 +1,9 @@
-# pre
\ No newline at end of file
+# pre
+
+The `<pre>` tag in HTML represents preformatted text. Text inside a `<pre>` element is displayed in a fixed-width font, and it preserves both spaces and line breaks. This is useful for displaying code snippets, ASCII art, or any other text where formatting is important.
+
+Visit the following resources to learn more:
+
+- [@article@<pre>: The Preformatted Text element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/pre)
+- [@article@<pre> Tag in HTML – Example Code](https://www.freecodecamp.org/news/pre-tag-in-html-example-code/)
+- [@video@HTML pre tag (Preformatted Text Element)](https://www.youtube.com/watch?v=9jZLg2CIgQQ)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/priority-hints@znqYy9Tgfpe-qakjRr7KU.md b/src/data/roadmaps/html/content/priority-hints@znqYy9Tgfpe-qakjRr7KU.md
index f7bd5422a..406a482df 100644
--- a/src/data/roadmaps/html/content/priority-hints@znqYy9Tgfpe-qakjRr7KU.md
+++ b/src/data/roadmaps/html/content/priority-hints@znqYy9Tgfpe-qakjRr7KU.md
@@ -1 +1,7 @@
-# Priority Hints
\ No newline at end of file
+# Priority Hints
+
+Priority Hints in HTML allow developers to indicate the relative priority of fetching resources like images. This helps the browser decide which images to load first, potentially improving page load times and user experience by prioritizing content that is immediately visible or more important to the user. This is achieved using the `fetchpriority` attribute.
+
+Visit the following resources to learn more:
+
+- [@article@Priority header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Priority)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/q@Xprekf2SY1fevcR2P5gRw.md b/src/data/roadmaps/html/content/q@Xprekf2SY1fevcR2P5gRw.md
index d3c8b5e2c..e836d8e63 100644
--- a/src/data/roadmaps/html/content/q@Xprekf2SY1fevcR2P5gRw.md
+++ b/src/data/roadmaps/html/content/q@Xprekf2SY1fevcR2P5gRw.md
@@ -1 +1,8 @@
-# q
\ No newline at end of file
+# The `<q>` Element
+
+The `<q>` element in HTML represents a short, inline quotation. Browsers typically render this element with quotation marks around the content it contains. It's designed for brief quotes that fit within a paragraph, as opposed to longer, block-level quotations that would use the `<blockquote>` element.
+
+Visit the following resources to learn more:
+
+- [@article@<q>: The Inline Quotation element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/q)
+- [@video@The Blockquote and Quote Tags](https://www.youtube.com/watch?v=SNEABGfkWhQ)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/s@Hx8mfbfkvRrBqLypE_NL3.md b/src/data/roadmaps/html/content/s@Hx8mfbfkvRrBqLypE_NL3.md
index 955792b48..1ff37f94a 100644
--- a/src/data/roadmaps/html/content/s@Hx8mfbfkvRrBqLypE_NL3.md
+++ b/src/data/roadmaps/html/content/s@Hx8mfbfkvRrBqLypE_NL3.md
@@ -1 +1,8 @@
-# s
\ No newline at end of file
+# s
+
+The `<s>` element in HTML represents content that is no longer accurate or relevant. It indicates things that are no longer correct, accurate, or no longer relevant. Browsers typically render this element with a strikethrough, visually indicating the text has been removed or is no longer valid.
+
+Visit the following resources to learn more:
+
+- [@article@<s>: The Strikethrough element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/del)
+- [@article@HTML s Tag: How it Works with Examples](https://flatcoding.com/tutorials/html/html-s-tag-how-it-works-with-examples/)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/section@1WvHjkclwT-LUGdeuygzV.md b/src/data/roadmaps/html/content/section@1WvHjkclwT-LUGdeuygzV.md
index 98d720de9..6b29eff3d 100644
--- a/src/data/roadmaps/html/content/section@1WvHjkclwT-LUGdeuygzV.md
+++ b/src/data/roadmaps/html/content/section@1WvHjkclwT-LUGdeuygzV.md
@@ -1 +1,8 @@
-# section
\ No newline at end of file
+# Section Tag
+
+The `<section>` tag in HTML is used to define thematic groupings of content within a document. It's a way to organize related content together, like chapters, introductions, or news items. A section typically has a heading and can contain other HTML elements to structure the content within it.
+
+Visit the following resources to learn more:
+
+- [@article@<section>: The Generic Section element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/section)
+- [@video@HTML section Tag Tutorial (Semantic Element): Easy Guide for Beginners](https://www.youtube.com/watch?v=08b6OJbL3Cs)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/semantic-markup@aJTXstcrsINdov7yrH8cE.md b/src/data/roadmaps/html/content/semantic-markup@aJTXstcrsINdov7yrH8cE.md
index 6ec6c02db..3b1e6d901 100644
--- a/src/data/roadmaps/html/content/semantic-markup@aJTXstcrsINdov7yrH8cE.md
+++ b/src/data/roadmaps/html/content/semantic-markup@aJTXstcrsINdov7yrH8cE.md
@@ -1 +1,9 @@
-# Semantic Markup
\ No newline at end of file
+# Semantic Markup
+
+Semantic markup uses HTML tags to convey the meaning and structure of content, rather than just its appearance. This approach makes web pages more accessible to both humans and machines by providing context about the different parts of the content, such as headings, paragraphs, articles, and navigation menus. By using semantic elements, developers create more organized and understandable code, which improves search engine optimization and overall website usability.
+
+Visit the following resources to learn more:
+
+- [@article@Semantics](https://developer.mozilla.org/en-US/docs/Glossary/Semantics)
+- [@article@HTML Semantic Elements](https://www.w3schools.com/html/html5_semantic_elements.asp)
+- [@video@HTML & CSS for Absolute Beginners: Semantic HTML](https://www.youtube.com/watch?v=YOsMJQfwqow)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/span@f7-umBvAzDZxHtHgJMCj6.md b/src/data/roadmaps/html/content/span@f7-umBvAzDZxHtHgJMCj6.md
index 2aab60423..e4b5e1bc0 100644
--- a/src/data/roadmaps/html/content/span@f7-umBvAzDZxHtHgJMCj6.md
+++ b/src/data/roadmaps/html/content/span@f7-umBvAzDZxHtHgJMCj6.md
@@ -1 +1,9 @@
-# span
\ No newline at end of file
+# Span Element
+
+The `<span>` element is an inline container used to mark up a part of a text, or a part of a document. It is used to group elements for styling purposes or because they share attributes such as `lang` or `dir`. It doesn't inherently represent anything on its own, but becomes useful when combined with CSS or JavaScript to target specific sections of text.
+
+Visit the following resources to learn more:
+
+- [@article@<span>: The Content Span element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span)
+- [@article@Span HTML – How to Use the Span Tag with CSS](https://www.freecodecamp.org/news/span-html-how-to-use-the-span-tag-with-css/)
+- [@video@Learn HTML span & div in 4 minutes!](https://www.youtube.com/watch?v=WbnCll6vvw4)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/standard-attributes@xgw2ux-2Poml1fjWxjFsu.md b/src/data/roadmaps/html/content/standard-attributes@xgw2ux-2Poml1fjWxjFsu.md
index 9c0d72614..5216b2495 100644
--- a/src/data/roadmaps/html/content/standard-attributes@xgw2ux-2Poml1fjWxjFsu.md
+++ b/src/data/roadmaps/html/content/standard-attributes@xgw2ux-2Poml1fjWxjFsu.md
@@ -1 +1,3 @@
-# Standard attributes
\ No newline at end of file
+# Standard Attributes
+
+Standard attributes are properties that can be used on almost all HTML elements to provide additional information or functionality. These attributes control things like element styling, identification, accessibility, and event handling, allowing you to modify how elements behave and interact within a webpage. They offer a consistent way to manage common element characteristics across different browsers and devices.
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/style@GpaI2IDHDOZjyT3AZMbYD.md b/src/data/roadmaps/html/content/style@GpaI2IDHDOZjyT3AZMbYD.md
index a75a59ff9..dd5128d5a 100644
--- a/src/data/roadmaps/html/content/style@GpaI2IDHDOZjyT3AZMbYD.md
+++ b/src/data/roadmaps/html/content/style@GpaI2IDHDOZjyT3AZMbYD.md
@@ -1 +1,9 @@
-# style
\ No newline at end of file
+# Style Attribute
+
+The `style` attribute in HTML allows you to apply CSS (Cascading Style Sheets) directly to individual HTML elements. It's used to define inline styles, overriding external stylesheets or default browser styles. You can set properties like color, font, size, and layout directly within the HTML tag.
+
+Visit the following resources to learn more:
+
+- [@article@HTML style global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/style)
+- [@article@HTML style](https://www.codecademy.com/resources/docs/html/attributes/style)
+- [@video@HTML Style Attribute | Mastering of Web development](https://www.youtube.com/watch?v=zk97ve9JM6A)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/styling-basics@51NlCt5pvWNfa70WaE2M4.md b/src/data/roadmaps/html/content/styling-basics@51NlCt5pvWNfa70WaE2M4.md
index 85c1362f1..54cad93e1 100644
--- a/src/data/roadmaps/html/content/styling-basics@51NlCt5pvWNfa70WaE2M4.md
+++ b/src/data/roadmaps/html/content/styling-basics@51NlCt5pvWNfa70WaE2M4.md
@@ -1 +1,9 @@
-# Styling Basics
\ No newline at end of file
+# Styling Basics
+
+Styling Basics in HTML involves using CSS (Cascading Style Sheets) to control the visual presentation of HTML elements. This includes properties like colors, fonts, layout, and responsiveness, allowing you to customize the look and feel of your web pages beyond the default browser styles. By applying CSS rules, you can create visually appealing and user-friendly websites.
+
+Visit the following resources to learn more:
+
+- [@article@Getting started with CSS](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started)
+- [@article@HTML and CSS – Inline Style, External Stylesheet, CSS Code Examples](https://www.freecodecamp.org/news/html-and-css-inline-style-external-stylesheet-css-code-examples/)
+- [@video@CSS - How to add CSS to HTML | W3Schools](https://www.youtube.com/watch?v=VSwaoQ3TFkQ)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/sub@JU8Ff3DSCn_db0K7-P-Op.md b/src/data/roadmaps/html/content/sub@JU8Ff3DSCn_db0K7-P-Op.md
index 687c169c7..76ad315ac 100644
--- a/src/data/roadmaps/html/content/sub@JU8Ff3DSCn_db0K7-P-Op.md
+++ b/src/data/roadmaps/html/content/sub@JU8Ff3DSCn_db0K7-P-Op.md
@@ -1 +1,8 @@
-# sub
\ No newline at end of file
+# Subscript Text
+
+The `<sub>` tag in HTML is used to display text as subscript. Subscript text appears slightly below the normal line of text and is typically rendered in a smaller font size. It's commonly used for mathematical formulas, chemical formulas, or footnotes.
+
+Visit the following resources to learn more:
+
+- [@article@<sub>: The Subscript element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/sub)
+- [@video@HTML sub Tag | HTML sup Tag](https://www.youtube.com/watch?v=7GBTIHoWZko)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/sup@o1rSXBsjhD-sN0FdOK_dm.md b/src/data/roadmaps/html/content/sup@o1rSXBsjhD-sN0FdOK_dm.md
index 3d0edff5a..49173df1f 100644
--- a/src/data/roadmaps/html/content/sup@o1rSXBsjhD-sN0FdOK_dm.md
+++ b/src/data/roadmaps/html/content/sup@o1rSXBsjhD-sN0FdOK_dm.md
@@ -1 +1,8 @@
-# sup
\ No newline at end of file
+# sup
+
+The `<sup>` tag in HTML is used to display text as superscript. Superscript text appears slightly above the normal line of text and is typically rendered in a smaller font size. It's commonly used for things like exponents, ordinal numbers (e.g., 1st, 2nd), and footnotes.
+
+Visit the following resources to learn more:
+
+- [@article@<sup>: The Superscript element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/sup)
+- [@video@HTML sub Tag | HTML sup Tag](https://www.youtube.com/watch?v=7GBTIHoWZko)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/table-tag@3P9p18a9EjbjjMtzpoVRN.md b/src/data/roadmaps/html/content/table-tag@3P9p18a9EjbjjMtzpoVRN.md
index afeb5f1a3..2bd8e8ad5 100644
--- a/src/data/roadmaps/html/content/table-tag@3P9p18a9EjbjjMtzpoVRN.md
+++ b/src/data/roadmaps/html/content/table-tag@3P9p18a9EjbjjMtzpoVRN.md
@@ -1 +1,10 @@
-# Table Tag
\ No newline at end of file
+# HTML Table Tag
+
+The HTML `<table>` tag is used to create tables on web pages. It organizes data into rows and columns, similar to a spreadsheet. Within the `<table>` tag, you'll find tags like `<tr>` for table rows, `<th>` for table headers, and `<td>` for table data cells, which define the structure and content of the table.
+
+Visit the following resources to learn more:
+
+- [@article@<table>: The Table element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table)
+- [@article@HTML table basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics)
+- [@article@HTML Table (With Examples)](https://www.programiz.com/html/table)
+- [@video@How to Create Tables in HTML](https://www.youtube.com/watch?v=e23RA_Uo99o)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/tags-and-attributes@nOIijMH-3TvcO1KL6qzwf.md b/src/data/roadmaps/html/content/tags-and-attributes@nOIijMH-3TvcO1KL6qzwf.md
index b05112e2d..e3293c9fe 100644
--- a/src/data/roadmaps/html/content/tags-and-attributes@nOIijMH-3TvcO1KL6qzwf.md
+++ b/src/data/roadmaps/html/content/tags-and-attributes@nOIijMH-3TvcO1KL6qzwf.md
@@ -1 +1,10 @@
-# Tags and Attributes
\ No newline at end of file
+# Tags and Attributes
+
+Tags and attributes are fundamental building blocks of HTML. Tags define the structure and content of a webpage, such as headings, paragraphs, and images. Attributes provide additional information about HTML elements, modifying their behavior or appearance, like specifying the source of an image or the destination of a link.
+
+Visit the following resources to learn more:
+
+- [@article@Tags | MDN docs](https://developer.mozilla.org/en-US/docs/Glossary/Tag)
+- [@article@Attributes | MDN docs](https://developer.mozilla.org/en-US/docs/Glossary/Attribute)
+- [@video@HTML - Tags | W3Schools](https://www.youtube.com/watch?v=vIoO52MdZFE)
+- [@video@HTML - Attributes | W3Schools](https://www.youtube.com/watch?v=yMX901oVtn8)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/textual-tags@ksKI4TDz4_9IcmNORczWo.md b/src/data/roadmaps/html/content/textual-tags@ksKI4TDz4_9IcmNORczWo.md
index 8ce1463fa..5bb3d35d2 100644
--- a/src/data/roadmaps/html/content/textual-tags@ksKI4TDz4_9IcmNORczWo.md
+++ b/src/data/roadmaps/html/content/textual-tags@ksKI4TDz4_9IcmNORczWo.md
@@ -1 +1,3 @@
-# Textual Tags
\ No newline at end of file
+# Textual Tags
+
+Textual tags in HTML are used to structure and format text content on a webpage. They define how text should appear, whether it's a paragraph, heading, emphasized word, or a quoted section. These tags provide semantic meaning to the text, helping browsers and search engines understand the content's organization and purpose.
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/title@SS7JmTrySRmRlzInvRJxw.md b/src/data/roadmaps/html/content/title@SS7JmTrySRmRlzInvRJxw.md
index efbf2f89f..06b53f961 100644
--- a/src/data/roadmaps/html/content/title@SS7JmTrySRmRlzInvRJxw.md
+++ b/src/data/roadmaps/html/content/title@SS7JmTrySRmRlzInvRJxw.md
@@ -1 +1,8 @@
-# title
\ No newline at end of file
+# Title Tag
+
+The `<title>` tag in HTML defines the title of the HTML document. This title is displayed in the browser's title bar or tab, and it's also used for bookmarking pages and in search engine results. It's placed within the `<head>` section of the HTML document.
+
+Visit the following resources to learn more:
+
+- [@article@<title>: The Document Title element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/title)
+- [@video@HTML Title Tag Example | Step-by-Step Instructions and Real-World Example!](https://www.youtube.com/watch?v=LaSOIf6dnzo)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/unordered-lists@LKn40uz56vYrPnLG3I-CY.md b/src/data/roadmaps/html/content/unordered-lists@LKn40uz56vYrPnLG3I-CY.md
index 71477df9d..6b8ed1c93 100644
--- a/src/data/roadmaps/html/content/unordered-lists@LKn40uz56vYrPnLG3I-CY.md
+++ b/src/data/roadmaps/html/content/unordered-lists@LKn40uz56vYrPnLG3I-CY.md
@@ -1 +1,8 @@
-# Unordered lists
\ No newline at end of file
+# Unordered Lists
+
+Unordered lists present items in a bulleted format, where the order of the items is not significant. They are used to group related content together without implying any specific sequence or priority. Each item in the list is typically marked with a bullet point, making it easy to visually distinguish and scan the list's contents.
+
+Visit the following resources to learn more:
+
+- [@article@<ul>: The Unordered List element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ul)
+- [@article@<li>: The List Item element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/li)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/using-forms@P_wR4dwto2NKrvTRbdBIX.md b/src/data/roadmaps/html/content/using-forms@P_wR4dwto2NKrvTRbdBIX.md
index 6aac6fc8f..ee1b24958 100644
--- a/src/data/roadmaps/html/content/using-forms@P_wR4dwto2NKrvTRbdBIX.md
+++ b/src/data/roadmaps/html/content/using-forms@P_wR4dwto2NKrvTRbdBIX.md
@@ -1 +1,9 @@
-# Using Forms
\ No newline at end of file
+# Using Forms
+
+Forms in HTML are used to collect data from users. They provide a way for users to input information like text, passwords, and selections, and then submit that data to a server for processing. Forms are created using the `<form>` element, which contains various input elements like `<input>`, `<textarea>`, and `<select>` to define the different fields for user input.
+
+Visit the following resources to learn more:
+
+- [@article@Your first form](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Your_first_form)
+- [@article@<form>: The Form element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form)
+- [@video@Learn HTML forms in 8 minutes 📝](https://www.youtube.com/watch?v=2O8pkybH6po)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/video@mWc4HuNQACXGpJjEPa79j.md b/src/data/roadmaps/html/content/video@mWc4HuNQACXGpJjEPa79j.md
index 741a164d2..c06235257 100644
--- a/src/data/roadmaps/html/content/video@mWc4HuNQACXGpJjEPa79j.md
+++ b/src/data/roadmaps/html/content/video@mWc4HuNQACXGpJjEPa79j.md
@@ -1 +1,9 @@
-# Video
\ No newline at end of file
+# Video
+
+The `<video>` element in HTML is used to embed video content directly into a webpage. It allows you to display video files, control playback, and provide options for users to interact with the video, such as pausing, playing, adjusting volume, and viewing in fullscreen. The element supports various video formats and attributes to customize the video's appearance and behavior.
+
+Visit the following resources to learn more:
+
+- [@article@<video>: The Video Embed element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/video)
+- [@article@Learn HTML video in 4 minutes!](https://www.youtube.com/watch?v=BAx2GaMW2qA)
+- [@course@HTML & CSS - How to Embed a YouTube Video in Your Website](https://www.youtube.com/watch?v=ly36kn0ug4k)
\ No newline at end of file
diff --git a/src/data/roadmaps/html/content/whitespaces@IUsaaRxiuOn3y9uYbpsJ0.md b/src/data/roadmaps/html/content/whitespaces@IUsaaRxiuOn3y9uYbpsJ0.md
index df3c0b484..82fff3d9b 100644
--- a/src/data/roadmaps/html/content/whitespaces@IUsaaRxiuOn3y9uYbpsJ0.md
+++ b/src/data/roadmaps/html/content/whitespaces@IUsaaRxiuOn3y9uYbpsJ0.md
@@ -1 +1,8 @@
-# Whitespaces
\ No newline at end of file
+# Whitespaces
+
+Whitespaces in HTML refer to the spaces, tabs, and line breaks that are used to format the code. Browsers typically collapse multiple consecutive whitespaces into a single space when rendering the content. While using whitespaces can improve the readability of your HTML code, they generally don't affect how the page is displayed to the user.
+
+Visit the following resources to learn more:
+
+- [@article@Handling whitespace | DMN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text/Whitespace)
+- [@video@Whitespace in HTML](https://www.youtube.com/watch?v=XhItAZTTSR8)
\ No newline at end of file