HTML Elements

🚀 What Is an HTML Element?

An element is a part of a webpage. An HTML element may contain content, a data item or a chunk of text or an image, or perhaps nothing. A typical element includes an opening tag with some attributes, enclosed text content, and a closing tag.

Note

Elements and tags are not the same things. Tags begin or end an element in source code, whereas elements are part of the DOM, the document model for displaying the page in the browser.

HTML elements are the fundamental building blocks of a web page. They define the structure and content of the page, such as text, images, links, tables, forms, and more.

Tip

HTML elements are categorized into two main categorizes:

1. Two-sided Elements: Enclose content and must have both an opening tag and a closing tag.
2. One-sided Elements: Do not require a closing tag and are also known as void, or self-closing elements.

1. Two-Sided HTML Elements

Also Known as container elements ↗ or paired tags, they require both an opening tag and a closing tag. These tags work in pairs: the opening tag defines the start of the element, and the closing tag marks the end of the element.

Syntax:

<elementName>Content goes here</elementName>

html

Where the opening tag and the closing tag are the same, but the closing tag includes a forward slash (/) before the tag name. The content between these tags represents the content of the element.

Example:

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

html

Common Two-Sided Elements:

• Text Formatting Elements: <strong>, <em>, <b>, <i>, <u>, etc.
• Structural Elements: <div>, <section>, <header>, <footer>, <article>, <nav>, etc.
• List Elements: <ul>, <ol>, <li>, etc.
• Form Elements: <form>, <input>, <textarea>, <label>, <select>, etc.
• Media Elements: <audio>, <video>, <figure>, etc.

Characteristics:

📝

• Requires Closing Tag: You must use both the opening and closing tags to ensure the element functions correctly in HTML.
• Contains Content: These elements can contain other HTML elements or text content between the tags.
• Nested: A two-sided element can have one or more HTML elements nested in its content section. The nesting order must be properly maintained for the HTML to be valid.

Example with Nesting:

<div>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph inside a div element.</p>
</div>

html

2. One-Sided HTML Elements

Also Known as void elements ↗, they do not require a closing tag. These elements stand alone with a single, self-contained tag. Historically, they were written with a trailing slash (/) before the closing angle bracket (>), but in HTML5, this slash is optional.

Syntax:

<elementName />

html

or, in HTML5:

<elementName>

html

Example:

<img src="image.jpg" alt="Description of image">

html

• <img>: The image element is self-closing and doesn’t need a closing tag.
• It typically requires attributes (like src for the source of the image) to function.

Common Self-Closing Elements:

• Media Elements:
  • <img>: Embeds an image.
  • <audio>: Embeds an audio file.
  • <video>: Embeds a video file.
• Input Elements:
  • <input>: Defines an input field.
  • <br>: Inserts a line break.
  • <hr>: Creates a horizontal rule.
  • <meta>: Defines metadata for the document (such as character encoding or viewport settings).
• Link Elements:
  • <link>: Defines the relationship between the current document and an external resource (typically used for linking CSS files).
  • <base>: Specifies a base URL for relative URLs in the document.
  • <area>: Defines an area inside an image map.

Characteristics

📝

• No Closing Tag: These elements do not require a closing tag. They are “self-contained” and represent a single point of functionality.
• Attributes: Self-closing elements often rely on attributes for their functionality. For example, an <img> tag needs the src attribute to specify the image source.
• HTML5 Behavior: In HTML5, the slash (/) before the closing angle bracket is optional, though older HTML versions often used it.

Example of Self-Closing Tags:

<img src="example.jpg" alt="An example image">
<br>
<hr>

html

In HTML5, the following is also acceptable:

<img src="example.jpg" alt="An example image">
<br>
<hr>

html

---

Differences Between One-Sided and Two-Sided Tags

Attribute	Two-Sided Tags	One-Sided Tags
Structure	Requires both opening and closing tags	Only requires an opening tag
Purpose	Wraps content	Does not wrap content
Examples	<p>, <h1>, <div>	<img>, <br>, <hr>
Usage	Used for content with structure/formatting	Used for elements with no content

---

Best Practices

1. Ensure proper nesting: When using two-sided elements, make sure they are properly nested. For example, you cannot place a closing </p> tag before another opening <p> tag inside the same parent.
2. Use Self-Closing Tags for Non-Content Elements: Elements like <img>, <br>, and <hr> are intended for functional purposes and do not require surrounding content, so use them as self-closing elements.
3. Stay Consistent with HTML Versions: HTML5 is more lenient with self-closing tags (no trailing slash required), but older HTML specifications required the slash. For modern HTML development, it’s safe to omit the slash, though keeping it in older projects might help ensure compatibility with legacy browsers.
4. Accessibility: For elements like <img>, always include an alt attribute for accessibility, providing a text alternative for screen readers.
5. Semantic HTML: Use two-sided elements for semantic content (e.g., <header>, <footer>, <article>) to help improve SEO and accessibility.
   • Use self-closing elements like <br>, <hr>, or <img> only when they make sense in context.