Designing at scale – how semantic naming future-proofs your website

What is semantic naming and how does it work?

Welcome back to part two of our Designing at Scale series. In case you missed it, here’s part one on Atomic Design: a methodology for website building and design that’s made for scalability.

When we talk about ‘semantics’, we’re referring to the logic and meaning in words, phrases or text. Those meanings can change, dependent on context and application – and for most of us, it’s something we rarely think about during our everyday lives.

In the context of programming, semantics, or semantic naming, refers to applying description logic to the digital coding process. It uses a rational, meaning-based naming system for developing a site’s metadata.

To help understand why that is, let’s look at a quick example.

Semantics are often used by developers and researchers in the world of Artificial Intelligence (AI), when it comes to natural language processing – for example, when you’re speaking to Siri, Alexa, or Google Home, and it’s ‘listening’ to you.

For humans, we process the meaning of language unconsciously. But it’s an incredibly complex process. So, researchers will limit your AI assistant’s vocabulary, and its ‘understanding’ of language rules and constraints.

Overall, it makes communication easier between man and machine. Alexa may not understand sarcasm, but she can still order your refill of washing powder – and there’s less room for man or machine to misinterpret what’s being said.

The advantage of using semantic language when it comes to programming is that users can immediately understand what the metadata they’re reading is referring too.

On first glance, you can answer internal questions like, “What effect does running this line of script have?” or “What purpose does this HTML function serve?”

With semantic naming, it’s quicker for web editors to find the right place to edit, and the process improves workforce efficiency: less time and effort needed for interpretation, more clarity over website content.

Check out our explainer video on how it works:

Now you might know that <h1> is a semantic element. Its meaning is header. <h2> would be a sub-header. <article> refers to an article of text.

Can you figure out what these examples might mean?

<details>
<figcaption>
<footer>
<summary>

To the average reader who doesn’t work in a field where they’d be required to understand HTML, CSS or JavaScript, semantic naming means there’s still potential for meaning to be interpreted.

But more importantly, web content editors – or even ‘future you’ revisiting the document in a few months’ time – will find scanning and updating the relevant metadata even easier.

Accessibility, readability and consistency are all enhanced through the use of semantic naming. It’s all about communication.

When you’re looking to change your website’s design in the future, this is just one more way to save time, increase efficiency, and run a productive website that works for everyone: inside and outside your business.

Get in touch with us today to find out more.