An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
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 used for bringing attention to and for idiomatic text respectively, and have no semantic meaning. But browsers still give them the bold and italics stylings for historical purposes. 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 links 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}
Thank you for reading
If you liked this post, subscribe to our newsletter to never miss out on our blogs, product launches and tech news.
Subsribe to Visualway's newsletter
Thanks for reading!!
Original Link: https://dev.to/visualway/5-common-html-mistakes-you-should-avoid-205m
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To