Common Mistakes

Here I'm going to list some common mistakes that beginner and amateur coders like to make. These are very prevalent on Neocities because old tips and tutorials are spread around.

Oh, and, don't feel bad if you've made these mistakes. I have too when I started coding.

Using jQuery

jQuery used to be very popular, because it made a lot of JavaScript things easier. But nowadays there is not a single reason to use jQuery anymore. Everything that you can do in jQuery, you can do in JavaScript (and it's easier, too) - and you won't need to include an external library that bloats up your loading times.

Personally, the last reason I had for using jQuery was it's ready function, which waits for the DOM to load. I didn't know for a long time that this is just as possible and simple without jQuery. This is all you need - no jQuery necessary:

document.addEventListener("DOMContentLoaded", () => {
  console.log("DOM fully loaded and parsed");
});

Another thing you might be using jQuery for is a simple for-each loop over an array of elements. Here is the pure Javascript version of that:

const myElements = document.querySelectorAll(".element");
[...myElements].forEach((el) => {
  console.log(el);
});

By the way, if you're using a layout, plugin or widget which requires jQuery...: that is a good sign that either it's outdated, or the creator doesn't know what they're doing.

Creating a layout with tables and float

Just don't do this to yourself. This is what web developers did decades ago; we don't have to torture ourselves like this anymore. It's difficult to do, and not very accessible since the elements are not semantic. (This means that screen readers (and search engines) don't know what's what.)

I would use CSS's grid rules. I have a tutorial on that here.

Here's what it would look like:

.container {
  display: grid;
  grid-template:
    "header header"
    "sidebar main"
    "footer footer";
  grid-gap: 10px;
}

header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }
			

Creating a layout with iFrames

Some people use iFrames in layouts so that they don't have to deal with editing their sidebar/menu on multiple pages at once. Well...

Firstly, there are much better (and easier!) ways to load the same sidebar/menu on every one of your pages. I have some tips about that on my "snippets & tips" page.

Secondly, iFrames were not meant to be used that way. They're great for widgets and plugins, like YouTube embeds, but that's about it.

Some reasons not to use iFrames unless you really have to:

• Users won't see your pages' URLs in the address bar of their browser if you use iFrames. That means they won't be able to create bookmarks to specific pages, or share the links! It also won't show up in the user's browser history correctly, and they won't be able to use the browser's previous/next page buttons.
• iFrames are not as accessible as normal pages.
• iFrames won't expand to fit their content, which makes styling hard.
• You're essentially loading 2 pages instead of 1, which can impact loading times.

So just... don't.

Wrong HTML nesting

Sometimes, when editing our code, we put a few closing tags (like </div>) too many or forget to close elements, or maybe we paste code at the wrong spot. All of these lead to wrong nesting, which in turn leads to weird layouts, CSS not working, scripts to throw errors, and more calamity.

I recommend inspecting your site with your browser's Dev Tools: It lets you see the nesting visually. Hovering over the code for an element, for example, highlights that element on the page.

Getting nesting right is difficult in an editor that doesn't check for nesting errors or formats your HTML automatically (such as Neocities' built-in editor.) I recommend using an editor that supports formatting, my favorite is VSCode, but it can be a bit hard to set up. If you want something really simple you can paste your code into an online HTML formatter like this one, then you can easily see where the nesting goes wrong because the indentation will also be wrong.

And as I said, look for stray closing tags that don't belong to any element. They mess things up.

Not using Semantic Elements (or using the wrong semantic elements)

semantic (adj.): connected with the meanings of words

Semantic HTML elements carry meaning. Imagine this: You're a program that reads websites. Maybe you do this to help blind people browse the web, maybe you look for search results for Google. You come upon a site that has five elements: div, div, div, div, div, div, div. What's going on? You have no idea what these elements are! This is where sementic elements come in. Instead of many divs, how about these elements: header, footer, aside, nav, main, section, article. Their function is much clearer, right?

That's exactly why you should use these elements. They're good for accessibility and SEO. Good thing, too, that they are just as easy to use as divs: you use them in the exact same way.

Some common HTML elements you've heard about are also semantic: button, table, details etc. Make sure to use them for their intended purpose:

• All buttons should do something on click.
• Everything that's clickable should either be a link (<a href="">) or a <button>.
• Don't use <a> elements as buttons.
• Lastly, as already mentioned, don't use tables or iframes for your site layout.

Basic formatting elements like <b>, <i> and <u> are also semantic. Use them for bold, italic, and underlined text. If you want to use elements for more elaborate styling, use <strong> and <em> (em = emphasis).

Ignoring Basic Accessibility

It's impossible to make your website 100% accessible. It's time-consuming to make it very accessible. But it's easy to make it at least a little accessible, so you have no excuse not to do it.

Here are some easy ways to make your site more accessible:

• All content images should have the alt attribute with a short description of the image.
• All decorative images should have aria-hidden="true" and an empty alt-attribute (alt="")
• All images have to have the alt-attribute. If there is no alternative text, it should be empty.
• All clickable elements (links, buttons, etc.) should be interactable with the keyboard. (This is already the case if you use the <a> and <button> elements.
• No autoplay music/video.
• No flashing images without warnings.
• Use rem/em instead of px for font sizes, so that the site can be scaled

These are very basic accessibility features, please check out the links below to learn more. (Never be satisfied with achieving the bare minimum of accessibility.)

Also keep in mind that your site should be responsive, so that it is more accessible to mobile users, and not load too many resources, so it is more accessible to those with a bad/limited internet connection.