HTML tags are the building blocks of every web page. Each tag names an element—a piece of content with a specific role, from the page title in <title> to a paragraph in <p> or a link in <a>.
This hub explains how tags work, groups them by purpose, lists the most important HTML5 elements with links to detailed tutorials, and walks through six hands-on examples you can edit live.
What You’ll Learn
01
Tag basics
Opening & closing.
02
Void elements
Self-closing tags.
03
Categories
Structure, text, forms.
04
Reference
HTML5 tag index.
05
Semantic HTML
Meaningful markup.
06
Examples
Real page patterns.
Fundamentals
What Are HTML Tags?
An HTML tag is markup written inside angle brackets. Tags tell the browser how to interpret content: headings, links, images, tables, forms, and more. Together with attributes, tags form the structure and meaning of a document.
A typical element looks like this:
html
<p class="intro">Hello, world!</p>
Here <p> is the opening tag, class="intro" is an attribute, Hello, world! is the content, and </p> is the closing tag.
💡
Beginner Tip
Tags describe what content is, not how it looks. Use CSS for colors, fonts, and layout—use HTML tags for structure and meaning.
Syntax
How HTML Tags Work
Opening and closing tags
Most elements use a pair of tags. The opening tag starts the element; the closing tag ends it with a forward slash:
html
<div>
<p>This paragraph is inside a division.</p>
</div>
Closing tags must match the opening tag name. <p> closes with </p>, not </div>.
Void (self-closing) elements
Some elements never wrap content and have no closing tag. These are called void elements:
Do not write <br></br> or <img>...</img>. Void elements stand alone. Attributes like src on img or type on input configure them instead.
Best Practice
Semantic HTML Tags
Semantic tags describe the meaning of content, not just its box on screen. Search engines, screen readers, and other tools rely on semantics to understand your page.
Use div and span when no semantic tag fits—they are generic containers. But reach for header, nav, main, article, and footer first when building page layouts.
Caution
Common Pitfalls
Using tags for styling — b and i change appearance but carry weak semantics. Prefer strong/em for meaning, CSS for look.
Skipping heading levels — jumping from h1 to h4 confuses outline and screen readers. Use sequential levels.
Div soup — wrapping everything in div loses semantics. Use section, article, nav, and main.
Invalid nesting — putting block elements inside p or span breaks the DOM. Browsers may auto-close tags unexpectedly.
Missing alt on images — every img needs an alt attribute (even if empty for decorative images).
Multiple main elements — only one main per page. Use section for additional content areas.
Tables for layout — use CSS Grid or Flexbox for layout; reserve table for tabular data.
Cheat Sheet
⚡ Quick Reference
Pattern
Example
Opening + closing
<p>Text</p>
Void element
<img src="x.jpg" alt="">
Attribute
<a href="/about">About</a>
Nested
<ul><li>Item</li></ul>
Comment
<!-- not rendered -->
DOCTYPE
<!DOCTYPE html>
Shell
html head body
Page structure
Text
p h1–h6 em
Readable content
Media
a img video
Links & embeds
Layout
header nav main
Semantic regions
Hands-On
Examples Gallery
Six examples showing common HTML tag patterns. Each includes View Output and Try It Yourself links to the live editor.
Example 1 — Minimal HTML5 Skeleton
Every HTML page starts with a doctype, root html element, head for metadata, and body for visible content.
<!DOCTYPE html> triggers standards mode. lang="en" sets the document language. meta charset and viewport are essential for encoding and mobile layout.
Example 2 — Headings and Paragraph
Use h1–h6 for headings (one main h1 per page) and p for body text.
html
<h1>HTML Tags Guide</h1>
<p>Learn how HTML elements structure web content.</p>
<h2>Why Tags Matter</h2>
<p>Tags give meaning to text, links, images, and forms.</p>
Tags give meaning to text, links, images, and forms.
How It Works
Heading levels create a document outline. h1 is the top-level title; h2 introduces a subsection. Never skip levels for styling—use CSS instead.
Example 3 — Link and Image
The a tag creates hyperlinks; img embeds images with an alt description.
html
<p>
Visit <a href="https://example.com">Example.com</a>
for more tutorials.
</p>
<img src="https://via.placeholder.com/120x60?text=Logo"
alt="Example site logo" width="120" height="60">
Semantic landmarks help screen readers jump between regions. main should appear once per page and contain the primary content.
Pro Tips
💡 Best Practices
✅ Do
Choose tags by meaning—nav for navigation, article for posts
Include lang on <html> and alt on every img
Use one h1 per page for the main title
Close tags in the correct nesting order
Validate markup with the W3C validator or browser DevTools
Link labels to inputs with for and id
❌ Don’t
Use div for everything when a semantic tag exists
Pick heading levels based on font size alone
Nest block elements inside p or span
Omit alt on informative images
Use table for page layout
Rely on deprecated tags like center or font
Compatibility
Universal Browser Support
Core HTML tags—html, head, body, p, a, img, ul, table, and form—have been supported since the earliest browsers. HTML5 semantic tags (header, nav, main, article, footer) and elements like picture, dialog, and details work in all modern browsers.
✓ Baseline · Since HTML
HTML tags
Core HTML tags work in every browser. HTML5 semantic elements and modern form/media tags are supported in all current Chrome, Firefox, Safari, and Edge releases.
100%Core tag support
Google ChromeAll versions · Desktop & Mobile
Full support
Mozilla FirefoxAll versions · Desktop & Mobile
Full support
Apple SafariAll versions · macOS & iOS
Full support
Microsoft EdgeAll versions · Chromium & Legacy
Full support
Internet ExplorerIE 6+ · Legacy environments
Full support
OperaAll modern versions
Full support
HTML elementsUniversal
Bottom line: HTML is the most stable layer of the web platform. Focus on valid, semantic markup—it will work everywhere.
Wrap Up
Conclusion
HTML tags are the vocabulary of the web. Opening and closing tags wrap content; void elements stand alone; nesting must stay valid. Group tags by purpose—document shell, text, links, forms, tables, and semantic layout—and pick the most specific element for each job.
Use this page as your hub, then explore individual guides starting with the anchor tag, or jump to the head section, lists, and forms for deeper topic tutorials.
An HTML tag is a keyword wrapped in angle brackets that marks the start or end of an element. For example, <p> opens a paragraph and </p> closes it. Tags tell the browser what kind of content each part of the page is.
A tag is the markup syntax (<p>, </p>). An element is the complete unit: opening tag, optional content, and closing tag—or a void tag like <br>. People often use the terms interchangeably in tutorials.
Void elements have no closing tag and no inner content—examples include br, img, input, meta, link, and hr. In HTML5 you write them as <br> or <br />; both are valid.
Choose tags by meaning, not appearance. Use semantic tags like header, nav, main, and article for page structure; p for paragraphs; a for links; ul/ol/li for lists. Avoid using div for everything when a more specific tag exists.
No. Normal elements like div, p, and span require a closing tag. Void elements like img, br, and input do not. Some elements like li, td, and option may omit closing tags in HTML but including them is clearer and recommended.
Core HTML tags have been supported for decades. Newer semantic tags (article, section, main) and elements like dialog and picture work in all modern browsers. Always test media elements (video, audio) and form input types in your target browsers.
Did you know?
The first version of HTML had only about 18 elements. Today’s living standard defines over 100, but most pages use a focused subset—mastering roughly 30 core tags covers the vast majority of real-world markup tasks.
