1

Introduction to HTML

Learn the fundamentals of web development with HTML

What is HTML?

HTML stands for HyperText Markup Language that is used to write web pages and build websites. It has the ability to bring together text, pictures, sounds, video and links all in one place! HTML files are plain-text files, so they can be edited using standard editors such as Notepad and Wordpad and they are stored with the extensions .html, .htm or .shtml.

Key Insight: HTML is not a programming language. It's a markup language used to structure content on the web.

HTML Beginnings

1991

HTML created by Tim Berners-Lee at CERN

HTML Standardization

1995

HTML 2.0 becomes the first standard HTML specification

Modern HTML

2014

HTML5 becomes a W3C Recommendation

Why HTML Matters

The reason why HyperText Markup Language is the standard formatting tool for WWW is that it is cross-platform, meaning that it can be viewed through different types of computers and mobile devices with different operating systems such as Mainframes, Apple computers, the UNIX system, the popular IBM compatible PCs, smartphones and tablets running on Android OS, Apple IOS, Microsoft's Windows phone and more. It is sort of a common Internet language.

Chrome Chrome
Safari Safari
Firefox Firefox
Opera Opera
Edge Edge

HTML Structure

The HTML (HTML5) document is divided into two parts, the head, and the body. The head of the document contains the document's title and other information, and the body contains the contents and everything else. The body is the larger part of the document, as the body of a letter you would write to a friend would be.

Important: Every HTML document must always begin with a <!DOCTYPE html> declaration. DOCTYPE is a declaration that defines the document type.

Example: Basic HTML Structure

<!DOCTYPE html>
<html>
<head>
    <title>HyperText Markup Language Tutorial</title>
    <meta name="description" content="Welcome to HyperText Markup Language Tutorial">
    <meta name="Author" content="Dr. Liew Voon Kiong">
</head>
<body>
    <h1>Introduction to HyperText Markup Language</h1>
    <p>HyperText Markup Language, is the language of the World Wide Web. Web sites and web pages are written in HTML.</p>
</body>
</html>
Understanding the Structure:
  • <!DOCTYPE html> - Defines the document as HTML5
  • <html> - Root element of the page
  • <head> - Contains meta information about the document
  • <title> - Sets the title shown in browser tab
  • <body> - Contains all visible content

HTML Elements and Tags

Elements are used to describe and format an HTML document, each element describes different document content. An example of an element is <head>, which comprises an open tag written as <head>, its content and an end tag written as </head>.

Element Type Example Description
Container Element <p>Content</p> Has opening and closing tags with content between them
Empty Element <br> or <img src="image.jpg"> Doesn't have content or closing tag

Creating Your First HTML Page

Let's walk through the process of creating your first HTML page:

Step 1: Open a text editor (Notepad, VS Code, Sublime Text, etc.)
Step 2: Copy the HTML structure from the example above
Step 3: Save the file with a .html extension (e.g., "my-first-page.html")
Step 4: Open the file in a web browser to see your creation!

Try It Yourself

Edit the HTML below and see the result in real-time:

HTML Code

Result

Hello, World!

This is my first HTML page.

Learning Resources

Continue your HTML journey with these recommended resources:

HTML Reference

Complete guide to all HTML elements and attributes

View Reference

HTML Examples

Practical code samples for common tasks

Explore Examples

Video Tutorials

Step-by-step video guides for beginners

Watch Videos

FAQ Section

Answers to common HTML questions

Read FAQ