HTML (Hyper Text Markup Language) is the first language you will need to learn when building web applications. Even if you are not serious about web programming, or just want to get started with programming in general, HTML is a good place to begin.

For beginners, learning HTML can be easy. However, it gets complicated when you combine it with other frameworks like CSS or JavaScript. To create a quality application, you need a good understanding of HTML.

Over the last 23 years, since the initial version of HTML was released, it has evolved to HTML 5, the latest version, and is constantly being updated to new standards. You can head to our learn HTML page to read more about HTML, including about books, conferences, gurus, and much more.

In the first part of the Ultimate HTML tutorial guide, we will learn how to get started, and it is perfectly suited to a beginner.

Markup language

A common misconception, HTML5 is not a programming language. It is a markup language. Markup languages are used to process information and provide guidance on how that information is represented. The markup symbols are used to display the content on the World Wide Web. HTML tags serve the purpose of handling different type of information such as text, video, audio, etc.

To get a clear understanding, you can compare HTML markup language with a text document where you can make words bold, italicized, large, small, etc.

A tag in HTML is where all the fun starts. We will cover it in a moment.

Let’s take an example.

Killer Frost is not [italics]evil.[/italics]. As you can see, I have used an italics entry tag and exit tag to italicize the text. It adds formatting to the text without adding any functionality to it. As a markup language, works the same way, as opposed to being  a programming language.

So, where should you put HTML into your resume?

One of the biggest questions beginners have is where should they put HTML if it doesn’t qualify as programming. The best way to list HTML into your resume is to list it under technologies, along with any other technologies you learn. For example, you can list Git under technologies. Don’t know about Git? Read more here.

So, now we have covered the Markup Language part of HTML, but what does Hypertext mean? Let’s cover it below.

Hypertext

Now, what does that mean? Coined by Ted Nelson in 1965, “Hypertext” simply means text containing a link. The term became popular during the initial stages of the World Wide Web. Since each web page is connected with others using hyperlink, it is easy to understand where this part of HTML comes from.

Another key term you need to know is “HTTP”. HTTP stands for HyperText Transfer Protocol, which handles the data transferred between the server and web page.

Hello, World!

Alright, enough theory! Let’s dive deep into some examples. We will tackle the different concepts of HTML using examples. We will also ensure that important concepts are covered and explained through some sample code.

What you will need?

All you need is a text editor and a modern web browser such as Google Chrome, Mozilla Firefox, or Edge.

First, create a new text file and name it index.html

The file will work with an extension of either .html or .htm, but we will stay with .html.

Now, copy-paste the below code into the index.html file.

If you are new to HTML, you might be confused by all that code. Don’t worry, we will go through each line and try to make sense of what’s going on. However, before we start we need to understand the concept of HTML elements and tags.

HTML Elements and Tags

Elements are the building blocks of HTML. There are many elements in HTML such as strong, anchor, img, etc.

Tags, on the other hand, help build the elements. In HTML, most elements have a pair of tags — one for starting another for closing. Let’s take a look at an example from the above code.

The <h1> is the opening tag, whereas </h1> is the closing tag. These tags, along with the content between them, constitute an element. In this case, the <h1> tag is pre-defined and sets the font size, style, color, etc., for the text following it, until it hits the </h1> end tag.

Also, the opening tag can contain attributes which modify the behaviour of the element as a whole. Attributes are a fun way to customize each element. For example, the anchor tag takes the “href” attribute to link to another page, either on the same site or an external one.

Similarly, <img> tags require src attribute to mention the source of the image. As you can see, some attributes are compulsory, while others are not. Let’s see an example of an attribute that is not at all compulsory to use.

target=”_blank” attributes enables the link to open in a new tab rather than on the same tab. You can find the whole list of anchor tag here.

Note: Some tags are self-closing and doesn’t require a closing tag. For example, <br/> which inserts a break-line.

Now, that we have understood the concept of elements and tags, let’s revisit the Hello, World! code.

<!DOCTYPE html> tells the browser that the code is in HTML 5.

Each html page starts from  <html> tag. All the content of that page should be within that tag. Hence, you will see the last tag as </html> closing tag.

<head> tag specifies the general information about the webpage. It contains <meta> and <title> tag. Every HTML page should contain this.

<body> tag contains the content of the HTML page. Every HTML page should contain body tag.

<h1> tag simply puts the “Hello, World!” on the webpage.

That brings us to the end of part 1. Stay tuned for the part 2.