HTML Tags List | Basic HTML tags

 

                      Most used HTML tags

HTML is a crucial part of web development. If you are a beginner, you do not need to learn hundreds of tags. Here are the 12 most important basic HTML tags, along with examples. Every beginner should master this list of HTML tags first.

1.<div>:

Stands for the division of documents. It is a block-level element used to group multiple elements in a single container. So we can apply the same styling to multiple elements at once.

Block-level elements are those elements that start on a new line and take the full width of the document

<div>
 div is a block-level element
</div>

Here, I have provided a simple example to demonstrate that this is a block-level element and does not applied styling using CSS. Now, I want to focus on HTML and avoid confusing you with everything at once.

Output:

This example demonstrates that it is a block-level element and occupies the full width of the screen.

2. <span>:

Span is an inline element. It serves to style a specific word or part of text, such as changing the color of a word or text using a span.

Inline elements are those that do not start from a new line and do not take the full width.

<p>  Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
<span> sed do eiusmod tempor </span>
incididunt ut labore et dolore magna aliqua.</p> 

Output:

In this example, the text of the span element will appear after the text of the p element, not on a new line. I have styled content within a span tag to show that it does not start on a new line or take the full width.

3. <strong>:

Its role is to make text bold, similar to the <b> tag. Besides styling purposes, it has another use to show search engines that something is more important than other things.

<p>Please <strong>read the instructions</strong> carefully.</p>

Output:

4. <em>:

Its role is to make text italic, similar to the <i> tag. Besides its styling purposes, it also serves another use to help search engines emphasize certain content.

<p><em>Hurry up </em>
It is 12:00 am </p>

Output:

5. <a>:

Its role is to add links on our site. The syntax of a tag is:

<a href=”https://www.youtube.com/”> Youtube</a>

The link in the href will open when someone clicks on YouTube. It also has a target attribute, which decides whether to open the link in the same window or a new window.

Output:

6. <img>:

Used to add images to our site. Images make our site more appealing. The syntax of the img tag is:

<img src=”https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRauJ6evjDqOODiZ0VkSH0AGIh3ko7BfCTB2g&s” 
alt=”Cat”>

In the src attribute, the address of the image is specified, and in the alt attribute, the text “Cat” is placed, which informs the reader about the image’s content when it does not load, and also helps screen readers. We can assign height and width by using their attributes.

Output:

7. <ul>:

Its function is to add unordered lists to our page. Each item is marked with a bullet point.

<h3>Popular Web Browsers</h3>
    <ul>
      <li>Google Chrome</li>
      <li>Safari</li>
    </ul>

Output:

8. <ol>:

It serves to add ordered lists to our page. It has a number before each item in the list.

<h3>Popular Web Browsers</h3>
    <ol>
      <li>Google Chrome</li>
      <li>Safari</li>
    </ol>

Output:

9. <li>:

Stands for list items. It is used inside <ol>(ordered list) and <ul> (unordered list) to define individual items in the list.

10. <header>:

It is used to define the header of a web page. It contains introductory content, such as the navigation bar, logo, and page title. A page can have multiple headers, one for the full page and another for different sections.

11. <main>:

It is used to define the main content that is displayed. Each page should have one main tag and should contain unique content. It is placed after the header tag of the page.

12. <footer>:

Its role is to add a footer section containing copyright and contact information at the end of the page.

<footer>
  <p>&copy; 2025 Frontend Journey | Designed by Sunbee</p>
</footer>

Output:

These 12 most used HTML tags will help you build a strong foundation in web development. If you want to dive deeper, check out my detailed guide on HTML Tags for Beginners.