Elementy semantyczne nie tylko spełniają swoje zadanie, ale również określają do czego tak naprawdę służą.
Przykładem elementów niesemantycznych są np. div czy span. Nie określają one do jakiej czynności konkretnie służą, jakie dane będą w nich przechowywane.
  1. <nav></nav> - nawigacja np. menu.
  2. <footer></footer> - stopka strony
  3. <section></section> - (część, dział, sekcja) - grupowanie powiązanych ze sobą elementów.
  4. <header></header> - Nagłówek strony.
  5. <main></main> - główna część strony.
  6. <article></article> - artykuł.
  7. <aside></aside> - u boku, coś pobocznego. Coś mało ważnego np. przycisk "do góry" w dolnym rogu, reklama, formularz z zapisem do newslettera, hashtagi, powiązane artykuły, coockie-message.
  8. <div> i <span> - używamy tylko aby nadać styl danej zawartości.