HTML Tutorial

Examples

HTML Practice & Useful Resources

Bootstrap

Home » HTML

HTML - Hello World

By IncludeHelp Last updated : October 28, 2024

Learn how to print "Hello, World!" in HTML.

HTML "Hello, World!"

You can print "Hello, World!" on a webpage; for that, you can create an HTML document. "Hello, World!" can be written in any HTML element such as heading tags, a paragraph tag, etc.

Here, we will print "Hello, World!" in <h1> tag. We will also apply some CSS to make it attractive.

Create an HTML Document (Writing Hello World)

The first step is that you need to create an HTML document. You can use any text editor, such as Notepad++. Open a text editor and write the following code (or you can simply copy it from here):

You can also use our online HTML editor to write and run your code with a live preview.

Hello World HTML Code

<html>
  <head>
    <title>Hello World Example</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Note: Save the file with any name with .htm or .html extension. In Notepad++, if the file is saved, you can see the syntax highlighting of the tags.

Browser View

After writing code and saving your file, you can open it in any browser to see the result.

Applying CSS

You can write CSS to apply to the element in which the "Hello, World!" is written. Here, we've used the <h1> tag to write "Hello, World!".

CSS code

The following is CSS code; write it inside the <head> tag:

<style>
  .show_msg{
  font-family: 'Segoe UI';
  font-size: 45px;
  color: blue;
  }
</style>

HTML Code

The following is the HTML code; you have to specify the class name with the <h1> tag by using the class attribute:

<h1 class="show_msg">Hello, World!</h1>

Complete Example

Here is the complete code to print "Hello, World!" after applying the CSS:

<html>
  <head>
    <title>Hello World Example</title>
    <style>
      .show_msg{
      font-family: 'Segoe UI';
      font-size: 45px;
      color: blue;
      }
    </style>
  </head>
  <body>
    <h1 class="show_msg">Hello, World!</h1>
  </body>

Result