🧱 HTML Basics: Building the Skeleton of a Webpage
Welcome to the core of HTML! In this section, we will cover the 7 fundamental concepts you need to create any basic webpage. Think of this as learning the alphabet before you write sentences.
📄 1 & 2. HTML Documents & The DOCTYPE Declaration
What is an HTML Document?
An HTML document is simply a plain text file saved with the .html extension (e.g., index.html). It contains all the text, tags, and instructions that tell the web browser (like Chrome or Firefox) how to display your page.
Every HTML document has a standard tree-like structure:
- <html> – The root element (the whole page).
- <head> – Contains meta-information (title, styles, scripts) – not visible on the page itself.
- <body> – Contains all the visible content (headings, paragraphs, images, etc.).
What is the DOCTYPE Declaration?
The DOCTYPE (<!DOCTYPE html>) is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. It must be the very first line in your HTML document.
🔥 Why it matters: Without <!DOCTYPE html>, older browsers might render your page in "Quirks Mode" (a broken, outdated way). Adding it ensures Standards Mode – meaning your page will look exactly how you expect!
<!DOCTYPE html> <!-- 👈 Always put this at the very top -->
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
... Your visible content goes here ...
</body>
</html>
🔤 3. HTML Headings (<h1> – <h6>)
Headings are used to define the hierarchy and structure of your content, just like in a book or a newspaper.
- <h1> – The main title (most important). You should usually have only one
<h1>per page (like the title of the book). - <h2> – Major sections (like chapter titles).
- <h3> – Sub-sections (like paragraphs within a chapter).
- <h4>, <h5>, <h6> – Less important sub-headings (deeper levels).
📝 Code Example
<h1>Welcome to My Blog</h1>
<h2>Chapter 1: The Beginning</h2>
<h3>Part 1.1: The First Step</h3>
<h4>Part 1.1.1: Details</h4>👀 Browser Output
Welcome to My Blog
Chapter 1: The Beginning
Part 1.1: The First Step
Part 1.1.1: Details
✅ Notice how the browser automatically makes <h1> bigger and bolder than <h2>!
📝 4. HTML Paragraphs (<p>)
The <p> tag defines a block of text. It automatically adds a bit of margin (space) before and after it, separating your text into neat, readable chunks.
Code
<p>This is the first paragraph. It contains some interesting text about web development.</p>
<p>This is the second paragraph. Browsers automatically add a gap between paragraphs to make reading easier.</p>Browser Output
This is the first paragraph. It contains some interesting text about web development.
This is the second paragraph. Browsers automatically add a gap between paragraphs to make reading easier.
⚠️ The "White Space" Trap: Browsers ignore extra spaces and line breaks in your code. If you write:
<p>Hello
World</p>
It will display as just "Hello World" (with a single space). To force line breaks, you need the <br> tag.
🔗 5. HTML Links (<a>)
Links (or hyperlinks) are what make the web interconnected. You use the <a> (anchor) tag to create them. The href attribute specifies the destination URL.
Code (External Link)
<a href="https://www.google.com">Go to Google</a>Code (Open in New Tab)
<a href="https://example.com" target="_blank">Open in New Tab</a>📌 Result
- External Links: Use absolute URLs (e.g.,
https://...). - Internal Links: Use relative paths (e.g.,
about.htmlor/contact).
🖼️ 6. HTML Images (<img>)
The <img> tag is used to embed images. It is a self-closing tag (no </img>). It requires two key attributes:
- src (source): The path/URL to the image file.
- alt (alternative text): A description of the image (crucial for accessibility and SEO).
Code (Online Image)
<img src="https://via.placeholder.com/150"
alt="Placeholder Image" >Code (Local File)
<!-- Make sure 'cat.jpg' is in the same folder -->
<img src="cat.jpg" alt="A cute cat" width=300>📌 Result
👆 The alt text is read by screen readers and displays if the image fails to load.
width and height attributes to prevent layout shifting while the page loads. Alternatively, use CSS for responsive sizing.
🔍 7. How to View HTML Source Code
One of the best ways to learn HTML is to spy on other websites! Every browser has built-in tools to let you see the raw code behind any page.
📋 Method 1: "View Page Source"
This shows you the exact raw HTML that the server sent to the browser (before any JavaScript runs).
- Windows: Right-click on the page > "View Page Source" (or press Ctrl+U).
- Mac: Right-click > "View Page Source" (or press Cmd+Option+U).
It will open a new tab with the HTML code. You can look for specific tags, see how headings are used, or find the image URLs!
🛠️ Method 2: "Inspect" (Developer Tools)
This is the developer's secret weapon. It shows you the live DOM (the current state of the page), along with styles and event listeners.
- Windows: Right-click > "Inspect" (or press F12).
- Mac: Right-click > "Inspect" (or press Cmd+Option+I).
You can hover over the code, and the browser will highlight the corresponding element on the webpage. It's amazing for debugging!
🎯 Putting It All Together: Your "Mini-Website"
Let's combine everything we just learned! Copy the code below into VS Code, save it as basics.html, and open it in your browser.
<!-- Paste this inside your <body> -->
<h1>Welcome to My First Webpage</h1>
<h2>About Me</h2>
<p>Hello! My name is [Your Name]. I am learning Full Stack Web Development. This is my very first HTML page built using VS Code.</p>
<h2>My Favorite Things</h2>
<img src="https://via.placeholder.com/200/28a745/ffffff?text=My+Image" alt="Sample Image">
<h3>My Favorite Website</h3>
<p>Click here to visit
<a href="https://www.google.com" target="_blank">Google</a>.
</p>