htmlfreecodes.
Menu

Analytics choices

Analytics is optional. If allowed, Google measures public pages, navigation, recognized acquisition sources and engagement, including tool and playground use. The site excludes entered code, search terms and form contents from its Analytics events. You can withdraw here. This choice does not change advertising consent.

Read about Analytics and your information.

HTML Introduction

Unlock the core technology that powers billions of websites worldwide

Quick Answer

What is HTML?

HTML (HyperText Markup Language) is the standard language for creating web pages. It uses tags and elements to structure content like headings, paragraphs, links, images, and videos. HTML is not a programming language but a markup language that defines the structure and meaning of web content that browsers render.

HTML serves as the universal language that web browsers understand to display content. From simple blogs to complex web applications, HTML forms the structural backbone of the digital experiences you encounter daily. This lesson reveals how HTML works and why mastering it opens doors to endless creative possibilities.

Defining HTML

HTML represents HyperText Markup Language - the coding system web browsers interpret to render pages.

  • HTML provides the universal framework for building web documents
  • HTML organizes content into meaningful, hierarchical structures
  • HTML uses individual building blocks called elements
  • HTML instructions guide browsers in rendering your content correctly
  • HTML tags categorize content - identifying headers, paragraphs, navigation links, and more

Building Your First Web Page

Example

<!DOCTYPE html>
<html>
<head>
    <title>Welcome to Web Development</title>
</head>
<body>

    <h1>Your Journey Begins Here</h1>
    <p>This is your first step into web development.</p>

</body>
</html>

Result:

Your Journey Begins Here

This is your first step into web development.

Try it Yourself ›

Launch our interactive coding environment to modify and test this example live:

Try it Yourself

Code Breakdown

<!DOCTYPE html>

Announces to browsers that this page follows HTML5 specifications

<html>

Serves as the outermost container wrapping your entire webpage

<head>

Houses configuration details and metadata invisible to visitors

<title>

Determines the text appearing in browser tabs and bookmarks

<body>

Encapsulates all viewable page content including text, images, videos, forms, and interactive elements

<h1>

Creates a prominent headline - typically your page's main title

<p>

Formats text into distinct paragraph blocks

Understanding HTML Elements

Each HTML element consists of three parts: an opening tag, content, and a closing tag:

Element Anatomy

<tagname>Your content appears here...</tagname>

The complete element includes everything from opening to closing tag:

Real Element Examples

<h1>Your Journey Begins Here</h1>
<p>This is your first step into web development.</p>
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none

Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the document:

Browser View

My First Heading

My first paragraph.

HTML Page Structure

Below is a visualization of an HTML page structure:

<html>
<head>
<title>Page title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

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 History

Since the early days of the World Wide Web, there have been many versions of HTML:

Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 HTML became a public domain
1995 HTML 2.0
1997 HTML 3.2
1999 HTML 4.01
2000 XHTML
2014 HTML5 (Current)

This tutorial follows the latest HTML5 standard.

Test Your Knowledge

3 practice questions are available. Choose Start practice to try them.

Related Articles

Continue your learning journey with these related tutorials:

A smaller starting example and practical notes

HTML describes the meaning and structure of a web document. A heading tells the browser that text introduces a topic; a paragraph groups related sentences; a link gives someone a destination. Start with useful content and choose elements that express its purpose.

<main>
  <h1>Little projects for the web</h1>
  <p>Start with one useful idea and build from there.</p>
  <a href="/examples/">Explore the examples</a>
</main>

Read the structure

The main element identifies the page's primary content. The h1 introduces that content, and p holds a paragraph. The anchor's href identifies the destination. Tags are instructions to the browser, rather than text displayed as angle brackets. Indentation helps people read the source but usually does not change the rendered layout.

Add presentation and behavior deliberately

CSS controls appearance, including spacing, color and layout. JavaScript can update the document in response to a user action. Neither is needed to make a heading or link work. Keep the basic content usable before adding optional effects. A clear document is a better starting point than a large collection of decorative containers.

Try it

Copy the markup into the HTML editor. Replace the heading and paragraph with your own idea. Change the link to a fragment such as #details and add a section with that id. Confirm that keyboard Tab reaches the link and Enter activates it.