HTML is a markup language that is read by the web-browser and translated into the website that a user can interact with. HTML stands for Hyper-Text-Markup-Language. There exist numerous HTML elements that make up each web-page. To get acquainted with some of these, right click on your favorite website and click on “View Page Source” (this procedure varies slightly from browser to browser).

You should see some code resembling the one listed below. Reviewing this portion, you’ll notice that there exist elements and each element has an opening tag and a closing tag. For example, <div class=”col-xs-12 … col-md-4”>…</div> has other elements within it, and each of those elements have an opening tag followed by a closing tag as well. For now, it’s not important to know what these elements do, just to be aware of their existence. After carefully reading through each div section, you’ll notice a pattern emerge. There seems to be a website link, an image link (by observing the .jpg extension) and a title describing the contents of that image. If you had no knowledge of HTML code right now, you could still easily deduce that three website elements will be constructed, and you would be right.

What does the browser do with this code? It translates it into the more visually appealing websites. Websites, for the most part, need to do the following:

• Provide visually appealing content. The attention span of a person browsing through the countless websites is relatively short. If a user can’t figure out what the website is about in a few seconds, they’ll leave it and look for another one.
• Provide quality content. Once the website has attracted the user, the next goal is to have the user stay on it as long as possible.
• Provide simple navigation. If the user can’t figure out how to navigate between the pages, the user will abandon the website.

Different categories of websites, such as e-commerce sites, possess further requirements.

How does the browser translate the above code into a website? That’s the magic of programming that companies that make the browser worry about. You, as an HTML creator, don’t need to hassle yourself with those questions. All you care about is what the HTML does when you view it in a browser. Let’s look at what the code on the previous page produces.

Three images are displayed. If you remember from the source code discussion, we said that three elements are going to be created. We also noted that each element will have:

• An image: by observing the elements there is an image in each element.
• A title: again, we can see a title in each element.
• A link: we don’t see a link, but when we scroll over the image, we notice that the image changes. We can only assume that if we click on the image we will be redirected to another page.

By adding more elements in a structured manner, websites are created. The first four chapters deal with creating a website. We’re going to use HTML to build the structure of the site and CSS to style it. In the next section, we’ll start examining some elements in more details. We’ll only study enough elements to be able to produce a simple website. Once you know the basics, you’ll be able to expand your knowledge further by searching for HTML syntax online.