Home  Privacy

Your First Webpage – Hello World!

Originating in 1974,1 Hello World! has become the default first piece of code that new learners write.
It is (more or less) the simplest piece of code you can write and serves as a quick test that everything is working correctly.

Contents

  1. Setting Up
  2. The Code
  3. Displaying the Webpage
  4. Analyzing the Code
  5. Playing Around

Setting Up

  1. Set up a work area. My recommendation is to create a folder on your desktop2 and call it webdev – or any other name you like (provided it is a sensible name3) and store your work in there. It is a good idea to create subfolders related to whatever you are working on instead of creating all files in the same folder – in this case, I recommend creating a folder called hello-world
  2. Start your text editor.
  3. Start your web browser.

The Code

  1. Type the following code into your text editor. You can copy & paste if you like:
<!DOCTYPE HTML>
<html>
  <head>
    <title>Hello World</title>
    <meta charset="utf-8"  />
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>
  1. Save the document in the folder created in the Setting Up step. Because this is an HTML file, you must give it an HTML extension. You can give it a name like helloworld.html or index.html. The name doesn’t matter (except if it conflicts with the name of another file in the same directory – another good reason to organize your files in directories).

After saving, you may notice – depending on your text editor – that different elements of the code are coloured differently. This is called syntax highlighting. The reason the text was not coloured when you initially entered the code was because the editor didn’t know what type of code it was dealing with. When you saved the file with the .html extension, the editor knew it was an HTML file and highlighted the code accordingly. If this did not happen for you, you may be using an editor that does not feature syntax highlighting.

Displaying the Webpage

To display the page:

  1. locate the .html file in the folder
  2. drag it onto your web browser.

If everything is functioning correctly, you should see a page that looks exactly like this page.

Analyzing the Code

Let’s have a closer look at what these ten lines of code are doing:

<!DOCTYPE HTML>

This is not HTML, it is a document declaration. It tells the browser what type of document it is.4 It is case-insensitive.

While the official documentation speaks of documents, it is easiest to understand it as meaning webpage. It doesn’t have to be a webpage – it could be an e-book – but most HTML documents are webpages.
Nevertheless, it is better to get used to using the term document.

This declaration tells the browser that all the code that follows is HTML5 code. If you omit the doctype declaration, the browser will assume it is an older version of HTML and try to process it using quirks mode.

<html>

This is an HTML tag and it marks the start of the HTML document.
All HTML tags are:

  1. case-insensitive
  2. enclosed in angle brackets < >

Most, but not all HTML tags have a corresponding closing tag.

<head>

HTML documents are divided into two parts:

  1. a head section containing metadata (a fancy way of saying information) about the document. Things which are not part of the content of the document tend to go in this section.
  2. a body section containing the content of the document.

The <head> tag marks the start of the metadata section.

<title>Hello World</title>

This line contains the title of the document. You can clearly see the start and end tags. Browsers (typically) display the title in the browser tab.

<meta charset="utf-8"  />

This line specifies which character encoding the webpage is using. In general, you should use utf-8.5
<meta> tags do not have a closing tag. This is because <meta> tags do not take content, so they do not need a start and end tag. Instead, the tag is closed by using a /> (slash – angle bracket).

</head>

This is the closing tag for the opening <head> tag earlier in the document.

<body>

The <body> tag begins the second part of the HTML document. The content (the stuff that is displayed to the reader) is contained in this section.

<p>Hello World!</p>

This is the content (Hello World!) that is displayed on the webpage.
It is contained between paragraph tags – the <p> and </p> tags.

</body>

This is the closing tag for the opening <body> tag earlier in the document.

</html>

This is the closing tag for the opening <html> tag earlier in the document and represents the end of the HTML document.

Playing Around

The best way to learn is to play around with what you have learned.
I suggest you make a copy of the file and play around with that. With most editor’s this would be a case of Save As and choosing a new filename. You might want to append -play or -x to indicate this is an experimental file.
Don’t forget to save the file after making edits.
I suggest you try the following:

  1. Change the content of the title. See how it affects what is displayed in the browser tab.
  2. Change the content between the <p> and </p> tags.
  3. Add more paragraph tags.
  4. What happens if you don’t use the paragraph tags.

You can also try deleting tags, misspelling them, changing their order, etc and pay attention to what happens.
If you break things, you can always go back to your original file. In fact, it is always a good idea to work on a copy of your file and never the original.

  1. The first appearance of Hello World! was in The C Programming Language by Brian Kernighan and Dennis Ritchie in 1974.↩
  2. I recommend creating it on your desktop because it is handy there. You are free to create a development folder anywhere you like. The important thing is to keep your files organized.↩
  3. Names with spaces or special characters like ~, @, #, $, %, ^, *, &, /, \, (, ), [, ], {, or } may cause problems (assuming they are allowed in the first place). A good rule of thumb is that names should only contain letters, numbers, the underscore (_), or dash (-)↩
  4. There are many doctypes. They include older versions of HTML, xhtml, SVG, etc. You can find a list of various doctypes at W3C.↩
  5. The only reason you might want to use a different encoding is if you are importing content encoded in another encoding and are not going to convert the encoding to utf-8.↩

Published

Do not republish this article, in whole or in part. You may publish a short excerpt and provide a link back to the original article.