HTML Tags That Slay!!

Because nobody wants to learn code like it’s a 2003 textbook.

1. Structural Tags – Your Website’s Skeleton (no spooky stuff)

<html>
  <head>...stuff goes here...</head>
  <body>...actual content here...</body>
</html>

In real life:

Think of it like a concert:

  • <html> is the whole arena
  • <head> is the backstage crew
  • <body> is where Beyoncé performs (aka the main content)

2. Headings & Paragraphs – Where You Say Stuff Loudly (or Normally)

<h1>Welcome to my chaos</h1>
<p>This is where I pretend to have it together.</p>

Gen Z logic:
Headings are your mood titles, and <p> is you oversharing in the group chat.

3. Text Formatting – Making That Text Pop Off

<p>I <strong>love</strong> <em>pizza</em> and <u>drama</u>.</p>

Real talk:

  • <strong> = this is important
  • <em> = this is emotional
  • <u> = underlined like your fave aesthetic quotes

4. Links & Media – Clickable and Cute

<a href="https://spotify.com">My sad girl playlist</a>
<img src="cat-dancing.gif" alt="A legend. A vibe. A cat.">

IRL comparison:
Links are like sending your friend a meme. Images? Just your vibe check.

5. Lists – For When You Actually Organize Your Life

<ol>
  <li>Open laptop</li>
  <li>Stare at screen</li>
  <li>Scroll TikTok</li>
</ol>

Yes:

  • <ul> = unordered list (cute lil dots)
  • <ol> = ordered list (for when you fake productivity)
  • <li> = the items aka your life goals (or grocery list)

6. Tables – The Group Chat Format IRL

<table>
  <tr>
    <th>Snack</th><th>Rating</th>
  </tr>
  <tr>
    <td>Hot Cheetos</td><td>11/10</td>
  </tr>
</table>

Lowkey:
Tables are how you show off your Excel-core side without opening Excel.

7. Forms – Let People Talk Back

<form>
  <label for="name">Name:</label>
  <input type="text" id="name">
  <button>Submit & Slay</button>
</form>

Why care?
Forms are how you collect emails, names, confessions, or who’s bringing what to Friendsgiving.

8. Semantic Tags – Because Google Deserves Clean Vibes Too

<article>
  <h2>How I Survived Coding Bootcamp</h2>
  <p>Mostly caffeine. Also, memes.</p>
</article>

Hot take:
Semantic tags make your site more readable to both humans and robots (like the Google bot, not your ex).

9. Meta Tags – Hidden Gems in Your Head

<head>
  <title>This Is My Tab Title</title>
  <meta name="description" content="Here’s what your page is about, bestie.">
</head>

Quick tip:
This is what shows up on Google previews. Make it ✨aesthetic✨ and clear.

The End Note:
You’ve officially unlocked the starter pack to HTML greatness. From tags to text glow-ups, you’re one step closer to coding domination.

— Behind the chaos:
@ChaosAndCode