Last time, I wrote a post about the 10 html tags that you most likely never heard of. Check this post out over here. This time, I will be talking about the 10 html tags that every web developer should know. The reason I am writing is post, is because these tags are the most used tags, and if you don't know them, then you would've learned something new today.
1. The <div> Tag:
This one stands for devision. It is probably the most used HTML tag on any website out there. What it does, is gather related elements together in a devision (or a section), in order to isolate them from other elements. This allows for better styling of these elements and and makes it easier to move a group of elements to a certain position on the page together. It also helps make websites more responsive (in combination with CSS of course) if used correctly.
This is a block element, which means that it is rendered with line breaks before and after it. However, this could be simply changed by applying a style="display:inline-block;" attribute to it, or using any of the other two methods of applying the same CSS to this <div> tag. The most popular way to style a div tag is by using the class="" attribute
A live example of the div tag could be found over here.
2. The <a> Tag:
This is also one of the most used tags on any website out there. Do a simple Google search of anything, and click on any of the results. You just used an <a> tag by doing so. As the example implies, this tag does create what we call links, or URLs (Uniform Resource Locater). The <a> tag stands for anchor. Just imagine how many anchor tags you clicked to get to this post. At the very least, one. Without this tag, the Internet would be very difficult to use.
In an anchor tag, the link is defined by the href="" attribute. This attribute stands for Hypertext Reference. Without this attribute, the anchor tag is not a hyperlink, or in other words, it would link to no where. One more amazing thing that the anchor tag can do, is to link to different sections or elements of a page, and if you click the link, it will take you there. Have you ever clicked such links that took you to certain parts of a page ? Tell me in the comments below.
A live example of this tag could be found over here.
3. The img Tag:
As the name implies, this tag is used to display images on a website. The image on the top of this post, it uses an img tag. And so does every image you have ever seen on a website. The link to the image is defined using a src="" attribute. That's how the website knows where the image is located on the server that is hosting the website, or even on another server. This tag also takes another important attribute and that is the alt="" attribute. This attribute holds the description of what the image resembles, and is displayed if the image failed to load, or is read to visually impaired people using screen readers. The last two very important attributes this image accepts are the width="" and the height="" attributes. These attributes, are used to resize the image in order to make it fit perfectly where you want it to be.
A live example could be found over here.
4. The <form> Tag:
Forms are one of the most important ways for the owners of a website to take input from users. You have used this tag before if you have signed up on any website or even logged in. It is that attribute that takes the information and hands it over to the back-end to be processed. It could also be processed on the client-side though, but I will not get into this discussion now.
The Form tag has two ways to send this information over, either by using a GET request or by using a POST request. The GET request puts all the input in the link, which is bad if you have any plug-ins that could read the links in your browser and send that data somewhere else, especially if it is sensitive data. That's why the POST request is used quite a lot. It hides this data from the link and sends it over in a more secure way.
Forms take an important attribute called action="". Sounds exciting, right ?
This attribute is important, since it decides where all this data is gonna be sent. So be careful what you put in there.
A live example could be found over here.
5. The <input> Tag:
This tag is used in combination with the form tag, and it creates input fields, where you put all the data. Like when you log in, where you put your username and password.
This tag takes quite a few important attributes, the first one is the type="" attribute. This one determines what the type of input should be. It could be text, password, email or any other type of data. Then there is the name="" attribute which gives the tag a name, which is important if you want to use something like the <label> tag, more on that in my previous post.
Then there is the required attribute. This makes it absolutely necessary to fill out the input field with acceptable data before submitting the form. And there is the placeholder="" attribute, which sets a placeholder text for the <input> tag, that disappears as soon as any input is given. There are also the min="" and max="" attributes which determine the minimum and maximum numbers that could be entered in an input field. And there are the minLenght="" and maxLenght="" attributes which determine the minimum and maximum number of characters that could be entered into an input field. Many people often mix up the latter with the former and end up spending hours trying to figure out why their input fields are not doing what they are "supposed" to do.
A live example could be found over here
6. The <select> Tag:
If you have ever used a drop down menu before, to select one item of many, then you have used this tag before. The <select> Tag is used to create drop down menus along with the <option> tag. The <option> tag is what allows you to see all the options of the drop down menu.
A live example could be found over here
7. The <option> Tag:
The one that I talked about earlier in previous paragraph. It creates the options in a drop down menu. This takes 3 important attributes. The first one is the value="" attribute, which determines the value that should be submitted to the back-end. By not putting anything inside of this attribute, the option will not submit any data from the <select> statement to the back-end. If you use the required attribute in conjunction with the empty value="" attribute, you create an option that can't be submitted, but is displayed in the dropdown, and one with a value most be chosen instead.
A live example of this tag is available in the previous section.
8. The <span> Tag:
This tag is much like the <div> tag, however it has one difference. The <span> tag is by default an inline element. Which means, it doesn't have line breaks before and after it. Just like the <div> tag, it is used to group different elements and style them. But it is mostly used to group text.
A live example could be found over here.
9. The <link> Tag:
Without this tag, websites would be so damn ugly. This tag is usually put in the <head> tag, however you can put it wherever you want, as long as it makes sense. Remember that it will load after everything before it. It would make sense to put CSS stylesheet related links as far to the top as you can go. So they can load first and the user doesn't have to see a broken page, even for a moment. This tag can link to various external resources, however it is mostly used to link to CSS stylesheets.
It takes a few important attributes. The first is the href="" attribute, if you read this post, you already know all about it from the section about the anchor tag. The second one is the type="" attribute. This attribute tells the browser what the type of the linked document is. In most cases the type would be type="text/css". The third and last important attribute is the rel="" attribute, which stands for relationship. It tells the browser what to do with the document, or how it is related to the html document that is linking it. The relationship isrel="stylesheet"in most cases (when used for CSS).
A live example could be found over here.
10. The <script> Tag:
This tag is a very important tag. It allows you add javascript and jquery to websites. This tag makes your websites much more powerful and capable, and even more beautiful. With javascript you can add amazing animations, or even create games that run in browsers using WebGL. It even allows you to secretly add coinhive into a website and have it mine on the computers of anyone who visits it, if you are a super villain who wants to get rich off of cryptocurrency. Now jokes aside, you can see how powerful this one tag is and why it is very useful.
This tag takes a src="" attribute, to define the link to the external JS document. Or you could just write the script inside of the tag if you want. Then there is the type="" attribute, which tells the browser what is inside of this tag. The type is type="text/javascript" most of the time. And as of HTML5 there is now an async attribute, that tells the browser to run the external JS in an asynchronous mode, which allows for much better speed. This is especially useful, since javascript is known to be rather slow.
You could put the <script> tag anywhere in the html document. But it is much preferred to put it above the </body> tag in most cases, so that the scripts don't bog the website down, and make it take too long to load. However, in some cases a script may need to run before anything else, and in this case it is put in the <head> tag.
A live example could be found over here.
I hope that you enjoyed this post. I personally enjoyed researching for it and writing it quite a lot.
If you happen to find any mistakes in this post, feel free to correct me in the comments. Life is a never ending classroom afterall. :)