codingstuff.io
ExploreTutorialsProblemsCS Subjects
Get Started
ExploreTutorialsProblemsCS Subjects
Get Started
codingstuff.io

Master the art of building software through interactive tutorials, real-world problems, and guided projects.

Pune, Maharashtra, India

codingstuffmail@gmail.com

Product

  • Explore
  • Tutorials
  • Problems
  • CS Subjects

Company

  • About
  • Contact
  • Privacy Policy
  • Terms & Conditions
  • Sitemap

© 2026 codingstuff.io. All rights reserved.

Built with ❤️ for developers everywhere

/
/
All Tutorials
🎨

HTML & CSS

2 / 59 topics
1Introduction to HTML2HTML Elements3HTML Attributes4HTML Document Structure5HTML Text Formatting6HTML Links7HTML Images8HTML Lists9HTML Tables10HTML Forms
Tutorials/HTML & CSS/HTML Elements
🎨HTML & CSS

HTML Elements

Updated 2026-05-15
10 min read

HTML Elements

Introduction

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It provides a way to structure content on the web, making it both human-readable and machine-readable. At the core of HTML are elements, which are the building blocks that make up a webpage.

An HTML element is defined by a start tag, some content, and an end tag. For example:

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

In this example, <p> is the start tag, This is a paragraph. is the content, and </p> is the end tag.

Concept

HTML elements are categorized into different types based on their purpose. Some common categories include:

  • Structure Elements: These define the overall structure of the page, such as &lt;html&gt;, &lt;head&gt;, &lt;body&gt;.
  • Text Content Elements: These are used to display text content, such as <p>, &lt;h1&gt; to &lt;h6&gt;, <a>.
  • List Elements: These are used to create lists, such as <ul>, <ol>, <li>.
  • Media Elements: These are used to embed media like images and videos, such as <img>, &lt;video&gt;.
  • Form Elements: These are used to create interactive forms, such as <input>, &lt;textarea&gt;, &lt;button&gt;.

Each HTML element can have attributes that provide additional information about the element. Attributes are added within the start tag of an element and consist of a name-value pair separated by an equals sign (=). For example:

HTML
1<a href="https://www.example.com">Visit Example</a>

In this example, href is an attribute that specifies the URL the link points to.

Examples

Let's look at some practical examples of HTML elements and their attributes.

1. Headings

Headings are used to define titles within a webpage. There are six levels of headings, from &lt;h1&gt; (the highest level) to &lt;h6&gt; (the lowest level).

HTML
1<h1>This is an H1 Heading</h1>
2<h2>This is an H2 Heading</h2>
3<h3>This is an H3 Heading</h3>
4<h4>This is an H4 Heading</h4>
5<h5>This is an H5 Heading</h5>
6<h6>This is an H6 Heading</h6>

2. Paragraphs

Paragraphs are defined using the <p> element.

HTML
1<p>This is a paragraph of text. It can contain multiple sentences and will be displayed as a block-level element.</p>

3. Links

Links are created using the <a> (anchor) element. The href attribute specifies the URL the link points to.

HTML
1<a href="https://www.example.com">Visit Example</a>

4. Images

Images are embedded using the <img> element. The src attribute specifies the path to the image file, and the alt attribute provides alternative text for the image.

HTML
1<img src="path/to/image.jpg" alt="Description of the image">

5. Lists

Lists can be either ordered or unordered. Ordered lists use the <ol> element, and unordered lists use the <ul> element. Each list item is defined using the <li> element.

HTML
1<ul>
2<li>Item 1</li>
3<li>Item 2</li>
4<li>Item 3</li>
5</ul>
6
7<ol>
8<li>First Item</li>
9<li>Second Item</li>
10<li>Third Item</li>
11</ol>

What's Next?

Now that you have a good understanding of HTML elements and their attributes, the next step is to learn about CSS selectors. CSS selectors allow you to target specific HTML elements and apply styles to them, making your web pages visually appealing.

Stay tuned for more tutorials on CSS Selectors!

Info

Remember, practice makes perfect! Try creating your own HTML documents with different elements and attributes to reinforce what you've learned.


PreviousIntroduction to HTMLNext HTML Attributes

Recommended Gear

Introduction to HTMLHTML Attributes