DEV Community

Cover image for Understanding HTML Tags and Elements
Anoop Rajoriya
Anoop Rajoriya

Posted on

Understanding HTML Tags and Elements

#html #beginners #chaicode #2026

Content List

What HTML is and why we use it?

HTML stand for Hyper Text Markup Language. In that hyper text refere to system that provide a link to access other pages on web, markup means use of annotate text give instruction to browser how to structure and display page content.

Brower can not read html like humans do it need a instruction to differentiate between instruction and the actual content. Html provide this information so browser can understand which part of the content is display as heading and which part is the paragraph or links without that browser show all information as a big paragpah of text.

Think, in building a house the blueprint and fram of the house is html provide the initial structre. In human body the skeleton is the html not skin and mucles which provide styling (css) and interactibity (js) to web page.

What is HTML tags?

In html tags are the commands that tells browswer how to handle specific piece of content. It is a fundamental building block it used to structre and apply content formating on web pages.

Every tag contain tree parts open angle bracket <, tag name like head, body, h1, and close angle bracket > this tree thing complete every tag like <head>. Most of the tags in html comes with pair, opening and closing tags which enclose content. Closing tag contain / wich differentiate closing tag with opening tag.

without a closing tag, browser get confused. If you open a heading tag and put heading content on to it but if you don't close it broswer assume all content after that are the part of heading and all content print like a big giant heading every thing big and bold. Closing tag tell borswer "stop" instruction heading ends right here.


<section>
    <h1>Hello world</h1>
</section>
Enter fullscreen mode Exit fullscreen mode

Think its like a putting object into box. You open the box lid (Opening tag), put object into that (content) and close the box lid (Closing tag).

HTML element & element vs tag

Most of the peoples assume the tags and elemetns are interchangable but there are slightly technical difference here. Element is the package of the tree main thinks:

  • Opening Tag: start command. It consist element name wrap with the opening and closing angle bracket <p> tells the browser i'm starting paragraph now.

  • Content: this is the actual text, image, and link you want to user see.

  • Closing Tag: stop command. it has same configuration like start command with forward slash / make the difference </p> and tell the browser this here paragraph ends.

To understand difference between element and tag think element like a sandwich:

  • Opening tag is the top slice of bread.
  • Content is the middle part (cheez, butter, and jelly) of the sandwich.
  • Closing tag is the bottom slice of bread
  • Element is the entire sandwich, you can't have sandwich without all part working together.

Self closing (Void) element

In the world of HTML there are the some tags have opening and closing becase thay wrap around the content to tell the broswer where this specific content ended. What if tag is the content.

There are type of tags in html which only have one tag no need to close it because this type of tags are work as content not wrap around content. Think its like a sticker or stamp you don't need to open sticker, put someting in it, and close it. You just directly put it down.

These element called self closing Element and Void Element, these some major elements:

  • <img>: used to put image on page don't put text on it.
  • <br>: a simple line break like enter in keyboard.
  • <hr>: a horizontal rule, line acrose the page.

In the older version of the html you might see the self closing tags written with forward slash at end like <img/> but in the latest version of the html in HTML5 the slash is optional and usually omitted.

Block vs Inline elements & commonly used elements

Think as your webpage is the grid where every element is box. There are two main ways to arrange them:

Block Level Element

This type of elements are always start on new line and take up full width. It stratch out to left and right as far as it can. Think these as bricks when you stack these bricks each other it always start new layer. You can put two bricks side by side in same verticle space without some extra support. There are some common example of block level elements:

<header>
    <h1>Logo</h1>
    <ul>
        <li>About</li>
        <li>Contact</li>
    </ul>
</header>

<main>Block level elements</main>
Enter fullscreen mode Exit fullscreen mode

Inline Level Element

An inline elements does not start on new line it only takes as much width as necessary for its content. it sits "in line" with elements around it. Think it like a marker. If you using marker to highlith a word in sentant it does not break the sentace in apart, the highlight just site right there on top of the word. There are common inline words:

<b>Lorem Ipsum</b> is simply dummy text of the <i>printing</i> and typesetting industry. <strong>Lorem Ipsum</strong> has been the <em>industry's</em> standard dummy text ever since the <time>1500s<time>, when an unknown printer took a <span>galley of type and scrambled</    span> it to make a type <a>specimen book</a>.
Enter fullscreen mode Exit fullscreen mode

Top comments (0)