1.HTML Boilerplate

Jun 20, 2023

Learn about HTML Boilerplate in a fun way which is the basis of all the web apps you will be building

A thing to remember

Let's imagine the Austrian Flag as a template for our HTML Boilerplate

Imagine the top and bottom RED colors as our <html> opening and </html> closing tags. The WHITE color indicates everything in between including the <head>, <body>, <main>, <section>, <article>, <footer>, <script> etc... Think of the Red layer as the one which holds the ever important white together just like our HTML Boilerplate

Getting it done

If you are already a fan of VS Code Editor 🥳, you might have done this several times now.

When you press Shift + 1 (in Windows) you will see a not (!) symbol popping up in VS Code editor like below

when you press enter. You will get an HTML Boiler Plate 😎

But If you haven't done it before

Let's analyze the HTML Boiler Plate line by line

<!DOCTYPE html>

The !DOCTYPE html indicates this is not a document-type HTML

<html lang="en">

The HTML Opening tag <html> implies the start of HTML elements and lang="en" indicates that the default language is English

<head>

The opening of the "Head" HTML element

<meta charset="UTF-8">

We are telling the browser that the default character set we will be using is "utf-8" which is a standard form across the internet(we will be learning about character sets separately)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Don't worry too much about the size of the line. This is to tell the browser to fit the size of our web app based on the screen we will be using our web app from like Mobile, Tablet and Desktop/PC (you will understand when we cover CSS)

<title>Document</title>

This is the title that will appear in the browser's tab when you open a web page. See below the Amazon home page (Amazon.com.Spend less. Smile more.)

Let's continue

</head>

The Closing of the <head> element. The whole head section will look like this

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

Now comes the most important section for every web application. The <body> tag. This is where the users will be visualizing the contents of your app.

<body>
</body>

Then comes the closing </html> tag. This indicates the end of our HTML document.

</html>

The whole boilerplate for review

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body> 
</body>
</html>

You will be learning about each tag individually in the coming lessons

Happy Coding 🔥