Home / HTML / Introduction

HTML Introduction

What is HTML?

HTML stands for HyperText Markup Language. It is the standard markup language used to create web pages. HTML describes the structure of a web page and consists of a series of elements that tell the browser how to display the content.

HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

A Simple HTML Document

Every HTML document starts with a document type declaration and has a basic structure. Here's a simple example:

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
</body>
</html>

HTML Document Structure

Let's break down the structure of an HTML document:

<!DOCTYPE html>

This declaration tells the browser which version of HTML the document is using. HTML5 uses the simple <!DOCTYPE html> declaration.

<html>

The <html> element is the root element of an HTML page. It contains all other HTML elements and typically includes a lang attribute to specify the language.

<head>

The <head> element contains meta information about the HTML page. This includes:

Page title (displayed in the browser tab)
Character encoding
Links to CSS stylesheets
Links to JavaScript files
Meta tags for SEO and social media

<body>

The <body> element contains the visible content of the web page. Everything you see on the page goes inside the body element.

HTML Elements

HTML elements are the building blocks of HTML pages. An HTML element consists of:

Opening tag: The name of the element wrapped in angle brackets (e.g., <p>)
Content: The actual content of the element
Closing tag: The same tag name with a forward slash before it (e.g., </p>)

Example

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

Nested Elements

HTML elements can be nested inside other elements. This creates a hierarchical structure:

Example

<div>
    <h1>Main Heading</h1>
    <p>This is a paragraph inside a div.</p>
</div>

Empty Elements

Some HTML elements don't have closing tags because they don't contain content. These are called empty or void elements:

Example

<br>        <!-- Line break -->
<hr>        <!-- Horizontal rule -->
<img>       <!-- Image -->
<input>     <!-- Input field -->

HTML Attributes

HTML elements can have attributes that provide additional information. Attributes are always specified in the opening tag and come in name/value pairs:

Example

<a href="https://www.example.com">Visit Example</a>
<img src="image.jpg" alt="Description">
<p class="intro">This paragraph has a class attribute.</p>

Next Steps

Now that you understand the basics of HTML, you're ready to learn about HTML Elements in more detail.

← HTML Home HTML Editors →