Introduction to HTML : A Beginner's Guide
Master the Fundamentals of HTML Boilerplate
Hello learners!
What forms the skeleton of a webpage? What is the foundation on which every website is based? This is where HTML comes into play. Hence, understanding the most fundamental boilerplate code of HTML becomes all the more crucial. This article will be easy to comprehend for beginners. Let’s dive into it!
BoilerPlate Code 📝
This is what the boilerplate code looks like.
Doctype 📜
This tells the browser that the document is written by the developer in HTML (Latest standard is HTML5). It should be the first thing that you write in your HTML file to avoid any type of inconsistent behaviours on the browser side.
Html Lang 🗣️
This is the root element of the document and it is the point where the HTML starts in the document. It has an attribute named ‘lang’ which is set to ‘en’. It tell the browser, search engines and the screen reading softwares that the document has been written in english language. Yes, a french developer can write the document in french language as well!
Head Tag ⛑️
This tag contains the metadata (data about some other data) and some other information as well which is not visible on the webpage. Even though it is not visible but it is important for browsers to work without any inconsistent behaviour. The browser reads the head tag first before going on to other tags to set up the page first.
Meta - Charset 🔤
This tag tells the browser about what type of encoding it should adopt while rendering the webpage. UTF-8 is the most widely used character encoding in web development as it supports a plethora of languages as well as special symbols and characters. Without using this tag the browser would misinterpret some special characters. Then it would look something like this
�You will never ever want that on your webpage!Meta - Name Content 📹
This tag is very crucial for maintaining the user experience (UX).
Name →
name = “viewport”It tells the browser that this meta tag is being used for controlling the viewport settings. A viewport is nothing but the screen on which the user is seeing the webpage or some other software.Content →
content = “width=device-width”It tells the browser that it has to adapt to the width of the device which the user is using, it can be a smartphone or an ultra-wide monitor or anything else.Content (contd.) →
content = “initial-scale=1.0”It sets the default zoom value to 100% so that the page does not appear disproportionate.Title Tag 🖋️
It tells the browser about the title of the webpage. It is the most straightforward tag in the boilerplate code.
Whatever you write inside the Title Tag will be visible in the tab in your browser.
Body Tag 🦾
Whatever the content you want to write goes here. It can be a <div></div> <h1></h1> <button></button> or any other tag that you want to add, which is visible on the webpage.
Container & Self - Closing Tags 🔓
The boilerplate code has been discussed in the above sections. But there are some tags which are occurring 2 times, like this→<html></html> and some are occurring only once like this→<!DOCTYPE html>. Why is that so? Here comes the concept of Container tags and Self Closing tags.
Some tags don’t need to have their corresponding ending tags, these tags are called self closing tags, because they close themselves automatically.
Common Self Closing Tags
| Tag | Purpose |
<br> | Gives a line break in the webpage |
<hr> | Gives a line break but also adds a visible horizontal line |
<img> | Used for inserting an image in the webpage |
<input> | Used to have input fields on the webpage |
<link> | Used to link other documents which are in connection with the document. For example a CSS File |
<meta> | Used to add some meta data and some other necessary information which is not visible on the webpage |
Some tags need to be closed explicitly because they don’t close themselves automatically. These tags are called Container Tags.
Common Container Tags
| Tag | Purpose |
| <p></p> | Creating a paragraph |
| <div></div> | Creating a division container |
| <h1></h1> - <h6></h6> | Creating headings |
| <span></span> | Creating in-line container |
| <a></a> | Inserting a link to some other webpage in the current webpage |
| <ul></ul> | Creating an unordered list |
| <table></table> | Creating a table |
Conclusion 🏁
Being familiar with the boilerplate HTML code becomes really important because it is the most fundamental piece of code through which the browser knows what type of content is coming its way. Any beginner developer must grasp the boilerplate code to make sure the foundation remains strong to build a giant building on top of it. Follow for more such articles where I explain such concepts in an easier to understand language!