{{announcement.body}}
{{announcement.title}}

5 HTML and CSS Good Practices

DZone 's Guide to

5 HTML and CSS Good Practices

Good practices for HTML and CSS are not easy to find. This article provides 5 cases when you can create a user-friendly, or clumsy, interface using only HTML and CSS.

· Web Dev Zone ·
Free Resource

It is quite easy to find good practices for any technology, but unfortunately, the same cannot be said about HTML and CSS. I've made my list of 5 cases when you can create a user-friendly, or clumsy, interface using only HTML and CSS.

alt-text Is Not a Duplicate Title

The alt attribute is quite useful. It helps screen reader users understand what is shown in the picture. Unfortunately, many developers don’t use it efficiently. They either duplicate the text around the picture or don’t add it at all.

But we can use alt differently.  For example, use the title text as a basis and add more details about the image. For example, if you have a product card with a title and an image, you can use alt to describe the external characteristics of the product.

Don’t do this:

HTML
 
<header>
  <h3>Nike Originals</h3>
  <img src="picture.jpg" alt="Nike Originals">
</header>

You can do this:

HTML
 
<header>
  <h3>Nike Originals</h3>
  <img src="picture.jpg" alt="shoes with Nike logo, classic reinforced toe and thin sole">
</header>

button type=button Is Better Than an href=“#”

You can often see an anchor link when developers try to mark up an interactive element. They do this thinking that if they override the default link behavior using JS, they will get the button behavior.

At first glance, this makes sense. But there is a problem. Browsers still think it’s a link. If you click the right mouse button to open the context menu of such an element, you will see the options: “Open in a new tab”, “Open in a new window”, and “Open in a private window”.

When users see those items, they think that it is a link and they can open it, for example, in a new tab. When they do this, they get an unexpected result – they see the top of the page. Therefore, it is better to use the button element. In this case, you get an interactive element that has no link options, and the user won’t be confused when calling the context menu.

Don’t do this:

HTML
 
<a href="#">Show my order</a>

You can do this:

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

justify-content: space-between Causes Unexpected Markup

When Flexbox first appeared, many people liked the justify-content property, which allowed them to evenly distribute grid items using space-between or space-around. And of course, they began to use it. But there is one problem.

When we use these values, we don’t think that the number of items may change. For example, if I use space-between to add 2 more items to a 4-column grid, they will appear on each side of the parent and not at the beginning of the line as the user expects.

Therefore, in this situation, it is better to use margin if you need IE11 support, or column-gap to set space between items.

Don’t do this:

CSS
 
.grid {
  display: flex;
  justify-content: space-between; /* or space-around */
}

.item {
  width: 30%;
}

You can do this:

CSS
 
.grid {
  display: flex;
  column-gap: 5%;
}

.item {
  width: 30%;
}

justify-content and align-items Lose Items

We often use the justify-content and align-items properties to position items. I know that this is a convenient and easy way of positioning. But there is a problem that is especially common with vertical positioning.

This is due to the way these properties work. The fact is that the justify-content and align-items properties ignore the size of flex items. Accordingly, if flex items are larger than the flex container, they will go beyond its borders and may not be displayed correctly.

For example, I often stumble upon a modal window with a cross button beyond the window, which makes it unavailable. You need to zoom out of the page to close it.

This problem can be solved by using the margin property set to auto. Inside a flex container, the auto value will be calculated based on the size of the container and its flex items. If the flex items are smaller than the flex container, the browser will set the padding automatically. If the flex items are larger, they will be pushed towards the flex container’s borders.

Don’t do this:

HTML
 
<div class="modal">
  <div class="modal__main">
    <!-- modal content -->
  </div>
</div>
CSS
 
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
}

You can do this:

HTML
 
<div class="modal">
  <div class="modal__main">
    <!-- model content -->
  </div>
</div>
CSS
 
.modal {
  display: flex;
}

.modal__main {
  margin: auto;
}

Take Care of Those Users Who May Experience Dizziness, Nausea, and Headaches

I think many designers and developers like to create animations. Yes, those interfaces look more interesting. But we have to be more careful.

In WCAG 2.2, there is section 2.3.3, which says that some users may experience dizziness, nausea, and headaches when they see animations that trigger moving elements.

Thus, if we create this type of animation, we should use the prefers-reduced-motion media feature. In this case, if people disable animations in the operating system, they won’t be displayed, and if they don’t do this, the animations will work. And we are going to take care of our users.

Don’t do this:

CSS
 
.example {
  animation-name: zoomInDown;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  animation-delay: 0.3s;
  animation-fill-mode: both;
}

You can do this:

CSS
 
@media (prefers-reduced-motion: no-preference) {
  .example {
    animation-name: zoomInDown;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-delay: 0.3s;
    animation-fill-mode: both;
  }
}

The purpose of this article is to draw attention to the problems people may face. My choice is not at all dogmatic. You are free to solve these problems in your own way.

Topics:
align items, alt text, best practice, button type, css, href, html, html and css, justify content, web developement

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}