HTML Tags, Elements and Attributes Explained with Examples

If you have just read What is HTML? A Complete Beginner Guide with Examples, you already know that HTML uses tags to describe content. But there is a bit more to how HTML is structured than just opening and closing angle brackets. Understanding the difference between a tag, an element, and an attribute will make everything else in this series click much faster — and reading any unfamiliar HTML code will stop feeling intimidating.

What Is an HTML Tag?

A tag is the label inside angle brackets. <p> is a tag. <h1> is a tag. <img> is a tag. They are the raw instructions telling the browser what type of content is coming. Most tags come in pairs — an opening tag starts things off, and a closing tag (with a forward slash before the name) ends them.

<h1>This is a heading</h1>n<p>This is a paragraph</p>

But some tags do not have a closing tag at all. These are called void elements or self-closing tags. The <img> tag is a good example — it places an image, it doesn’t wrap around text content, so there is nothing to close.

<img src="photo.jpg" alt="A photo">

What Is an HTML Element?

An element is the complete package — the opening tag, the content inside, and the closing tag all together. So while <p> is just a tag, this entire thing below is an element:

<p>HTML is the foundation of every webpage.</p>

Elements can be nested inside each other. You can put a <strong> element inside a <p> element to make part of the text bold:

<p>HTML is <strong>not</strong> a programming language.</p>

The outer element is the paragraph, and inside it lives the strong element that bolds its content. Nesting is something you will do constantly — almost every real HTML page is deeply nested elements inside other elements.

What Are HTML Attributes?

Attributes give extra information to an element. They always go inside the opening tag, written as name=”value” pairs. They configure how the element behaves or what it points to.

<a href="https://www.yuvajobs.com" target="_blank">Visit YuvaJobs</a>

The href attribute tells the browser where the link goes. The target=”_blank” attribute tells it to open in a new tab. Without those attributes, the <a> tag is just a shell — it doesn’t know where to navigate. Attributes are what make elements genuinely useful.

Common attributes you will use constantly: src (source — used with images), href (hyperlink reference — used with links), alt (alternative text — used with images), class and id (used to target elements with CSS and JavaScript), and type (used with form input fields).

Block vs Inline Elements

HTML elements fall into two display categories — block and inline. This is something that confuses beginners when they start adding CSS, so understanding it early saves a lot of frustration.

Block elements take up the full width of their container and always start on a new line. <p>, <h1> through <h6>, <div>, <ul>, and <table> are all block elements. Inline elements sit within the flow of text and only take up as much space as their content needs. <a>, <strong>, <em>, <span>, and <img> are inline elements.

<p>This paragraph has <strong>bold</strong> and <em>italic</em> text inside it.</p>

The <strong> and <em> tags sit inline within the paragraph — they do not break onto new lines. The <p> itself is the block element that starts on its own line.

Common Mistakes With Tags and Attributes

Forgetting the closing tag is the most frequent beginner mistake. Browsers are forgiving and may still render the page, but your code is technically wrong and can cause unexpected layout issues. Always close what you open.

Incorrect nesting order is another one. If you open <p> then <strong>, you must close </strong> before </p>. Crossing them like <p><strong>text</p></strong> is invalid HTML. Think of it like parentheses in maths — last opened, first closed.

Ready to move forward? Next we cover HTML Headings, Paragraphs and Text Formatting with Examples — where this knowledge about tags and elements turns into real formatted content that actually looks like something on screen.