chore: sync content to repo (#9176)

Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com>
2025-10-20 11:31:27 +05:00
1 parent 187b2b6305
commit 406967eaae
@@ -1 +1,8 @@
-# abbr
+# 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)
@@ -1 +1,9 @@
-# Accesibility
+# 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)
@@ -1 +1,8 @@
-# address
+# 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)
@@ -1 +1,8 @@
-# article
+# 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)
@@ -1 +1,8 @@
-# aside
+# 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)
@@ -1 +1,8 @@
-# Audio
+# 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)
@@ -1 +1,9 @@
-# b / strong
+# 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/)
@@ -1 +1,7 @@
-# Basic Tags
+# 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)
@@ -1 +1,11 @@
-# Basics of SEO
+# 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)
@@ -1 +1,8 @@
-# blockquote
+# 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)
@@ -1 +1,7 @@
-# body
+# 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)
@@ -1 +1,8 @@
-# br
+# 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)
@@ -1 +1,3 @@
-# Case Insensitivity
+# 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.
@@ -1 +1,8 @@
-# cite
+# 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)
@@ -1 +1,9 @@
-# class
+# 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)
@@ -1 +1,9 @@
-# CSP
+# 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)
@@ -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)
+- [@video@CSS Tutorial – Full Course for Beginners](https://www.youtube.com/watch?v=OXGznpKZ_sA)
@@ -1 +1,9 @@
-# Data Attributes
+# 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)
@@ -1 +1,8 @@
-# Definition lists
+# 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)
@@ -1 +1,8 @@
-# del
+# 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)
@@ -1 +1,8 @@
-# dfn
+# 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)
@@ -1 +1,9 @@
-# div
+# 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)
@@ -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:

@@ -1 +1,9 @@
-# !DOCTYPE
+# !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)
@@ -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:

@@ -1 +1,7 @@
-# Embedding Media
+# 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/)
@@ -1 +1,8 @@
-# External CSS
+# 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)
@@ -1 +1,10 @@
-# File Uploads
+# 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)
@@ -1 +1,8 @@
-# footer
+# 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)
@@ -1 +1,9 @@
-# Form Validation
+# 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)
@@ -1 +1,3 @@
-# Grouping text
+# 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.
@@ -1 +1,8 @@
-# h1 to h6
+# 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)
@@ -1 +1,8 @@
-# head
+# 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)
@@ -1 +1,8 @@
-# header
+# 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)
@@ -1 +1,8 @@
-# hr
+# 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)
@@ -1 +1,8 @@
-# HTML Comments
+# 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)
@@ -1 +1,9 @@
-# HTML Entities
+# 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)
@@ -1 +1,8 @@
-# html
+# 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)
@@ -1 +1,9 @@
-# i / em
+# 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)
@@ -1 +1,9 @@
-# id
+# 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)
@@ -1 +1,9 @@
-# iframe
+# 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)
@@ -1 +1,9 @@
-# Images
+# 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)
@@ -1 +1,9 @@
-# img vs figure
+# 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)
@@ -1 +1,9 @@
-# Including JavaScript
+# 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)
@@ -1 +1,8 @@
-# Inline CSS
+# 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)
@@ -1 +1,8 @@
-# ins
+# 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)
@@ -1 +1,8 @@
-# Internal CSS
+# 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)
@@ -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)
+- [@video@HTML Tutorial for Beginners: HTML Crash Course](https://www.youtube.com/watch?v=qz0aGYrrlhU)
@@ -1 +1,9 @@
-# Labels and Inputs
+# 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/)
@@ -1 +1,8 @@
-# Limitations
+# 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)
@@ -1 +1,9 @@
-# Links
+# 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)
@@ -1 +1,8 @@
-# Lists and Types
+# 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)
@@ -1 +1,8 @@
-# main
+# 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)
@@ -1 +1,8 @@
-# mark
+# 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)
@@ -1 +1,9 @@
-# meta
+# 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)
@@ -1 +1,8 @@
-# nav
+# 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)
@@ -1 +1,7 @@
-# Nested lists
+# 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)
@@ -1 +1,8 @@
-# Ordered lists
+# 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)
@@ -1 +1,8 @@
-# p
+# 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)
@@ -1 +1,9 @@
-# pre
+# 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)
@@ -1 +1,7 @@
-# Priority Hints
+# 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)
@@ -1 +1,8 @@
-# q
+# 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)
@@ -1 +1,8 @@
-# s
+# 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/)
@@ -1 +1,8 @@
-# section
+# 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)
@@ -1 +1,9 @@
-# Semantic Markup
+# 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)
@@ -1 +1,9 @@
-# span
+# 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)
@@ -1 +1,3 @@
-# Standard attributes
+# 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.
@@ -1 +1,9 @@
-# style
+# 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)
@@ -1 +1,9 @@
-# Styling Basics
+# 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)
@@ -1 +1,8 @@
-# sub
+# 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)
@@ -1 +1,8 @@
-# sup
+# 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)
@@ -1 +1,10 @@
-# Table Tag
+# 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)
@@ -1 +1,10 @@
-# Tags and Attributes
+# 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)
@@ -1 +1,3 @@
-# Textual Tags
+# 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.
@@ -1 +1,8 @@
-# title
+# 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)
@@ -1 +1,8 @@
-# Unordered lists
+# 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)
@@ -1 +1,9 @@
-# Using Forms
+# 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)
@@ -1 +1,9 @@
-# Video
+# 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)
@@ -1 +1,8 @@
-# Whitespaces
+# 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)