Get Started with HTML: The Top 20 Essential Tags Every Beginner Should Know

HTML stands for Hypertext Markup Language and is used for creating web pages. It uses many tags and attributes to define the structure and content of a web page. But as a beginner, you cannot master everything. However, there are some most commonly used tags in HTML that every beginner should know to get started with their web development journey.

And In this article, we will discuss the top 20 most commonly used tags of HTML with examples:

Here is a detailed explanation of all the tags with examples:

1.<!DOCTYPE html>

<!DOCTYPE html> is the document type declaration used in HTML5. It is the first line of code in an HTML document and indicates that the document is written in the latest version.

2. <html></html>

The <html></html> tag defines an HTML document's root element. It encloses all other HTML tags and defines the beginning and end of the document. For example:

In this example, the <html> tag is used to enclose the entire HTML document. Within the <html> tag, there are two main sections: the <head> section and the <body> section.

3.<head></head>

This tag is used to define the head section of an HTML document. This section contains metadata about the document, such as the document title, links to CSS stylesheets, and scripts. The content within the <head> tag is not displayed on the web page itself but is used by web browsers and search engines to understand and display the page correctly.

4.<meta>

The <meta> tag is used to provide metadata or data about data in an HTML document. It is typically placed within the <head> section of an HTML document, and it does not have a closing tag. The <meta> tag provides information that is not displayed on the web page itself just like the head tag but is used by search engines, browsers, and other applications to understand and process the document.

Here are some of the common attributes used with the <meta> tag:

charset: It defines the character encoding used in the document. Example: <meta charset=”UTF-8">
name: It is used to define the name of the metadata property. Example: <meta name=”description” content=” This is a description of the web page.”>
content: This attribute defines the value of the metadata property. Example: <meta name=”author” content=”Steve”>
http-equiv: Provides an HTTP header for the document. Example: <meta http-equiv=”refresh” content=”5; url=http://bakeandflakes.com/">

Following is an example for a better understanding:

5.<title></title>

The <title> tag is used to define the title of an HTML document. It is usually placed within the <head> section of an HTML document and provides a brief, descriptive title for the page that is displayed in the browser’s title bar or tab. For example:

It is also important to know that the text within the <title> tag is also used by search engines as the title of the page in search results, so it is important to choose a descriptive and accurate title according to the content of the page.

6.<body></body>

The <body> tag is used to define the main content of an HTML document. It contains all the visible content of the page, including headings, paragraphs, images, links, forms, and other elements.

Here is an example of how the <body> tag can be used in an HTML document:

7.<h1></h1> to <h6></h6>

HTML provides six levels of heading tags (<h1> to <h6>) that are used to define headings and subheadings on a web page. The <h1> tag represents the main heading of the page, while the <h2> to <h6> tags represent subheadings of decreasing importance like this:

It is important to remember when using heading tags that they should be used to represent the structure of the page, not just to style text. Heading tags should also be used in order, with <h1> representing the most important heading and <h6> representing the least important.

8.<p></p>

The <p> tag is used in HTML to define a paragraph of text. It is a block-level element that creates a new line before and after the content of the tag. The <p> tag is commonly used to group a block of text and apply styling to it using CSS.

9.<a></a>

The <a> tag is used in HTML to create hyperlinks that link to another web page or a specific location within the same page. The stands for “anchor”.

It can also be used in combination with other HTML tags to create more complex links. For example, you can wrap a website link or a button to create a clickable link like this:

10.<img>

The <img> tag is used in HTML to display images on a web page. It is a self-closing tag, which means it does not require a closing tag like ‘headings’, ‘p’, and ‘a’ tags.

<img scr=”your image” alt=”alternative path to your image”>

Img tag consists of two attributes:

src: The src attribute defines the URL of the image file

alt: This attribute provides alternative text for the image, which is displayed if the image cannot be loaded or read by screen readers.

11.<ul></ul> and <li></li>

The <ul> tag is used to define the unordered list, while the <li> tag is used to define each list item. For example:

In this example, we have used the <ul> tag to define an unordered list of ’our menu’, and the <li> tag to define each list item. The result will be a bulleted list of items:

Chocolate lava cake
cupcakes
Sponge cake

12.<ol></ol> and <li></li>

The <ol> tag is used to define the ordered list, while the <li> tag is used to define each list item.

Here’s an example of how to use the <ol> and <li> tags in HTML:

In this example, we have used the <ol> tag to define an ordered list of to-do items, and the <li> tag to define each list item. The result will be a numbered list of items like this:

Buy groceries
Do laundry
Go to the gym

13.<div></div>

The <div> tag is a container tag in HTML that is used to group, related elements together into a block-level box. It has no specific semantic meaning and is mainly used for styling purposes, as it allows you to apply CSS styles to a group of elements at once. For example:

In this example, we have used the <div> tag to group two paragraphs together. We can then apply CSS styles to this <div> tag to affect both paragraphs at once, such as setting a background color or changing the font size.

14.<span></span>

The <span> tag is another container tag in HTML that is used to group inline-level elements. It has no specific semantic meaning and is mainly used for styling purposes just like <div> tag, as it allows you to apply CSS styles to a group of inline-level elements at once.

The <span> tag is often used in combination with CSS styles and JavaScript code to manipulate specific parts of a web page, such as text or images. It is particularly useful when you need to style or modify just a small part of an element, such as changing the color of a few words within a sentence like this:

15.<form></form>

The <form> tag is an important container tag in HTML used to create a form on a web page. Forms allow users to input data, which can then be processed on the server or used in JavaScript on the client side.

Here is an example of <form> tag:

16.<input>

The <input> tag is a versatile and commonly used HTML tag that is used to create form controls such as text boxes, radio buttons, checkboxes, etc. The tag can have various attributes depending on the type of input field you want to create.

Here are some examples of how to use the <input> tag in HTML:

Creating a simple text input field:
Creating a radio button:
Creating a submit button:

17.<button></button>

The <button> tag in HTML is used to create a clickable button element on a web page. This tag is commonly used in forms, as well as for general interactivity on a web page

Here is an example of how to use the <button> tag in HTML:

18.<br>

The <br> tag in HTML is used to create a line break, which forces the text or content after the tag to begin on a new line. This tag does not have a closing tag, as it is a standalone tag.

19.<hr>

The <hr> tag in HTML is used to create a horizontal rule or line, which is often used to visually separate content on a web page. This tag is a standalone tag, just like <br> tag. For example:

This creates a horizontal line between the two paragraphs, which visually separates the content. When the web page is rendered in a browser, it will appear like this:

20.<table></table>

The <table></table> tag in HTML is used to create a table with rows and columns. The table is defined by using other tags within the <table> element to define the structure of the table, such as <tr> (table row), <th> (table header cell), and <td> (table data cell) elements.

Here is an example of <table> tag:

It will appear like this when the web page is rendered in a browser:

Final words:

These 20 HTML tags are most commonly used to structure and display content on the web. By learning these tags and how they work, anyone as a beginner can start creating simple web pages and better understand how HTML is used to structure and display content on the web. However, there are many more HTML tags and concepts to explore, and as beginners continue to learn and grow, they can create more complex and sophisticated web applications.

So don’t be afraid to dive in and start experimenting with HTML — the possibilities are endless!

Maimoona