HTML Tags: Top 10 You Should Know As A Beginner

In this post, I will share the top 10 must-know HTML tags that you should know as a beginner.

Before we get started, don’t forget to subscribe to my newsletter!
Get the latest tips, tools, and resources to level up your web development skills delivered straight to your inbox. Subscribe here!

Now, let’s jump right into it!

HTML Tag – <!DOCTYPE html>

Every HTML document should begin with a <!DOCTYPE html> declaration. This is to identify the version of HTML used by the webpage, enabling the browser to render the page correctly.
It must be specified at the beginning of every document in the following manner:

<!DOCTYPE html>

HTML Tag – <html> and <head>

The <html> tag represents the root of an HTML document. It contains all the information and content of the web page.

The <head> element consists of the information about the HTML document i.e. title of the page, character set, version of HTML, styles, scripts, and other meta information.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
  </head>
</html>

HTML Tag – <title>

The <title> tag is used to define the title of the HTML document, and it is shown in the browser’s title bar or the page’s tab.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
  </head>
</html>

HTML Tag – <meta>

The <meta> tag defines the metadata of the document.

Metadata is information about data(character set, page description, keywords, author of the document, and viewport settings). This will not be displayed on the web page but is machine-parsable.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
  </head>
  <body></body>
</html>

HTML Tag – <body>

The <body> tag consists of everything that you want to display on the web page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title</title>
</head>
<body>
  <!-- Main content for web page -->
</body>
</html>

HTML Tag – <h1> to <h6>

The <h1> to <h6> tags represent the titles or subtitles that you want to display on the web page.

<h1> represents the most important heading. <h6> represents the least important heading.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
  </head>
  <body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
  </body>
</html>

HTML Tag – <p>

The <p> tag defines a paragraph.

It is one of the most commonly used HTML tags for organizing and presenting textual content.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus ipsam
      quam, quidem quod nulla provident reprehenderit. Saepe atque nobis iusto
      labore earum hic dolores accusantium quia, fuga placeat fugiat, doloremque
      laborum, odio velit repudiandae nemo aperiam quaerat ratione quod
      veritatis exercitationem! Suscipit saepe omnis aliquam consequuntur
      adipisci facere laudantium atque.
    </p>
  </body>
</html>

HTML Tag – <img>

The <img> tag is used to embed an image into the document. It requires the src attribute, which points to the image file’s location.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
  </head>
  <body>
    <img src="img.png" alt="picture" />
  </body>
</html>

HTML Tag – `<ul>` and `<li>`

The <ul> (unordered list) tag is used to define an unordered list, and the <li> (list item) tag is used to define the list item.

The <ul> tag acts as a container for the <li> tags, which represent individual list items.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
  </head>
  <body>
    <ul> 
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul> 
  </body>
</html>

HTML Tag – <a>

The <a> (anchor) tag, with the ”href” attribute, defines a hyperlink, which is used to link a web page to another web page, email address, a particular section in the same web page or any other URL.

The href attribute indicates the link’s destination.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title</title>
</head>
<body>
  <a href="https://google.com">Google</a>
  <a href="mailto:anchor@example.com">Email</a>
  <a href="tel:9876543210">Phone</a>
</body>
</html>

Conclusion of HTML Tags

In this blog post, we explored the top 10 must-know HTML tags for beginners in web development. These tags provide a solid foundation for creating web pages and understanding the structure of an HTML document.

<!DOCTYPE html> declaration specifies the HTML version. The <html> tag is the root of the HTML document and the <head> section contains metadata.

The <title> tag defines the title of the webpage and the <meta> tag provides metadata about the HTML document, such as character encoding and viewport settings.

The <body> tag contains the content of the web page and heading tags (<h1> to <h6>) structure titles and subtitles effectively.

The <p> tag creates paragraphs of text and the <img> tag embeds images on the web page.

The <ul> and <li> tags allow us to create unordered lists and list items and the <a> tag is used to create hyperlinks to other web pages, email addresses, or specific sections within a page.

By understanding and utilizing these top 10 HTML tags, beginners can start building web pages and gain a strong foundation in web development.

That’s all for today!

If you’re new to web development, check out Learnify — my curated platform with beginner-friendly tutorials to help you learn web development step-by-step with examples and simple explanations.

If you enjoy my work and want to support what I do:
👉 Become a Patreon supporter
👉 Or buy me a coffee
Every small gesture keeps me going! 💛

Follow me on X (Twitter) to get daily web development tips & insights.

Enjoyed reading? You may also find these articles helpful.

13 HTML Attributes You Should Know About