HTML

2. Your first HTML document

So at this point, you understand what exactly HTML is. You know what's next? Creating your first HTML document!

Saying hello

HTML is just mere text, likewise we can use any text editor to write it. In the discussion below, I'll be using Notepad on Windows for the demonstration but the steps will, more or less, be the same for other operating systems too.

  1. Open up a text editor

    Open up a text editor application on your computer.

    Here's my Notepad application:

    A blank text file in Notepad
    A blank text file in Notepad

  2. Write HTML code in it

    Go ahead and copy/paste the following HTML code into the editor:

    HTML
    <!DOCTYPE html>
<html>
<head>
   <title>Hello World!</title>
</head>
<body>
   <h1>Hello World!</h1>
   <p>This is my very first HTML file.</p>
</body>
</html>

    Hey, but I don't understand even a word in here! Don't worry. The goal here is only to make sure that you're able to create an HTML file and open it up in the browser; in the next section, I'll explain everything that's going on here.

  3. Save the HTML file

    Now save the HTML file anywhere on your system where it's easy enough for you to access it later on. For most people, this is just the desktop. Name your file hello.html.

    Don't forget to include the .html file extension at the end of the file's name!

  4. Open up the HTML file in the browser

    Head over to the location where you saved the HTML file. Right-click on it and open it up using your web browser.

    If the file's icon is already a browser image, just click-open the file right away; no need to right-click. But then if you need to edit the source code later on, you'll need to right-click and open the file with a text editor.

    At this point, you should see the following webpage:

    The hello.html webpage, viewed in the browser
    The hello.html webpage, viewed in the browser

    Congratulations! You just successfully created your very first HTML document (and webpage).

Understanding the code

Alright! Roll up your sleeves now, for it's time to make intuition of what exactly is going on in the code above.

Document type declaration

First things first, we have:

<!DOCTYPE html>

This is called a document type declaration whose purpose is to specify the version of HTML that the underlying document is using. In this case, <!DOCTYPE html> means that we are using HTML5, i.e. HTML version 5.

<!DOCTYPE html> is not as useful these days as it once used to be (in the early days of the Web). Today, we only include it as per the general recommendation.

The html root element

Next up, we have:

<html>
   ...
</html>

<html> marks the beginning of the document's information. Technically speaking, <html> is called a tag — more specifically, a starting tag. It denotes the beginning of the html element in the source code.

What's an element? Recall that HTML is a markup language where text can be given special meaning; an element is what gives it that special meaning. There are many kinds of elements in HTML as you shall explore in this mini course.

In this case, the html element denotes the starting point of an HTML document. (In other words, text marked up by the html element represents an HTML document.)

The corresponding ending tag, </html>, denotes the end of the element. Whatever comes between <html> and </html> represents content of the html element.

The head element

An HTML document is comprised of two things:

  • Metadata — information about the document, such as its title, character set, and so on.
  • Actual data — the actual content of the document that's visually rendered by the browser.

The metadata goes inside the head element.

<head>
   ...
</head>

As before, we have a starting tag, <head>, and an ending tag, </head>, for the element. Whatever goes inside these is part of the head element.

Document's title

Speaking of which, to specify the document's title, we use the title element inside the head element.

<title>Hello World!</title>

This title is displayed in bookmark pages; in search engines; in browser windows; almost everywhere where the document is brought up. In our case, the title is "Hello World!".

title can only go inside head. Moreover, only plain text is allowed in it.

Notice how <title>...</title> is indented inside <head> (as highlighted below):

HTML
<head>
<title>Hello World!</title>
</head>

This makes the structure of the document more readable. It's clearly visible that title is a part of head — or that title is nested inside head.

It's perfectly fine to let go off the indentation but it's generally considered a good practice to include it, especially when there are many elements inside of a given element.

The body element

Moving on, we have the following:

<body>
   ...
</body>

As stated earlier, an HTML document consists of metadata and actual data. The actual data goes inside the body element.

In our case, we have two things as part of the document's body content — a heading and a paragraph.

Main heading

It's common to have a main, top-level heading in a document. This is precisely what the h1 element is meant for.

<h1>Hello World!</h1>

In particular, the h1 element is used to denote a level-1 heading (hence the name "h1"), that is, the most important heading in HTML. Likewise, it is rendered at a considerably large font size, by default.

A paragraph

After the h1, we have:

<p>This is my very first HTML file.</p>

The p element denotes a paragraph — a block of text — in HTML (hence the name "p").

Altogether these elements come together in a structured manner to breathe life into a new webpage — an elementary webpage where you say hello to the world (when many people might be sleeping).

Wonderful!

Next chapter

3. Exploring more HTML