HTML Basics for Complete Beginners

HTML Download Course

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:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <!-- Your content goes here -->
</body>
</html>

Let's break this down:

<!DOCTYPE html> - Tells the browser this is an HTML5 document
<html> - The main container for everything on your page
<head> - Contains information about the page (like the title)
<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:

<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  tags for paragraphs of text:

<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:

<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:

<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)

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

Ordered Lists (numbered)

<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
 - Creates an inline container for text

<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:

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    
    <p>Hello! This is my first paragraph.</p>
    
    <h2>About Me</h2>
    <p>I'm learning HTML. It's fun!</p>
    
    <h2>My Favorite Links</h2>
    <ul>
        <li><a href="https://www.google.com">Google</a></li>
        <li><a href="https://www.github.com">GitHub</a></li>
    </ul>
    
    <h2>A Picture of Me</h2>
    <img src="my-photo.jpg" alt="A photo of me">
</body>
</html>

Key HTML Concepts

Tags and Elements

Opening tag:  (starts a paragraph)
Closing tag:  (ends a paragraph)
Self-closing tag: <img /> or   (doesn't need a closing tag)

Attributes

Tags can have attributes that provide extra information:

<a href="https://example.com" title="Visit example">Link Text</a>

Getting Started

Create a new file with a .html extension (like index.html)
Copy the basic structure into your file
Start adding content using HTML tags
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!