Semantics in HTML

We mean that specific elements have some sort of meaning or purpose associated with them. Sementaics  we should think about what that element actually means and what it stands for. Now, not all elements in HTML are semantic.

  • Strong
    • it's a strong content, which means basically a very important piece of content.
  • em
    • A special meaning, is that we emphasized this word here
  • nav
    • that this is a navigation.
  • div
    • To create a new box but a box without any meaning. With Div we lost some of the white space that we do have around the p.
  • Before HTML5, we always used divs for every single box that we needed like this on the page.
  • But HTML5 introduced this concept of semantic HTML. So now we should only use the div element when we don't want to attach a certain meaning to a certain container.
  • article
    •  
  • header
    •  
  • footer
    •  
  • Paragraph
    • the browser gives us by default around the p elements.

 

 

Why Sementic Element are so important

  • Helps search engines, such as Google will be able to understand the structureof your content, and therefore, they will be better able to analyze what your content
  • Writing semantic HTML is extremely important for accessibility, and especially for people who rely on screen readers to consume our webpages.

 


Related Question