What is HTML?

HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure of a web page using a system of tags and attributes.

Think of HTML as a House Blueprint

HTML defines where different parts of your webpage go, just like a blueprint shows where rooms, doors, and windows go in a house.

Header

Header - Introduction area

Navigation

Navigation - Menu links

Content

Content - Main information

Footer

Footer - Closing information

Basic HTML Document Structure

Every HTML document follows a standard structure:

                <!DOCTYPE html>

                <html lang="en">

                <head>

                  <meta charset="UTF-8">

                  <meta name="viewport" content="width=device-width, initial-scale=1.0">

                  <title>Document Title</title>

                </head>

                <body>

                  <!-- All visible content goes here -->

                </body>

                </html>

Key Components:

<!DOCTYPE html> - Declares this is an HTML5 document
<html> - The root element of an HTML page
<head> - Contains meta information about the document
<body> - Contains the visible page content

Common HTML Tags

HTML uses tags to structure content. Most tags have an opening and closing tag.

                <!-- Headings -->

                <h1>Main Heading</h1>

                <h2>Subheading</h2>

                <h3>Smaller Heading</h3>

                <!-- Paragraph -->

                <p>This is a paragraph of text.</p>

                <!-- Link -->

                <a href="https://example.com">Click me!</a>

                <!-- Image -->

                <img src="image.jpg" alt="Description">

                <!-- Lists -->

                <ul>

                  <li>First item</li>

                  <li>Second item</li>

                </ul>

Try It Yourself

Edit the HTML code below and see the result:

Welcome to Our Website

This is a paragraph of text. You can edit me!

First list item
Second list item

This is a link

Semantic HTML

Semantic HTML uses tags that clearly describe their purpose, making the code easier to understand.

                <!-- Non-semantic -->

                <div id="header">...</div>

                <div class="nav">...</div>

                <!-- Semantic -->

                <header>...</header>

                <nav>...</nav>

Common Semantic Tags:

<header> - Introductory content
<nav> - Navigation links
<main> - Main content of the document
<section> - Thematic grouping of content
<article> - Self-contained composition
<footer> - Footer for its nearest section