Introduction to HTML

Introduction to HTML

by

What is HTML?

Contents hide
1) What is HTML?
1.1) HyperText
1.2) Markup
1.3) Language
2) History and evolution
2.1) 1991 – The Birth of HTML
2.2) The Decline and XHTML Attempt (Early 2000s)
3) HTML document structure (<!DOCTYPE>, <html>, <head>, <body>)
3.1) <!DOCTYPE html>
3.2) <html>…</html>
3.3) <head>…</head>
3.4) <body>…</body>
4) Writing your first HTML page
4.1) 1. Open a Code Editor
4.2) 2. Create a New File
4.3) 3. Write Basic HTML Template
4.4) 4. Save the File
4.5) 5. Open in a Web Browser

HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. Every website you visit is built on HTML in some form—it’s the foundation of all web pages.

Breaking It Down

HyperText

  • Refers to text that links to other text or documents.
  • This is how webpages are connected—via hyperlinks.
  • Example: Clicking a link to navigate from one page to another.

Markup

  • HTML is not a programming language; it’s a markup language.
  • It uses tags to describe how content (like text, images, or videos) should be displayed.
  • Tags are enclosed in angle brackets, e.g., <p> for paragraphs, <img> for images.

Language

  • HTML provides a standard syntax and structure that browsers (like Chrome, Firefox) understand.
  • This ensures that content looks consistent across different platforms.

HTML Document Structure

A basic HTML document looks like this:

<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>

  • <!DOCTYPE html>: Declares the document type (HTML5).
  • <html>: Root of the HTML document.
  • <head>: Contains meta-information, title, links to CSS, etc.
  • <body>: Contains everything that appears on the webpage.

Why Is HTML Important?

  • Essential for web development – Every site is built with HTML at its core.
  • Works with CSS & JavaScript – CSS handles styling, JavaScript handles interactivity.
  • Browser-friendly – HTML is universally supported by all web browsers.
  • SEO and Accessibility – Proper HTML structure helps search engines and screen readers understand the page.

Fun Fact
The first ever website, created by Tim Berners-Lee in 1991, was written in plain HTML and explained what the World Wide Web was!

History and evolution

HTML has come a long way since its humble beginnings in the early ’90s. From a basic way to share academic documents, it has evolved into the foundation of modern web applications.

1991 – The Birth of HTML

  • Invented by Tim Berners-Lee, a British computer scientist at CERN.
  • The first version of HTML had only 18 tags, including <p>, <a>, <img>, and <h1>.
  • It was designed to share and link scientific research documents across institutions.
  • The first website ever (info.cern.ch) was just plain HTML explaining what the Web was.

1995 – HTML 2.0

  • Standardized by the Internet Engineering Task Force (IETF).
  • Included more structured formatting: forms, tables, basic styling.
  • Aimed to unify the HTML tags being used across early websites.

1997–1999 – HTML 3.2 and 4.01

  • HTML 3.2 introduced new elements like <font>, <center>, and scripting support (JavaScript).
  • HTML 4.01 focused on separating structure (HTML) from presentation (CSS).
  • Brought in elements for accessibility and better document structure.

The Decline and XHTML Attempt (Early 2000s)

  • The web was growing fast, but HTML development stalled.
  • The W3C (World Wide Web Consortium) proposed XHTML, a stricter, XML-based version of HTML.
  • XHTML was too rigid and didn’t gain widespread adoption—developers preferred HTML’s forgiving syntax.

2008–2014 – Rise of HTML5

  • HTML5 was developed by the WHATWG (Web Hypertext Application Technology Working Group) and later adopted by W3C.
  • Added powerful new features:
  • Semantic tags: <header>, <footer>, <section>, etc.
  • Multimedia support: <audio>, <video>
  • APIs: Canvas, localStorage, geolocation, drag-and-drop
  • Officially released as a W3C Recommendation in 2014.
  • Marked a shift from static content to rich web applications.

HTML Living Standard (Today)

  • Maintained by WHATWG as a “living document”, meaning it’s constantly updated.
  • New features are added incrementally based on real-world use and browser support.
  • Browsers like Chrome, Firefox, Safari continuously support new features.

Summary of Milestones:

Year Version Highlights
1991 HTML (original) Created by Tim Berners-Lee, 18 basic tags
1995 HTML 2.0 First standardized version
1997 HTML 3.2 Tables, forms, scripting support
1999 HTML 4.01 Separation of content & design, accessibility
2000s XHTML Attempt to reform HTML via XML (largely failed)
2014 HTML5 Multimedia, semantics, APIs
Ongoing Living Standard Continuous updates, modern web support

Why It Matters

HTML’s evolution reflects how the internet has changed—from document sharing to interactive apps, video streaming, online stores, and more. It remains the core technology of everything on the web

HTML document structure (<!DOCTYPE>, <html>, <head>, <body>)

Every HTML document follows a basic structure that tells the browser how to interpret and render the content. This structure ensures consistency, proper formatting, and compatibility across web browsers.

Basic Structure Template

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

Let’s Break It Down

<!DOCTYPE html>

  • Declares the document type and HTML version.
  • <!DOCTYPE html> is used for HTML5 (the current standard).
  • It must be the very first line of an HTML document.
  • Tells the browser: “This is an HTML5 document,” enabling modern features and consistent rendering.

<html>…</html>

  • This is the root element of any HTML page.
  • It wraps the entire content of the page—everything inside the <head> and <body>.
  • Can include an optional lang attribute (e.g., <html lang=”en”>) for accessibility and SEO.

<head>…</head>

  • Contains meta-information about the page (not visible to users).

Includes:

  • <title>: The title displayed on the browser tab.
  • <meta> tags: Charset, author, description, viewport settings.
  • <link>: External resources like CSS files or fonts.
  • <style>: Internal CSS (not recommended for large stylesheets).
  • <script>: JavaScript references or inline scripts.

Example:

<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>About Me</title>
<link rel=”stylesheet” href=”styles.css”>
</head>

<body>…</body>

  • Contains everything visible on the webpage.

This is where you place:

  • Headings (<h1> to <h6>)
  • Paragraphs (<p>)
  • Links (<a>), images (<img>), lists, tables, forms
  • Any actual content users interact with

Example:

<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
<img src=”me.jpg” alt=”My photo”>
</body>

Summary Table:

Tag Purpose
<!DOCTYPE html> Declares HTML5 document
<html> Wraps the entire HTML content
<head> Meta-information, title, links, scripts
<body> Main content visible on the page

Why Structure Matters

  • Ensures cross-browser compatibility
  • Helps with SEO, accessibility, and maintainability
  • Serves as the foundation for adding CSS, JavaScript, and external tools

Writing your first HTML page

Creating your first HTML page is a foundational step in web development. It’s where you begin to see how simple code turns into a functional web page right in your browser.

Step-by-Step Breakdown

1. Open a Code Editor

Use any plain text editor or IDE (like):

  • VS Code (recommended)
  • Sublime Text
  • Notepad++
    Even Notepad will work for basics.

2. Create a New File

  • Go to File > New File
  • Save the file as: index.html
    (Use .html extension to indicate an HTML file)

3. Write Basic HTML Template

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML web page.</p>
</body>
</html>

4. Save the File

  • Press Ctrl + S (or Cmd + S on Mac)
  • Ensure the file is saved with .html extension

5. Open in a Web Browser

  • Right-click the index.html file
  • Choose “Open with” and select your browser (Chrome, Firefox, Edge, etc.)

You should now see:

  • A heading: “Hello, World!”
  • A paragraph: “This is my first HTML web page.”

What This Code Does

Code Description
<!DOCTYPE html> Declares HTML5 document
<html lang="en"> Root tag, sets document language
<head> Contains page metadata and title
<title> Sets the title in the browser tab
<body> Contains all visible content
<h1> Main heading
<p> Paragraph text

Bonus: Add a Little Style

Try adding a background color using inline CSS:

<body style=”background-color: #f0f0f0;”>
<h1>Hello, World!</h1>
<p>This is my first HTML web page.</p>
</body>

Final Thoughts

  • Your first page is just the beginning.
  • HTML is about structure—you’ll add style with CSS and interactivity with JavaScript later.
  • Keep practicing with small changes: add images, links, and lists!

Leave a Comment