VOOZH about

URL: https://www.geeksforgeeks.org/html/html-course-first-web-page-printing-hello-world/

⇱ First Web Page Printing Hello World - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

First Web Page Printing Hello World

Last Updated : 11 Jul, 2025

So far, we have already learned about the structure of an HTML document, tags, etc in the previous module. Let us use this knowledge to create our first web page.

Here, we are creating a simple webpage that displays a "Hello World" message as the perfect starting point. This exercise will help you understand the foundational structure of HTML and introduce you to headings from <h1> to <h6>.

Why Start with "Hello World"?

"Hello World" is the first step in programming across many languages. By displaying this simple message, you’ll learn how to structure an HTML document and see how headings affect the organization and readability of content on a webpage.

Steps to Create Your First "Hello World" Web Page

Here’s how to build your first webpage in HTML, step-by-step.

Step 1: Open a Text Editor

To create HTML, you need a text editor. You can use:

  • Notepad (Windows)
  • TextEdit (Mac)
  • Or a code editor like VS Code, Sublime Text, or Atom.

Step 2: Write the HTML Code

In your text editor, create a file named index.html and write the following HTML code. This code will display "Hello World".

In this Example:

  • The <!DOCTYPE html> declaration specifies that the document is an HTML5 document.
  • The <html> element encloses the entire HTML content.
  • The <head> section contains metadata, including the <title>, which sets the page's title as "First Web Page."
  • The <body> section includes the text "Hello World!", which will be displayed on the webpage.

Heading Tags: There are six levels of headings defined by HTML. These six heading elements are h1, h2, h3, h4, h5, and h6; with h1 being the highest level and h6 the least.

Let us use these six different Heading tags separately to print "Hello World!" and see the difference. Modify your code in index.html with the below code: 

Code: index.html

  • The code displays "Hello World!" in six different sizes using heading tags <h1> to <h6>.
  • <h1> is the largest and most emphasized heading, while <h6> is the smallest and least emphasized.

To learn more about Heading Tags, Please refer:HTML | Heading.

Comment
Article Tags: