HTML, or Hyper Text Markup Language, is one of the founding programming languages of the modern Internet. First proposed in the early 1980’s as a hypertext system for the fledgling Internet, HTML was originally designed and advanced by web pioneer Tim Berners Lee. Today HTML is the principal language by which web pages and text are displayed or augmented in certain practical ways on web browsers.

Since 1991, when HTML was first extensively developed, 5 successive implementations have been created. The first of these was HTML 2.0 (1995) -the first truly formal, fully fleshed out HTML standard. Since then, the standards that followed were HTML 3.2 (1997), html 4.0 (1997-98), html 4.01 (1999-2000) and finally (to date) HTML 5 which is still a work in progress that has not yet been formally released. This latest implementation first came to widespread public attention as of 2010 but is still only partially being seen in use.

Basic HTML is not particularly difficult to learn and can be quite useful for some basic web based programming projects. However, the language is quite scalable to also encompass far more sophisticated projects.

What we’re going to go over in the following paragraphs is a basic introduction to how HTML works and how you can get started on learning it effectively, from a strong foundation.

The Basics

As a singularly basic rule, what you should bear in mind to simplify your perception of HTML is this: it is essentially just a method of elaborately and dynamically structuring content inside a web page. By keeping this basic definition in mind, you’ll be able to always loosely understand what HTML can do for you and what it can’t.

In essence, HTML consists of four elements that define exactly what the language does; these are part of its name:

Hyper: Meaning that text is more than just a typical linear iteration of itself. The “Hyper” in HTML essentially means that the language is a tool for making regular text far more flexible, versatile and subject to more non-linear organization than regular text would be.

Text: Meaning that what you’re working with is still just text, completely consisting of all the Standard English letters and numbers. Basically, English words and numbers make up the programming language itself; they are what is used to formulate all of the markup tags that make ordinary text into hypertext.

Markup: This is the key component of HTML; the mark up is what makes the text “hyper”, making regular text into hypertext where necessary. Markup is the process that turns regular text content for a web page and formats it into something more dynamic and complex. The entire HTML language really just consists of a very diverse series of different markup tags and their attributes.

Language: Having formulated a complex series of English language based markup tags that can turn regular page content into hypertext content (essentially describing how the content of a web document will look) the complex pattern has to be called a “language” because this is what it becomes, but for computers to read and take instructions from. Additionally, as already mentioned, the HTML programming language also happens to be written in the English language, making it quite easy to pick up on and remember if you happen to speak English.

Tags and Elements

Now that you understand what HTML really means in its most basic form, you should understand that the key element, the “markup” basically consists of two main components. These are HTML Elements and HTML Tags

Elements

Elements are sometimes misidentified as tags and vice versa. This is partly incorrect, while tags are the markup that defines content in HTML (see below), elements are all of the content itself and the tags that bracket it. The content that makes up the specific (non tag) elements in HTML can be plaintext, images or other things.

Tags

Tags are series of pre-developed keywords that have been surrounded by angles and brackets whose function it is to designate them as such. All tags have a beginning angle/bracket component and an end angle/bracket component that surrounds them. To put the real basic nature of learning HTML simply: you need to learn exactly what all the assorted tag possibilities are and then remember how to best structure the angles and brackets around them for proper structuring of the actual page content (text) inside the tags. Remembering how to do these two things is the very core of learning HTML and getting it to work for you.

Examples of tags include the following:

Paragraph title headings: <h1> .. </h1>, <h2> .. </h2>, <h3>.. </h3>

Paragraph tags (these go at the beginning and end of a paragraph and thus define both of these factors; Also, note the slight difference between the two -one is the beginning tag while the other is the end tag just as mentioned in the introduction to tags above: <p> .. </p>

Line Breaks (These are simply used to define new line breaks in a block of text -placing multiple line breaks below each other extends the space between lines or paragraphs): <br>

Div tags Essentially, these extremely common tags define a general use box which takes up the whole width of its page space for text content: <div>..</div>

Container Div Tags Similar to the Div tags above except that these full wrap around the content they surround, forming margins of space on all sides: <span> .. </span>

The number of tags is considerably larger than this, but for the sake of space, and because this is just a basic introduction to HTML, we’re just giving you these to start.

However, here are a couple of code examples to give you an idea of how the tags above look and work:

<p>

We’re going to start here.

</p>

<p>

And then we’re going to continue down here.

And here!.

</p>

What this looks like as on-page text:

We’re going to start here.

And then we’re going to continue down here

And here!

One more example:

Psst, Psst, I want you to know something on the same line<br>But the HTML tag won’t let me!

What it looks like as plain text:

Psst, psst, I want you to know something on the same line

But the HTML tag won’t let me!

In this case, the <br> broke the full line down into two lines.

The bottom line with tags is that they operate as illustrated above. All tags follow the basic structure demonstrated above and all tags consist of English characters placed in patterns similar to those above. What tags do is break down the content page into a series of measured structures so that you can have your content take on a certain “shape”.

Once you learn to understand what tags do what and understand all the varied and possible tags, as well as how they can be positioned within the HTML code, you can visualize a certain page format and begin to implement it by writing in your HTML code. It’s worth mentioning that one of the reasons for repeated implementations of HTML, from 2.0 to the currently in-progress version 5, is the improvement of tagging to make it more efficient, easier to use and more fluid and versatile.

Final Words

Although the sheer volume of material that could be applied to a basic lesson on how to program with HTML is far more than we’re including here; the language itself is not extremely complex. Effectively programming with Hypertext Markup Language can be learned so long as you keep the abovementioned principles firmly in mind and work your way into greater complexity from there.

Most of what you’ll need to focus your heaviest efforts on consists of memorizing all the tag types, their possible positions and how to workably structure your HTML elements. Learning to integrate your HTML based page code with other programming languages is also an important step to take after you’ve dominated this Internet foundation language.

About the author: Thomas’ freelance writing career has seen it’s fair share of accolades and awards. When he’s not writing poignant articles about technology, you can find him covering mobile web designers in Chicago or playing on one of his vintage Gibson guitars.