Quick snapshot of the most basic HTML elements

Quick snapshot of the most basic HTML elements

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 head section is basically the page’s identification container. It does not have to do anything with the structure or appearance of the page. This section defines what the page is about, what name or title it has, what icon it displays on the browser tab, what external files it links to (like CSS and JavaScript files), what information it has for the search engine robots, what contents it is offering, etc. Mastering an HTML head section can be tough as beginners, because it involves and affects a lot of the SEO factors associated with the HTML page. You must learn how to create a perfect SEO friendly HTML head section.

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

Definition

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.

Usage

You just write <label></label> and inside the tag put whatever tag you want to.

The hyperlink

Definition

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.

Usage

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

Definition

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.

Usage

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

Definition

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.

Usage

<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

Definition

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.

Usage

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

Definition

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.

Usage

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

Definition

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.

Usage

For ordered lists

<ol><li></li></ol>

For unordered

<ul><li></li></ul>

The table tag

Definition

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.

Usage

<table>

<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

</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

Definition

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.

Usage

<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.

Final thoughts

These are the most used tags in HTML web design. As a designer I can tell you that whatever websites you view on the internet are more or less made up of a very complex combination of these elements (along with some very professional CSS and other technologies like JavaScript and AJAX). Only a few other tags from what has not been mentioned here are put to use in regular designing.

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.

Comments are closed.