How to solve most HTML5 display problems

HTML5, the latest version of the HTML language, stands out from its ancestors for its ability to provide native support for audio and video. It also supports vector-based image formats such as SVG and Canvas.

The videos, dynamic images or even HTML5 banners you create with Abyssale would be useless without this language. So we've decided to help you out with HTML5, which can sometimes seem a bit temperamental when you haven't mastered it.

In this article, we're going to share with you a list of the most frequently encountered display problems with HTML5. For each one, we'll share the keys to solving it, even if you don't master the language.

HTML5 fundamentals

We're not going to give you a lecture on this language. The idea is rather to provide you with the tools to easily detect and correct HTML5 errors.

So what better way than to borrow cheat sheets from the experts in the field? Don't panic! It's just a list of useful HTML5 tags and attributes. It helps you understand the code in front of you and identify each element. No need to learn it by heart. Just pull it out when a problem arises.

We therefore refer you to html.com and their article with HTML5 clean sheets. These cheat sheets will help you solve some of the problems listed below.

Issue 1: Poorly closed or nested HTML5 tags

If you're not using a CMS to create your page, it's likely to have display problems. These problems can often be traced back to HTML5 tags that aren't properly closed or nested. The structure of the document is then incorrect and the display does not correspond to your expectations.

Here's an example of a poorly nested tag:

For this to work, the paragraph tag should be closed before the division tag, since it was opened after it.

Here's another example of a poorly closed tag:

In this case, the division tag is closed, whereas the paragraph tag is not.

Good markup should take the following form:

One of the first things to do in the event of a bad display is therefore to check the nesting of tags and make sure they're all closed.

Issue 2: Syntax errors

It's one of the simplest problems to correct, but one of the most time-consuming to identify when coding. Yet syntax errors can prevent HTML5 code from working properly.

For example, if we type the following sentence‍

Everything looks fine. However, the lack of space on with "a href" can cause problems.

Check that all the syntax is correct if a problem occurs.

Issue 3: Broken links

As explained in the introduction, HTML5 supports audio, video and vector images. As a result, if a link doesn't work, it may be because it's incorrect or non-existent. It may not display the expected resource.

If this happens, copy the URL into your HTML code and paste it into the navigation bar of your web browser. If multimedia is not displayed, your link is invalid. You need to modify it.

Issue 4: Incorrect paths

You wanted to insert an image with the image tag, but nothing works? If your tag is closed, nested and you don't detect any syntax errors, then you should look at the path to the image. This may be incorrect, or the file name may be misspelled.

If, despite your checks, the image is still not displayed, it may be linked to the file's access permissions. In this case, make sure that the image file has the appropriate read permissions so that the server can serve it to page visitors.

Issue 5: Browser compatibility with HTML5

HTML5 elements can be interpreted differently from one browser to another. This can lead to display problems.

Let's imagine the following HTML code:

Its purpose is to display a date entry field. However, its display will differ between Google Chrome and an older version of Internet Explorer, for example :

• On Chrome, you'll see a calendar appear when the user enters a date.
• On Internet Explorer, the element will simply be displayed as a standard text field, without a drop-down calendar. The user will have to manually enter the date in the correct format. It's also possible that the input field won't appear at all.

These compatibility problems can only be solved using polyfill or javascript tools. If you're not familiar with this language, you'll need to find out more, or call in an expert on the subject.

Issue 6: Incorrect use of HTML5 attributes

HTML5 is an evolution of the HTML language. New attributes have appeared and others have disappeared. Perhaps you can't get the display you want because of bad attributes. In this case, the cheat sheets we shared with you at the beginning of this article come into their own.

Check that the attributes you use are suitable for what you want to create. For example, you could desire to display an image and write the following attribute :

But it won't work. To display an image the attribute is as follows:

Yes, we're exaggerating a bit with our example! Although... 😉

Issue 7 (Bonus): The absence of semantic tags

It's a problem that's difficult to detect at first glance, because on display, everything works. However, a poor semantic structure makes your content less comprehensible or even inaccessible to search engines and users.

If this is the case for you, you may not be directly aware of the problem. However, after a few months, you'll notice poor SEO and/or a high bounce rate on your pages.

If you use the HTML5 division tag throughout your content, you may have your explanation. With this tag, you don't prioritize the information you share on your page. Search engines and users need structure to fully understand your content.

That's why it's important to use semantic tags such as the following :

They help define the structure of your content.

‍

Finally, the vast majority of display problems you'll encounter with HTML5 can be solved by simple checks. You don't even need to be trained in the language to do this.

It's possible that you'll encounter a number of problems other than those listed here. But this initial, non-exhaustive list will help you make sure that the root of the problem is not a failure to respect the fundamentals of HTML5.

At Abyssale, we provide you with a multitude of tools for automated visual creation. You can create images, videos and even HTML5 banners for your advertising, emailing or other campaigns.

To keep up to date with the latest Abyssale news and developments in visual automation, follow us on Linkedin.