Skip to content
Most web pages are made of 3 basic elements, HTML, CSS, and JavaScript. These building blocks make up all web pages no matter what they use to render them. Each web element has its proper place. While there can be some overlap, using them purposefully helps make an SEO optimized page. So how should these elements be used and what are some ways that they can be misused?
The basic web element functions
Let’s compare a webpage to a house. A house has several parts, each in its place and serving its purpose. In our webpage house, the HTML resembles the structural web elements, the trusses, the walls, the foundation. HTML provides important page content layout, outlining its order and what elements appear where.
CSS should be used for styling. If we stick with house illustration this would be the color of your walls, your cabinets, what type of flooring you have, etc. The colors of your page, font sizes, the actual layout of the page can also be defined in the CSS. But wait, shouldn’t the layout be in the HTML? Good question. While the HTML should layout the elements that will be on your page, CSS should control how those elements will be displayed on that page. CSS is responsible for much of the responsiveness of the web.
Now that your house is built, it’s time for some utilities, like your electricity and running water. JavaScript should be used for the interactive elements of your page, such as changing elements when clicked, displaying data and so on. JavaScript can be used to change the entire look and feel of your page which works well if you are tailoring it to a certain audience or use case.
Why separate them?
So, if you can use HTML and CSS both for layout, and JavaScript and CSS for styling, why separate them? When Google indexes your page, it’s looking for key indicators as to what your page is about and how it functions. If you use one of the elements inappropriately, you can send the wrong signals and hurt your rankings. This can happen often when working with CMS editors that style using presets for elements, or that run unnecessary JavaScript that slow down pages to do things that could be done in CSS.
So, let’s review some of the commonplace misuses.
Misusing heading tags
One of the most common misuses is using heading tags to style web elements. Headings tags outline primary topics on a page, from the most important H1 tag (every page should have) to H6. When used to style elements, you are telling Google that those words are what your page is about. Or, you could be using the wrong heading tag (like using an h3 instead of an h2 because you like the font size better). In either case, you are sending the wrong message. Instead, you should use CSS to style elements to the appropriate size or font that you want.
Double H1 tags
Another common issue is having 2 or more H1 tags on a page. Your H1 tag should be the main idea of the page; it should tell everyone (and every crawling bot) that visits the page what it is about, and as such, you should only have one. Having two H1 tags is like sending two different signals on the page. Some people and even professional themes tend to put their logo in an H1 tag. So be on the lookout to make sure there is only one per page.
All images are background images.
Nothing is wrong with having an image background. Images are eye-catching and can add much value to your site and getting users to buy products or service. But all your images should not be background images. Working on a site recently, I found the CMS turning all images to background images. The intention here is to style and resize them more easily. While it may make it look better, you lose out on a vital part of the benefit of images on your page: alt text. Alt text describes what’s in the image and is used by screen readers to identify what’s in a picture. By making all your images background images you reduce the accessibility of the page making it harder for people with disabilities and can take a hit from Google in your rankings.
Rendering CSS with JavaScript
Unnecessarily serving CSS through JavaScript adds to load times on pages. It is much better to link the CSS file in the header instead of putting it through that extra step. Also, using JavaScript for simple animations or hover effects adds to the load time when it can be done much quicker through CSS. Even adding JavaScript frameworks when not needed can add to load times. Like loading jQuery to animate a button. Instead of writing the vanilla JavaScript, or even better, using the animation elements in CSS or even a CSS animation style sheet, loads much quicker.
Styling web elements in HTML
Styling elements directly in the HTML file is a controversial topic. Many themes and plugins in WordPress and other CMSs continually rely on overwriting style sheets and other plugins. This is usually viewed as a bad practice. Some content creators write styles directly into their content because they want to change their theme styles. What’s the issue with this? It often causes CSS issues when the styles written directly into the HTML elements overwrite the styles in the CSS file. To avoid this, instead of writing it directly into the HTML, assign the web elements a class and add a new style sheet that you add the styles to. This can avoid issues with conflicting sheets that can break or style your site incorrectly.
Using HTML for styling layouts
This one is a bit tricky because themes often couple CSS Selectors with HTML Structure. This makes it harder for a person to make changes to the HTML structure without breaking vital styles that make the page readable and functional. For instance:
In the example, if you change the structure of the HTML of the former, you would lose all the stylings for that element because it was dependent on the structure. Instead, decoupling the style from the structure, like in the later through classes, will allow you to reuse your CSS even if you change the HTML structure.
A properly formatted page is a well-optimized page.
The content of your page is a huge factor in rankings. So is properly utilizing the webpage elements. Specifically, HTML, CSS, and JavaScript, play an equally large role in making your page SEO optimized. By knowing the role of each web element and using it in the appropriate manner, you can increase your ranking. Simply build a page that is both functional and attractive. If you are thinking of switching themes for a CMS or adding custom CSS or JavaScript to your pages, take a second look and make sure you’re using your web elements right.
