5 Common Mistakes to Avoid in HTML
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
Using <div> tag to write add a piece of text to your webpage, is a valid case when to use <div>?
Semantically, you should use div when nothing else makes sense.
If you just want to group few elements together and it doesn't make sense to use section, header, footer, main, aside, article, nav, etc then go for div.
Never ever add a text inside a div and use click handler to behave like a button. A div is a container of another item and it should do that only.
Good tips for
I would like to add one suggestion on
a, try to avoid using
target=_blank as it breaks the flow of browsing way more than use of
In general, like you said, if you need to use only
# fro href, try to use
button but it is useful as jump to top of page can just be achieved by using
Buttons need more style resets than links and probably that's why I would go for using
a[href="#"] as having click handlers on text nodes is less recommended
Personally, I take the thumb rule of "if it looks like link, make it behave as link"
Rest should behave as button.
And when making a button, there are multiple ways to do it.
There are various kind of users and one natural instinct for a user is that if it looks like link, they might try to open in new tab. But that is also vary small percentage of users. Normally the non-tech users will browse in a natural flow where app can guide them in a natural flow.
I personally am a heavy user of open in new tab and I have 4-5 windows with at-least 20 tabs in each. I hate my habit of doing this but yeah it happens.
UX is very tricky thing around this and there is no blanket statement to cover this kind of experience. Every use-case is different and need to be handled with specific Usability Testings
What's wrong with multiple H1 elements?
Having a single
h1 is considered as best practice, yes it doesn't hurt your SEO but having one main title makes more semantically.
If I have multiple posts per page, I would probably group them and have a top-level heading
h1 while using
h2 on the post title.
I'm saying this from the reference of MDN Docs.
Declaring something best practice, no matter the authority, does not make it right. The MDN documentation is rather empty on supporting evidence:
You should only use one <h1> per page. Using more than one will not result in an error, but using only one is seen as a best practice. It makes logical sense — <h1> is the most important heading, and tells you what the purpose of the overall page is. You wouldn't have a book with more than one title, or a movie with more than one name! Having a single top-level title is also arguably better for screenreader users, and SEO.