Semantic HTML: the meaning of the element before the appearance

Useful to know

A page can look good and still describe its structure indistinctly. Semantics in HTML is related to the meaning and role of the elements, not just their layout. The title element denotes a title, while plain text in a large font can only resemble one. The difference is important when building a document that needs to be understandable and outside the specific visual arrangement of a screen. [1]

The main element represents the main content of the document: the part directly related to the central theme or function of the page. [2] It is not just a universal box that is used because it easily assumes width. When the author selects an element according to its role, the structure begins to explain the intent of the page. Thus, the layout can be changed without any change in the size of the letters necessitating a rethink of the meaning of the document.

Let's look at a fictional page for an exhibition. It has the name of the event, a short presentation, a program and general links of the museum. Before selecting colors, we can arrange these parts as content: which is the main title, which are the subsections, and which part is repeated throughout the site. Such an inventory helps even a small team. The editor and developer can discuss the same structure without arguing whether a given caption visually seems important enough.

Semantic selection does not eliminate the need for CSS. Appearance and meaning are different layers that must match. MDN gives precisely the distinction between a true header element and an element shaped to look like a title. [1] For learning verification, we can temporarily ignore colors and read the content in order. Is there a comprehensible sequence? Do the titles of the following sections correspond? These questions check the editorial logic of the page.

The main area can also be useful as a reference point to go straight to the content. MDN describes the relationship between main and the accessibility of the document. [2] This is not a reason to add mechanically many identical areas. It is more useful to know which part serves the main task of the particular page. For example, in a catalog this may be the list and its filters, and in a separate article - the material itself with its title and related information.

When reviewing a ready-made document, it is useful to juxtapose three things: the meaning plan, the elements used, and the visible arrangement. If they tell different stories, the visitor or support team will encounter unnecessary difficulty. Semantic HTML does not require complex decoration. It requires precise names for the parts of the document and consistent use of their roles so that the page remains understandable as the design, content, and usage evolve.