Introduction to HTML

Key Concepts of HTML:

HTML Document Structure: An HTML document is made up of nested elements. Each element is defined using tags, which are usually paired with an opening tag and a closing tag.

Example of basic HTML structure:

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>My First HTML Page</title>  </head>  <body>    <h1>Hello, World!</h1>    <p>This is a simple web page created with HTML.</p>  </body></html>

HTML Tags: Tags are the building blocks of HTML. They typically come in pairs: an opening tag <tag> and a closing tag </tag>. Some tags are self-closing, meaning they don’t need a closing tag.
- Opening tag: <p>
- Closing tag: </p>
- Self-closing tag: <img />
Common HTML Tags:
- <html>: The root element that wraps the entire document.
- <head>: Contains meta-information about the document (e.g., title, character set, external stylesheets).
- <title>: Specifies the title of the webpage (appears in the browser tab).
- <body>: Contains the content of the webpage (text, images, etc.).
- <h1>, <h2>, <h3>, ...: Header tags used to define headings. <h1> is the most important, while <h6> is the least important.
- <p>: Defines a paragraph of text.
- <a>: Defines a hyperlink (anchor).
- <img>: Used to display images.
- <ul>, <ol>, <li>: Define unordered and ordered lists, and list items.
Attributes: HTML tags can have attributes that provide additional information about the element. Attributes are added within the opening tag.
Example of using attributes:
```
 
```
```
<a href="https://www.example.com" target="_blank">Click here</a>
```
In this case:
- href is the attribute that specifies the link destination.
- target="_blank" makes the link open in a new tab.
Nesting Elements: HTML elements can be nested inside one another. For example, you can put a <p> tag inside a <div> tag.
Example:
```
 
```
```
<div>  <p>This is a paragraph inside a div.</p></div>
```
Comments: HTML allows you to add comments, which are not displayed in the browser but can be helpful for developers. Comments are added between .
Example:
```
 
```
```

```
HTML5: HTML5 is the latest version of HTML, introduced with many new features and improvements for multimedia content, form controls, APIs, and more. HTML5 includes new semantic tags like <article>, <section>, <nav>, and <footer>, which help with the structure of the document and improve accessibility and SEO.

Example of a Basic Web Page:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Simple Web Page</title></head><body>  <header>    <h1>Welcome to My Website!</h1>    <nav>      <ul>        <li><a href="#home">Home</a></li>        <li><a href="#about">About</a></li>        <li><a href="#contact">Contact</a></li>      </ul>    </nav>  </header>    <section id="home">    <h2>Home Section</h2>    <p>This is the homepage content.</p>  </section>  <footer>    <p>Created by Me - 2024</p>  </footer></body></html>

dation of all web pages, providing structure and organization to content. With its combination of tags, attributes, and elements, HTML is versatile and can be used to build anything from simple web pages to complex websites. Once you master HTML, you can combine it with CSS (for styling) and JavaScript (for interactivity) to create fully functional web applications.