HTML is an evolving language and has been through several revisions since its creation. HTML 1.0 was first released to the world in 1991, the same year the World Wide Web made its debut. HTML5, published in 2008, is the latest and greatest iteration.
Let’s break down the definition of HTML, which stands for HyperText Markup Language. HyperText simply is the way you move around the web. By clicking on special text called hyperlinks – those clickable words, phrases, and images you see on web pages – you are instantly sent to another page on the web. The word hyper means that you can go anywhere on the web at will – there’s no linear order to where you can go.
Markup refers to HTML tags and what they do to the text inside them. They mark the text as a certain type, such as italicised or bold. Tags are characters wrapped by angle brackets (< and >) and they perform different functions.
It’s easier to understand HTML when you see it in action. Suppose you want to create a simple web page about yourself, with your name up at the top of the page and a few details about yourself. Let’s do a quick mock-up of what the beginnings of a very simple profile page could look like:
Hometown: Dublin, Ireland
Birthdate: June 20, 1981
Profession: Web Developer
Favorite Hobbies: photography, hiking, and travel
The name, Mary Murphy, is the heading on the page and it’s centered with a font color of blue. Also note that the listed categories are italicised. To create this page as a web page that can be viewed on a browser, there are certain HTML tags that would be used to get the desired effect. Every tag comes as a set – there is an opening tag and a closing tag. Let’s take a look at the tags used for this example:
“Mary Murphy” is the heading on the page. To designate the name as a heading, the opening and closing tags, <h1> and </h1> will be used around the name. There are a total of six possible heading sizes in HTML, with <h1> being the largest and <h6> being the smallest.
To make the font color of the name blue and center it on the page, you would include what’s called an attribute to the opening tag, <h1>. An attribute gives a description to a particular component in the HTML code.
In this case, you would use a style attribute in the opening heading tag to change the font color and text alignment, like so:
<h1 style= “text-align:center; color:blue”>Mary Murphy</h1>
This would make your heading, Mary Murphy, centered on the page with a font color of blue.
Now let’s talk about paragraph tags, <p> and </p>. They are used to define a block of text as a paragraph. Even though in our profile page example we don’t have an entire paragraph of text, we can still use the <p> and </p> tags so that white space will be added between the lines, as if they were different paragraphs.
We also want to italicise some of the words on each line. And the way to do this is with the emphasis tags, <em> and </em>. When these tags are wrapped around a particular word or phrase, the characters in between the tags will be italicised on the page:
<p><em>Hometown:</em> Dublin, Ireland</p>
In the above line of code, the word “Hometown:” will show on a webpage as italicised, but “Dublin, Ireland” will not.
This is just a simple example of how HTML works. Anyone who wants to learn how to code and create web pages should start learning the fundamentals of HTML and gain an understanding of the language and how it works.
It truly is easy to learn and there are plenty of free online tutorials, such as HTML Rocks and Codecademy, to get you started in creating your own webpages from scratch.