Understanding HTML Tags and Elements

HTML (Hypertext Markup Language) is a standard language used for creating the structure of web pages. It’s like the skeleton of a web page, which defines which thing should be where. HTML is very important in creating web pages because without this a web page can’t be created. In this article we will understand what HTML tags and elements are.

What are HTML tags?

HTML tags are the building blocks of this language. It defines how content should be displayed and where. Every tag is written in this format, <tagname> and each tag has its closing tag also </tagname>. In the middle of opening and closing tags, content is placed there. Together these 3 things - opening tag, content, and closing tag, form an HTML element. We’ll see what HTML elements are in a bit. Think of HTML tags like boxes, opening and closing tags define the box boundaries, and every box is closed.

There are various tags in HTML; we’ll see some of them.

<h1>

There is <h1>Content</h1> tag in HTML that defines the large heading; similarly, there are <h2></h2>, <h3></h3> … upto <h6></h6> tags that define smaller headings.

<p>

A p tag defines a paragraph, like <p>This is a paragraph</p>.

<div>

A div tag is like a box which holds similar items; it groups some elements inside it, like

<div>
  <h2>Heading</h2>
  <p>This is a paragraph.</p>
</div>

Here <div> tag wraps <h2> and <p> tags inside it to make them one group.

<span>

A span tag is an inline element that groups a small part of content inside a block-level element. Don’t panic; I’ll explain inline and block-level elements in a while. Think of it like a highlighted line in a textbook.

Note: Every tag does not have a closing tag; there are some tags, which are called empty elements or void elements, that do not have closing tags like <br>, it does the function of breaking content to the next line. There is no content inside it, hence no closing tag.

What are HTML elements?

HTML elements are composed of three parts: opening tag, content, and closing tag. Together they form an HTML element. These elements tell the browser how content is structured, like where a heading is starting and where it is closing, what is after what, and more.

Inline vs block-level elements

This is so simple: block-level elements are those that take the full width of the screen, and the next element comes on the next line. Like <h1>, <p>, and more.

Inline elements take only the width necessary for their content, and the next element comes after where the first element ends, not on the next line. Like <span>, <a>, and more.\

Conclusion

HTML is a standard markup language used for creating the structure of the web pages. Tags are building blocks of HTML; many tags have their closing tags as well, but some of the tags are empty elements, which do not contain any content and do not have closing tags. When a tag is written, inside it is content, and it has a closing tag; together these three things form an HTML element.

There are two types of HTML elements: inline and block-level elements. Inline elements tags only the width that is needed for their content, while block elements take the full screen width.

I’ll suggest you use browser inspect to view the HTML code of your favorite website. To open it, right-click on a webpage and select “inspect” from the menu; a window will open. From the elements tab you can see all the HTML code used in this website.