Restyled by prettier-markdown

Author: restyled-commits

docs/html/elements-and-tags-html.md

@@ -16,7 +16,6 @@ HTML tags are the building blocks of an HTML document. They are enclosed in angl
 
 For example, the `<h1>` tag is used to define a heading, and it is written as `<h1>Heading</h1>`. The opening tag `<h1>` indicates the start of the heading, and the closing tag `</h1>` indicates the end of the heading.
 
-
 Commonly used HTML Tags:-
 ![Commonly used HTMl Tags](image.png)
 
@@ -30,12 +29,12 @@ For example, in the HTML element `<p> This is a paragraph.</p>`, `<p>` and `</p>
 
 ## Difference between HTML Elements and HTML Tags
 
-| HTML Tags | HTML Elements |
-|-----------|--------------|
-| HTML Tags are used to hold HTML Elements | HTML Elements hold the content |
-| Enclosed in angle brackets (`<>`) | Consist of opening tag, content, and closing tag |
-| Used to define structure and formatting | Can contain text, images, links, or other HTML elements |
-| Paired with opening and closing tags | Content placed between opening and closing tags |
+| HTML Tags                                | HTML Elements                                           |
+| ---------------------------------------- | ------------------------------------------------------- |
+| HTML Tags are used to hold HTML Elements | HTML Elements hold the content                          |
+| Enclosed in angle brackets (`<>`)        | Consist of opening tag, content, and closing tag        |
+| Used to define structure and formatting  | Can contain text, images, links, or other HTML elements |
+| Paired with opening and closing tags     | Content placed between opening and closing tags         |
 
 ## Conclusion
 

docs/html/how-html-works.md

@@ -3,13 +3,22 @@ id: how-html-works
 title: How HTML works with web browsers
 sidebar_label: How HTML works
 sidebar_position: 2
-tags: [html, web-development, front-end-development, web-design, web-browsers, web-technology, web-pages]
+tags:
+  [
+    html,
+    web-development,
+    front-end-development,
+    web-design,
+    web-browsers,
+    web-technology,
+    web-pages,
+  ]
 description: In this tutorial, you will learn about How HTML works with web browsers and how web browsers render HTML content.
 ---
 
 <AdsComponent />
 
-> *We have already learned HTML in the previous tutorial. In this tutorial, we will learn about how HTML works with web browsers and how web browsers render HTML content.*
+> _We have already learned HTML in the previous tutorial. In this tutorial, we will learn about how HTML works with web browsers and how web browsers render HTML content._
 
 HTML, which stands for HyperText Markup Language, serves as the backbone of the World Wide Web. It is the standard language used to create web pages, providing the structure and content that browsers render for users to interact with. Understanding how HTML works with web browsers is fundamental for anyone diving into web development.
 
@@ -40,6 +49,7 @@ HTML is a markup language that uses tags to define the structure and content of
         <p>This is my first web page.</p>
       </BrowserWindow>
     </TabItem>
+
 </Tabs>
 
 In this example, the `<h1>` tag creates a heading, and the `<p>` tag creates a paragraph. The browser interprets these tags and displays the content accordingly. HTML tags can be nested within each other to create more complex structures, such as lists, tables, forms, and more.
@@ -54,12 +64,12 @@ When a user requests a web page by entering a URL in the browser's address bar o
 
 1. **Parsing**: The browser parses the HTML document from top to bottom, identifying and interpreting each element and its attributes. It builds a Document Object Model (DOM) tree, which represents the structure of the web page as a hierarchical collection of nodes. Each node corresponds to an HTML element, such as a heading, paragraph, image, or link.
 
-2. **Rendering**: The browser uses the DOM tree to render the web page on the screen. It determines the layout of the page, including the position and size of each element, based on the **CSS** styles applied to the elements. The browser also calculates the visibility of each element, taking into account factors such as z-index, opacity, and overflow. 
+2. **Rendering**: The browser uses the DOM tree to render the web page on the screen. It determines the layout of the page, including the position and size of each element, based on the **CSS** styles applied to the elements. The browser also calculates the visibility of each element, taking into account factors such as z-index, opacity, and overflow.
 
-    :::info
-    **CSS (Cascading Style Sheets)** is a stylesheet language used to control the presentation of HTML elements on a web page. CSS allows developers to define styles such as colors, fonts, margins, padding, and layout properties to create visually appealing and responsive designs.
+   :::info
+   **CSS (Cascading Style Sheets)** is a stylesheet language used to control the presentation of HTML elements on a web page. CSS allows developers to define styles such as colors, fonts, margins, padding, and layout properties to create visually appealing and responsive designs.
 
-    :::
+   :::
 
 3. **Painting**: The browser paints the pixels on the screen according to the layout determined in the rendering step. It combines the content, styles, and layout to create the final visual representation of the web page.
 
@@ -75,7 +85,7 @@ In addition to rendering HTML content, web browsers handle various resources ass
 
 - **CSS Stylesheets**: Browsers download and apply CSS stylesheets to control the presentation of HTML elements. Stylesheets can be linked externally using the `<link>` tag or embedded within the HTML document using the `<style>` tag.
 
-    For example, the following HTML code snippet links an external CSS stylesheet to the web page:
+  For example, the following HTML code snippet links an external CSS stylesheet to the web page:
 
     <Tabs>
       <TabItem value="HTML Code" label="HTML Code">
@@ -96,7 +106,7 @@ In addition to rendering HTML content, web browsers handle various resources ass
 
         </TabItem>
         <TabItem value="CSS Code" label="CSS Code">
-        
+
         ```css title="styles.css"
           body {
               font-family: Arial, sans-serif;
@@ -118,14 +128,13 @@ In addition to rendering HTML content, web browsers handle various resources ass
             <p style={{color: "#666"}}>This is my first web page.</p>
           </BrowserWindow>
         </TabItem>
-    </Tabs>
-
 
+    </Tabs>
 
 - **JavaScript Code**: Browsers execute JavaScript code embedded in the HTML document or linked externally to add interactivity and dynamic behavior to web pages. JavaScript can manipulate the DOM, handle user input, make network requests, and more.
 
-    For example, the following HTML code snippet includes a JavaScript file in the web page:
-    
+  For example, the following HTML code snippet includes a JavaScript file in the web page:
+
     <Tabs>
       <TabItem value="HTML Code" label="HTML Code">
       
@@ -145,7 +154,7 @@ In addition to rendering HTML content, web browsers handle various resources ass
 
         </TabItem>
         <TabItem value="JavaScript Code" label="JavaScript Code">
-        
+
         ```javascript title="script.js"
           document.getElementById("demo").innerHTML = "Hello, JavaScript!";
           ```
@@ -158,13 +167,13 @@ In addition to rendering HTML content, web browsers handle various resources ass
             <p>Hello, JavaScript!</p>
           </BrowserWindow>
         </TabItem>
-    </Tabs>
 
+    </Tabs>
 
 - **Images and Media**: Browsers download and display images, videos, and audio files embedded in the HTML document using the `<img>`, `<video>`, and `<audio>` tags, respectively. These resources enhance the visual and multimedia content of web pages.
-  
-    For example, the following HTML code snippet includes an image in the web page:
-    
+
+  For example, the following HTML code snippet includes an image in the web page:
+
     <Tabs>
       <TabItem value="HTML Code" label="HTML Code">
       
@@ -189,6 +198,7 @@ In addition to rendering HTML content, web browsers handle various resources ass
             <img src="/img/img-5.png" alt="An image" />
           </BrowserWindow>
         </TabItem>
+
     </Tabs>
 
 By managing these resources efficiently, web developers can create engaging and interactive web pages that deliver a rich user experience. Understanding how HTML works with web browsers and how browsers render content is essential for building modern web applications that meet user expectations and performance standards.
@@ -233,4 +243,4 @@ By understanding the HTML parsing process, web developers can optimize their cod
 
 ## Conclusion
 
-In this tutorial, we explored how HTML works with web browsers and how browsers render HTML content to create web pages. HTML serves as the foundation of the World Wide Web, providing the structure and content that browsers interpret and display for users. By understanding the rendering process, handling resources, and ensuring browser compatibility, web developers can create engaging and accessible web applications that deliver a rich user experience.
+In this tutorial, we explored how HTML works with web browsers and how browsers render HTML content to create web pages. HTML serves as the foundation of the World Wide Web, providing the structure and content that browsers interpret and display for users. By understanding the rendering process, handling resources, and ensuring browser compatibility, web developers can create engaging and accessible web applications that deliver a rich user experience.

docs/html/html-basics/document-structure.md

@@ -7,4 +7,4 @@ tags: [html, web-development, document-structure]
 description: In this tutorial, you will learn about the structure of an HTML document and how to create a basic HTML document.
 ---
 
-<AdsComponent />
+<AdsComponent />

docs/html/html-basics/elements-and-tags.md

@@ -18,6 +18,7 @@ HTML elements are the fundamental components of HTML documents. They consist of
 ```
 
 In this example:
+
 - `<p>` is the start tag.
 - `This is a paragraph.` is the content.
 - `</p>` is the end tag.
@@ -31,15 +32,15 @@ Tags are the syntax used to create HTML elements. They are enclosed in angle bra
 An HTML document has a specific structure that includes the following elements:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
+  <head>
     <title>Title of the Document</title>
-</head>
-<body>
+  </head>
+  <body>
     <h1>Heading</h1>
     <p>Paragraph of text.</p>
-</body>
+  </body>
 </html>
 ```
 
@@ -87,12 +88,12 @@ An HTML document has a specific structure that includes the following elements:
 
    ```html
    <ul>
-       <li>Item 1</li>
-       <li>Item 2</li>
+     <li>Item 1</li>
+     <li>Item 2</li>
    </ul>
    <ol>
-       <li>First Item</li>
-       <li>Second Item</li>
+     <li>First Item</li>
+     <li>Second Item</li>
    </ol>
    ```
 
@@ -107,14 +108,14 @@ An HTML document has a specific structure that includes the following elements:
 
    ```html
    <table>
-       <tr>
-           <th>Header 1</th>
-           <th>Header 2</th>
-       </tr>
-       <tr>
-           <td>Cell 1</td>
-           <td>Cell 2</td>
-       </tr>
+     <tr>
+       <th>Header 1</th>
+       <th>Header 2</th>
+     </tr>
+     <tr>
+       <td>Cell 1</td>
+       <td>Cell 2</td>
+     </tr>
    </table>
    ```
 
@@ -132,9 +133,9 @@ An HTML document has a specific structure that includes the following elements:
 
    ```html
    <form>
-       <label for="name">Name:</label>
-       <input type="text" id="name" name="name">
-       <button type="submit">Submit</button>
+     <label for="name">Name:</label>
+     <input type="text" id="name" name="name" />
+     <button type="submit">Submit</button>
    </form>
    ```
 
@@ -145,21 +146,21 @@ An HTML document has a specific structure that includes the following elements:
    - `<img>`: Embeds an image.
 
      ```html
-     <img src="image.jpg" alt="Description of image">
+     <img src="image.jpg" alt="Description of image" />
      ```
 
    - `<audio>`: Embeds audio content.
    - `<video>`: Embeds video content.
 
    ```html
    <audio controls>
-       <source src="audio.mp3" type="audio/mpeg">
-       Your browser does not support the audio element.
+     <source src="audio.mp3" type="audio/mpeg" />
+     Your browser does not support the audio element.
    </audio>
 
    <video controls>
-       <source src="video.mp4" type="video/mp4">
-       Your browser does not support the video tag.
+     <source src="video.mp4" type="video/mp4" />
+     Your browser does not support the video tag.
    </video>
    ```
 
@@ -176,24 +177,24 @@ An HTML document has a specific structure that includes the following elements:
 
    ```html
    <header>
-       <h1>Welcome to My Website</h1>
+     <h1>Welcome to My Website</h1>
    </header>
    <nav>
-       <ul>
-           <li><a href="#home">Home</a></li>
-           <li><a href="#about">About</a></li>
-       </ul>
+     <ul>
+       <li><a href="#home">Home</a></li>
+       <li><a href="#about">About</a></li>
+     </ul>
    </nav>
    <section>
-       <h2>About Us</h2>
-       <p>This is the about section.</p>
+     <h2>About Us</h2>
+     <p>This is the about section.</p>
    </section>
    <aside>
-       <h2>Related Links</h2>
-       <p>Links to related content.</p>
+     <h2>Related Links</h2>
+     <p>Links to related content.</p>
    </aside>
    <footer>
-       <p>Footer information goes here.</p>
+     <p>Footer information goes here.</p>
    </footer>
    ```
 
@@ -207,59 +208,70 @@ HTML elements can have attributes that provide additional information about the
 
 ```html
 <a href="https://www.example.com" target="_blank">Visit Example</a>
-<img src="image.jpg" alt="Description of image" width="500" height="300">
+<img src="image.jpg" alt="Description of image" width="500" height="300" />
 ```
 
 <AdsComponent />
 
-### Key Points 
+### Key Points
 
 1. **Structure and Semantics**
+
    - HTML elements define the structure and meaning of web content.
    - Semantic elements like `<header>`, `<nav>`, `<article>`, and `<footer>` provide meaning to the page structure.
 
 2. **Hierarchy and Organization**
+
    - HTML uses a nested structure with parent and child elements to organize content.
    - Headings (`<h1>` to `<h6>`) establish a content hierarchy, aiding in readability and SEO.
 
 3. **Content Presentation**
+
    - Tags like `<p>`, `<ul>`, `<ol>`, and `<table>` are used to present different types of content such as text, lists, and tabular data.
 
 4. **Interactivity**
+
    - Elements like `<a>`, `<form>`, `<input>`, `<button>`, and `<select>` facilitate user interaction.
    - Multimedia elements (`<img>`, `<audio>`, `<video>`) enhance content with images, audio, and video.
 
 5. **Attributes**
    - Attributes provide additional information and control behavior of HTML elements.
    - Common attributes include `href` for links, `src` for images, `alt` for image descriptions, and `type` for input fields.
 
-### Benefits 
+### Benefits
 
 1. **Improved Accessibility**
+
    - Semantic HTML helps screen readers and other assistive technologies understand and navigate the content.
    - Proper use of elements and attributes like `alt` for images improves accessibility for visually impaired users.
 
 2. **Better SEO (Search Engine Optimization)**
+
    - Search engines rely on HTML structure and semantics to index and rank web pages.
    - Proper use of headings, links, and metadata enhances SEO, making content more discoverable.
 
 3. **Consistent Styling**
+
    - HTML elements can be easily styled using CSS, ensuring a consistent look and feel across the website.
    - Semantic tags provide hooks for CSS selectors, allowing targeted styling.
 
 4. **Enhanced Usability**
+
    - Forms and interactive elements improve user experience by allowing user input and interaction.
    - Navigation elements (`<nav>`) and structured content improve usability and content discoverability.
 
 5. **Cross-Browser Compatibility**
+
    - HTML is a standardized language supported by all modern web browsers.
    - Properly structured HTML ensures consistent display and functionality across different browsers and devices.
 
 6. **Maintainability**
+
    - Well-structured HTML is easier to read, understand, and maintain.
    - Separation of content (HTML), presentation (CSS), and behavior (JavaScript) promotes cleaner and more maintainable code.
 
 7. **Performance**
+
    - Using appropriate HTML elements and attributes can enhance web performance.
    - For example, loading images with the `srcset` attribute and lazy loading can optimize resource loading and improve page speed.
 
@@ -268,4 +280,5 @@ HTML elements can have attributes that provide additional information about the
    - Custom data attributes (e.g., `data-*` attributes) can store additional data for JavaScript manipulation.
 
 ## Conclusion
- HTML elements and tags are fundamental to creating structured and interactive web pages. Elements form the building blocks of HTML documents, each defined by opening and closing tags that encapsulate content. Tags define the structure and semantics of content, from headings and paragraphs to lists, tables, forms, and multimedia. Understanding how to use these elements and tags allows developers to create visually appealing and functional websites.
+
+HTML elements and tags are fundamental to creating structured and interactive web pages. Elements form the building blocks of HTML documents, each defined by opening and closing tags that encapsulate content. Tags define the structure and semantics of content, from headings and paragraphs to lists, tables, forms, and multimedia. Understanding how to use these elements and tags allows developers to create visually appealing and functional websites.