HTML Tips&Tricks

HTML is more than just a markup language

HTML stands for HyperText Markup Language and a lot of developers tend to look at it that way. But HTML can and should be utilized for much more than that.

Below we will list several reasons why knowing HTML is important and how it can be used for more things than just as a page skeleton.

1. Accessibility

Because most developers, if not all, have fancy equipment we tend to forget that there are people who don’t have it. First, there are users who are using screen readers. This type of equipment tends to rely on our code, like to find navigation with <nav> tag, or main content with <main> tag. Maybe the best example would be the <button> tag. Since we can make any element look like anything, with CSS, a lot of developers tend to use <a> tag instead of <button> tag. That is just wrong.

If you want to learn more about accessibility you can on MDN.

2. SEO

Yeah, that heavenly optimization that we all strive for. Search Engine crawling robot is just that a ROBOT. It only knows what you tell him. No more, no less. Someone will say that these robots are smart they can conclude what are you writing about, without HTML to tell it. Yes, that is true. But if you put <h6> or <p> instead of <h1> robot will 100% think: “This heading is not that important.” Why? Because no one knows your content and your intentions better than you.

Apart from “regular” HTML you have to put in use all that <head> tags like title, meta keywords, meta description, language, responsive tag (yeah, that’s the first clue for the robot if your website is or is not responsive).

3. Easier customisation

This is maybe, or maybe not true. But I will definitely say it is. If you use <p> instead of <span> there is no need for display: block. Or if you use <button> instead of <a> in a form, you will not need to transform it to <button>.

4. Attributes are too underestimated

Be smart and be creative with your attributes. E.g. if you use the title attribute on any element, you will have a tooltip. Or you can target all your checkboxes by using [type=”checkbox] in your CSS. Also, you can use attributes for dynamic content property.

You can create your custom attributes and instead of using precious localStorage space, or cookies, or even hidden fields, you can save data inside your custom attributes. E.g. If you need to create a dynamic URL based on chosen element, or to save a product id, or anything. BE CREATIVE.

I hope this was useful to you and this will be the reason why you will pay more attention to HTML.

If you have any questions or anything you can find me on my Twitter.