Summary -

In this topic, we described about how to create a first webpage in HTML5.

To start coding HTML5, we need a text editor and a web browser. In this topic, we learn of creating our first HTML page.

Create First HTML Document –

In this procedure, we will see how to display the below message on the webpage.

“Hello World.. Welcome to TutorialsCampus..!”

Follow the below steps to create a HTML file and displays the above message on the webpage.

Step 1 - Creating the HTML file

Open plain text editor and create a new file.

Tip! Notepad (on Windows), TextEdit (on Mac) or some other simple text editor are useful to create the HTML file. Once we understand the basic principles, we can switch to more advanced tools such as Adobe Dreamweaver.

Step 2 – Place HTML code on the editor

For our example, use the below code -


<!DOCTYPE html>
<html lang="en">
	<head>
		<title>HTML5 Webpage</title>
	</head>
	<body>
		<p> Hello World.. Welcome to TutorialsCampus..!<p>
	</body>
</html>

Step 3 - Save the file

Now save the file with ".htm/.html" extension. For example, Save it as "myfirstwebpage.htm".

Note! It is important to specify the extension as .html/.htm while saving the document — some text editors, such as Notepad, will automatically save it as .txt otherwise. So be cautious while saving the document.

Next open the file in browser or double click on the myfirstwebpage.htm page to view the output on the webpage.

Explaining example code -

The first line of the webpage <!DOCTYPE html> is the document type declaration. It specifies the web browser that the document is an HTML5 document. The statement is case-insensitive.

The <head> element contains the tags that provides information about the webpage document.

The <body> element contains the actual content of the webpage like paragraphs, links, images, tables, and so on,. that are displayed to the user.

Note! A DOCTYPE declaration should be coded at the top of a web page before all other elements; and every HTML document requires this declaration to make sure that the web pages are displayed correctly.
Note! Tags coded in between the <head> and </head> are invisible to users except the <title> tag information. The information between <title> and </title> tags appears as the title on a browser tab.