HTML Introduction

Beginner
⏱️ 14 min read
📚 Updated: Aug 2026
🎯 5 Examples
🚀 5 Try-it labs
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 with CSS and JavaScript.

What it is

Markup

HyperText Markup Language—structure and meaning for web pages.

First page

.html file

Save a file, open it in a browser—no install required.

How it works

DOM

Browsers parse tags into a DOM tree and render content on screen.

Web trio

HTML + CSS + JS

Structure, style, and behavior work together on every modern site.

Examples

5 labs

Page structure, headings, links, lists, and character entities.

Next steps

HTML Basic

Continue to document structure, then CSS and JavaScript.

Introduction

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.

Why it matters?

Every website starts with HTML. Think of it as the skeleton of a webpage—you add muscles and skin with CSS, and movement with JavaScript.

Key Highlights

Markup, not code

Tags describe structure and meaning—not loops or logic.

Works everywhere

Save a .html file and open it in any modern browser.

Semantic tags

<nav>, <main>, and <footer> help SEO and accessibility.

Living standard

HTML5 and the WHATWG living standard keep evolving with the web.

In short: HTML defines what content exists on a page; CSS styles it; JavaScript makes it interactive.

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.

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.

💡
Beginner tip

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.

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.

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
Compare

📋 HTML vs CSS vs JavaScript

Three technologies—three jobs on every webpage.

HTML
<h1>Title</h1>

Structure & content — the skeleton of the page

CSS
h1 { color: navy; }

Presentation & layout — how the page looks

JavaScript
btn.onclick = ...

Behavior & logic — how the page responds

Context

When HTML Is Enough (and When It Is Not)

Use HTML for structure; reach for CSS and JavaScript when looks and behavior matter.

  1. Structure first

    Headings, paragraphs, links, lists, and forms always start as HTML.

  2. Add CSS for design

    Colors, spacing, responsive layout, and animations belong in stylesheets.

  3. Add JavaScript for interactivity

    Forms that validate, menus that open, and data that loads without a refresh.

  4. Semantic HTML always

    Even in frameworks and SPAs, the markup you ship should stay meaningful.

Key benefit: HTML is easy to start with—basic tags in a few hours—and remains the foundation of every front-end stack.

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

Every HTML document needs a doctype, html, head, and body.

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

How It Works

<!DOCTYPE html> tells the browser to use standards mode. Metadata lives in <head>; visible content lives in <body>.

Example 2 — Headings and paragraphs

Heading levels outline the page; paragraphs hold body text.

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

How It Works

Use one <h1> as the main title, then h2–h6 for sections. Screen readers and search engines rely on that outline.

Example 4 — Ordered and unordered lists

Unordered lists show bullets; ordered lists show numbered steps.

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

How It Works

<ul> is for items with no strict order; <ol> is for sequences. Each item is an <li>.

Example 5 — HTML character entities

Entities display special characters that are hard to type or reserved in HTML.

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

How It Works

Named entities like &copy; and numeric forms like &#8369; insert symbols. Always escape < and & in text.

Use Cases

Where HTML shows up every day on the web.

1. Web pages

Articles, blogs, docs, and marketing sites start as HTML documents.

Example: a personal portfolio page.

2. App shells

SPAs and frameworks still render HTML in the browser.

Example: React root <div id="root">.

3. Forms & inputs

Collect user data with native controls before any JavaScript.

Example: login or contact forms.

4. Email templates

Transactional and marketing emails are still built with HTML tables and tags.

Example: order confirmation email.

5. Accessibility

Semantic landmarks help screen readers navigate your content.

Example: <nav>, <main>, <footer>.

6. SEO foundations

Titles, headings, and meaningful markup help search engines understand pages.

Example: one clear <h1> per page.

Advantages

Why HTML remains the first skill every web developer learns.

  1. 1. Foundation of the web

    Every site, app shell, and email template uses HTML.

  2. 2. Fast results

    See your page in a browser within minutes—no toolchain required.

  3. 3. Universal standard

    Open, free, and supported by every major browser.

  4. 4. Gateway skill

    Leads naturally to CSS, JavaScript, and modern frameworks.

Usage Tips

Small habits that keep HTML readable and accessible.

  1. 1. Start with structure

    Master headings, paragraphs, links, and lists before advanced APIs.

  2. 2. View page source

    Inspect real websites in the browser to see how professionals structure markup.

  3. 3. Prefer semantic tags

    Use <nav>, <main>, and <article> instead of endless <div>s.

Common Pitfalls

Mistakes that commonly trip up new HTML authors.

  1. 1. Tables for layout

    Using <table> to position columns breaks accessibility and responsiveness.

    → Use CSS Grid or Flexbox for layout instead.

  2. 2. Skipping heading levels

    Jumping from h1 to h4 confuses document outline and screen readers.

    → Keep heading levels sequential unless you have a clear reason.

  3. 3. Deprecated presentational tags

    Tags like <font> and <center> mix style into markup.

    → Move presentation into CSS.

  4. 4. Vague link text

    “Click here” tells assistive tech nothing about the destination.

    → Use descriptive phrases that make sense out of context.

🧠 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.

Important

Notes

  • Markup, not programming. HTML describes structure; JavaScript adds logic and behavior.
  • Always start with doctype. <!DOCTYPE html> puts browsers into standards mode.
  • HTML5 living standard. WHATWG keeps HTML evolving; Tim Berners-Lee started it at CERN in 1991.
  • Pair with CSS and JS. Structure alone is rarely enough for a polished product experience.

Quick Takeaway: Write semantic HTML first, style with CSS, then add JavaScript only where interactivity is needed.

Compatibility

Browser Support

HTML is the native language of web browsers. Core tags and document structure work across Chrome, Firefox, Safari, Edge, and more. Logos use the shared browser-image-sprite.png sprite from this project.

✓ HTML5 · Living Standard

HTML works everywhere

Save a .html file or serve it from a web server. Browsers parse markup into a DOM and render content without plugins.

100% Core HTML support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
HTML Universal

Bottom line: Safe for everyday pages. Prefer semantic HTML5 elements and validate edge cases in DevTools when needed.

Wrap Up

🎉 Conclusion

HTML is the standard markup language for web page structure. Tags and attributes describe content; browsers parse that markup into a DOM and render headings, links, images, and forms on screen.

Continue to HTML Basic for document structure and common tags, then learn CSS for styling and JavaScript for interactivity.

Save files as .html, include <!DOCTYPE html>, and open them in any browser to practice.

Open HTML Basic Try It Yourself
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
Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about HTML

Your gateway to CSS, JavaScript, and every web page on the internet.

5
Core concepts
</> 01

Markup language

Structure & meaning, not logic

Basics
DOM 02

Browser parses

Tags become a DOM tree

Runtime
3 03

Web trio

HTML + CSS + JS

Stack
5 04

HTML5

Semantic tags & living standard

Modern
.html 05

Easy start

Save & open in any browser

Practice
🎯 You’re ready to explore HTML Basic tutorials
Continue to HTML Basic →

❓ 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? 🔊

Every HTML document starts with <!DOCTYPE html>, wraps content in <html>, and uses tags like <h1>, <p>, and <a> to define structure. Pair HTML with CSS for styling and JavaScript for interactivity. The first web page ever published is still online—Tim Berners-Lee created HTML in 1991 to share research at CERN.

Try Your First HTML Page

Edit the starter example in the live Try It editor, then continue to HTML Basic.

Open Try It Lab →

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