HTML Tutorial

HTML is the standard markup language for Web pages.

What is HTML?

HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content

HTML Example

<!DOCTYPE html>
<html>
<head>
  <title>HTML Tutorial</title>
</head>
<body>

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

</body>
</html>

Brief History of HTML

HTML was created by Tim Berners-Lee in 1991 while working at CERN. The first version had just 18 elements. Today's HTML5 includes over 100 elements.

1991

HTML

First public description

1995

HTML 2.0

First standardized version

1997

HTML 3.2

W3C recommendation

1999

HTML 4.01

Final classic version

2000

XHTML

XML-based reformulation

2014

HTML5

Current standard

HTML Elements

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

<tagname>Content goes here...</tagname>

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!

HTML Page Structure

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
</body>
</html>

HTML Tags

Tag	Description
`<html>`	Defines the root of an HTML document
`<head>`	Contains metadata/information
`<body>`	Defines the document's body
`<h1>`	Defines a large heading

HTML Tags

HTML tags are the building blocks of web pages. They define how content should be structured and displayed.

Basic Structure Tags

Tag	Description
`<html>`	Root element of an HTML page
`<head>`	Contains metadata and document info
`<body>`	Contains the visible page content
`<title>`	Specifies the browser tab title

Content Tags

Tag	Description
`<h1>-<h6>`	Heading levels (h1 is most important)
`<p>`	Paragraph of text
`<a>`	Hyperlink to other pages
`<img>`	Embeds an image

Self-Closing Tags

Some tags don't need closing tags. These are called void elements:

<br><hr><img><input><meta>

Tag Attributes

Tags can have attributes that provide additional information:

<a href="https://example.com" target="_blank" class="link">
  Visit Example
</a>

Common attributes include:

class - For CSS styling
id - Unique identifier
style - Inline CSS
src - Source for images/scripts
href - Link destination

Try it Yourself

Edit the code below to see how HTML works:

Select Example:

Example Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>My First Page</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is my first HTML page.</p>
</body>
</html>

Tips:

Try changing the text between the <h2> tags
Add a new paragraph with <p> tags
Insert an image with <img src="...">

Ready to Continue?

Now that you understand what HTML is, let's explore how to work with it:

HTML Editors →

Learn about tools for writing HTML

HTML Basics →

Start learning fundamental syntax