banner image 1 banner image 2

Fundamentals of HTML

March 6, 2023
10 mins
blog-img 1
Abhishek Sh

HTML; According to the Stack overflow survey, worldwide nearly 55% to 60% of people uses HTML to build their websites. The fact that frameworks like React employ the HTML coding syntax to build front-end websites is sufficient justification for learning HTML.

By Abhishek Sh- “Code Dev”

What is HTML? Before learning how to learn HTML or what to study in HTML, we should have a firm grasp of what HTML is. In HTML, “Hypertext Markup Language” is denoted. It is a widely used markup language for structuring and designing web pages. A collection of elements known as HTML, each of which is represented by a different tag, determine the structure and look of a web page. These tags can be used to create headings, paragraphs, links, images, lists, and other elements.

1. HTML Tags :

There are two type of tags

a. Paired tags.

b. Empty tags

a. Paired tags:

These tags are in pairs. They use the opening tag(<>) and closing tag(</>).

  1. <h1></h2>
  2. <p><p>

b. Empty tags:

These tags don’t always need to have a closing tag.


  1. <br>
  2. <hr>

2. Structure of HTML :

<html></html> — it is a root element in HTML and a paired tag.

It is the body tag and head tag’s parent element. This tag, which contains all of the tag’s elements and attributes, is used to structure websites.

This is the basic structure of the HTML . The HTML document are divided into these particular tags.

. Head

. Body

Doctype is information to a browser about what document type to expect. (syntax:<!DOCTYPE html>)


The user is not shown the metadata, CSS link, or title that are contained in the head tag. For the owner’s reference, it is written.

Example for head tag(<head></head>):

<meta charset="UTF-8">
<link href="style.css" rel=stylesheet>

Title tag:

Title tag enclosed in head tag. The name of the menu tab in the browser is set using it.

Example for title tag(<title></title>):

Body tag:

Body tag contains the tags or elements to be displayed to the user. All the contents to be displayed is enclosed in this tag.

Tags used in Body tags are:

  • <h1>,<h2>(like this till <h6>),
  • <p>,
  • <div>,
  • <header>,<section>,<footer>,
  • <br>,<hr>
  • <img>,
  • <ul><li>
  • <span>
  • <form>
  • <label> and many more…

Inside the body tag the parts are divided into;

  • header
  • section
  • footer

Example for body tag(<body></body>):

Body Structure:

Header tag:

Since it contains details about the title and heading of the associated content, the HTML “header” element is used to define the header for a document or section.The section heading (an h1-h6 element or a hgroup element) is typically intended to be contained in the <header> element, however this is not essential.The table of contents for a section, a search form, and any pertinent logos can also be enclosed in it.

Section tag:

Any website’s segment of main content is defined by the section tag.The information is divided into sections and subsections using the section tag.

Footer tag:

The footer of an HTML document is defined by the <footer> tag.

The footer information in this section includes things like author and copyright information.

Division tag:

The term “div” refers to the division tag. This tag acts as a storage space for HTML elements. In order to quickly design the div later, we may now encapsulate the heading and p tags inside of it.

Example for division tag (<div></div>):

We may also use it as the primary container and add tags like header, section, and footer.

Anchor tag:

a tag is defined as an anchor tag which is a hyperlink. There is an attribute called href which indicates the link’s destination in the url.

By default, links will appear as follows in all browsers:

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

Example for an anchor tag (<a></a>):

When we click on the hyperlinked Google text, which is blue and unvisited, it will send us to the specific link we specified in the href, in this case the caratLane page will be opened.

But this link opens in an existing page, what if you need it to open in a new tab ?

The target attribute is the next one that will have its value set to “_blank.”

Example for a tag(target = ‘blank’):

The link will open in a new tab when clicked.

unordered tag (<ul></ul>), list tag (<li></li>),ordered tag (<ol></ol>):

ul tag in HTML means Unordered list. li tag means list items and they are used inside of ul tag and also inside of ol tag(ordered list).

Example for listing tags:
Fundamentals of HTML

The ul tag and ol tag are distinguished in this case clearly. As an unordered list, the ul tag displays in bullets, while an ordered list, the ol tag displays in number and the li tag is enclosed in between both tags.

Image tag:

An image can be embedded in an HTML page using the img tag. The src and alt attributes of the img tag specify the image’s path and alternative text(this indicates that if the image doesn’t appear, this text will), respectively.

Attribute width and height in img tag is used to set the size of the image.

Example for Image tag (<img />):

The path of the image or the image’s link address can be found in the src ( source ) attribute of an image tag. As you can see from my code, I provided the image’s path; alternatively, you can use the image’s link address.

Enclosing the tags inside header tag:

So the header tag is mostly used to set up a nav bar with a logo. I’ve set up an example below.

This is the code:

The HTML class attribute is used to specify a class for an HTML element.For example in above code I named main div as ‘maincontainer’.


Headings tag:

There are 6 heading tags from h1 to h6. Out of those h1 is the most important heading and h6 is the least important.

Syntax of header tag is simple

<h1>heading 1</h1> (same for all 6 tags).

Headings Tag

The difference between header tags(h1,h2,h3,h4,h5,h6) is displayed in the above image. According to standards, the h2 through h6 tags can be used without restriction, while the h1 tag can only be used once per webpage.

Example for heading tag(<h1></h1>…<h6></h6>):

Paragraph tag:

p tag means paragraph tag. Any paragraph can be written using this tag.

Every <p> element has a solitary blank line added by browsers before and after it.

Example for paragraph tag(<p></p):

Form tag:

form tag is used to create a form in HTML . There are many elements inside form tags like.

  • input tag
  • button tag
  • textarea tag
  • label tag and many more..

So I’ve included the most common tags, label, input, and textarea, inside the form tag.

  • Label tags are used to inform users, like in the example above, that this input field is for names.
  • Users can enter information into a field using the input tag. A placeholder is a brief suggestion that specifies the intended value of an input field, whereas attributes like type specify the type of input the browser should anticipate.
  • textarea tag is used to enter the multi-line text as input.

Example for form tag(<form></form>):
Example of Form Tag

We can also add radio buttons or check-boxes into the form isn’t it exciting..! and many more?

Example for more attributes:

The difference between a checkbox and a radio button is that a checkbox allows you to select two options, whereas a radio button only offers one option, for example, male or female. We can also add drop down options and can also take date as input.

Table tag:

A HTML table is defined using it.There are a few other elements in table tags, including tr, th, and td. A table row is defined by the tr element, a table header is defined by the th element, and a table cell is defined by the td element.

Example for table tag (<table></table>):

As you can see, the code in red is for a table, and I’ve added a “a” tag (anchor tag) to it as well as a style to the table to create a border for a table.

Output for Table Tag

Enclosing the tags inside section tag(<section></section>):

To create the main body of our web-page, we included the table tag, the form tag, the header tag, and the paragraph tag into the section tag.

Enclosing the tags inside footer tag(<footer></footer>):

This is a footer tag which contains ul tag, image tag and paragraph tag.

Now I’ll combine all of those header, section, and footer elements into a division tag, which will serve as the primary building block for the entire website.

Final Output Code in JSFiddle:

Using HTML, we can easily create our own web-pages. I’m hoping this blog will help you understand the fundamentals of HTML and its structure. Start learning CSS if you want to move forward.

Meet the team!

Author: Abhishek Sh

Reviewed by: Kartheek M, Sreemaan K C K S

Edited By: Seema Jain

We at CaratLane are solving some of the most intriguing challenges to make our mark in the relatively uncharted omnichannel jewellery industry. If you are interested in tackling such obstacles, feel free to drop your updated resume/CV to!
blog-img 2


blog-img 3
5 mins
May 17, 2023
Sharing Data Between Controllers: Best Practices S...

This article will help you to understand the diffe

By Naveen C

blog-img 3
5 mins
March 21, 2023
Understanding Auto Layout and Constraints in Swift...

This article gives you an easy way of understandin

By Ramasamy P