Semantic HTML for non technical people

We have already covered the importance of responsive design (here), specifically on the web.

Today we cover another topic as much important as the previous one: Semantic HTML.

Web pages are composed of HTML, CSS, and Javascript, and each of them has a specific goal:

• HTML: to include all the information that must be present on the page;
• CSS: to style all the information;
• Javascript: to add interaction to the page.

As usual, we have many ways to write down information in the HTML of the page, but the HTML structure must represent the real hierarchy of this information.

HTML specification provides a lot of different HTML tags to express which kind of data is present on the page.

Some examples:

• Title: to represent titles on a page, we have <h1>, <h2>, etc.;
• Paragraph of text: we have <p> tag;
• Lists: we have both unordered (<ul> tag) and ordered (<ol> tag) ones;
• Important text: we have <strong> tag;
• Images: <img> tag exists;
• Section of the page: <section> tag;
• Navigation block: <nav>;
• Abbreviations: <abbr>;
• and many more.

When we write our HTML code following the correct hierarchy of information and the most appropriate HTML tags, we write semantic code!

Why it is important?

Representing the correct hierarchy and nature of the data you insert into the HTML page allows Google and other search engines to index your data in the best possible way, improving the chances of being found by people interested in your content.

So, always ensure that your websites are written semantically!

This series of articles is dedicated to managers who are not technical but need a quick introduction to technical topics from various subjects to be more aware in their work.

Feel free to propose new topics clicking here!