A Developer’s Tool: The Hypertext Markup Language(HTML).

In a world growing and expanding daily, the online space is now more seen and utilized. Everyone has access to electronic devices like the mobile phone, laptops and so on. With the aid of these devices, you can visit various websites, check out a lot of web applications, log into your favorite mobile app and so much more.

As Developers, we build websites, web applications, apps and based on your years of experience over time and your hunger for more knowledge and practice can do a lot more in this field. Every professional be it a doctor, banker, lawyer and even a professor have tools they make use of to get the job done in their respective fields.

For a Developer, one of such tools is the Hypertext Markup Language(HTML). What is an Hypertext Markup Language?

HTML is the foundation of every website and web application. Let’s look at it this way. You are working on building your house. To build a house, there needs to be a foundation or a frame work, this is the bedrock or building block for the house. Then from there, you you can start going into more details like the roofing, the windows, the floors and so on. HTML is like the framework, it’s the first step to building your websites. The content, wordings and structure of your website is done with HTML. Now to help you achieve this, HTML is assembled with different components such as tags and elements.

How did HTML start? The first version of HTML was released in 1991 along with the first web browser and web server.Sir Tim Bernes Lee brought about the development of HTML in fact the first web page was developed by him in 1993.

HTML is relatively easy to learn and understand. As Developers, we just need to know and get familiar with its syntax. As mentioned earlier, HTML is assembled with different components, one of its components is a tag. Tags are keywords on your web page that define or describe how your web browser should format and display your web page. Most tags consist of an opening tag and a closing tag. An opening tag is recognized with having a “<” and a “>” enclosed around it while a closing tag is recognized with having a “</” and a “>” enclosed around it. There are many HTML tags, all of which will not be covered in this article therefore it is required on your path to do a personal research on the various HTML tags available and what they are used for.

The simple HTML tags used frequently are the DoctypeHTML tag which specifies to the browser that the file type is in a HTML format, the html tag which is a very important part of the structure of an HTML file as the content of the page is written in between this tag, the head tag which contains essential and crucial information about your web page including the title of your web page, the body tag where the content of your web page will be written, the heading tags, the paragraph tag, bold tag that helps with making chosen content or words stand out, italics tag and so much more.

An Element on the other hand consists of an opening tag enclosed in angle brackets and a closing tag also enclosed in angle brackets where you can write something in between like we see in the diagram below.

It can also be empty, an example is the line break tag(<br>). The rules and structures for elements and tags are known as HTML specifications which is maintained by the World Wide Web consortium or W3C. Whenever the HTML specification changes, a new version of HTML is standardized, the current version is HTML5.

In HTML, linking web pages is done using anchor tags. Anchor tags create hyperlinks or links which is used to link several web pages that form a website.

To add images to your web page, you use the img tag. We use img tags in HTML to link to image files. The image tag then creates a placeholder for the image on the web page. To do this, you type “img” your IDE and the source attribute of your image. You can also regulate the size by adding or setting the “width” and “height” attribute to a reasonable size of your choice. It is also important to add a short description of your image using the “alt” attribute. This assists people using assistive technologies and also helps in search engine rankings. The image below explains it better:

Tables are another essential part of a website. HTML tables look similar to the rows and columns in a spreadsheet software. It also consists of rows and columns that allow you to neatly organize content. The image below shows the format for creating a table in HTML.

HTML forms are very important. It one functionality that makes online shopping possible, in fact we all log into our favorite apps with the aid of HTML forms. You can use forms practically everyday on the Internet. How do you create HTML form tags? You create forms with HTML form tags. Forms also have an optional form attribute called “action”. This specify the URL or path that the form should submit the request to. We also have input types, this specify to the computer the type of input a user is expected to enter. Different input types include text, password, checkbox ,radio and so much more. The image below explains it better:

There are a lot more tags, elements, attributes and so on that make up the HTML and make it a building block for every website and as a developer, you need to be well grounded and of course familiar with your tools so why not research personally also on what more this amazing tool of ours has to offer and how we can maximize its abilities to the fullest.