Basic HTML tags - 10 tags You must know

We will take a look at the basic HTML tags

This is tags will help you to able to develop a basic yet nice website.

List of basic HTML tags:

  • <a> for link
  • <b> to make bold text
    • <strong> for bold text with emphasis
  • <body> main HTML part
  • <br> for a break
  • <div> it is a division or part of an HTML document
  • <h1>... for titles
  • <i> to make an italic text
  • <img> for images in document
  • <ol> is an ordered list, <ul> for an unordered list
    • <li> is a list item in a bulleted (ordered list)
  • <p> for paragraph
  • <span> to style part of the text

<A> </A>

This is a tag that helps you link to a web page, to your page, social media site, or product within an online store,... The main attribute for this HTML tag is the href (Hypertext Reference) attribute, where you put a link to a website you want to link to. The other attribute is the target, it can be used to open a link in a new window so that users don’t lose focus on the current page. 

Example 1:
This is how you would link to our page: <a href=””>tecbrainplus</a>

<B> </B>

If you have a lot of text, then you need to emphasise some words to let the reader know what is important. And you do that with bold parts of the text.


The body part of an HTML document. This is an integral part of all HTML documents but it is just a tag that marks what is the visible content of the page, and where the most content is.


With this basic HTML tag, we let the browser know, where we want some blank lines or breaks in the text. Using a few breaks makes our text breathe, which means that it is easier to read and understand.

<DIV> </DIV>

An element which is mostly used to group elements and to act as a template for new controls. The div HTML tag is an element you will use to divide a significant part of an HTML document from other parts. For example, let’s say you have a list of products on your web page, and you will use a div to reach the product.


The head part of an HTML document. Moreover, this is where you have metadata, which is data about the  styling of the document, what kind of JavaScript libraries the document uses, the title and CSS

H1> </H1>   <H2> </H2> ... <H6> </H6>

Headings (levels 1-6, i.e. H3 is a subheading within an H2 subheading). H1, H2, and... tags are used to create titles. Why do we need titles, when we can style a text to look like H tags? For instance, titles are used so that search engines and other scrapers (bots) understand the important parts of our documents.

<I> </I>

If you have a lot of text, then you need to emphasise some words to let the reader know what is important. Rather, with italics, you can present text that is a little tilted to the right.


We use the IMG tag to show images. Considering that images can be within files for your web page or anywhere online. In addition, the most important attribute is src (source), which tells where the picture is.

MDI> </LI>

List item. A tag that is used within an ordered (<OL>) or unordered (<UL>) list. Not to mention, you can have as many as you like.

<OL> </OL>

Ordered list. Also includes <LI> List Items, which will be numbered automatically. As a consequence, this is very useful if you add more list items because the numbers will always be in the right order.

<P> </P>

The paragraph tag groups text into a paragraph :D (That is funny). Hence its purpose is to separate a part of text or paragraph, this way you make it more readable and organized.


The span tag groups text for which we want to have different styling. A good example would be if we wanted to have a red word inside a sentence.


Text is emphasised strongly - usually appears in bold, but most of the time it looks bold too. But it has an additional meaning, that this text should be emphasised.

Post a Comment