Your First HTML Program: Step-by-Step Guide

An HTML file is nothing more than a text file that is saved with either a .html or .htm extension.

Getting Started

In this tutorial you will learn how easy it is to create an HTML document or a web page. To get started with HTML coding, you only need two essential tools: a simple-text editor and a web browser. So, let's begin the journey of creating your very first HTML page.

Creating Your First HTML Document

Let's walk through the following steps, and by the end of this tutorial, you will have successfully created an HTML file that will display a "Hi friends..." message in your web browser.

Step 1: Creating the HTML file

Make a new file by launching the plain text editor on your PC.

Tip: Instead of using Word or WordPad, we advise you to use Notepad (on Windows), TextEdit (on Mac), or another straightforward text editor to do this task. You can move on to more sophisticated tools like Adobe Dreamweaver once you have a handle on the fundamentals.

Step 2: Type some HTML code

Start with an empty window and type the following code:

<!DOCTYPE html>
<html> lang="en">
<head>
    <title>A simple HTML document</title>
</head>
<body>
    <p>Hi friends...</p>
</body>
</html>

Try this code

Step 3: Saving the file

Save the document as "myfirstsimplepage.html" and locate it on your desktop.

Note: Please ensure that you specify the extension as .html when saving the file, as certain text editors like Notepad may automatically save it as .txt otherwise.

To view the HTML file in a browser, follow these steps: Navigate to the location where you saved the file and double-click on it. This action will open the file in your default web browser. If, for some reason, it doesn't open automatically, you can manually open your web browser and drag the HTML file into it. This will display the content of the file in the browser window.

Explanation of code

You could wonder what the purpose of that code was. Let's find out, then.

The document type statement appears in the first line, <"!DOCTYPE html">. The web browser is informed that this is an HTML5 document.There is no regard for case.
The <head> element serves as storage area for tags that contain data about the document. For instance, the <title> tag specifies the document's title.
The document's actual content, including paragraphs, links, images, tables, and other elements, is included in the <body> element and is generated by the web browser before being shown to the user.

In the upcoming chapters, you will gain in-depth knowledge about various HTML elements. However, for the moment, let's concentrate on understanding the fundamental structure of an HTML document.

Note: It's essential to note that a DOCTYPE declaration should be placed at the top of a web page before all other elements. Although the doctype declaration itself is not an HTML tag, it plays a crucial role in ensuring that your web pages are displayed accurately. Every HTML document must include a document type declaration to guarantee proper rendering and compatibility.

Tip: The fundamental structure of every web page is composed of three essential tags: <html>, <head>, and <body>. The content within the <head> and </head> tags remains invisible to users, except for one exception: the text enclosed between the <title> and </title> tags, which appears as the title on the browser tab.

HTML Tags and Elements

In order to write HTML, markup tags are used to create HTML tags. The core elemental component of HTML is these markup tags. Every markup tag consists of a keyword enclosed in angle brackets, such as <html>, <head>, <body>, <title>, <p>,and so on.

Generally, HTML tags are arranged in pairs like <html> and </html>. It's common to refer to the first tag in a pair as the open tag (or start tag) and the second tag as the close tag (or end tag).

The only difference between an opening tag and a closing tag is the addition of a slash (/) to indicate to the browser that the request has been successfully executed following the open angle bracket of the close tag.

You can insert the necessary material in the space between the start and end tags. As a sample, the following would be written as a paragraph, which is defined by the <p> element:

 <p>This is a wonderful morning.</p>
    <!-- Paragraph with nested element -->
    <p>
        <b>Enjoy your day</b> .
    </p>

FAQ

What is the basic structure of an HTML document?

The basic structure of an HTML document consists of the <html>, <head>, and <body> tags.

How do you create your first HTML page?

To create your first HTML page, you need a simple-text editor and a web browser. Save the file with a .html extension.

What does the `<title>` tag do in an HTML document?

The <title> tag is used to define the title of the web page, which appears on the browser tab.

Why is a DOCTYPE declaration important in an HTML document?

The DOCTYPE declaration ensures that web pages are displayed correctly by providing information about the version of HTML being used in the document.

What is the structure of an HTML document?

An HTML document typically consists of an opening <html> tag and a closing </html> tag. Within the HTML tags, there are two main sections: the <head> section and the <body> section. The <head> section contains meta information and the title of the webpage, while the <body> section contains the visible content of the webpage.

What is the purpose of the `<head>` and `<body>` elements in HTML?

The <head> element is used to contain metadata and other non-visible elements of a webpage, such as the title, character encoding, CSS stylesheets, and JavaScript references. The <body> element holds the visible content of the webpage, including text, images, links, and other elements.