</>

Start Here

Introduction to HTML

Learn the foundation of every website — from basic structure to your first web page.

11 TopicsCode ExamplesBeginner Friendly

What is HTML?

HTML (HyperText Markup Language) is the standard markup language used to create and design web pages. It describes the structure of a web page using a series of elements, which tell the browser how to display the content.

HTML was created by Tim Berners-Lee in 1991. The latest version is HTML5, which introduced many new features like semantic elements, audio/video support, canvas, and more.

💡

HTML is NOT a programming language — it is a markup language. It does not have logic, loops, or variables. It only defines the structure and content of a web page.

Every website you visit on the internet uses HTML as its foundation. Even complex web applications built with JavaScript frameworks still use HTML at their core.

Key Facts about HTML

HTML stands for HyperText Markup Language
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 elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
HTML file extension is .html or .htm
HTML can be created and edited using any text editor like Notepad, VS Code, Sublime Text, etc.

History of HTML

HTML has evolved significantly since its creation. Here is a brief timeline:

HTML Version Timeline

1991

HTML 1.0— Tim Berners-Lee invented HTML. The first version had only 18 tags.

1995

HTML 2.0— Published as a standard by IETF. Added form elements and tables.

1997

HTML 3.2— W3C Recommendation. Added support for scripts, tables, applets.

1999

HTML 4.01— Major version with CSS support, scripting improvements, and accessibility features.

2000

XHTML 1.0— HTML reformulated as XML. Stricter syntax rules.

2014

HTML5— Current standard. Added semantic elements, multimedia, Canvas, SVG, Web Storage, and much more.

HTML Editors

HTML files can be created using any text editor. However, specialized code editors provide features like syntax highlighting, auto-completion, and error detection.

NotepadWindows

Simple text editor. Good for beginners to understand raw HTML without any assistance.

VS CodeRecommended

Most popular free code editor by Microsoft. IntelliSense, extensions, integrated terminal, and Git support.

Sublime TextCross-platform

Lightweight and fast editor with powerful shortcuts and a distraction-free writing mode.

Notepad++Free

Free source code editor for Windows. Supports syntax highlighting for many languages.

✅

For beginners, we recommend using VS Code (Visual Studio Code) — it is free, lightweight, and has excellent HTML support built-in.

Basic Structure of an HTML Page

Every HTML page follows a standard structure. Here is the basic skeleton of an HTML document:

index.html

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

Explanation of Each Part

<!DOCTYPE html>Declares that this document is an HTML5 document. Must be the very first line.

<html>The root element. All other elements are contained inside this.

<head>Contains meta-information about the page (title, charset, stylesheets). NOT displayed.

<meta charset="UTF-8">Character encoding (UTF-8 supports most characters and symbols).

<meta name="viewport">Makes the web page responsive on mobile devices.

<title>Sets the title shown in the browser tab.

<body>Contains all the visible content (text, images, links, tables, etc.).

<h1>Defines the main heading of the page.

<p>Defines a paragraph of text.

HTML Tags

HTML uses tags to define elements. Tags are written inside angle brackets < >. Most tags come in pairs — an opening tag and a closing tag.

index.html

<!-- Opening and closing tags -->
<p>This is a paragraph.</p>

<!-- Self-closing tags (no closing tag needed) -->
<br>
<hr>
<img src="image.jpg" alt="description">

Tag Syntax

Opening Tag: <tagname> — Starts an element

Content: The text or other elements between the tags

Closing Tag: </tagname> — Ends an element (note the forward slash /)

Self-closing: <tagname /> — Elements without content (br, img, hr, input)

⚠️

HTML tags are NOT case-sensitive: <P> and <p> are the same. However, it is best practice to always use lowercase tags.

HTML Attributes

Attributes provide additional information about HTML elements. They are always specified in the opening tag and usually come in name/value pairs like: name="value"

index.html

<!-- href attribute for links -->
<a href="https://www.google.com">Visit Google</a>

<!-- src and alt attributes for images -->
<img src="photo.jpg" alt="A beautiful sunset" width="300" height="200">

<!-- id and class attributes -->
<div id="main-content" class="container">
    <p class="text-bold">This paragraph has a class.</p>
</div>

<!-- style attribute for inline CSS -->
<p style="color: red; font-size: 20px;">This text is red and large.</p>

<!-- title attribute (shows tooltip on hover) -->
<p title="This is a tooltip">Hover over me!</p>

Attribute	Description	Used With
`href`	Specifies the URL of a link	<a>
`src`	Specifies the path to an image	<img>, <script>
`alt`	Alternative text if image can't load	<img>
`width / height`	Sets the width and height	<img>, <table>
`id`	Unique identifier for an element	All elements
`class`	CSS class name(s) for styling	All elements
`style`	Inline CSS styles	All elements
`title`	Extra info (shown as tooltip)	All elements
`target`	Where to open link (_blank = new tab)	<a>
`type`	Type of input element	<input>
`placeholder`	Hint text inside input fields	<input>, <textarea>
`disabled`	Disables the element	<input>, <button>

Common HTML Tags Quick Reference

<h1> - <h6>

Headings (h1 = largest)

<p>

Paragraph text

<a>

Hyperlink

<img>

Embeds an image

<br>

Line break

<hr>

Horizontal rule

<b> / <strong>

Bold text

<i> / <em>

Italic text

<u>

Underlined text

<ul> / <ol>

Unordered / Ordered lists

<li>

List item

<div>

Block container

<span>

Inline container

<table>

Data table

<form>

User input form

<input>

Input field

<button>

Clickable button

<textarea>

Multi-line text input

HTML Comments

Comments in HTML are used to add notes in your code that are not displayed in the browser. They help other developers (and your future self) understand the code.

index.html

<!-- This is a single-line comment -->

<!--
    This is a
    multi-line comment.
    It can span multiple lines.
-->

<p>This paragraph is visible.</p>
<!-- <p>This paragraph is hidden (commented out).</p> -->

✅

Comments are useful for temporarily hiding code during debugging. You can "comment out" code instead of deleting it.

Creating Your First Web Page

Follow these steps to create and view your first HTML web page:

Step-by-Step Guide

Open a Text Editor

Open Notepad (Windows), TextEdit (Mac), or VS Code.

Write HTML Code

Type the basic HTML structure with a heading and paragraph.

Save the File

Save with a .html extension (e.g., index.html). Select "All Files" in the save dialog.

Open in Browser

Double-click the saved file, or right-click → "Open with" → choose your web browser.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Page</title>
</head>
<body>
    <h1>Welcome to My Website!</h1>
    <p>I just created my first web page using HTML.</p>
    <p>HTML is easy and fun to learn.</p>
    <hr>
    <h2 id="about-me">About Me</h2>
    <p>My name is Student and I am learning web development.</p>
    <h2 id="my-hobbies">My Hobbies</h2>
    <ul>
        <li>Coding</li>
        <li>Reading</li>
        <li>Gaming</li>
    </ul>
    <p><a href="https://www.google.com" target="_blank">Visit Google</a></p>
</body>
</html>

✅

You can also use the Live Compiler in Knobly to write and preview HTML code instantly without saving any files!

HTML5 New Features

HTML5 introduced many new elements and features that make web development easier and more powerful:

New Semantic Elements

<header> — Page or section header

<nav> — Navigation links

<main> — Main content area

<section> — Thematic section

<article> — Independent content

<aside> — Sidebar content

<footer> — Page or section footer

<figure> — Image with caption

New Multimedia Elements

<audio> — Embed audio files directly (no plugins)

<video> — Embed video files directly

<canvas> — Draw graphics using JavaScript

<svg> — Scalable Vector Graphics

New Form Input Types

email — Email validation

url — URL validation

number — Numeric input

range — Slider control

date — Date picker

time — Time picker

color — Color picker

search — Search field

HTML vs CSS vs JavaScript

Web pages are built using three core technologies that work together:

🏗️

HTML

Structure & Content

Defines what is on the page — headings, paragraphs, images, links, tables, forms

🎨

CSS

Styling & Layout

Defines how it looks — colors, fonts, spacing, animations, responsive design

⚡

JavaScript

Behavior & Interactivity

Defines what happens — click events, form validation, dynamic content, API calls

💡

Think of it like building a house: HTML is the bricks and structure, CSS is the paint and decoration, and JavaScript is the electricity and plumbing that makes things work.

Next Chapter

Elements, Tags & Attributes →

18 sections covering every HTML element with examples

Introduction to HTML

What is HTML?

Key Facts about HTML

History of HTML

HTML Version Timeline

HTML Editors

Basic Structure of an HTML Page

Explanation of Each Part

HTML Tags

Tag Syntax

HTML Attributes

Common HTML Tags Quick Reference

HTML Comments

Creating Your First Web Page

Step-by-Step Guide

HTML5 New Features

New Semantic Elements

New Multimedia Elements

New Form Input Types

HTML vs CSS vs JavaScript

HTML

CSS

JavaScript

Elements, Tags & Attributes →

Hello! 👋