Difference between putting text in <h1>, <h2>, <p> or just <div>

Question

For example, if I want to display any text what is the difference between putting it in <h1> , <h2> , <p> or just <div> tag? Does it only help with better readability and better SEO?

Answer 1

Actually SEO, CSS, readability, and semantics.

What's worth to mention is that browsers automatically add some white space (a margin) and set display to block before and after, <p> tags and they are meant to hold text, however, they are not aware of whitespaces, unlike other tags like pre , eventually both are tags to hold text values.

headings <h1>....<h6> are really a role player in the matter of SEO and their count on each page matters, along with readability obviously!

<div> 's are meant to divide down your elements to structure your page, and other tags like section s, article s header ...etc are just a kind of aliases of the div we know, and let's face it with their names they are making our life easier!

Answer 2

The differences are that browsers use default styling (eg., without any CSS, text written in h1 will look different to text inside p , the styling differs from browser to browser). To unset the default styling, a technique often referred to as CSS normalize or CSS reset is used. Furthermore, screen readers work better with semantic tags. SEO also takes clues based on tags (eg. it expects headings to be within h tags, paragraphs within p , etc.).

div is a kinda catch-all tag. Whenever possible, you should use semantic tags as they do convey important information.