Improving HTML semantics solves bugs

Here's a link to the Heaven's of the Mankind website: https://sternenhimmel-der-menschheit.de/en

Sometimes, unexpected bugs appear on a website, and it can be useful to have a look at the HTML structure, to see if it’s not causing any issues.

Removing unnecessary HTML elements

This problem appeared, in Heavens of Mankind, for the event page, where the hover interaction had a delay of 1 second. After inspecting the content, it turns out that the hovered element was inside multiple span elements (which was not under our control, since the text for this event comes from another source). Adding a regular expression that removes the span HTML element from the string that we received solved the issue.

export const removeStyles = (input: string) => {
  return input
    .replace(/ STYLE=\'.*?\'/gi, "")
    .replace(/<SPAN>/gi, "")
    .replace(/<\/SPAN>/gi, "")
}

Never use block elements inside of inline elements

Another time when an unexpected side effect was caused by a bad HTML structure was for the article pages. The article displayed properly when first loading the website, but then, when reloading the page, some of the content disappeared. What was even more strange, is that the same elements always disappeared, while some that were seemingly identical stayed visible.

After further inspection, the elements did not disappear entirely, since their container (a p element) was still there, but it was empty. Also, the disappearing elements had some similarities, it was either headings (h2…) or blockquote. Knowing that headings should not be inside of paragraph elements, I modified the code so that the containing element would be a div when there’s a heading inside of it (this content is provided by the CMS, so the structure needs to stay flexible). The heading elements stopped disappearing. I then searched to see if it was semantically correct to have blockquote elements inside of paragraphs. Since, the blockquote tag is block-level content, it is not correct. I then modified the code so that the blockquote would also be inside of a div, and that fixed the issue.

The choice for the HTML structure was made at an earlier stage of the website, when the CMS was not yet implemented, and inner HTML was used on it, without thinking about whether there would be block-level elements injected into it as well or not. But those issues, make it apparent that applying best practices and writing semantically correct websites is important, which I am always happy to see.