Welcome back, future branding gurus, pixel-pushing illustrators, and UI/UX wizards! You’ve survived color theory debates, kerning nightmares, and the eternal struggle of making a logo look good at 16px. Now, you’re dipping your toes into HTML & CSS—congrats! But before you start inventing new elements like <h7> or declaring justify-content: right, let’s set some things straight.

The Mysterious Case of the Missing <h7>

You’ve met the heading tags: <h1> through <h6>. They’re like the VIP hierarchy of your webpage—<h1> is the celebrity, <h6> is… well, the fine print nobody reads.

But wait—what if you need a seventh level? A <h7> for that extra unimportant text? Nope. HTML stops at <h6>. Why? Because the internet said so. (Actually, because HTML was designed with a logical document structure in mind, and if you need more than six levels of headings, you might need to rethink your content strategy.)

What NOT to do:

<h7>This is my secret sub-sub-sub-sub-heading</h7> <!-- Doesn't exist! -->

Instead, use CSS to style a <p> or <div> if you really need something beyond <h6>.

You Can’t Just Make Up HTML Elements

Listen, we get it. You’re creative. You see <div> and think, “What if I invent <superdiv>?” Sadly, browsers don’t appreciate your innovation. They only recognize standard HTML elements.

Bad Idea:

<superdiv>This is my revolutionary new container!</superdiv> <!-- Nope. -->

If you really need a custom element, HTML5 lets you use custom data attributes (data-*) or proper semantic elements like <section>, <article>, and <aside>.

justify-content: right Is a Lie (And Other CSS Crimes)

Ah, Flexbox. The magical layout tool that somehow still confuses everyone. You might think:

”I want things on the right, so justify-content: right makes sense!”

WRONG.

The correct value is flex-end (or end in newer specs). right is not a valid value for justify-content. CSS is picky like that.

Bad CSS:

.container {
  display: flex;
  justify-content: right; /* NOPE. */
}

Good CSS:

.container {
  display: flex;
  justify-content: flex-end; /* YES. */
}

Same goes for making up other CSS values. font-weight: extra-bold? Not a thing. margin: a-little-bit? Stop it.

Conclusion: Play by the Rules (Then Break Them Responsibly)

HTML and CSS have rules—some arbitrary, some logical. Your job is to learn them before you bend them.

So remember:

• No <h7>. Ever.
• Don’t invent HTML elements (unless you’re using Web Components, but that’s a story for another day).
• CSS values are specific. No justify-content: right, no font-size: big.

Now go forth, write valid code, and may your designs never break in mobile view.

Got any HTML/CSS myths you’ve fallen for? Maybe you tried float: center or <blink> (RIP)? We’ve all been there. 😆 Keep coding, keep laughing, and most importantly—keep validating!