HTML Introduction

Unlock the core technology that powers billions of websites worldwide

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