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>
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.
Top comments (0)