Avoid these HTML mistakes (don't blame CSS now😬):
⧠ Many times we style your HTML and we couldn't get the desired output, right?
✓ That's because of the mistakes that you do HTML elements
⇩ Let's see those
✓ That's because of the mistakes that you do HTML elements
⇩ Let's see those
✘ Block elements inside Inline elements
⧠ Inline elements take the minimum width (area) for the content.
⧠ When you include a block element inside inline it will result in conflicts in styling(at least in some browsers)
✓ Use Inline Elements inside Block elements
⧠ Inline elements take the minimum width (area) for the content.
⧠ When you include a block element inside inline it will result in conflicts in styling(at least in some browsers)
✓ Use Inline Elements inside Block elements
✘ Margin (top/bottom) & Padding (top/bottom) for inline elements
⧠ Inline elements flow with the content of the page if you try to set top/bottom properties(m/p) on inline elements that would disrupt the normal flow
✓ Use Only left/right properties on Margin and Padding
⧠ Inline elements flow with the content of the page if you try to set top/bottom properties(m/p) on inline elements that would disrupt the normal flow
✓ Use Only left/right properties on Margin and Padding
✘ Missing the closing tag
⧠ We are humans, we may miss closing the tag and this results in your style not working as intended.
✓ Always close the tag except when it is a void element (hr,img,br)
⧠ We are humans, we may miss closing the tag and this results in your style not working as intended.
✓ Always close the tag except when it is a void element (hr,img,br)
✘ Wrong Syntax in attributes (missing X)
⧠ id=myid" ✘
⧠ class="myclass ✘
⧠ src=imageloc ✘
⧠ style=font-face: arial ✘
✓ Use VScode extensions as those will help you get rid of these minute yet pretty bad mistakes.
⧠ id=myid" ✘
⧠ class="myclass ✘
⧠ src=imageloc ✘
⧠ style=font-face: arial ✘
✓ Use VScode extensions as those will help you get rid of these minute yet pretty bad mistakes.
✘ Using deprecated tags
⧠ There were times when people use the <marquee> tag to achieve some text movement
Some of these tags are deprecated and its not a W3C standard(even though browsers still support this)
✓ Don't use these kinda 90's tags, use an alternative method
⧠ There were times when people use the <marquee> tag to achieve some text movement
Some of these tags are deprecated and its not a W3C standard(even though browsers still support this)
✓ Don't use these kinda 90's tags, use an alternative method
⧠ There are some bonus tips for you😋
✘ Avoid using table tag for layouts
✓ Try to use External Stylesheets(readable)
✘ Don't use <i> <b>
✘ Don't use <br> to show a list of items
✓ Use alt tags in the img
✓ Use fallback fonts
✓Use<!DOCTYPE html>
Did I miss something?
✘ Avoid using table tag for layouts
✓ Try to use External Stylesheets(readable)
✘ Don't use <i> <b>
✘ Don't use <br> to show a list of items
✓ Use alt tags in the img
✓ Use fallback fonts
✓Use<!DOCTYPE html>
Did I miss something?
That's it
★ Retweet and Like this post, as it is the best way to support me
Follow @Adarsh____gupta for more content on
✭ Web development
✭ JavaScript
✭ ReactJS
✭ ThreeJS
★ Retweet and Like this post, as it is the best way to support me
Follow @Adarsh____gupta for more content on
✭ Web development
✭ JavaScript
✭ ReactJS
✭ ThreeJS
Loading suggestions...