7 HTML Good Coding Habits

We can found good practices of almost any programming language in Google. But I can't say that about HTML. So I'd to tell you about 7 of my good coding habits that you can use.

Don't use maximum-scale=1 and user-scalable=no

When I interact with a page I want to scale a page to consider details or to push the small button. But sometimes I can't do that because developers prevent it. They don't think about users and add maximum-scale=1 and user-scalable=no.

So if you want users to be happy don't define these options and I will say thank you to you.

don't do this

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">

You can use this instead

<meta name="viewport" content="width=device-width, initial-scale=1">

Use the a without href instead of span

Sometimes we have to use the disabled links in our interfaces. There is a common way of using the span element to mask the disabled link and replace it on an a element when the link ceases to be disabled.

But you haven't to do it. The href attribute is optional so if the a element doesn't have this attribute it stops to be clicked. You will get just a text. And if you want this element became interactive again just add the href attribute back.

For example, you can use this approach for page navigation to define the current page.

don't do this

<nav>  <ul>    <li><a href="#">Home</a></li>    <li><span>About me</span></li>    <li><a href="#">Projects</a></li>  </ul></nav>

You can use this instead

<nav>  <ul>    <li><a href="#">Home</a></li>    <li><a>About me</a></li>    <li><a href="#">Projects</a></li>  </ul></nav>

Use button instead of a href="#"

A lot of developers use a href="#" when they need a button that users click on. But I think that's is a bad practice and I'll tell you about why.

Browsers understand a href="#" like the instruction of going inside the top of the page. So you have to cancel this behavior using JS. As a result, you will get an element that behaves like a button. Also, you can add the role="button" so that screen readers will think this element is a button.

Yes, it's the working solution. But the problem is all these actions can be omitted. Just using the button type="button" gets already an interactive accessible element without other actions.

don't do this

<a href="#">Show my order</a><!-- or --><a href="#" role="button">Show my order</a>

You can use this instead

<button type="button">Show my order</button>

Use inputmode

When I register on a website I have to fill in my data such as email, tel, etc. And I want to throw my cell phone because I have to switch my keyboard again and again. Just developers didn't think about my user experience.

If you don't want to upset your users use the inputmode attribute. This attribute hints to browsers what a keyboard they should show so that users can fill data more efficiently.

don't do this

<input type="text" placeholder="Your email"><input type="text" placeholder="Your tel">

You can use this instead

<input inputmode="email" placeholder="Your email"><input inputmode="tel" placeholder="Your tel">

Add width and height to SVG icons

When you use SVG icons right in a HTML document, pay attention you have to set the width and height attributes. If you don't do it and you rely on you set the width and height properties in CSS your interface will be broken.

Your CSS might not be loaded and at this point, the icons will try to fill all of the available space. So the mistake happens. Just set the width and height attributes and can sleep easily. Your interfaces will be bulletproof!

don't do this

<svg xmlns="http://www.w3.org/2000/svg"    viewBox="0 0 448 512">  <path fill="currentColor" d="..."></path></svg>

svg {  width: 0.875rem;  height: 1rem;}

You can use this instead

<svg xmlns="http://www.w3.org/2000/svg"    viewBox="0 0 448 512"    width="0.875rem"    height="1rem">  <path fill="currentColor" d="..."></path></svg>

Don't use headings too much

There is a bad practice of using the h1-h6 elements for the subheading. When you do that you forget that headings help users of screen readers to navigate on the web page faster. If you have headings too much it prevents people. So use heading where they're needed.

don't do it

<h2>iPhone 11</h2><h3>Just the right amount of everything.</h3>

You can use it instead

<h2>  <span>iPhone 11</span>  <span>Just the right amount of everything.</span></h2>

Get more sense to alt

The alt attribute can be very useful if developers use it correctly. That will be important for people with screen readers that use the text from the alt to understand what's on the picture.

Unfortunately, a lot of developers ignore it. They duplicate text around this img or just don't add the alt. So if you a picture with some heading you should describe more information about the picture and don't duplicate text from the heading.

don't do it

<header>  <img src="picture.jpg" alt="adidas Originals Superstar">  <h3>adidas Originals Superstar</h3></header>

You can use it instead

<header>  <img src="picture.jpg" alt="adidas Originals Superstar Bold platform trainers in black and white">  <h3>adidas Originals Superstar</h3></header>

P.S. If you like these tips go to read others on my Linkedin.

P.S.S. This post was written with the support of my patrons: Ashlea Gable, Ben Rinehart, Sergio Kagiema, Vlad Bazhanov, Spiridon Konofaos, Jesse Willard, Tanya Ten.