Semantics
The structure and dependency of the content on a website gives a product the finishing touch in accessibility.
Match between system and the real world
Aesthetic and minimalist design
Table of contents
- What is meant by semantics?
- Semantic in Code (HTML5)– Cheatsheet
- Why semantics in design helps developers
What is meant by semantics?
Semantics is called the theory of the meaning of signs. As designers, we can give meaning to text and other elements through their appearance or positioning. In general, the appearance should support the content and not force a meaning. The following examples illustrate this.
Semantic in text
Everyone of us comes into contact with semantics in text. In typography, text has always been structured by semantic design and optimized for the reader. As an example we can look at a text without any markup. We see in this case a simple block, without any differentiation in itself.
Quis eleifend quam adipiscing vitae. Cras sed felis eget velit. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Montes nascetur ridiculus mus mauris vitae ultricies. Ac turpis egestas sed tempus urna et. Pellentesque sit amet porttitor eget dolor morbi non. Ipsum faucibus vitae aliquet nec.
Just by adding a break we can give meaning to the content. Now we see the title and basic font within the text block.
Quis eleifend quam adipiscing vitae.
Cras sed felis eget velit. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Montes nascetur ridiculus mus mauris vitae ultricies. Ac turpis egestas sed tempus urna et. Pellentesque sit amet porttitor eget dolor morbi non. Ipsum faucibus vitae aliquet nec.
By adding different sizes and markings in the weight of the font, we can enhance this effect. Now the text is semantically structured. The appearance of the title also gives it the meaning of a title. The same applies to the basic text, which is recognized as basic text by its appearance.
Quis eleifend quam adipiscing vitae.
Cras sed felis eget velit. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Montes nascetur ridiculus mus mauris vitae ultricies. Ac turpis egestas sed tempus urna et. Pellentesque sit amet porttitor eget dolor morbi non. Ipsum faucibus vitae aliquet nec.
Semantic in Code
In the code, the semantics are not as clearly visible to the user as we know it from print and typography. In code, semantics includes all elements on a website. Although text on the web is also semantically prepared, there are many more elements that need to be marked up, text alone is not enough. It is important to correctly label the elements. This has the following reasons:
- Semantic code can be better read by programs.
- Loading times are shortened.
- Automatic tables of contents can be created.
- The keyboard operation is easier. See keyboard friendly
- Accessibility is made possible because screen readers can read the content.
Basically, each element on the page is given a meaning in the code that corresponds to the content or function of the element. This has several advantages, especially in terms of accessibility. The semantics in the code allows screen readers to read the meaning of individual elements, allowing people with impaired vision to navigate the page.
This page, for example, was built semantically correct, i.e. screenreaders recognize the elements and can describe them correctly.
Semantic in Code (HTML5)– Cheatsheet
| HTML 5 | Meaning |
|---|---|
<h1 – h6> | Titles in text. |
<header> | Header section oft the page. |
<nav> | With this you can mark a section of a page, which contains links for navigation. |
<footer> | Footer section oft the page. |
<article> | Self-contained composition in one document. |
<aside> | Content that indirectly belongs to the rest of the content, for example a dictionary of terms. |
<details> | Is used to mark up additional information, for example in a dropwdown, is often used in combination with the <summary> element. |
<summary> | Is often used to mark additional information, for example in combination with the <details> element. |
<figure> | An element that often explains itself graphically. For example a picture. The corresponding descriptive element is the <figcaption> element. |
<figcaption> | Describes the content of the related <figure> element. |
<main> | This can be used to mark the primary content of a page. for a blog post this would be the main text. |
<mark> | This can be used to identify highlighted text. |
<time> | This can be used to mark times or specific dates in the text. |
Why semantics in design helps developers
If you are a designer without any code knowledge and now think that this is the job of the developers, you are right, but also not. Correct is, it is the task of the developers to implement the code semantically correct. However, if semantic code principles are followed in the design, the implementation is much easier later in the code. The following principles should be followed:
Structure of the page
Make sure that your design can be categorized into the common areas. Clear areas on your site simplify the structure for developers.
In this example clear structures can be seen on the page. If modules are designed within this structure, implementation in the code is easier later.
Correct use of the elements
Use elements correctly and do not complicate your design unnecessarily. An example is overloaded overlays or multi-level nesting in dropdowns.
Links
developer.mozilla – semantics
w3schools – HTML Semantic Elements
W3C – Using semantic elements to mark up structure