<b>, <i> vs <strong>, <em>

The b and strong tags by default make text bold.
The i and em tags by default make text italicized.
Each browser has its own default styles, but result in similar appearances.
Here is how they are styled in the popular browsers:
strong, b {
    font-weight: bold
}
i, cite, em, var, address, dfn {
    font-style: italic
}
b, strong {
    font-weight: bolder;
}

i, cite, em, var, dfn {
    font-style: italic;
}
strong, b {
    font-weight: bold;
}
i, cite, em, var, address, dfn {
    font-style: italic;
}
Despite the fact that their appearances are similar, the strong and em tags add extra semantic meaning to the enclosed text, whereas b and i are purely visual.
According to the HTML 5 specifications, the strong and em tags indicate importance and emphasis respectively.
As far as accessibility goes, while a particular screen reading software may or may not pronounce it differently, using <strong> or <em> at least opens the possibility, whereas a screen reader will never pronounce text within <b> or <i> differently.
Hit the Subscribe button for the latest news on my tools. No spam. Ever!
© 2020 Nguyen Huu Phuoc. All rights reserved