You Don’t Know HTML
There were many incidents happened with me, where I saw people saying that HTML is very easy and you may learn it in one single day. Hmmmm…. so yes you can learn writing HTML in one single day but it will take ages to understand the each and every concepts of HTML.
In this article I’ll explain few concepts that I learned too late, and you should know these concepts so that you can write better web apps.
1. Every element in HTML is inline.
I saw everyone saying that in HTML there are two types of elements. (months back I was one them) inline and block.
But In reality every element is inline. It’s the browser CSS which make an HTML element inline or block.
.
To check this, simple inspect the element and search for user-agent-stylesheet
2. Types of Button
In HTML we have three types of button. button, submit and reset.
type=”button” — This is the normal clickable button. It is advised to always provide type attribute to the button, we generally tend to miss this. The type attribute let browser and search engines know the type of action associated with the button.
type=”submit” — This type is specific to forms. If we have in our page, instead of creating a handler to handle onSubmit we can leverage this type. Once we make a button of type submit, whenever it is click the form is submitted.
type=”reset” — This type is also specific to forms. The most elegant way to clear a form values. If a button has type reset, whenever it is clicked, the form is going to clear every values in it.
3. Semantic Tags.
Most of the UI based libraries and framework aren’t SEO friendly. And sometimes we even make it worse by using div everywhere. I saw this mistake in most of the projects that developers working in React or Vue, simply write JSX/templates only using divs .
We should have proper understanding of the semantic tags. With HTML5 we have different tags for different purpose. And Search engines use those semantic tags to identify content in our webpage.
We can understand this by an example:
Suppose in webpage we have to show address of a company.
Generally we wrap it in a div:
This is not SEO friendly at all. In such cases we should use the address tag.
The better way to doing this is:
Similarly, we should use time , article , main , section , footer semantic tags. Instead of using div always.
4. Magical Link Tag
Few years back, I was using link tag only for including CSS in my project. With time requirement changed and project evolves and we started facing issues with our website. Issues like slow load, security concerns in opening links.
I was amazed to know that with the link tag, at some extent, we can solve all these issue. Link tag is not limited to add CSS file in our application. It provides powerful features, like
preload — To start loading of content early in time.
prefetch — To pre-load next page content
des-prefetch — To resolve DNS of other domains early
no-referrer — Restrict cross site attack.
nofollow — Whenever a link is clicked, the domain of the link knows from where it came, to stop this we can use nofollow
and many more… 🦚
5. Fieldset and Legend
Lets see an image, does it seem familiar ?
Yes, we can make this UI with the help of HTML, borders are called fieldset and the Contact details is called legend.
Here is the code for above UI:
I hope I made you to learn something new.
Cheers!!!
