The difference between xml, xh

# Title: introduction to HTML for beginners, full tutorial guide Here are some of the things i learnt about html today, HTML or HyperText Markup Language, is the foundational language for creating web pages. It defines the structure of a webpage and allows developers to organize content, add multimedia elements like imgages,text and create links between pages. HTML is not a programming language, rather it is a markup language used to annotate text so that browsers know how to display it. In this article, we will explore every aspect of HTML, from its basic structure to its more advanced features, and explain the purpose and usage of each component. In the cause of writing this article and making this research, i also made some new findings or rather i learnt some new things from the video i watched. i learnt about extensions and how the work and the first on the list among the many others: # 1: vscode-icons : it helps to add icons as you create files. so visiually it helps you see what type of file you're working with, without eve reading everything. # 2: github theme: Github theme and extensions has light and dark themes that can be applied on the web page or code editor and helps not to affect the eyes as well. # 3: live server: It helps us to view our web pages. when live server is installed ,you can easily right click to open with the live server and also disble manually from the botton corner of the code editor (vscode). Now lets talk about html and it's structures as well. # What is HTML ? HTML is an acronymn that stands for hypertext markup language and hypertext markup language is the most basic building block of the web. It defines the meaning and structure of web content, enabling browsers to render pages visually. Hyper text refers to link that connect the web page to each other and it could be within a single website or from one website to another. overall, html uses markup languages to automate text, images and other contents. # The structure of a HTML Document An HTML document is structured in a way that is both simple and logical. Below is an example of a basic HTML document and an explanation of its components: ```html <!DOCTYPE html> <html> <head> <title>Blockfuse labs</title> </head> <body> <h1>Hello world!</h1> <p>I am a student of blockfuse labs</p> </body> </html> ``` # Key features and components of HTML: 1. `<!DOCTYPE html>`: Declares the document type and version of HTML (HTML5 in this case). This helps the browser interpret the document correctly. 2. `<html>`: The root element of the HTML document that wraps all content. 3. `<head>`: Contains metadata about the document, such as the title, character encoding, and links to external stylesheets or scripts. Metadata is not displayed on the webpage and not everything found inside the<head>element is displayed on the webpage. 4. `<title>`: Specifies the title of the webpage, which appears in the browser tab. 5. `<body>`: Contains the visible content of the webpage, such as text, images, and links. # Text Formatting in HTML HTML provides various tags for formatting text, making it possible to create headings, paragraphs, and emphasized text. # Headings Headings are used to define the hierarchy of content: ```html <h1>My journey at Blockfuse labs has not been easy but it has been very educative</h1> <h2>web2 is not for kids </h2> <h3>Web3 is not for the weak either</h3> ``` - `<h1>` is the largest and most important heading. - `<h6>` is the smallest and least important. # Paragraphs and Line Breaks - `<p>`: is an element used to define a paragraph. - `<br>`: is also inline element used to Insert a line break mostly in-between lines. Example: ```html <p>i turn coffe to code </p> <p>let's make code a habit</p> it will never be strange anymore.<br>i only want to eat,code,bath and sleep. ``` # Text Styles - `<b>`: Makes text bold. - `<i>`: Italicizes text. - `<u>`: Underlines text. - `<strong>`: Indicates strong importance (bold). - `<em>`: Indicates emphasis (italic). Example: ```html <p>This is <b>bold</b>, <i>italic</i>, and <u>underlined</u> text.</p> <p><strong>Strong</strong> and <em>emphasized</em> text are also supported.</p> ``` # Lists in HTML Lists are used to organize content in a structured manner. HTML supports three types of lists: # 1: Ordered List Displays items in a numbered sequence or in an orderly manner : ```html <ol> <li>football</li> <li>Video games</li> <li>coding</li> </ol> ``` Output: 1. football 2. video games 3. coding # Unordered List Displays items in an unorderly manner: ```html <ul> <li>coding</li> <li>football</li> <li>video games</li> </ul> ``` Output: - coding - football - video games #### Definition List Displays terms and their definitions: ```html <dl> <dt>NTA</dt> <dd>National television authority.</dd> <dt>YOLO</dt> <dd>You only live once.</dd> </dl> ``` Output: NTA : National television authority . YOLO : You only live once. --- # Links and Images # Links Links are created using the `<a>` tag, which allows users to navigate to other pages or resources: ```html <a href="https://www.example.com">Visit Example</a> ``` - `href`: Specifies the URL of the link. #### Images Images are embedded using the `<img>` tag: ```html <img src="image.jpg" alt="Description of image"> ``` - `src`: Specifies the image file’s location. - `alt`: Provides alternative text if the image fails to load. --- ### Semantic HTML Elements Semantic elements improve the readability and accessibility of HTML by clearly describing their purpose. Examples include: - `<header>`: Defines the header section of a webpage. - `<nav>`: Contains navigation links. - `<section>`: Groups related content. - `<article>`: Represents standalone content, such as a blog post. - `<footer>`: Defines the footer section, usually containing copyright information. Example: ```html <header> <h1>Welcome to My Blog</h1> </header> <nav> <a href="#home">Home</a> <a href="#about">About</a> </nav> <section> <article> <h2>Article Title</h2> <p>This is an article about HTML.</p> </article> </section> <footer> <p>© 2025 My Blog</p> </footer> ``` --- # Advanced HTML Concepts # Tables Tables organize data into rows and columns: ```html <table border="1"> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Elvis</td> <td>31</td> </tr> <tr> <td>ugochukwu</td> <td>30</td> </tr> </table> ``` #### Forms Forms collect user input or details : ```html <form action="/submit" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name"> <button type="submit">Submit</button> </form> ``` --- # A summary of what you should know about HTML. HTML is the cornerstone of web development. By understanding its structure, tags, and features, you can create well-organized and functional web pages. While this article covers the essential part, the journey to mastering HTML involves constant practice and exploration of advanced topics such as responsive design, accessibility, and integration with CSS and JavaScript. Start building today and become a good web developer by bring your ideas to life on the web! Thanks for reading this article ``` ```