Web Development - HTML Introduction

HTML Introduction

HTML stands for HyperText Markup Language. It is the standard language used to create and structure web pages.

Every website you visit - from a simple blog to a complex app - uses HTML to organize and display content in your browser.

Tip: You don't need to be a programmer to learn HTML. It's designed to be simple and readable!

What is HTML?

HTML stands for HyperText Markup Language.
HTML describes the structure of a web page.
HTML consists of a series of elements (or tags).
HTML elements tell the browser how to display content.

Here is a very simple HTML page:

Example

<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>

<h1>Hello World!</h1>
<p>This is my first web page.</p>

</body>
</html>

Try it Yourself »

When you open this file in a browser, the browser reads the HTML and displays it as a web page.

HTML Tags and Elements

HTML uses tags to mark up different parts of a page.

An HTML element is defined by a start tag, some content, and an end tag:

<tagname>Content goes here</tagname>

Each element tells the browser how to display the content:

Example

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

Try it Yourself »

Tip: HTML elements are not case-sensitive, but we recommend using lowercase for cleaner code.

How a Browser Reads HTML

Browsers (like Chrome, Edge, or Firefox) don't display HTML elements - they use them to understand how the page should look.

For example, the browser reads:

<h1>Hello World!</h1>

and displays it as:

Hello World!

HTML Example Explained

Let's revisit the structure of a basic HTML page:

Tag	Description
`<!DOCTYPE html>`	Declares that this document is HTML5.
`<html>`	The root of the HTML page.
`<head>`	Contains metadata like the title and linked files.
`<title>`	Sets the page's title in the browser tab.
`<body>`	Contains the visible content shown on the web page.

Below is a visualization of an HTML page structure:

<html>

<head>

<title>Page title</title>

</head>

<body>

<h1>This is a heading</h1>

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

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

</body>

</html>

Note: The content inside the <body> section will be displayed in a browser. The content inside the <title> element will be shown in the browser's title bar or in the page's tab.

HTML is the Foundation of the Web

All web pages are built on HTML. Other technologies - like CSS (for styling) and JavaScript (for interactivity) - work alongside it:

Example

<!DOCTYPE html>
<html>
<head>
<title>Styled Page</title>
<style>
body {
background-color: lightblue;
}

h1 {
color: darkblue;
font-size: 50px;
}
</style>
</head>
<body>

<h1>This page uses HTML + CSS</h1>

</body>
</html>

Try it Yourself »