5 Common HTML Mistakes To Avoid

1. Missing Doctype : Every HTML page must have a doctype. It's not a tag but it describes what kind of HTML you are using. If it’s not there, you don’t know if your code is valid, plus your browser makes assumptions for you, and it might not workout the way you've planned.

<!-- WRONG-->
<html>
  <head>
    <title>
      Title
    </title>
  </head> 

<!-- CORRECT -->
<!DOCTYPE html>
<html>
  <head>
    <title>
      Title
    </title>
  </head>

2. Forgetting the closing tags : Most HTML tags need to have an opening and closing tag to work properly. Therefore, it's best practice to open both tags and write your code in between them.

<!-- WRONG-->
<section>
  <h1>Hello
<p>This is para

<!-- CORRECT -->
<section>
  <h1>Hello</h1>
<p>This is para</p>
</section>

3. Incorrect use of Class and ID : An ID is a unique identifier so you can't apply the same ID to multiple elements on the same page. That's not the case for classes through, so use classes for styling instead of IDs.

<!--WRONG-->
<article id="card-first">
  <h1>First Article</h1>
</article> 

<article id="card-second">
  <h1>Second Article</h1>
</article> 

<!--CORRECT-->
<article id="card" class="card-first">
  <h1>First Article</h1>
</article> 

<article class="card-second">
  <h1>Second Article</h1>
</article>

4. Incorrect architecture : Placing block element inside inline elements is incorrect architecture. For semantically correct HTML any inline elements should be nested inside block elements.

<!--WRONG-->

<a href="/article">
 <h1>Title</h1>
</a> 

<!--correct-->
<h1>
  <a href="/article">
   Title
  </a>
</h1>

5. Start using comments : They are helpful for anyone reading your code since it lets them understand important ideas or sections. Comments don't appear in the browser so they won't affect any styles you have on your elements. To comment out in HTML, insert information like this, shown below

<!--This is a comment in HTML-->

Have something to say or improvements to add? Feel free to reach out to me on Twitter and maybe even share this post using the button below :)

5 Common HTML Mistakes To Avoid

Sharing some of the HTML mistakes I've done, so that you can avoid them😅