Day 3 of HTML mastery

🎨 Day 3: How to Beautify Your Webpage Without CSS (yes it's possible!)

So you’ve learned the most basic HTML tags. But now you are probably wondering.....how do I make my webpage pretty without CSS? Don't worry- I am here to help🦸🏻‍♀️

💡 But First: Let’s Be Real

HTML isn’t designed to be pretty. It’s meant to be a skeleton. That's why CSS was invented. Still, there are ways to:

  • Organize information clearly

  • Add visual breaks

  • Emphasize key points

  • Create a readable flow

Let’s get into it 👇

🧱 1. Use Headings to Create heirarchies

<h1>My Website</h1>
<h2>About Me</h2>
<h3>My Hobbies</h3>

Headings get reader's attention and tell us the important titles of the webpage, but can also be used to make things pretty.

You learnt about <h1></h1> but there are 6 levels of headings in total:

<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>

with <h1> being the biggest and <h6> the smallest.

✍️ 2. Paragraphs, Bold, and Italics

<p>I am <strong>very</strong> passionate about <em>learning HTML</em>!</p>

  • <p> gives your content spacing and structure

  • <strong> = bold

  • <em> = italic

Use them to create emphasis and break up large blocks of text.

You should know that for <strong> you can also use <b> and for <em> you can use <i>. The only difference is that <em> and <strong> tell devs that this is important, while <b> and <i> are just visual.

🧼 3. Use <hr> for Clean Breaks

<hr>

Draws a nice horizontal line to break up content. Great for separating sections.

🔀 4. Use <br> for Controlled Line Breaks

<p>First line<br>Second line<br>Third line</p>

This helps when you want a new line without starting a whole new paragraph.

💬 5. Use <blockquote> for Quotes or Fancy Indents

<blockquote>"HTML is not just code. It's the language of the web."</blockquote>

It’s indented by default, giving it a bit of visual flair ✨ You can use it for quotes and text you want to give dramatic affect.

✨ 6. Add Special Characters & Emojis

<p>I &hearts; HTML!</p>
<p>Smile: &#128516;</p>

Use character entities to add:

  • Symbols (♥, ©, $, ←)

  • Emojis 😄

  • Arrows, punctuation, and more

  • The format for emojis are : &#unicode number;.

  • While you can technically write emojis using only your keyboard , there is a chance of it not rendering.

  • The cheatsheet for emojis is :-

EmojiCode
😀&#128512;
😎&#128526;
😍&#128525;
😂&#128514;
😭&#128557;
👍&#128077;
❤️&#10084; or &hearts;

🧩 Common Symbols & Their Entities

These are super useful for writing stuff like currency, math symbols, and arrows.

SymbolMeaningCode
<Less Than&lt;
>Greater Than&gt;
&Ampersand (&)&amp;
"Double Quote&quot;
©Copyright&copy;
®Registered&reg;
€Euro (€)&euro;
¥Yen (¥)&yen;
£Pound (£)&pound;
$Dollar ($)&#36; or just $
←Left Arrow&larr;
→Right Arrow&rarr;


🎭 7. Bonus: The <center> Tag

<center>
  <h2>Welcome to My Site</h2>
  <p>This is centered text!</p>
</center>

Okay, so <center> is technically outdated, but it still works in modern browsers. Use it just for fun — but don't rely on it long-term (we’ll do it better with CSS later!).

🧪 Day 3 Mini Project: Fancy About Me Page (HTML-only)

Try this:

<!DOCTYPE html>
<html>
<head>
  <title>About Me</title>
</head>
<body>
  <h1>About Me</h1>
  <hr>
  <p>Hello! I'm <strong>learning HTML</strong> and loving it!</p>
  <p>I enjoy:</p>
  <p>• Coding<br>• Reading<br>• Playing music</p>
  <blockquote>"Keep it simple, but significant."</blockquote>
  <p>I &hearts; HTML!</p>
</body>
</html>

🎉 That’s a Wrap for Day 3!

Even without CSS, you’ve just learned how to make a page that:

  • Has structure

  • Looks clean

  • Is readable

  • Has personality!

Tomorrow, we take it up a notch with... Day 4: Lists, Tables & Forms – The Neat Stuff. 

Comments

Post a Comment

Popular Posts