Components menu
Tags/Labels
Effective tags/labels have an array of benefits for your users and the website overall. Getting website tags right will assure that your users have a smooth and intuitive navigation experience, while the search engines will get the right information to display and rank your content.
What is website labeling?
Website labeling is the process of using labels to describe a set of data or content on your website, in an effort to make navigation more intuitive, minimise the user’s cognitive load, and maximise usability. Website labeling helps both the system and the user to understand the location and type of content that you display on a website.
The process of website labeling involves using labels to categorise and describe menu items and content, or even accessibility tags in order to make websites widely accessible.
Types of website labels
Navigation labels (Titles)
Navigation labels are the tags that we use to describe the information displayed under each of the menu items on a navigation menu and other navigation elements. This includes the main menu, website’s footer, and any secondary menus, if applicable.
Getting your navigation labels right is crucial for boosting the overall desirability and usability of your website. Think about landing on a website where none of the menu labels make sense, and you have no idea where you will find the information that you are looking for. The chances are that you would most likely leave the website rather than trying to figure it out.
Content labels (Tags)
Content labels are another really important category of website labeling that need extra attention. These are descriptive tags referring to the content that the user will consume.
There are a lot of different types of labels that fall under this category, including headings and subheadings. These are particularly important since they help the user scan the copy easier and consume the content with ease. Content labeling is equally important for the overall SEO health of the page, or website in general. This means that search engines can understand the type of content that you are displaying and can index it.
Title
13 September 2024
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
HTML
<div class="full-width--card card">
<div class="card-body">
<h3 class="card-title">
<a href=""> Title </a>
</h3>
<div class="text-muted">
<p> Date </p>
</div>
<div class="card-text">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
</div>
<div class="row">
<div class="col-xxl-6 col-lg-6 col-md-6 col-sm-12 card-button">
<a href="" class="card-link">
<span>
Read the full statement
<i class="card-link--icon fa-solid fa-circle-arrow-right" aria-hidden="true"></i>
</span>
</a>
</div>
<div class="col-xxl-6 col-lg-6 col-md-6 col-sm-12">
<a href="" class="badge text-bg-primary" title="Filter news by type"> Type Name </a>
<a href="" class="badge text-bg-primary" title="Filter news by category"> Category Name </a>
</div>
</div>
</div>
</div>
CSS
/* Tag/Label
------------------------------------ */
.badge {
display: inline-block;
padding: 5px 10px;
font-size: 1rem;
font-weight: 400;
line-height: 1rem;
color: var(--scottish-teal) !important;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
}
a.badge.text-bg-primary, .badge.text-bg-primary {
text-decoration: none;
background-color: var(--grey-four) !important;
border: 1px solid var(--scottish-teal);
}
a.badge.text-bg-primary:hover {
background-color: var(--scottish-dark-teal) !important;
color: #ffffff !important;
text-decoration: none;
}
@media (min-width: 320px) {
a.badge.text-bg-primary, .badge.text-bg-primary {
margin: 10px 5px 0px 0px;
float: left;
}
}
@media (min-width: 768px) {
a.badge.text-bg-primary, .badge.text-bg-primary {
margin: 0px 5px;
float: right;
}
}