We have all seen tags such as <b>, <a>, etc. in HTML code in this post we will explore what those tags mean and what they do. To understand this we must first learn what HTML is. According to Wikipedia, HTML is the standard markup language for documents designed to be displayed in a web browser. It is used mostly to make the pages that you see in your web browser, in fact what you are reading at this moment is written in HTML code, just not by me.
As you see above what I write is enclosed in a <p></p> tag and within that tag we have an <a></a> tag for the word Wikipedia to become a link. That is a very simple example of HTML tags. Good thing the web browser translates HTML code to give you a better user experience. As web developers, we will use these HTML tags to make our web page structures. A couple of basic rules for HTML tags are that they usually will come together in pairs for example if we use a <body> tag we will close that tag with a </body> tag as you see the difference is the slash in the closing tag. The first tag is called the opening tag and the second tag is called the closing tag. Of course like every rule there are always exceptions to the rule.
Structure of HTML
Below we will see a simple example of HTML code that I will further explain.
We start with line 1 <!DOCTYPE html>, this just defines the code to be of the type HTML. On line 2 we are identifying the language of the text to be set to English. HTML supports most languages there are many to choose from, you can even be more specific and use en-gb for British English. In between the <head> tags, this gives you the information about the HTML code. Here is where you will <link> your CSS code to any other libraries you will use such as semantic or bootstrap. You also have a <meta> tag, which tells the browser how to view and control the page’s dimensions. There are other tags you can use but these are the most basic. The next part of the code is encompassed in a <body> tag, this is what will show on your page to the user when the code is read by the browser. This is also where you will use most of the tags that I will show you later. Unlike all the other tags the <head> and <body> tags can only be used once.
HTML Elements List
- <h1> — <h6>: These are heading tags, they range in size from h1 being the biggest and h6 being the smallest. The heading above is in a <h3> just to give you an idea.
- <p>: This is a paragraph tag, it is normally what your basic text is wrapped in. For example, most of this document will be wrapped in a <p> tag, as you saw in the first screenshot.
- <br>: This is a break tag, it is used to start a new line or insert a breakpoint. It is like pushing enter instead of waiting for the width of the screen to start a new line.
- <a>: This is a hyperlink tag, it is used to make a text link to another page or jump to a part in your web page. For example, pushing on the word google will take you to the google website.
- <link>: This is used to link your HTML code to external style sheets for the design of your webpage.
- <li>,<ul>, <ol>: These are tags to make a list, you will always start with <li></li> tag then in between those opening and closing tags you will either use <ul> or <ol> tags they stand for organized list and unorganized list, <ul> will give you bullet points as you see in this article and <ol> will give you a numbered list.
- <img>: This is an image tag, it is used to put images in your webpage. It is also one of the few tags that do not use a closing tag.
- <form>, This is a form tag, it is used to create forms and accept input from users it can contain many other tags within for check boxes, dates, text fields and so on.
- <div>: This is a divider tag, it is used to make containers on your webpage that you can in turn use for styling different sections of your page and acts as a separator.
Conclusion
So now you have seen what basic HTML codes are and what they can do. There are many more tags that were just most of the basics, there is no need to memorize them all a quick google search can lead you to find out all of them. You can also click on this <a> tag to get you to the w3schools page of HTML tags. Just experiment with it and you can be on your way to making beautiful web pages.
