Conquer HTML Ep[1]: Starter Templates, Tags & Elements

You are currently viewing Conquer HTML Ep[1]:  Starter Templates, Tags & Elements

Starter Template

Every HTML file has some basic setup which is called as a starter template, that wraps the entire HTML code. The following code is what a basic starter template looks like.

<!DOCTYPE html>
<html>
<title> </title>
<body>

</body>
</html>

<!DOCTYPE html> : This line declares that this is a html document and helps the browsers interpret it correctly.

<html> : This wraps the entire html code inside itself.

<title> : This wraps what won’t be visible on webpage, such as page name, external links, etc.

<body> : This wraps the code that will be visible on the webpage.

Tags and Elements:

The above wrappers like html, title and body are all known as tags. Tags mark the start and end of elements, they help browsers interpret code without any misunderstandings. Tags are enclosed inside <>

Tags are of two types:

Closing Tags: 

These tags have text or code enclosed inside them. They begin as <name_of_tag> and end as </name_of_tag> tags like html, title, body, nav, footer, etc are closing tags, they need to be closed to indicate end of their use.

Self-closing tags: 

These tags do not need a closing tag, you need just one tag to specify their start and end. They are used as <name_of_tag /> Some examples of self-closing tags are br, img, embed, link, etc.

There are many different tags, each of them have their own use, we have listed below some of the most important HTML tags.

<h1> : This encloses the most important heading of the page.

<h2><h3>…<h6> : There are 6 heading tags, they enclose headings based on its importance.

<p> : This encloses the paragraphs.

<button> : This tag is used to make clickable buttons.

<nav><header><footer> : They enclose navbar, header and footer respectively.

<img > : This tag is used to insert an image.

<br> : This is a self closing tag used to give some space. 

Elements are lines of code that start and end with tags. For example,

<h1> Terminal Stack </h1> 
<p> This is a paragraph </p>

If an HTML element is enclosed inside another element, it is called a nested element.

<body> <p> Nested Element </p> </body>

<br> is called an empty element as it has no content inside it.

💡Quick Tip:

If you are using VS Code, install the “Emmet” extension, this extension will type the basic startup template for you in just one click. You just have to type ! and press enter in a .html file to get the basic html starter template.

Arpit Pandey

Hey there! I am Arpit Pandey, a full stack web developer, SEO specialist, C++ programmer and Co-Founder of this blog. I love to code and write articles!

Leave a Reply