Shefali

Posted on Jul 19, 2023 • Edited on Oct 3, 2023 • Originally published at shefali.dev

Top 10 HTML Tags You Should Know As A Beginner

#webdev #programming #html #beginners

Introduction

HTML is the backbone of the web. HTML stands for Hyper Text Markup Language. It is a standard markup language, not any programming language and is used for creating web pages and web applications.

Web browsers receive HTML document from a web server or local storage and display the document on a web page.

In this blog post, we will explore the top 10 must-know HTML tags that will kickstart your journey into the world of web development.

Let’s start!

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

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

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

<body>

The <body> tag consists of everything which 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>

<h1> to <h6>

The <h1> to <h6> tags represent the titles or subtitles which 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>

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

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

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

<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

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.

Thanks for reading.

For more content like this click here.

Keep coding!!