# HTML Basics for Complete Beginners
Welcome to the world of HTML! This guide will teach you everything you need to know to get started building web pages.
## What is HTML?
HTML stands for **HyperText Markup Language**. It's the foundation of every webpage on the internet. Think of HTML as the skeleton that gives structure to your web content.
## What Does HTML Do?
HTML uses tags (like `` and `
`) to define different parts of a webpage, such as:
- Headings
- Paragraphs
- Lists
- Links
- Images
## Basic HTML Structure
Every HTML document has the same basic structure:
```html
Page Title
```
Let's break this down:
- `` - Tells the browser this is an HTML5 document
- `` - The main container for everything on your page
- `` - Contains information about the page (like the title)
- `` - Sets the text that appears in the browser tab
- `<body>` - Contains all the visible content of your webpage
## Common HTML Elements
### Headings
Headings help organize your content. There are 6 levels, from largest to smallest:
```html
<h1>This is a heading level 1</h1>
<h2>This is a heading level 2</h2>
<h3>This is a heading level 3</h3>
<h4>This is a heading level 4</h4>
<h5>This is a heading level 5</h5>
<h6>This is a heading level 6</h6>
```
### Paragraphs
Use `<p>` tags for paragraphs of text:
```html
<p>This is my first paragraph. It contains some text that will be displayed on the webpage.</p>
<p>Here's another paragraph with different content.</p>
```
### Links
To create clickable links, use the `<a>` tag:
```html
<a href="https://www.google.com">Visit Google</a>
<a href="contact.html">Contact Us</a>
```
The `href` attribute tells the link where to go.
### Images
Add images using the `<img>` tag:
```html
<img src="image.jpg" alt="Description of image">
```
- `src` - The path to your image file
- `alt` - Alternative text that shows if the image doesn't load
### Lists
#### Unordered Lists (bulleted)
```html
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
```
#### Ordered Lists (numbered)
```html
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
```
### Divisions and Spans
- `<div>` - Creates a division/block for grouping content
- `<span>` - Creates an inline container for text
```html
<div>This is a block element that takes up the full width.</div>
<span>This is an inline element that only takes the space it needs.</span>
```
## Basic HTML Document Example
Here's what a complete, simple webpage looks like:
```html
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage
Welcome to My Website
Hello! This is my first paragraph.
About Me
I'm learning HTML. It's fun!
My Favorite Links
A Picture of Me
```
## Key HTML Concepts
### Tags and Elements
- **Opening tag**: `` (starts a paragraph)
- **Closing tag**: `
` (ends a paragraph)
- **Self-closing tag**: `![]()
` or `
` (doesn't need a closing tag)
### Attributes
Tags can have attributes that provide extra information:
```html
Link Text
```
## Getting Started
1. Create a new file with a `.html` extension (like `index.html`)
2. Copy the basic structure into your file
3. Start adding content using HTML tags
4. Save your file and open it in a web browser to see your webpage!
## Practice Exercise
Try creating your own simple page:
- Add a title
- Include at least 2 headings
- Write 1 paragraph of text
- Create a link to another website
- Add an image (you can use any image or create placeholder text)
Remember, HTML is the foundation - it's what gives structure and meaning to your web content. Once you understand HTML, you'll be able to build amazing websites!