Hello World in HTML
This simple tutorial presents "Hello World" in HTML code as a starting point for a web page. Getting a system to display the Hello World message is considered the basic starting point when writing code. It is used to prove a system is up and running. From the Hello World starting point more useful code can be written. When hand coding a web page write it with the latest HTML standard in mind, widely referred to as HTML5. The Hello World example web page given here is for HTML5 and later versions.
An HTML Hello World Example, the Basic HTML Web Page
The basic Hello World web page is a template to be used to start any HTML page. Because this example is so straightforward the complete HTML Hello World page is shown and then each part explained.
Using a text editor (e.g. Notepad on Windows) add the following to a file and save it, giving it the name hello-world.html. Some text editors, for example Notepad++ for Windows, color code the text to make it easier to read.
<!DOCTYPE html>
<html>
<head>
<title>Basic Web Page</title>
</head>
<body>
Hello World!
</body>
</html>Open the new HTML file in a web browser.
Understanding the Hello World HTML Code
What does the first line mean?
<!DOCTYPE html>This tells the browser, or other software or system, processing the web page that it is a standard HTML5 web page. Using a different setting for !DOCTYPE other than html tells the browsers or system that the web page should be processed as it would have been in older browsers, this is refered to as Quirks Mode. For ease of future maintenance write web pages to support the standard HTML5 mode, hence use !DOCTYPE html.
Everything between the second line, the html start tag:
<html>And the last line, the end tag for the start tag:
</html>Is the actual web page. The web page is made up of content and tags. Tags tell the browser how to process the web page content. A tag starts with < (the less than character) and ends with > (the greater than character) and usually come as a pair. The html pair are the tags to wrap the whole web page. You can spot an end tag because it starts with </. There are many types of HTML tags. How many HTML tags are there? There are over 100 HTML tags available to control what is displayed on a web page, some used a lot more than others.
Within the html tags the web page has two major parts, the head and the body. The head has items that support how the content is processed, whilst the body will hold the actual information to be displayed on the web page.
In the basic web page in this tutorial the head only has a title which is displayed at the top of the browser (usually on the tab displaying the page). Other things that can appear in head include links to other files, data tags called metadata (added with meta tags) and script tags (for JavaScript code that is run by a browser when the web page is displayed).
All web page content is placed in between body tags, here simply the words Hello World!. These are then displayed in the browser. Other types of content can be displayed such as images, videos and lists.
Whitespace Handling
When authoring an HTML5 web page it is worth learning about how spacing works in HTML. It is not the same as writing a document in a text editor or word processor. For example this content:
<body>
Hello World!
And Hello Again!
</body>Is displayed like so:
This is because any whitespace before and after content is removed and multiple whitespace between content is reduced to single spaces, so all newlines and tabs get removed. To get this effect:
You could separate the content with p (paragraph) tags and then position the paragraphs using a style. Like this (other ways to achieve the same effect are possible):
<!DOCTYPE html>
<html>
<head>
<title>Basic Web Page</title>
</head>
<body>
<p style="margin-left:2em;margin-top:0em;margin-bottom:0em">Hello World!</p>
<p style="margin-left:2em;margin-top:0em;margin-bottom:0em">And Hello Again!</p>
</body>
</html>The HTML5 Specifications
HTML5 web pages work well on all modern browsers and systems, whilst still displaying content in older web browsers (where the latest HTML5 features are ignored). The HTML specification is available as a continuously evolving document, a living standard, by the Web Hypertext Application Technology Working Group (WHATWG). Alternatively the HTML spec from the World Wide Web Consortium (W3C) is a point release, currently at version 5 (hence HTML5), with the next version of HTML5, HTML version 5.1, in the pipeline. The WHATWG version intends to reflect what is, or should be, happening in the latest browsers. Whilst the W3C spec provides a stake in the ground HTML version. There are differences between the specs but either can be used. Here's the HTML5 logo:
Summary
This article shows you the most basic of web pages, copy the sample code when you need to create a new web page. There is a plenty to learn on HTML coding and plenty of resources available from which to learn, try Web Development at the Mozilla Developer Network or w3schools.com. For a Hello World HTML example that displays an image and list see hello-world.html, use the browser's context menu (normally right-click) and select the option to view the source code.
Author:Daniel S. Fowler Published: Updated:
