HTML Elements and Tags: The Complete Guide

Giga sphere

HTML Elements and Tags: The Complete Guide

HTML is built around elements—individual components that represent different types of content and structure on a webpage. In this article, we will explore all key HTML elements (also known as tags), including their syntax, usage, and best practices.

What Is an HTML Element?

An HTML element usually consists of an opening tag, content, and a closing tag. Example:

<p>This is a paragraph.</p>

Basic HTML Tags

  • <html>: Root of an HTML document
  • <head>: Container for metadata
  • <title>: Sets the title of the page
  • <body>: Contains the page content
  • <h1> to <h6>: Heading tags
  • <p>: Paragraph
  • <a>: Hyperlink
  • <img>: Image
  • <br>: Line break
  • <hr>: Horizontal rule

Text Formatting Tags

  • <strong>: Important text (bold)
  • <em>: Emphasized text (italic)
  • <u>: Underlined text
  • <mark>: Highlighted text
  • <small>: Smaller text

Lists

<ul>: Unordered list
<ol>: Ordered list
<li>: List item

Table Tags

<table>: Creates a table
<tr>: Table row
<td>: Table data
<th>: Table header
<thead>, <tbody>, <tfoot>: Table sections

Form Tags

<form>
<input>
<label>
<select>
<textarea>
<button>

Media Tags

<img>: Image
<audio>: Audio
<video>: Video
<source>: Source for media

Semantic Tags

<header>, <main>, <footer>, <section>, <article>, <aside>, <nav>

Empty Elements

Empty elements don’t have a closing tag:

<br>
<img>
<hr>
<input>

Block vs Inline Elements

Block-level elements occupy full width (e.g., <div>, <p>). Inline elements do not (e.g., <span>, <a>).

HTML5 Tags

HTML5 introduced new semantic tags for better structure:

  • <article>: Self-contained content
  • <section>: Thematic grouping
  • <nav>: Navigation links
  • <aside>: Side content

Global Attributes

Attributes that apply to all tags:

id, class, style, title, lang, dir, data-*

HTML Tag Nesting Rules

Tags must be properly nested and closed in correct order:

<b><i>Text</i></b> ✅
<b><i>Text</b></i> ❌

Conclusion

HTML elements are the foundation of the web. Understanding their use and structure enables developers to build better, more accessible, and semantically meaningful web pages. Practice often and use validators to keep your code clean and effective.

Further Resources

0 Comments