Top 10 HTML tags

I get asked a lot about what are the best tags you should know when you start to learn HTML. This is my short list of top HTML tags, that I use a frequently. All the tags have a short description and an example, so that you can see immediately what they do. See the live example as well on the link below the list.

This is our list of HTML tags:

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


<A> </A>

In short this is a tag that helps you make a link to a web page, to your page, social media site, product within 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 target, it can be used to open a link in 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=””>CodeBrainer</a> 
A (link) tag

Example 2: (link will open in new window)
This is how you would link to our page and open it in a new window: <a href=”” target=”_blank”>CodeBrainer</a>
A (link) tag


<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.

CodeBrainer has a lot of <b>good</b> courses.
B (bold) tag



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, where the most content is.



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

Example (use this text in html, and it will look different):
CodeBrainer will teach you how to write HTML.<br><br>If you will have trouble with remembering HTML tags, you should read our top 10 tags.<br>And use some of the examples there.<br><br><br>Your CodeBrainer
BR tag


<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. Let’s say you have a list of products on your web page, you will use a div for each product.



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


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

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

<h1>Top 10 HTML tags</h1> <br><br><br>In this article we will explain our list of top 10 HTML tags.<br><br> <h2>First tag is &lt;b&gt;&lt;/b&gt;</h2>Bold is all about making words more important.
H1.. tag
There is a great chapter about titles in our blog post about adding a bulleted list to your HTML document.


<I> </I>

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

<i>CodeBrainer</i> has a lot of good courses.
I tag



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

Example (this will show an apple and a text):
This is an apple <img src=”” width=”100”>
IMG tag


<LI> </LI>

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

<ul> <li>This is single list item.</li> </ul>
LI tag


<OL> </OL>

Ordered list. Includes <LI> List Items, which will be numbered automatically. This is very useful if you add more list items, because  the numbers will always be in the right order.

<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
OL tag


<P> </P>

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

<p>This is article about top 10 HTML tags, this will be you cheatsheet in the future, somewhere, where you can take a look and just use it.</p><p>First tag that we will talk about is bold. It emphasises words or sentences..</p>
P tag



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.

This is a <span style=”color: red;”>warning:</span> you should have this cheat sheet with you all the time :D
Span tag



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

CodeBrainer has a lot of <strong>good</strong> courses.
Strong tag


<UL> </UL>

An unordered list just means that it will have bullets for each item in the list. List items will have bullets for each item.


Animals list
There is a great chapter about titles in our blog post about adding a bulleted list to your HTML document.


We have shown you our list of top HTML tags you will use a lot. The best thing is that we have shown you examples for all of them. Now you can use our example in the code below or  click the link to open it in a new window.

Open in a new window