Understanding HTML Tags and Elements

What is HTML and Why Is It Used?

HTML stands for Hypertext Markup Language, and it is used to create the basic structure of any website. When a browser loads a webpage, it doesn’t see design or logic. It only sees structure. HTML creates the structure and the outline for the content of the website. It has all the content the webpage has added in a semantic manner to be styled later using CSS.

What an HTML tag is

HTML tags are used to create the outline of the webpage. Tags are used to create HTML elements, which may contain content. Tags come with various attributes which are like extra properties that can be added to the tag, to increase its functionality.

Some of the Basic Tags are

• <p></p>:This is the paragraph tag, used to write content onto the webpage.

• <h1></h1>: This is the heading tag, which is used to create a heading on the webpage, this tag can range from h1 to h6

• <div></div>: This is the Division tag, used to create a division in the webpage, it is used to group elements together for layout or styling.

• <hr>: This is the Horizontal Rule tag, used to create a horizontal line to create a partition in the webpage.

• <br>: This is Break tag, used to break the current line and move the content to the next line.

Opening Tag, Closing Tag and Content

Opening tag, closing tag and the content are all combined to call an element of HTML. Opening tag is the opening part of a tag which is used toward the beginning. Let’s take an example to showcase the opening tag and the closing tag.

<h1>Content</h1>

Here, <h1> is the opening tag while </h1> is the closing tag, these two tags combine together to contain the content. Tags are like the walls of the box while content is the thing kept inside the box.

Self-Closing (void) Elements:

Void elements in HTML are unique because they do not contain any content between tags. These elements are self-contained and only require an opening tag, without the need for a closing tag. Examples of void elements include <br>, which inserts a line break in the text, and <hr>, which creates a horizontal line for separating content. These elements are used to structure the webpage without the need for content, making them efficient for specific tasks. Since they do not wrap any content, they help reducing the number of tags needed for certain functions.

Some of the Self closing elements:

• <hr>: Creates a horizontal line to separate content sections.

• <br>: Inserts a single line break.

• <img>: Embeds an image into the document.

• <input>: Used to create web forms and its behavior is defined by the type attribute.

Block-Level vs Inline Elements: