The following is a list of common HTML mark up mistakes made by front end developers. Whether you are a newbie web designer, or a programmer who wants to try his hands in UI designing, try to avoid these mistakes.
1. Don't place Block elements within Inline elements
An HTML element is displayed as Block or as Inline by default. Block elements, such as divs and paragraphs, make up the structure of the document. Inline elements reside in these blocks, such as anchor and span tags. So you should never put blocks inside inline elements.
Wrong: <a href="#"><h2>Block inside Inline</h2></a>
Right: <h2><a href="#">Inline inside Block</a></h2>
2. Always have the alt attribute for image tags
The ALT attribute is a required one for IMG tags, it describes the context of the image. It helps your user on a screen reader or with a slow connection to decide whether or not the image is important. It also makes the web crawler index your contents better. If the images is just for show, use an empty ALT attribute like alt=""
Wrong: <img src="profilepic.jpeg"/>
Right: <img src="profilepic.jpeg" alt="Profile pic of the user"/>
3. Don't use line breaks to show a list
If you wan't to show a list of things in bulleted or numbered ...
