📚What is HTML?

HTML stands for HyperText Markup Language. Think of it as the skeleton of every website you visit! Just like how your body has bones to give it structure, every webpage has HTML to give it structure.

HTML uses special codes called "tags" to tell the web browser how to display content. These tags are like instructions that say "this is a heading," "this is a paragraph," or "this is a link."

Fun Fact!

HTML was invented in 1993 by Tim Berners-Lee, and it's the reason we can have websites today! Every single website you've ever visited uses HTML, including YouTube, Google, and Instagram!

⚡HTML Basics

1. HTML Tags

HTML tags are like containers that hold your content. They usually come in pairs - an opening tag and a closing tag:

<h1>This is a heading</h1>
<p>This is a paragraph</p>
            

2. Basic HTML Structure

Every HTML page has the same basic structure. It's like a template that every website follows:

<!-- This tells the browser it's an HTML document -->
<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
    <p>This is my very first webpage.</p>
  </body>
</html>
            

🏷️Common HTML Tags

Here are the most important HTML tags you'll use all the time:

📝Headings

Use h1 to h6 for different sized headings:

<h1>Biggest heading</h1>
<h2>Second biggest</h2>
<h3>Third biggest</h3>
                    

📄Paragraphs

Use <p> tags for regular text:

<p>This is a paragraph of text. It can be as long or as short as you want!</p>

🔗Links

Use <a> tags to create links:

<a href="https://www.google.com">Visit Google</a>

🖼️Images

Use <img> tags to add pictures:

<img src="cat.jpg" alt="A cute cat">

Pro Tip!

Always use the "alt" attribute in your img tags. It helps people who can't see the image understand what it shows, and it's also good for search engines!

🎯See HTML in Action!

Here's a live example of HTML code and what it looks like in a web browser:

<h1>Welcome to My Blog</h1>
<h2>My First Post</h2>
<p>Today I learned HTML! It's really fun and easy to learn.</p>

<p>Here are some things I can do with HTML:</p>
<ul>
  <li>Create headings</li>
  <li>Write paragraphs</li>
  <li>Add links and images</li>
</ul>

<p>Visit <a href="#">my portfolio</a> to see more!</p>

Welcome to My Blog

My First Post

Today I learned HTML! It's really fun and easy to learn.

Here are some things I can do with HTML:

Create headings
Write paragraphs
Add links and images

Visit my portfolio to see more!

🛠️More HTML Elements

Lists

You can create two types of lists in HTML:

<!-- Unordered List (bullet points) -->
<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Oranges</li>
</ul>

<!-- Ordered List (numbered) -->
<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>
            

Text Formatting

Make your text stand out with these formatting tags:

<strong>This text is bold</strong>
<em>This text is italic</em>
<u>This text is underlined</u>
            

Line Breaks and Divisions

Sometimes you need to organize your content:

<p>This is line one.<br>This is line two.</p>

<div>
  <p>This paragraph is inside a div container.</p>
</div>
            

🎓What's Next?

Congratulations! You've learned the basics of HTML. Here's what you can learn next:

🎨CSS Styling

Learn how to make your websites beautiful with colors, fonts, and layouts using CSS!

⚡JavaScript

Add interactivity to your websites! Make buttons work, create animations, and build games.

📱Responsive Design

Make your websites look great on phones, tablets, and computers of all sizes.

🌐Web Projects

Start building real websites! Create a portfolio, blog, or even a simple online store.

Keep Learning!

HTML is just the beginning of your web development journey. Once you master HTML, CSS and JavaScript will help you create amazing, interactive websites that people will love to visit!

📖Quick HTML Reference

Here's a handy reference of all the HTML tags we covered today:

🏗️Structure Tags

<html> - Main container
<head> - Page information
<body> - Visible content
<title> - Page title
                    

📝Text Tags

<h1> to <h6> - Headings
<p> - Paragraphs
<strong> - Bold text
<em> - Italic text
                    

🔗Link & Media

<a href=""> - Links
<img src=""> - Images
<br> - Line break
<div> - Container
                    

📋List Tags

<ul> - Unordered list
<ol> - Ordered list
<li> - List item
                    

🎉Congratulations!

You've taken your first big step into web development! HTML is the foundation of everything on the web, and now you know how to use it.

Remember: every expert was once a beginner. Keep practicing, stay curious, and don't be afraid to experiment with your code. The web development world is full of amazing possibilities!

🏠 Back to Home 📚 More Tutorials

🌐Learn HTML