HTML tags are hidden keywords enclosed in angle brackets (< > ) and that instruct web browsers how to format and display content.
They act as the structural blueprint for web pages, transforming raw text into structured paragraphs, headers, links, and multimedia elements.
Anatomy of an HTML Tag
Most HTML tags work in pairs:
an opening tag to signal the start of an element, and a closing tag (which includes a forward slash / ) to signal the end. Together with the content inside, they form an HTML element.
is the opening tag.
This is a paragraph element. is the content.
Core Categories of HTML Tags
HTML features over 100 specialized tags. They generally fall into the following core functional groups.
**
- Root & Structure Tags**
These tags establish the primary document hierarchy and skeleton.
: The root container that wraps all page content.
: Contains hidden document metadata, links to external stylesheets, and character settings.
: Sets the clickable text displayed in the browser tab.<br>
<body> : Houses all visible elements presented directly to the user.</p>
<p><strong>2. Text Formatting Tags</strong></p>
<p>These tags give layout structure and emphasis to<br>
standard text elements<br>
<h1> to <h6>: Definitive headings ranging from highest importance (<h1>) down to<br>
lowest (<h6>).<br>
<p>: Organizes blocks of text into individual paragraphs.<br>
<strong> / <b> : Applies bold formatting to visually emphasize words.<br>
<em> / <i>: Italicizes text for alternative tone or emphasis</p>
<p><strong>3. Content Layout & Grouping Tags</strong></p>
<p>These tags arrange blocks of information to build complete layouts</p>
<div>: A generic block-level container used to group elements together for styling.
<span>: An inline container used to style small sections of text within a block.
<ul> and <ol> : Starts an unordered (bulleted) or ordered (numbered) list layout.
<li>: Marks an individual list item inside a parent list layout
**4. Inline Media & Interactive Tags**
These elements require extra technical data (called attributes) to connect external files or web location.
<a href="url"> : Creates a hyperlink that connects to another destination.
<img src="image.jpg">: Embeds an external graphic file directly onto the screen layout.
**Paired vs. Self-Closing Tags**
While most tags wrap around text, certain elements do not enclose content. These are known as self-closing (or void) tags and do not use a separate closing tag.
Paired Tags: <p>...</p>, <h1>...</h1>, <div>...</div>
<p>Self-Closing Tags: <img> (inserts an image), <br> (forces a line break), and <hr> (inserts a<br>
horizontal rule line)</p>
Top comments (0)