Fabrizio Van Marciano

available for hire

How to use Semantic tagging in Oxygen Builder 4.8


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 in order 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 it’s 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.

Semantic tagging in web development

So let’s take a 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 just 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.

How to use Semantic tagging in Oxygen Builder

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 also 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. There really isn’t anything else to say. The Oxygen team has made it simple to use and implement.

If you’re working with Oxygen Builder and you want users and programming to get a better understanding of the structure of your web pages, it’s recommended you learn about Semantic tagging and implement it into your website-building projects.

Get access to my courses and expert tutorials!

Everything you need to design your website with WordPress, Oxygen, Bricks Builder, Bricks Builder, plus over 100 video tutorials, code snippets, templates, Discord Community, and more.

Join Van Marciano Pro

FREE WEB DESIGN LESSON

SIGNUP FOR MY FREE 40-MINUTE OXYGEN BUILDER COURSE TASTER