Why is semantic more important?

Semantic markup is a way of writing and structuring your HTML so that it reinforces the semantics, or meaning, of the content rather than its appearance. For example, a <p> tag indicates that the enclosed text is a paragraph. This is both semantic and presentational because people know what paragraphs are, and browsers know how to display them. By adding semantic tags to your document, you provide additional information about that document, which aids in communication. Specifically, semantic tags make it clear to the browser what the meaning of a page and its content is. That clarity is also communicated with search engines, ensuring that the right pages are delivered for the right queries.

That means there is a right way to make your website. Of course, it depends on the content, but one thing is the same. Each page should have a header, footer and main element. The whole page must be wrapped in the main element. One good example is shown in the image below.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

In this picture you can see the basic semantic elements of each page. The header shows the beginning of the page and then the main part of the page. The later structure depends on the content, but here we see sections and articles on the left, and aside element on the right. The section is grouped as part of similar content and may consist of several different articles. Articles are part of the content. The other side, on the other hand, represents some news, or a similar thing that is important to be visible. and the footer represent the end of the page.

each of these elements is the same as a div element, and can be the same stylized, but it is very important for the search engine to know what each element represents and what it serves.