HTML Introduction
HTML is the skeleton of the web. Without HTML, there would be no internet as we know it.
What is HTML?
HTML (HyperText Markup Language) is the standard language for creating web pages. It is not a programming language but a markup language — it uses tags to tell the browser how to display content.
Every web page you see, from a simple blog to a complex e-commerce platform, is built on HTML. HTML defines the structure of a web page: headings, paragraphs, images, links, tables — the "skeleton" of everything.
A Simple HTML Document
Every HTML document is made up of a series of tags. Here is the most basic HTML document structure:
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first paragraph.</p>
</body>
</html>Code Explanation
- <!DOCTYPE html> — Document type declaration, tells the browser this is an HTML5 document
- <html> — The root element of an HTML document; all content goes inside this tag
- <head> — The head section, containing metadata (title, encoding, etc.)
- <title> — Defines the page title, displayed in the browser tab
- <body> — The body section, where all visible content goes
- <h1> — A level-1 heading, typically the largest title text on the page
- <p> — A paragraph tag, used to wrap a block of text
HTML Tag Syntax
HTML tags usually come in pairs, consisting of an opening tag and a closing tag:
<tagname>Content goes here</tagname>- Opening tag:
<tagname>— The tag name wrapped in angle brackets - Closing tag:
</tagname>— A slash before the tag name - Content: — Text or other tags between the opening and closing tags
A few tags have no content and are called empty tags. Examples include the line break tag <br> and the horizontal rule tag <hr>.
<P> also works, <p> is more standard and readable.
HTML Attributes
Tags can provide additional information through attributes. Attributes are written inside the opening tag in the format attribute="value":
<a href="https://www.example.com">This is a link</a>
<img src="photo.jpg" alt="A photo">href— The destination URL of a linksrc— The path to an image filealt— Alternative text displayed when the image cannot be loaded (also important for accessibility)
" " for consistency.
HTML Versions
HTML has gone through several versions since its creation. We currently use HTML5, the latest standard. HTML5 introduced many new features:
- Semantic tags (
<header>,<nav>,<article>, etc.) - Native audio and video support (
<audio>,<video>) - Canvas drawing API
- Local storage (localStorage)
- Responsive image support
Development Tools
To write HTML, you only need two things:
- A text editor — We recommend VS Code (free, lightweight), Sublime Text, or Notepad++
- A web browser — Chrome, Edge, or Firefox all work great
Write code in your editor, save it as an .html file, and open it in a browser — it's that simple.
myfirst.html, and double-click to open it in your browser. Congratulations — you've just created your first web page!
📖 Summary
- HTML is a markup language that uses tags to describe web page structure — it's not a programming language
- Every HTML document has a fixed skeleton:
<!DOCTYPE html>,<html>,<head>+<body> - Most tags come in pairs (opening and closing); a few empty tags have no closing tag
- Attributes provide additional configuration for tags and are written inside the opening tag
- We use the HTML5 standard, which introduced semantic tags, audio/video support, and other modern features
📝 Exercises
- Create your first web page: Open Notepad (or VS Code), copy the first code example from this chapter, save it as
myfirst.html, and double-click to open it in your browser. Modify the content inside the<h1>and<p>tags to introduce yourself, save, and refresh the browser to see the changes. - Inspect a real web page: Open any website (like Wikipedia), right-click and select "View Page Source". How many tags can you recognize?