Hello, amazing people. This article will cover few of the common mistakes that we often do while writing HTML. Let's get straight to it.
1. Use of Anchor Elements:
Anchor elements are used to create a hyperlink to a file or a location of a webpage and should always be used for navigating to a real url. Anchor elements are often misused as fake buttons by setting their
# to prevent the page from refreshing, then listening for their
When we point
href value to
incorrect semantics to assistive technologies, like screen readers.
If something is supposed to be clickable, it should always be a
Using here to add a link is not recommended as it doesn't tell anything about where it's going to navigate. Provide some proper text of where the links point to.
Read more about anchor tag here ❌
Read more about anchor tag on w3school guide ✅
2. Use of Break element:
<br> element is used to break the text in an address or while writing poems specifically. Creating separate paragraphs of text using
<br> is not only bad practice, but it is also problematic for people who navigate with the aid of screen reading technology. Screen readers can miss the content between two break elements while still announcing the presence of the tag. This can be frustrating for a person using a screen reader.
margin property with
<p> element to add space instead.
3. Use of Heading elements:
- HTML is a semantic language and anything regarding visuals should be done with CSS only. Avoid using heading tags to resize text. Instead, use the CSS
font-sizeproperty. Headings use size to indicate their relative importance, but CSS is preferred for general-purpose resizing.
- Avoid skipping heading levels: always start from
<h1>, next use
<h2>, and so on.
- You should only use one
This is wrong:
<h1>Heading level 1</h1> <h3>Heading level 3</h3> <h4>Heading level 4</h4>
This is appropriate:
<h1>Heading level 1</h1> <h2>Heading level 2</h2> <h3>Heading level 3</h3>
4. Use of Paragraph:
Do not use empty
<p> elements to add space between
paragraphs and it is problematic for people who navigate with screen-reading
technology. Screen readers may announce the paragraph's presence, but
not any content contained within it — because there is none.
If extra space is desired, use CSS properties like
margin to create the effect.
5. Use of Aside:
Aside was introduced with HTML5 and represents content that is not directly connected with the main content. Asides are stand-alone, non-essential as part of an article but when used correctly it can be an extra level of information for your content. Example sidebars or call-out boxes.
Do not use aside to tag the parenthesized test as that is part of the main content. Don’t try to force content into an
<aside> if it shouldn't be there.
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p> <aside> <h4>Epcot Center</h4> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </aside>
Writing semantically correct HTML is the responsibility of every developer. I hope you learned something from this article. That's it for now. Take care and stay safe.
Illustration on the cover is courtesy of unDraw
Did you find this article valuable?
Support Mohd Shad Mirza by becoming a sponsor. Any amount is appreciated!