What is HTML (Hyper Text Markup Language) - HTML Topic 1 - Introduction

Introduction

Today we will be talking about HTML, what it is, its uses and how it can be used precisely to achieve your desired designs. When learning anything, the one thing that matters first is to Understand what that stuff is, What it is used for and then finally how to use it, with that in your subconscious you will have a deep understanding of what you intend to learn, probably with a picture in mind of what you will actually design with it at the end of your training. I will try as much as possible to keep this tutorial simple and straightforward, but before we venture into this, I will also like to prepare your mindset like the soil that is being fertilized before the crop’s seed are planted giving the seeds higher chances of yielding great fruits.

HTML is an Acronyms or an abbreviation formed from the initial letters of other words and pronounced as a word and the breakdown of this Acronyms is below:

H = Hyper

T = Text

M = Markup

L = Language

With that we can come to a conclusion that HTML is a Language like other Languages we have out there, PHP, Java, C#, JavaScript to mention but a few of them, but what type of Language is it that makes it different from the other languages mentioned above, the differences lays in the third meaning of its acronyms (Markup), yes indeed HTML is a Markup Language which means that the HTML Language is Used for Marking up something which precisely are “Text”. So how do you markup Text in HTML, before we can better understand that, let us understand what the word “Markup” means, according to computing Dictionary, Markup is explained “as a set of tags assigned to elements of a text to indicate their relation to the rest of the text or dictate how they should be displayed”. 

With the definition above, we are getting closer to uncover the simple Understanding of HTML but not yet, lets underline few words from the definition above and use them as our Tickets to the World of HTML.

The first word we will want to deal with is “Tags”, - In computing, tags means adding a character or set of characters to (a piece of text or data) in order to identify or categorize it. E.g: <p> is an HTML tag and you could call it the P tag and this is used in categorizing all Paragraphs in your HTML Design Structure.

The second word in our list worth considering is “Elements”, - Internet Dictionary say’s an element is a group of people of a particular kind within a larger group E.g: “<p> This is a new Paragraph </p>” is an HTML Element and you could also refer to it as the P Element as this is used in Grouping text of the same relation or a particular pattern.

NOTE: An Element is a combination of an Opening Tag, a Content and a Closing Tag, Example: <p> Minisoft Group </p>.

The third word we will also consider closely is the word “Text”, - Internet Dictionary defines a text as the main body of a book or other piece of writing, as distinct from other material such as notes, appendices, and illustrations. E.g: “Welcome to Minisoft Group”, “About us”, “We are a Research and Product Development Company” are all text that could be Marked up with HTML’s Tags, categorizing them into a subset of Elements for the sake of Categorization, Hierarchy and Order.

NOTE: Apart from HTML, there are other Markup Languages like Standard Generalized Markup Language (SGML) and Extensible Markup Language (XML). Have you noticed that they all end up with an ML which denotes “Markup Language”?.

HTML From a lay man's Perspective

Let us look at HTML from a lay man’s perspective and see how HTML can be illustrated in the real world. Let’s use the House you live in for example, for that House Project to be standing firm both appealing to the eyes and giving you comfort, there were several Components and Elements used to put all things together, so we are going to Categorized them to suite our needs in this scenario.

CATEGORY A

Cement, Blocks, Pillars, Iron Rods, Beams, Gravels, Sand etc represents – HTML – Considering our Illustration of HTML, you will get to understand that HTML only have but one role to play in your web designing journey which is to give Structure to your site using it’s sets of tags and Elements like the <div> tag could represent your Blocks while the <span> could be represented by the Iron Rods.

NOTE: HTML has a Brother and one Sister that complements him, both handling different aspect of the whole workload to achieve perfection at the end of your Project, they are both named CSS and JavaScript respectively, CSS deals with the Beauty and aura of the whole masterpiece making the Website appealing to the eyes while JavaScript brings Life to your site, dealing with the Dynamicity, giving the site a dynamic and interactive nature to interact and respond to User's actions accordingly which in turn gives the end user a sense of communication with your site.

With HTML alone building the House with Rods, Beams, Blocks, Pillars etc, you can’t go in and start occupying the House because the House will be incomplete, that is the much reason why you MUST learn CSS and JavaScript too to have a complete basic Skillset to start Designing Great Web pages, but at this point we are only dealing with HTML and what it is but for a better understanding of our illustrations, I have illustrated the role of CSS and JavaScript below;

CATEGORY B

Paint, Plastering, Screeding, Wallpapers, Wall Drawings and Art etc represents – CSS – CSS does exactly what Screeding and Painting does to your house but this time to your Website, it brings out the Beauty and Aura.

CATEGORY C

Electricity, Bulb, AC, Television, Iron, DVD, Switches, Fridge etc represents – JavaScript – In a simple term, JavaScript brings Life, Dynamicity and Interactivity to your Website, when you press your Power Switch at Home, your Bulb comes on, illuminating the room with light, same applies to JavaScript on your Website, when you click on a Button that say’s change this website theme or color from Black to White, I don’t like black, am comfortable with white, it does just that.

In Summary: We have learnt what HTML is, what it can be used for which is to build Web pages and ultimately we have tried to bring it to real life with an illustration giving us an in-depth understanding of what it feels like to build a website and the things that we must learn to have a good grip on it. Our next topic will also follow this pattern with Illustrations in real life, we believe that with this illustrations, you will get to understand each subject matter better.