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?
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?
2
Answers
The differences are that browsers use default styling (eg., without any CSS, text written in
h1
will look different to text insidep
, 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 withinp
, etc.).div
is a kinda catch-all tag. Whenever possible, you should use semantic tags as they do convey important information.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 likepre
, 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 likesection
s,article
sheader
…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!