██FR█████ █INTELL███████████

Day 6 of My Web Dev Journey – Exploring HTML Tags


This content originally appeared on DEV Community and was authored by bblackwind

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>

Simple but powerful tools to make text readable, structured, and meaningful.

That’s it for Day 6 of my web dev journey 🚀
Tomorrow, I’ll move deeper into HTML elements and maybe start CSS basics.

Until then, happy coding! 💻

100DaysOfCode #WebDevelopment #HTML #Frontend #CodingJourney #DevCommunity


This content originally appeared on DEV Community and was authored by bblackwind