5 Common HTML Mistakes you should avoid.

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

🤩 Our Amazing Sponsors 👇

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

<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!!

'Til next time, Abhiraj