In web development, learning to write Hello world program in HTML is the first step you are often going to start in your full stack web development journey. HTML is the first framework everyone starts with in web or app development. HTML is a markup language which is used to structure the elements on a web page.

HTML is a markup language slightly different from other programming languages, such as Java, Python, C++, etc. In this tutorial, we will learn how to write our first hello world program in HTML.

Table of Contents

What Is HTML?

HTML stands for Hyper Text Markup Language used to structure the elements on the web page. HTML consists of various tags and attributes which are used by the web browser to understand the significance of an element present on the web page. It defines elements such as headings, paragraphs, lists, links, images, tables, forms, etc.

Hello World program in html

The HTML tags present on the HTML document are used by browsers to predict a specific element on the web page, such as <p> tags are used for paragraphs, <a> tags are used for anchor links, etc.

The latest version HTML5 is supported on all browsers which makes it a universal language for web content. It can easily be integrated with other frameworks like CSS, bootstrap, javascript, and many more to provide web pages with their functionalities and interface.

What is a Hello World Program in HTML?

The Hello World Program in HTML is used to print a simple sentence i,e. “Hello, World!” on the screen which uses only a simple print syntax. It basically marks the beginning of your web development journey where you can learn how to display an element on the screen and tags used to do so.

Hello World Program can be written in different programming languages such as Java, C++, Python, JavaScript, and more. All programming languages display, “Hello World! On the screen with very slight changes in syntax of all programming languages.

HTML Document Structure Template

Let us check a simple HTML document structure with major elements used in the document. We will then learn how to print Hello world program in HTML ahead.

<!DOCTYPE html>

<html>

<head>

<title>This is page title</title>

</head>

<body>

<h1>This is h1 heading</h1>

<p> This is a simple paragraph line. </p>

</body>

</html>

This document table given above is the basic structure of the HTML document.

<!DOCTYPE html> This tag is used to tell the browser that the given document is a HTML document and must be interpreted accordingly.
<html> This tag marks the root element or beginning of the HTML document which wraps all elements of HTML inside.
<head> This is a tag which contains meta information about the document such as links from other pages, title, etc.
<title> This sets the name of the web page which you can check on the browser tab.
<body> It contains all the content of the web page which you can see on the interface such as heading, paragraph, forms, tables, etc.

Hello World Program In HTML

Writing Hello World after getting familiar with the structure of HTML documents is easy now. You just have to use a familiar tag from HTML to print Hello world program in HTML. Follow the steps given below.

The Setup

You can choose a text editor to write and edit your HTML program. Windows provides an in-built Notepad and Mac provides TextEdit to write and edit HTML programs. You can also use advanced editors like VS Code, Notepad++, Sublime Text, etc.

Nowadays, there are many online compilers where you can easily write and edit your HTML code.

Create Project File

You can create a new file on your system or text editor to start writing your hello world program in HTML. Save the file on the computer and make sure to give it a name with .html extension. This will help your system and browser to interpret this file as an HTML document.

Start writing a basic HTML document

You simply have to start writing with <!DOCTYPE html> tag at the top of the file to declare the web pages that this particular file is an HTML document and must be interpreted accordingly.

Declare Basic HTML tags

You have to start with <html>…</html> tag which is used to enclose everything inside it. The <head> section contains links from other files and also contains the <title> tag of the web page. You can keep all your content inside the <body> tag and close it once it is completed.

Now you can use a heading tag such as h1, h2, h3, or any tag or use a simple paragraph element to write Hello World! Program in HTML. Close the body tags and html tags once done.

<!DOCTYPE html>

<html>

<head>

<title>This is page title</title>

</head>

<body>

<h1>Hello World!</h1>

</body>

</html>

Hello World program in html

Style Hello World Page with CSS

You can easily style your HTML document page using the CSS style tags. Let us add a simple styling to our page using the CSS tags.

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

margin-top: 50px;

}

h1 {

color: blue;

}

p {

color: green;

}

</style>

<title>This is page title</title>

</head>

<body>

<h1>Hello World!</h1>

</body>

</html>

Hello World program in html

Learn Complete Web Development With PW Skills

Learn HTML, CSS, and other popular frameworks in PW Skills Full Stack Web Development Course. Get in-depth tutorials for every framework in web development and strengthen in real world projects. Become skilled in web programming, front end and backend. Get tutored through experienced mentors, 24×7 doubt support and more. Practice through exercises, assignments and projects.

Hello World Program In HTML FAQs

Q1. What is a Hello World program in HTML?

Ans: A Hello World program in HTML is a simple web page that displays the text "Hello World" on the screen. It is often used as a beginner's introduction to HTML.

Q2. What is the basic structure of the Hello world HTML document?

Ans: The basic structure of HTML document looks like the following:

Q3. What is the use of H1 tags in the Hello World program in HTML?

Ans: The

tag defines a highest level heading and is used to display the "Hello World" text prominently on the web page.

Q4. How can you view the output of the Hello World Program?

Ans: First save the file with HTML extension after completing the Hello World program in HTML and then open the file on a browser such as chrome, firefox, bing, etc.