DEV Community

HARSH VATS
HARSH VATS

Posted on

3 1

HTML basics | HTML tutorial

Let's start by writing some basic code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>This is the title of this page.</title>
</head>
<body>
    <h1>heading</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Let me explain some stuff.

DOCTYPE

You see that DOCTYPE at the top, it's telling your browser that "hey, it's an html document.". Now you might be thinking if it is necessary to specify document type. I will say yes. You never know when your browser may cause some bugs so it's a good habbit to specify DOCTYPE.

HEAD

Now as you can see the lang is specified to en(english). You can skip this but it's a good practice to specify the default language for your webpage. It will also help you in targeting your audience when you will learn about SEO(Search Engine Optimization).

Now comes the head tag. Head tag contains all your metadata. Metadata is just some more data for your body data. Whatever you write in head tag won't show up in your webpage. Metadata includes styles, scripts, title and some other stuff. Let's discuss that.

Meta charset is the unicode for your data. I have explained it in more detail here in my article. Even if you don't read that article now it's okay but some deep knowledge can increase your level of confidence.

Meta viewport is the screen size for your web content. Default width is set to your device width and default zoom is set to 1. Default zoom is required for small screen devices like your mobile. Changing it will change the default zoom for small screens. Try changing it to 0 and you will hardly be able to read the text. For more detailed info read this.

Then comes the title which is pretty easy. It's just the title of your webpage. This is what appears in chrome tabs when you open a webpage.

BODY

Body tag contains the main content to show on your webpage like headings, paragraphs, forms, buttons and many more. We will discuss about that in the next article.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay