Create a Hello World web page

#web #html

Creating a “Hello, World!” HTML page is a simple yet essential starting point for web development. In this tutorial, you’ll learn how to create an HTML file and display a basic “Hello, World!” message in your web browser. The web page will be stored on your local machine so no hosting will be required.

Prerequisites:

A text editor (e.g., Notepad on Windows, TextEdit on macOS, Visual Studio Code, Sublime Text, etc.).
A web browser (e.g., Chrome, Firefox, Safari).

Step 1: Start a new HTML Document

In your text editor, create a new HTML file. You can do this by going to File > New or using the keyboard shortcut (Ctrl + N) on Windows, Cmd + N on macOS). Alternatively, you can use your system’s file explorer to create a new file and open it in your preferred web browser.

Step 2: Create the HTML Structure

In your new file, start by declaring the basic structure of an HTML document. All HTML documents follow this same skeleton, so it’s a good starting point for any HTML document you create.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello, World!</title>
</head>
<body>
    <!-- Your content goes here -->
</body>
</html>

Let’s break down what part of the document does.

<!DOCTYPE html>

This declaration defines the document type. In this case, we are declaring that the document is of type html, which means the document reader can expect the rest of the document to contain HTML markup.

<html>
    ...
</html>

HTML documents are divided into hierarchial sections called “elements”. The highest-level element of an HTML document (also known as the root element) encloses all the HTML content within the document. The start of the html element is signified by <html>. Similarly, the end of the element is significant by </html>.

<head>
    ...
</head>

The head element contains meta-information about the document, such as character encoding and the title of the page. You can also include supplementary information for the document, such as CSS stylesheets, scripts, icons, and other meta-information. Since head is an HTML element, it contains both an opening <head> tag as well as a closing </head> tag. The head element appears immediately after the opening html tag.

<meta charset="UTF-8">

This line contains meta-information indicating that the character encoding of the document is UTF-8. Most HTML documents are written in UTF-8 encoding, since it supports most characters for most languages.

<title>Hello, World!</title>

The title element sets the title of the web page. The title is what appears in the web browser’s tab. You should set value in the title element to something the user can easily understand when they’re looking at their browser’s tabs. In this example, we are setting the document title to the text, “Hello, World!”

<body>
    ...
</body>

The body element contains the visible content of the web page. This is body of the document, and anything that is contained between the opening <body> tag and closing </body> tag will be visible to the viewer of the web page. Within the body element, you will include other types of elements to structure the document, such as (but not limited to) h1, p, img, a, nav, section, and main. We’ll cover the details of these elements in other tutorials.

<!-- Your content goes here -->

This line is known as a comment. It indicates that everything appearing after the  should not be rendered to the viewer of the document. Instead, it serves as documentation to developers who are responsible for maintaining the web page. You may leave a comment to remind you why you added a piece of code, or to remind you to add some detail in the future.

Step 3: Add Content to the Document

Inside the body element, add the “Hello, World!” message:

<h1>Hello, World!</h1>
<p>How are you doing?</p>

The <h1> element is a header tag. The HTML5 standard includes 5 levels of headings (h1, h2, h3, h4, and h5), with h1 being the highest level and h5 being the lowest level. You can use different levels of headings to organize your document, similar to how you would structure content in a text processes such as Microsoft Word.

The <p> element is a paragraph tag. It indicates plain text that should be rendered as a paragraph. By default, this is rendered in your web browser’s default typeface and size.

Step 4: Open the HTML Page in a Browser

Make sure your HTML page is saved as an HTML file (such as index.html or hello.html). Locate the saved HTML file on your computer, then double-click it. Your default web browser should open, displaying your “Hello, World!” message.

Congratulations! You’ve created your first HTML page. This simple example lays the foundation for more complex web development projects, where you can build and display dynamic content on the web.