HTML Introduction

Beginner
⏱️ 14 min read
📚 Updated: Jul 2026
🎯 5 Examples
tags · structure · semantic
HTML introduction tutorial for beginners on CodeToFun
Overview

What You’ll Learn

This page is a self-contained introduction to HTML—the foundation of every website. You will understand what HTML is, how browsers read it, and how it works together with CSS and JavaScript.

01

What is HTML

Markup basics.

02

How it works

Browser parsing.

03

First page

Hello HTML.

04

Web trio

HTML + CSS + JS.

05

History

Tim Berners-Lee.

06

Examples

Hands-on tags.

Fundamentals

🤔 What is HTML?

HTML stands for HyperText Markup Language. It is the standard markup language used to create web pages. HTML lets developers build structured documents that web browsers interpret to display text, images, videos, links, forms, and other content.

HTML is not about making pages look pretty—that is CSS’s job. HTML answers the question: what content exists, and what role does each piece play? Headings, paragraphs, navigation, and footers are all defined with HTML tags.

💡
Beginner tip

Think of HTML as the skeleton of a webpage. You add muscles and skin with CSS, and movement with JavaScript.

First Steps

📄 Basic HTML Example

The following example demonstrates a simple HTML page with a heading and paragraph:

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>

  <h1>Welcome to HTML</h1>
  <p>This is my first web page.</p>

</body>
</html>
Try It Yourself

Save the file as demo.html, double-click it, and your browser will render the heading and paragraph.

Runtime

💡 How Does HTML Work?

HTML is text-based. You write tags in a plain file; the browser downloads that file, parses the markup, builds a DOM (Document Object Model) tree in memory, and renders text, images, and multimedia on screen.

Each tag tells the browser what type of content to expect: an <h1> is a main heading, a <p> is a paragraph, an <img> is an image. Browsers follow open web standards so the same HTML works across Chrome, Firefox, Safari, and Edge.

Getting Started

📖 Is HTML Easy to Learn?

HTML uses a simple syntax of tags and attributes to describe content and layout. The basic concepts can be learned in just a few hours, and countless free resources (including this tutorial) help you practice.

  • No compiler needed—save a .html file and open it in a browser
  • Errors rarely crash anything; browsers do their best to display your page
  • Start with headings, paragraphs, links, and lists before advanced APIs
  • Use the browser’s “View Page Source” to learn from real websites
Concepts

🧩 Which Type of Language Is HTML?

Markup languages use tags to define elements within a document—text, images, hyperlinks, and other content. Tags provide structure and meaning; browsers interpret them to display the page.

HTML is not a programming language. It does not have variables, loops, or conditional logic (that is JavaScript’s role). Other markup languages include XML (structured data) and Markdown (lightweight formatting for docs and README files).

Ecosystem

🔗 How Are HTML, CSS, and JavaScript Related?

HTML adds text elements and creates the structure of content. Alone, it is not enough to build a professional, fully responsive website—HTML needs Cascading Style Sheets (CSS) and JavaScript.

CSS handles styling: backgrounds, colors, layouts, spacing, and animations. JavaScript adds dynamic behavior: sliders, pop-ups, form validation, and fetching data without reloading the page.

These three technologies are the fundamentals of front-end web development:

TechnologyRoleAnalogy
HTMLStructure & contentSkeleton
CSSPresentation & layoutSkin & clothes
JavaScriptBehavior & logicMuscles & movement
Background

📖 HTML History

HTML was first developed in the late 1980s by Tim Berners-Lee at CERN (the European Organization for Nuclear Research). The goal was a standard format for sharing documents across computer systems, which led to the World Wide Web.

HTML 4 introduced closer integration with CSS. HTML5 (circa 2014) added native audio/video, new form controls, semantic elements like <header> and <article>, and improved accessibility. Today HTML remains the universal language of the web, supported by every major browser.

VersionYearHighlight
HTML 1.01991Tim Berners-Lee, basic tags
HTML 2.01995Tables, forms
HTML 3.21997Frames, background images
HTML 4.01997CSS integration, accessibility
HTML 4.011999Minor spec update
XHTML2000Stricter XML-based HTML
HTML52014Semantic tags, video, canvas, APIs
Living StandardongoingWHATWG continuous updates
Concepts

🧰 Core Building Blocks

ConceptWhat it does
Elements & tags<p>...</p> wrap content
Attributeshref, src, alt add extra info
Document structure<head> metadata, <body> visible content
Semantic HTML<nav>, <main>, <footer> describe meaning
Links & media<a>, <img>, <video>
Forms<input>, <button> collect user data
Cheat Sheet

⚡ Quick Reference

TaskExample
Main heading<h1>Title</h1>
Paragraph<p>Hello world.</p>
Link<a href="/css">Learn CSS</a>
Image<img src="photo.jpg" alt="Description">
Unordered list<ul><li>Item</li></ul>
Character entity&copy; 2026 → © 2026
Hands-On

Examples Gallery

Five starter snippets. Use View Output to preview here, or open Try It Yourself to edit and run live in the browser.

Example 1 — Minimal page structure

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
</head>
<body>
  <h1>Hello, HTML!</h1>
</body>
</html>
Try It Yourself

Example 2 — Headings and paragraphs

index.html
<h1>Main Title</h1>
<h2>Section</h2>
<p>HTML uses heading levels h1–h6 for document outline.</p>
<p>Use one <strong>h1</strong> per page for accessibility.</p>
Try It Yourself

Example 4 — Ordered and unordered lists

index.html
<h2>Shopping list</h2>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
</ul>

<h2>Steps</h2>
<ol>
  <li>Open editor</li>
  <li>Write HTML</li>
  <li>Save as .html</li>
</ol>
Try It Yourself

Example 5 — HTML character entities

index.html
<h1>Peso sign (hex): &#x20B1;</h1>
<p>Peso sign (decimal): &#8369;</p>
<p>Copyright: &copy; 2026 CodeToFun</p>
Try It Yourself

Entities display special characters that are hard to type or reserved in HTML (like < and &).

Motivation

📚 Why Learn HTML?

  • Foundation of the web — every site, app shell, and email template uses HTML
  • Fast results — see your page in a browser within minutes
  • Career essential — required for front-end, full-stack, and design roles
  • Accessibility — semantic HTML helps screen readers and SEO
  • Gateway skill — leads naturally to CSS, JavaScript, and frameworks
  • Universal standard — open, free, and supported everywhere

🧠 How a Browser Renders HTML

1

Request & download

You open a URL; the browser fetches the HTML file from a server or local disk.

Fetch
2

Parse markup

The browser reads tags and builds the DOM tree in memory.

Parse
3

Apply CSS & JS

Stylesheets paint the page; scripts add interactivity.

Enhance
=

Page on screen

Users see headings, links, images, and forms rendered as a complete webpage.

Recap

Summary

  • HTML (HyperText Markup Language) is the standard language for web page structure.
  • It uses tags and attributes; browsers parse HTML into a DOM and render content.
  • HTML is a markup language, not a programming language.
  • CSS styles HTML; JavaScript makes pages interactive.
  • Created by Tim Berners-Lee; HTML5 is the modern living standard.
  • Save files as .html and open them in any browser to start learning.
Pro Tips

💡 Best Practices

✅ Do

  • Start every page with <!DOCTYPE html>
  • Use semantic tags (<main>, <nav>, <article>)
  • Include lang on <html> and charset in <head>
  • Write meaningful alt text on every <img>
  • Indent nested tags for readable source code
  • Validate HTML with browser DevTools or the W3C validator

❌ Don’t

  • Use tables for page layout (use CSS Grid/Flexbox instead)
  • Skip heading levels (h1 then h4) without reason
  • Rely on deprecated tags like <font> or <center>
  • Forget to close tags in non-void elements
  • Use “click here” as link text
  • Mix presentation into HTML when CSS should handle styling

❓ Frequently Asked Questions

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It uses tags to define headings, paragraphs, links, images, and other content that browsers render for users.
No. HTML is a markup language—it describes structure and meaning, not step-by-step logic. Programming languages like JavaScript add behavior; HTML defines what content exists on the page.
Yes. Basic tags and document structure can be learned in a few hours. You see results immediately by saving a .html file and opening it in a browser. Semantic HTML and accessibility take more practice.
No. Any text editor works—Notepad, VS Code, or the CodeToFun HTML Editor. Save your file with a .html extension and open it in Chrome, Firefox, Edge, or Safari.
HTML defines structure and content (headings, paragraphs, links). CSS defines presentation (colors, fonts, spacing, layout). JavaScript adds dynamic behavior. All three work together on modern websites.
Continue with HTML Basic for document structure and common tags, then learn CSS for styling and JavaScript for interactivity. Practice building small pages like a personal profile or a simple blog layout.
Did you know?

The first web page ever published is still online. Tim Berners-Lee created HTML in 1991 to share research at CERN. That simple idea—linked documents anyone could read in a browser—grew into the billions of pages on the web today.

Try It Yourself

Edit any example from this page in the live Try It editor.

Open Try It editor →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

16 people found this page helpful

Home HTML Basic