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.
Why separate them?
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.
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.