Creating Tags Labels with Close Button using HTML and CSS

Tags and labels are commonly used in web development to categorize and organize content. Adding a close button to these tags provides users with the ability to remove unwanted tags easily. In this blog post, we will explore how to create tags labels with a close button using HTML and CSS. We'll cover the fundamental concepts, usage methods, common practices, and best practices to help you implement this feature effectively in your projects.

Table of Contents#

  1. Fundamental Concepts
  2. Usage Methods
  3. Common Practices
  4. Best Practices
  5. Code Examples
  6. Conclusion
  7. References

Fundamental Concepts#

HTML#

HTML is used to structure the tags and the close button. Typically, we use a <span> element to represent each tag and an <i> or <button> element for the close button. The <span> element is a generic inline container that can hold text and other inline elements.

CSS#

CSS is used to style the tags and the close button. We can set the background color, border, padding, and other visual properties of the tags. For the close button, we can style it to look like an "X" and add hover effects to provide visual feedback to the user.

Usage Methods#

Step 1: Create the HTML Structure#

First, create the basic HTML structure for the tags and the close button. Here is a simple example:

<div class="tag-container">
    <span class="tag">
        Tag 1
        <button class="close-button">&times;</button>
    </span>
    <span class="tag">
        Tag 2
        <button class="close-button">&times;</button>
    </span>
</div>

Step 2: Style the Tags and Close Button with CSS#

Next, use CSS to style the tags and the close button. Here is an example of CSS code:

.tag-container {
    display: flex;
    flex-wrap: wrap;
}
 
.tag {
    background-color: #e0e0e0;
    border-radius: 4px;
    padding: 6px 10px;
    margin: 4px;
    display: flex;
    align-items: center;
}
 
.close-button {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 8px;
    font-size: 16px;
    color: #888;
}
 
.close-button:hover {
    color: #333;
}

Common Practices#

Accessibility#

  • Use semantic HTML elements like <button> for the close button to ensure it is accessible to screen readers.
  • Add appropriate ARIA (Accessible Rich Internet Applications) attributes to the close button, such as aria-label="Close tag" to provide a clear description of its function.

Responsive Design#

  • Use relative units like percentages or ems for sizing and spacing to ensure the tags and close button are responsive on different screen sizes.
  • Use media queries to adjust the layout and styling of the tags for smaller screens.

Best Practices#

Separation of Concerns#

  • Keep the HTML, CSS, and JavaScript (if used for functionality) separate. This makes the code easier to maintain and understand.
  • Use classes for styling instead of inline styles to promote reusability.

Performance#

  • Minimize the use of unnecessary CSS selectors and properties to improve the rendering performance of the page.
  • Optimize the images (if any) used in the tags or close button to reduce the page load time.

Code Examples#

HTML#

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Tags with Close Button</title>
</head>
 
<body>
    <div class="tag-container">
        <span class="tag">
            Programming
            <button class="close-button" aria-label="Close tag">&times;</button>
        </span>
        <span class="tag">
            Web Development
            <button class="close-button" aria-label="Close tag">&times;</button>
        </span>
        <span class="tag">
            CSS
            <button class="close-button" aria-label="Close tag">&times;</button>
        </span>
    </div>
</body>
 
</html>

CSS (styles.css)#

.tag-container {
    display: flex;
    flex-wrap: wrap;
}
 
.tag {
    background-color: #e0e0e0;
    border-radius: 4px;
    padding: 6px 10px;
    margin: 4px;
    display: flex;
    align-items: center;
}
 
.close-button {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 8px;
    font-size: 16px;
    color: #888;
}
 
.close-button:hover {
    color: #333;
}

Conclusion#

Creating tags labels with a close button using HTML and CSS is a straightforward process. By understanding the fundamental concepts, following the usage methods, common practices, and best practices, you can implement this feature effectively in your web projects. Remember to consider accessibility and performance when designing the tags and close button. With the provided code examples, you can quickly get started and customize the styles to fit your project's needs.

References#

2025-10