🌐 Speak the language of the web
HTML (HyperText Markup Language) is the fundamental building block of the web. It is the standard language used to create and structure content on web pages, defining elements like text, images, links, and other media.
In this guide, you’ll learn what HTML is, its basic syntax and structure, and how browsers interpret and render HTML to display web pages.
📁 What is HTML Used For?
- Structuring content on web pages
- Defining headings, paragraphs, lists, images, links, forms, and more
- Providing semantic meaning to content for browsers and search engines
- Serving as the backbone that CSS styles and JavaScript scripts enhance
🧱 HTML Basics
HTML is a markup language — it uses tags to “mark up” text and other content so browsers know how to display it. Unlike programming languages, HTML doesn’t perform logic or calculations but describes structure and meaning.
🔹 HTML Document Structure
Every HTML document has a basic structure:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
| Tag | Purpose |
|---|---|
<!DOCTYPE> | Declares the document type (HTML5) |
<html> | Root element of the HTML page |
<head> | Contains meta info, title, links to CSS/JS |
<title> | Sets the page title shown in browser tab |
<body> | Contains the visible content on the page |
📌 Common HTML Elements
| Element | Purpose | Example |
|---|---|---|
<h1>…<h6> | Headings, from largest to smallest | <h1>Welcome</h1> |
<p> | Paragraph | <p>This is a paragraph.</p> |
<a> | Hyperlink | <a href="https://example.com">Link</a> |
<img> | Image | <img src="image.jpg" alt="Description"> |
<ul>, <ol>, <li> | Lists (unordered and ordered) | <ul><li>Item 1</li></ul> |
<div> | Generic container/block | <div class="container">Content</div> |
🧩 How Browsers Interpret HTML
- Loading
The browser requests the HTML file from a web server. - Parsing
The browser reads the HTML code line-by-line, building the DOM (Document Object Model) — a tree structure representing all elements and their relationships. - Rendering
The browser applies CSS to style the DOM elements and executes any JavaScript, then paints the final page visible to the user. - Interaction
User can interact with page elements; JavaScript can update the DOM dynamically without reloading.
🔎 Important Concepts
| Concept | Description |
|---|---|
| DOM (Document Object Model) | A live tree representation of the page structure |
| Tags | Markup instructions in angle brackets (e.g., <p>) |
| Attributes | Extra info inside tags (e.g., href, src, alt) |
| Void Elements | Self-closing tags with no content (e.g., <img>, <br>) |
💡 HTML Syntax Rules
- Tags usually come in pairs: opening
<tag>and closing</tag>. - Tags can be nested, but must be properly closed and not overlap improperly.
- Attribute values must be enclosed in quotes (
" "or' '). - HTML is not case sensitive but best practice is lowercase tags.
📚 Example: Basic HTML Page
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first web page.</p>
<a href="https://openai.com" target="_blank">Visit OpenAI</a>
</body>
</html>
🧠 Best Practices
✅ Use semantic tags (<header>, <footer>, <article>, etc.) to improve accessibility and SEO
✅ Keep HTML clean and well-indented for readability
✅ Always provide alt text for images for accessibility
✅ Validate your HTML with tools like the W3C Validator
✅ Separate content (HTML), styling (CSS), and behavior (JavaScript)
📚 Summary Table
| Element/Concept | Purpose |
|---|---|
<!DOCTYPE html> | Defines HTML5 document |
<html> | Root element |
<head> | Metadata and resources |
<body> | Visible page content |
Tags (e.g. <p>, <a>) | Structure and organize content |
Attributes (e.g. href, src) | Provide additional element info |
| DOM | Browser’s internal page representation |
🔜 What’s Next?
HTML is just the start — Join our HTML & CSS Essentials Course to dive deeper into building stunning websites!