Hello World! web page

Hello World!

The hello world web page is the most basic working example of an HTML document. It has all the elements that would be present in every web page on the web. Here is the program if you missed it in the last lesson:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>My first web page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

Output

The output will be the following line when opened in a browser.

Hello World!

Here is an image of the web page in a browser:

output in chrome

Here Comes the explanation

  • The first line has the DOCTYPE declaration. During the dawning days of the web, the declaration was used to denote the type of HTML document. HTML since then has evolved a lot. Now the DOCTYPE declaration is the simplest way to say that our web page uses the latest HTML5 standard. That is all you need to know now.
  • The next line has the opening tag for the root <html> element. The rest of the web page is the content of the <html> element. Notice how the closing tag for the element is the last line of the web page. This signifies the end of the web page.
  • The next line has the <head> element’s starting tag. This element houses all the elements that are not part of the content of the page but may provide additional information about the document.
  • The <meta> element is an empty element that is used to provide info about the web page. In this case, it provides the information that the encoding used is utf-8. This encoding supports most of the international languages.
  • The title element is used for specifying the title of the web page. This title is what shown in the browser window.
  • The closing tag of the head element is followed by the starting tag of the body element. The body element has all the elements which are to be shown in the display area.
  • The next line has the <p> tag which indicates the start of the paragraph, followed by the content. This content will be displayed in the main area. This is followed by a closing the tag.
  • The closing tag of the <body> element is followed by the closing tag of the <html> element.