HTML Tutorial Series – Chapter 1: Introduction to HTML

What is HTML?

HTML stands for HyperText Markup Language. It’s the language that gives structure to every web page you see on the internet. Think of it as the skeleton of a website – without it, your browser wouldn’t know how to arrange text, images, links, or videos.

In simple words: HTML tells your browser what to show and where to show it.

Example: When you write <p>This is a paragraph</p>, your browser knows to display that text as a paragraph.

A Quick History of HTML

HTML was first created in 1991 by Tim Berners-Lee, the inventor of the World Wide Web.
It started as a simple language with just a few tags to link documents.
Over time, it evolved into HTML5, the version we use today, which supports videos, audio, graphics, and mobile-friendly design.

Today, HTML is the backbone of web development, working hand in hand with CSS (for styling) and JavaScript (for interactivity).

Basic HTML Document Structure

Every HTML page follows a standard structure. Here’s the simplest possible example of a webpage:

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First HTML Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>Welcome to my very first webpage.</p>
</body>
</html>

Breaking it Down:

<!DOCTYPE html> → Tells the browser this is an HTML5 document.
<html> → The root element that wraps everything.
<head> → Contains metadata (data about the page) like title, character encoding, styles, and scripts.
<title> → The text shown in the browser tab.
<body> → All visible content of the webpage goes here.

Important Section Tags

The <head> tag is like the brain of your web page. It doesn’t display content directly but gives important instructions to the browser.

Here are the most commonly used <head> tags:

Tag	Purpose	Example
`<title>`	Defines the page title (shown on browser tab & search results).	`<title>My Blog</title>`
`<meta>`	Stores metadata (charset, description, keywords, viewport, etc.).	`<meta name="description" content="Learn HTML basics">`
`<link>`	Connects external resources (like CSS).	`<link rel="stylesheet" href="style.css">`
`<style>`	Internal CSS styling inside HTML.	`<style>p { color: blue; }</style>`
`<script>`	Adds JavaScript code or links an external JS file.	`<script src="app.js"></script>`
`<base>`	Defines a base URL for all relative links on the page.	`<base href="https://example.com/">`
`<noscript>`	Message displayed if JavaScript is disabled in the browser.	`<noscript>Your browser does not support JavaScript.</noscript>`

Key Takeaways from Chapter 1

HTML = the foundation of web pages.
A standard HTML page has two main sections: <head> (metadata) and <body> (content).
The <head> section contains important tags that help browsers, search engines, and users understand your site.

In the next chapter, we’ll dive into Headings, Paragraphs, and Text Formatting Tags – the building blocks of writing content in HTML.

Stay tuned: Chapter 2 – Headings, Paragraphs & Text Formatting