Day 6 of My Web Dev Journey – Exploring HTML Tags

#html #webdev #frontend #web3

Hello everyone 👋

Day 6 was all about getting hands-on with HTML basics.
Until now, I only knew that HTML gives structure to a website — but today, I actually played with tags, code, and outputs. And honestly… it was fun! 😄

🧠 First Things First — HTML Is Not a Programming Language

Let’s clear this right now 👉 HTML is NOT a programming language.
If someone calls it that, feel free to (politely 😅) correct them.

HTML stands for HyperText Markup Language, and that’s why it uses angle brackets < > — it’s used to mark up content, not program logic.

🧱 What Is HTML Boilerplate?

Every HTML file starts with a boilerplate — basically the skeleton of the page.

Here’s what it includes:

<!DOCTYPE html> → tells the browser this is an HTML5 document.
<html> → wraps the entire page.
Inside, we have <head> and <body>.

👉 Quick VS Code Shortcut:
Type Shift + ! and hit Enter/Tab → Boom 💥 a full HTML boilerplate appears automatically! (No need to write it manually.)

📸 Press enter or click to view image in full size

🧩 `<head>` vs `<body>`

This confused me earlier, but now it’s crystal clear 👇

<head> → contains information about the page like title, metadata, SEO keywords, stylesheets, etc.
<body> → contains the actual content you see on the screen — text, images, videos, links, etc.

📸 Press enter or click to view image in full size

💡 Bonus Insight:
This is where SEO starts — proper <title>, <meta> descriptions, and structured content inside <head> help your page rank higher on Google.

🏷️ Heading Tags `<h1>` – `<h6>`

Headings are like newspaper titles — they grab attention and organize your content.

<h1> → biggest, used for the main title (use only one per page for SEO).
<h2> to <h6> → smaller subheadings.

👉 Pro Tip:
Using semantic headings helps both users and search engines understand your content hierarchy.

📸 Press enter or click to view image in full size

✍️ Paragraphs & Text Formatting

Today I also played with some basic text tags:

<p> → defines a paragraph of text.</p>  
<strong> → makes text important (search engines treat it as strong emphasis).</strong>  
<b> → just bold styling, no semantic meaning.</b>  
<i> → italic text.</i>  
<br> → adds a line break.  
<sup> → superscript (x²).</sup>  
<sub> → subscript (H₂O).</sub>