HTML Elements and Attributes Explained with Examples

HTML Elements

An HTML element is the building block of any web page. It consists of a start tag, content, and an end tag.

Elements tell the browser what kind of content is being described. For example, headings, paragraphs, links, images, forms, and lists are all represented by different elements. Each element has a specific purpose in the structure of a web page.

<!-- Syntax: <tagname> content </tagname> -->
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<a href="https://example.com">This is a link</a>

<!-- Void/empty elements - no closing tag needed -->
<br>
<hr>
<img src="photo.jpg" alt="A photo">
<input type="text">

Nested Elements

HTML elements can be nested inside each other. The inner element must be closed before the outer one.

Correct nesting is important because browsers use the HTML structure to understand the document. Badly nested elements can create unexpected layout issues or make the markup harder to maintain.

<!-- Correct nesting -->
<p>This is <strong>bold</strong> and <em>italic</em> text.</p>

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<!-- Wrong - overlapping tags (don't do this) -->
<!-- <b><i>text</b></i> -->

HTML Attributes

Attributes provide additional information about an element. They are always placed in the opening tag as name="value" pairs.

Attributes do not replace the element itself. Instead, they refine or configure how the element behaves. For example, an image element uses attributes like src and alt, while a link uses attributes like href and target.

<!-- href attribute on anchor -->
<a href="https://www.tutorialslogic.com" target="_blank">Visit Us</a>

<!-- src and alt attributes on image -->
<img src="logo.png" alt="Company Logo" width="200">

<!-- class and id attributes -->
<p class="intro" id="first-para">Welcome!</p>

<!-- style attribute for inline CSS -->
<h2 style="color: blue; font-size: 24px;">Blue Heading</h2>

<!-- Boolean attribute (no value needed) -->
<input type="checkbox" checked>
<button disabled>Can't click</button>

Global Attributes

These attributes can be used on any HTML element:

Types of Elements

Not all elements behave in the same way. Some elements contain content and need both opening and closing tags, while others are empty elements that stand alone.

• Normal elements have opening and closing tags, like <p>...</p>.
• Void elements do not have closing tags, such as <br>, <img>, and <input>.
• Some elements are semantic, meaning they describe the purpose of the content, while others are generic containers.

Boolean Attributes

Some HTML attributes are boolean, which means they are considered true when they are present. They do not always need an explicit value. Common examples include checked, disabled, required, and hidden.

<input type="checkbox" checked>
<input type="text" required>
<button disabled>Submit</button>
<div hidden>This content is hidden</div>

id vs class

Two of the most important attributes in HTML are id and class. Both are used heavily by CSS and JavaScript, but they are not the same.

• Use id for a unique element that appears only once on the page.
• Use class for reusable styling or grouping multiple elements together.
• One element can have multiple classes, but an id should be unique per page.

<h1 id="page-title">Welcome</h1>

<p class="intro highlight">This paragraph has two classes.</p>
<p class="intro">This paragraph shares the intro class.</p>

Best Practices

• Use the correct element for the type of content you are marking up.
• Keep attributes inside the opening tag and write them clearly as name="value".
• Always provide important accessibility attributes, such as alt on images.
• Use meaningful class names so the markup stays readable.
• Avoid duplicate ids on the same page.