1. Semantic Header and Footer
Divs have no semantic structure. Instead of using divs to create headers or footer structures, use "header" and "footer" elements.
Don't do this
<div id="header">
...
</div>
<div id="footer">
...
</div>
Do this
<header>
...
</header>
<footer>
...
</footer>
2. Use Figure Element
If you need to add a caption to your image, use the "figure" element combined with the "figcaption" element.
Don't do this
<img src="image url" alt="image description" />
<p> Lorem Ipsum Description </p>
Do this
<figure>
<img src="image url" alt="image description" />
<figcaption>
<p> Lorem Ipsum Description </p>
</figcaption>
</figure>
3. Don't use bold or italic tags
The "b" and "i" tags are presentational tags, and have no semantic meaning, instead either change the font-weight/font-style in the CSS or use the "strong" or "em" element.
Don't do this
<b>Bold</b>
<i>Italics</i>
Do this
<strong>Bold</strong>
<em>Italics</em>
4. Using descriptive links
A link’s text should be explicit and convey where is redirecting the user to, both users and search engines can more easily understand your content and how it relates to other pages.
Don't do this
<a href="url">
Check our pricing...
</a>
Do this
Check our <a href="url"> pricing </a>
5. Using inline styles
Writing inline styles violates the principle of having the structure (HTML) separate from the presentation (CSS). Instead write the styles in a stylesheet.
Don't do this
<h1 style="font-size: 24">
Header
</h1>
Do this
h1 {
font-size: 24
}
Thanks for reading!!
Subscribe to my newsletter to never miss out on my blogs, tech news and hot product launches.
Until next time,
Abhiraj
Top comments (12)
I like the idea of the third point: don't use them because of how the browser represents the tags, but because of their meaning. A quick note on it though,
<b>and<i>changed semantics and they don't mean the same thing anymore:<b>is for bringing attention to the element (instead of boldface), which means that it is has some relative importance within the sentence, but it doesn't imply seriousness and urgency as<strong>does.<i>stands for idiomatic text (and not for italics). It should be used with idiomatic text, technical terms, taxonomical designations, etc.Browsers still represent them as bold and italics (which I guess makes sense for "backward compatibility"), but they are no longer presentational elements. They have a meaning.
Doesn't matter what
<b>and<i>means. The WCAG accessibilty standard tells you to use<strong>and<em>for assistive technology.w3.org/WAI/WCAG21/Techniques/html/H49
But it actually matters what they mean. It matters as part of the HTML standard and it matters for accessibility too. And that's the point of my comment: there are cases in which you will use
<b>and<i>because they provide the right meaning. For example, if you use<em>for an idiomatic or technical term, you are using the wrong semantic tag. It should be<i>instead. And if you use<i>just to have something in italics, then yes, that's a wrong use of<i>.OMG I am so sorry, I read this wrong the whole time...
WCAG seems to say use semantic markup for special text.
<b>and<i>qualify as semantic markup in HTML5. Therefore I see no reason not to use those tags.Oh I see. Thanks for the correction. Cheers !
Good points. Point 4 was a rather poor example I'd say because semantically it makes no difference when the ScreenReader (SR) reads:
<SR: LINK> Check our pricingvs.Check our <SR: LINK> pricingThe user will know that theres is a link pointing to a site about products. I cannot tell about the SEO aspect though but a link shouldn't be as important as a Heading I think. (could be wrong)
More important is that the link differs from the surrounding text by visually enough space, extra icon, bold or underline in its default state. Not only by its color!
and as always use
<a>tags for different sites and files and<button>for actions which gives you default keyboard accessibilty.Thanks for sharing Abhiraj.
I would like to understand the practical purpose of the semantic tags! Yes, I agree that they make more sense but what is the real difference from divs and why is it better to use them?
Think of inclusiveness. There are users with disabilities that need semantic code to have better understanding of the content. For instance screen readers.
Also you may receive a higher SEO ranking from search engines.
HTML5's semantic elements help structure the code we create, making it more readable and easier to maintain. They help us think about the structure of our dynamic data, and to choose titles' hierarchy properly. They help us differentiate the semantic elements of our markup from the ones we use solely for layout. It makes web pages more informative and adaptable, allowing browsers and search engines to better interpret content.
is very useful
I have all the errors above 🤣🤣