How to use Semantic tagging in Oxygen Builder

By
Fabrizio Van Marciano

In this post, we’ll talk about adding HTML tags to components that help to describe the structure of a web page. We’ll be tagging elements inside of Oxygen Builder applying some to our components. Let’s get into it.

So before you start tagging container elements and components inside of Oxygen, first you need to have a basic understanding of what Semantic tagging is –

What is Semantic tagging?

Semantic tagging refers to the method of adding metadata or tags to content to provide information about the meaning or semantics of that content. This is commonly used in web development.

Semantic tagging is often associated with HTML. HTML provides tags that describe the structure of a web page, and semantic HTML involves using these tags to convey the meaning of different parts of the content.

For example:

Using <header><nav><article>, and <footer> tags instead of generic <div> tags can provide more meaningful information about the structure of a webpage, making it easier for both humans and algorithms to understand.

Overall, semantic tagging is a way to add meaning to content, whether in the form of natural language text or structured data, and it plays a crucial role in improving the interpretability and usability of information by machines and applications. It’s a load of nonsense, most of which isn’t worth remembering, but something to keep in the back of your mind.

Semantic tagging in web development

So let’s look at some quick examples of how Semantic tagging is constructed in a page document.

<header>

<header>
    <h1>Welcome to my website</h1>
    <p>This is what my website is about.</p>
</header>

<nav>

<nav>
    <ul>
        <li><a href="#">Welcome</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

<main>

<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content goes here.</p>
    </article>
</main>

<section>

<section>
    <h2>Section Title</h2>
    <p>Section content goes here.</p>
</section>

How to use Semantic tagging in Oxygen Builder

Let’s start with a blank page inside of Oxygen Builder. It doesn’t matter what page it is, we’ll start from a blank canvas.

As you know, in Oxygen, we can add container elements and various components to build up the layout of our page. For example, if we add a section, by default the tag <section> is automatically assigned to the section.

However, not all components are automatically tagged. While heading elements are tagged with usually <h1> or <h3>, text elements are defined as a generic <div> and we can change this to <p> for a paragraph.

Inside of the global template, we can also give the header section the <header> tag and footer section the <footer> tag.

Usually, we use an inner content element with Oxygen Builder, this element can use the tag <main>.

As well as the standard tags available from the drop-down option, we can add custom tags to components in Oxygen. Here is a list of Semantic HTML tags for your reference.

Summary

So that is Semantic tagging in Oxygen Builder in a nutshell. Although, there isn’t anything else to say really. The Oxygen team has made it simple to use and implement.

If you’re using Oxygen Builder for your client projects, and aiming to enhance both user experience and the programming comprehension of your web pages: It would be useful to familiarize yourself with Semantic tagging and understand its impact on your web design projects.

Go straight to the main video