This content originally appeared on DEV Community and was authored by Abhiraj Bhowmick
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
}
Read my blog @ abhirajb.netlify.app
Thanks for reading!!
This content originally appeared on DEV Community and was authored by Abhiraj Bhowmick
Abhiraj Bhowmick | Sciencx (2021-09-29T04:59:11+00:00) 5 Common HTML Mistakes you should avoid.. Retrieved from https://www.scien.cx/2021/09/29/5-common-html-mistakes-you-should-avoid/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.