Basic HTML is very easy to learn. Once you read this article, I can bet you would grasp about 80% of HTML now itself! If you have some interest in web designing, you can grasp HTML with ease. I learned HTML in 7 days and mastered almost 70 to 80 percent of it in the next 2 months. It’s that easy and you can do it too.
A basic overview is already in one of my previous articles. This article is about knowing powerful tags and common tags that are frequently put to use in web designing.
HTML can be divided into 3 main sections – the head, body and foot. The head and the body are the major sections of an HTML page, while the footer region is often not included in modern HTML coding. Now, let us see what these sections are, and how important and relative they are to an HTML page.
Anatomy of a basic HTML page
The body section, on the other hand, is not responsible for any of the above official details of a webpage. It defines to the browser what structure or graphical represented must be displayed when a call to it has been made. It lays down the basic architecture of the display – defining buttons, styles (defining CSS selectors), tables, div structures, HTML forms, inputs, hyperlinks, labels, images, etc. The body also defines any textual content and visible content possible. All matter to display on a webpage must be contained within the body tag.
Let’s start coding some basic HTML elements
So, let’s start with the 5 most basic HTML elements, and then we’ll move on to the 4 toughest HTML elements.
The Label tag
This one is pretty easy. This is mainly used when you need to put some text for the user in front of an input field or some hyperlink maybe.
You just write <label></label> and inside the tag put whatever tag you want to.
The hyperlink is a very important tag in HTML. One of the most useful basic HTML tags. With a hyperlink, you have the power to link more than one HTML pages with each other. For example – The labels that you see often on top of websites and pages (like HOME, ABOUT US) are all hyperlinks. Once you click on them, you are sent to some other page.
Defining hyperlinks is very easy. You just have to write <a href=””></a> Inside the href attribute, you must write the unique URL of the target page. Within the <a> tag, give a string that you want to display in the frontend for the user.
The header tags
Header tags are basically used for two purposes. First, they can be used to print different sized fonts on a webpage. Starting from h1 to h6, they are of varied sizes. So, when you write something with a large font, you use h1; and vice versa. Secondly, header tags are used by search engine robots to extract information about the webpage where they are used. So, you must use your target keyword in h1 and h2 tags very frequently.
Using header tags is very easy. Just write <h1></h1> or <h3></h3> whichever number you want, and within the tag write your text.
The image tag
The image tag is used to display images in a webpage. Images also have an attribute called “alt”. This is the attribute that is used by robots to detect page information. Alt is the short-name for alternate. It is used to give an alternate text to the image.
<img src=”” /> is the syntax. Src attribute should contain the full address of the path where the image is present. It can be an URL or a local path.
The paragraph tag
The paragraph tag is very simple. It helps segregate content into a synchronized block manner. Paragraph tags are also often used to keep clean design, so that the elements do not fall very close to each other.
Using paragraph tags is easy. Just write <p></p> and include all your further codes inside this tag. So, the codes you write inside will fall under one isolated block.
Among the tougher tags are some very commonly used architectures. Without these, your HTML elements would be incomplete.
The form tag
Forms are used to pass user selected or provided data onto some other page, so that this data can be used or manipulated further to give back a proper response to the user. Forms usually have input fields of multiple manner. These input fields collect the information and send them to some other page using to RESTful methods GET and POST. These methods are used throughout the World Wide Web and is handy in all web services. I have already described in one of my write-ups how you can use JQuery and PHP together with POST method.
The form tag has two attributes – action and method. The method attribute is for defining the type of data transmission, and the action attribute specifies the target file name where the data would be sent. So, the syntax is like this – <form action=”” method=””></form> Inside the form tags, we generally have the input fields defined. Learn more about forms here.
The list tag
The list tag is used to display text in a listed format. You can consider list to be the bulleting and numbering option that is used in Microsoft Word. It is exactly the same. Although, we can do some advanced CSS designs with list items and make them perform differently. Lists are of two types – ordered and unordered. Ordered lists are the ones that are numbered. It display the items with numbering beside them. Unordered are the ones that have symbols beside them.
For ordered lists
The table tag
As the name suggests, if you require a table like structure on your webpage, you can use this tag. It is helpful in making a row-column combination; just like an excel sheet. However, including tables is web design is considered a bad designing practice nowadays. Instead you should shift to table-less designs.
<tr><td></td></tr> This is one full row. The tr is the table row and td is the cell.
<tr><td></td></tr> You can insert as many cells inside one row, and again as many rows inside a table
Colspan and Rowspan are two very vital parts of table design. But, in order to expertise them, you must learn them thoroughly first. So, try and be an expert in handling colspan and rowspan for HTML tables.
The div tag
The div tag is like a container. It was introduced to contain child elements like forms, images, inputs, lists, etc. It helps in breaking the page into multiple systematic blocks that can be styled or functioned differently.
<div></div> is the syntax. You must write down all child code syntax inside the tag. Add CSS classes or IDs accordingly to give unique styling and functionality to the div.
Apart from all of the above, we have some very significant tags – the input tags. There are various types of input tags and they cannot be understood in such short descriptions. So, do have a look at this article on HTML5 forms and input tags. Here you will have a better understanding and it also has a live demo. So, you can try your hands on it too.
I have mentioned in my previous write up too, that W3Schools is a very good point to start from. The information I mentioned here for you, will enhance your knowledge further.