Understanding HTML Tags and Elements
TL;DR
HTML (HyperText Markup Language) is used to structure content on the web. It uses tags to define elements like headings, paragraphs, and links. An HTML tag usually has an opening tag, content, and a closing tag, and together they form an HTML element, which tells the browser what the content is and how it should be structured.
Have you ever wondered how a browser knows what should be a heading, paragraph, or link? That structure comes from HTML, the language that defines how content fits together on a web page. Think of HTML as the skeleton of a webpage—Just like a skeleton defines the shape of a body, it provides the basic structure that holds everything in place and forms the foundation of everything you see on the web.
HTML
What is HTML?
HTML (HyperText Markup Language) is the standard language used to create and structure content on the web. It tells the browser what each piece of content is, such as headings, paragraphs, images, links, and forms.
Markup languages are computer languages that are used to structure, format, or define relationships between different parts of text documents with the help of symbols or tags inserted in the document. These languages are more readable than usual programming languages with strict syntax.
Simple HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Why we use it?
We use HTML because it provides a clear and consistent structure for web pages, allowing browsers to correctly display content and enabling other technologies like CSS and JavaScript to style and add interactivity. In short, HTML forms the foundation of every web page.
HTML Tags and Element
What is an HTML tag ?
An HTML tag is a keyword enclosed in angle brackets (< >) that tells the browser how to treat or display content on a web page.
You can think of HTML tags like labels on boxes.
The tag is the label that tells what’s inside the box, and the content is what the box contains. For example, a
<p>tag tells the browser, “This text is a paragraph,” just like a label on a box tells you what’s inside. This helps the browser know how to display and organize the content.
Common HTML tag examples include <div>, <p>,<h1> to <h6>,<span>, <a>,<strong> ,<img>etc.
There are more advanced HTML tags which are used to create structured, semantic, and interactive web pages.
HTML Element
An HTML element is a core component of an HTML document that defines the structure and content of a web page. It consists of everything from the opening tag to the closing tag, including the content in between.
Most HTML elements are composed of three parts:
Opening Tag: Marks the beginning of the element. It consists of the element's name enclosed in angle brackets, e.g.,
<p>for a paragraph.Content: The information inside the opening and closing tags, such as text or other nested elements.
Closing Tag: Marks the end of the element. It is the same as the opening tag but includes a forward slash before the element's name, e.g.,
</p>
An HTML element is the complete unit that makes up a webpage’s structure.
In short:
A tag is part of the syntax.
An element is the full unit that represents actual content on the webpage.
Self-closing Tags
Void elements, also known as self-closing tags, are HTML elements that cannot contain any child nodes, text, or content, and therefore do not require a separate closing tag. They represent self-contained, single-purpose elements used to perform specific functions on a webpage.
Key Characteristics
No End Tags
Self-Closing Syntax (
/)
Common self-closing tags include:
<img/>– Displays an image<br/>– Inserts a line break<hr/>– Adds a horizontal line<input/>– Creates an input field and many more….
Block-level and Inline elements
Block-level Elements
Block-level elements are HTML elements that start on a new line and take up the full available width of their parent container.They are typically used to define the main structure and layout of a webpage.
Common block-level elements include <div>, <p>,<h1> to <h6>,<section>, etc.
Inline Elements
Inline elements are HTML elements that do not start on a new line and take up only as much width as their content requires. They are typically used to style or modify small pieces of content within a block-level element.
Common block-level elements include <span>, <a>,<strong> ,<img>, etc.
Block-level elements act like big boxes that start on a new line and take up the full width, while inline elements are like words in a sentence, flowing within a line and only taking up as much space as needed.
Commonly Used HTML Tags and Their Uses
Tags form the basic building blocks used to structure and display content on web pages.
Common and widely used tags include:
<html>– Root element of an HTML document<head>– Contains metadata about the page<title>– Sets the title shown in the browser tab<body>– Contains all visible page content<h1>–<h6>– Headings (from most to least important)<p>– Paragraph of text<a>– Creates a hyperlink<img>– Displays an image<br>– Inserts a line break<hr>– Adds a horizontal rule<div>– Block-level container for layout<span>– Inline container for styling text<ul>/<ol>– Unordered and ordered lists
Developer Tools
Now that you’re familiar with the basics of HTML and its tags, the next step is to see them in action on real websites. Using browser Developer Tools, you can inspect any webpage to view its HTML structure and understand how HTML, CSS, and JavaScript work together in real time. To open Developer Tools, simply right-click on a webpage and select “Inspect”, or press F12 / Ctrl+Shift+I (Cmd+Option+I on Mac). This hands-on exploration helps bridge theory and practice and builds confidence as you continue learning web development.
Conclusion
HTML is the foundation of every webpage, providing the structure that defines content and layout. By using tags and elements, HTML tells the browser what each piece of content represents and how it should be organized. Combined with hands-on exploration through browser Developer Tools, learning HTML becomes more practical and intuitive. Understanding HTML is essential for anyone starting web development, as it forms the base upon which styling, interactivity, and modern web applications are built.
If you enjoyed this article, check out my other blogs on this profile.
🔗 Connect with me:
LinkedIn | GitHub | X (Twitter)
