Technomage

Basic's of html

How to Scaffold HTML Markup (Without Losing Your Mind).

Published: 1-04-2025

Step 1: Start with the Basics

Every great HTML page starts with the humble <!DOCTYPE html>. It’s like the “Hello, World!” of the web.

<!DOCTYPE html><html lang="en">

Notice the lang="en"? That tells the browser your page is in English. Fancy!

Step 2: Add a Head

The <head> section is where you tuck away all the important behind-the-scenes stuff, like the character encoding (UTF-8 forever!), page title, and meta information.

<head>
<meta charset="UTF-8">
    <meta name="viewport" 
    content="width=device-width, 
    initial-scale=1.0">
    <title>Your Page Title Here
    </title>
</head>

Step 3: Get to the Body

The <body> is where the magic happens! This is where you’ll put all the content your visitors will actually see.

<body>
    <h1>Welcome to My Awesome 
    Page</h1>
    <p>This is where I’ll write
     about all the cool things 
    I’m doing.</p>
</body>

Step 4: Close It Up

Don’t forget to close your <html> tag at the end. Nobody likes loose ends!

</html>

Final Product

Put it all together, and voilà! You’ve got yourself a perfectly scaffolded HTML page. Copy and paste the code below to get started:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
    content="width=device-width, 
    initial-scale=1.0">
    <title>My Awesome Page
    </title>
</head>
<body>
    <h1>Welcome to My Awesome 
    Page
    </h1>
    <p>This is where 
    I’ll write
     about all the cool 
    things I’m doing.</p>
</body>
</html>

If you'd like to receive updates when I add new posts or update them, drop your name and email in the form below.

Last updated 1-05-2025