> ## Documentation Index
> Fetch the complete documentation index at: https://devtools.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction to HTML

> Learn the fundamentals of HTML, the backbone of all web pages

## What is HTML?

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It defines the structure and content of a webpage, telling browsers how to display text, images, and other media. HTML uses a series of elements, represented by tags, to mark up different parts of content.

<Note>
  HTML is not a programming language; it's a markup language that defines the
  structure of your content.
</Note>

## How HTML Works

HTML documents are plain text files with a `.html` extension. They consist of elements that are defined by tags. Browsers read HTML documents and render them into visible or audible web pages.

```html theme={null}
<!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 my first HTML page.</p>
  </body>
</html>
```

## HTML Document Structure

Every HTML document follows a basic structure:

<Steps>
  <Step title="DOCTYPE Declaration">
    `<!DOCTYPE html>` tells the browser that this is an HTML5 document.
  </Step>

  <Step title="HTML Element">
    The `<html>` element is the root element that contains all other elements.
  </Step>

  <Step title="Head Section">
    The `<head>` element contains meta-information about the document, such as its title, character encoding, and links to external resources.
  </Step>

  <Step title="Body Section">
    The `<body>` element contains all the content that is visible on the webpage.
  </Step>
</Steps>

## Basic HTML Elements

HTML provides a wide range of elements to structure content. Here are some of the most common ones:

### Headings

HTML offers six levels of headings, from `<h1>` (most important) to `<h6>` (least important).

```html theme={null}
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
```

### Paragraphs

The `<p>` element defines a paragraph of text.

```html theme={null}
<p>
  This is a paragraph of text. HTML will automatically wrap the text and adjust
  it to the screen size.
</p>
```

### Links

The `<a>` (anchor) element creates hyperlinks to other web pages or resources.

```html theme={null}
<a href="https://example.com">Visit Example.com</a>
```

### Images

The `<img>` element embeds images in your webpage.

```html theme={null}
<img src="image.jpg" alt="Description of the image" />
```

<Warning>
  Always include the `alt` attribute in your image tags. It provides a text
  description for screen readers and displays if the image fails to load.
</Warning>

### Lists

HTML supports ordered lists (`<ol>`), unordered lists (`<ul>`), and definition lists (`<dl>`).

```html theme={null}
<!-- Unordered list -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<!-- Ordered list -->
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>
```

## HTML Attributes

Attributes provide additional information about HTML elements and are always specified in the start tag.

```html theme={null}
<element attribute="value">Content</element>
```

Common attributes include:

* `id`: Specifies a unique identifier for an element
* `class`: Specifies one or more class names for styling with CSS
* `style`: Contains inline CSS styling
* `src`: Specifies the URL of external resources like images
* `href`: Specifies the URL of a linked resource

## HTML5 Features

HTML5 introduced many new features and elements that make it easier to create modern web applications:

<CardGroup cols={2}>
  <Card title="Semantic Elements" icon="code">
    Elements like `<header>`, `<footer>`, `<article>`, and `<section>` that clearly describe their meaning.
  </Card>

  <Card title="Audio and Video" icon="play">
    Native support for multimedia with `<audio>` and `<video>` elements.
  </Card>

  <Card title="Canvas" icon="palette">
    The `<canvas>` element for drawing graphics via JavaScript.
  </Card>

  <Card title="Form Enhancements" icon="rectangle-list">
    New input types like email, date, range, and more.
  </Card>
</CardGroup>

## Best Practices

* Use semantic HTML elements to improve accessibility and SEO
* Keep your HTML structure clean and well-organized
* Validate your HTML using tools like the [W3C Validator](https://validator.w3.org/)
* Ensure your pages are accessible to all users
* Separate structure (HTML), presentation (CSS), and behavior (JavaScript)

## Next Steps

Now that you understand the basics of HTML, you can:

* Learn more about [HTML Elements](/html/elements) and their specific uses
* Explore [HTML Attributes](/html/attributes) in depth
* Study [HTML Document Structure](/html/structure) for more complex layouts
* Dive into [Semantic HTML](/html/semantic) for better accessibility and SEO
