HTML Hello World with Code Examples
After knowing what HTML is, it’s time to create our first HTML webpage to show hello world. “Hello World!” is a traditional word that is mostly used by mentors to illustrate the first program. It’s not crucial to write “Hello world” on your webpage. It’s just an example to show you how to create a webpage in HTML with Hello World written in it.
In this tutorial, we’ll mainly focus on how to write “Hello World” in HTML with code examples. So, let’s begin.
How to Write “Hello World” in HTML
Step 1: Open your Text Editor
A text editor or also known as a source code editor is just software that we use to write and execute HTML code. There are a few best text editors that you can check out. For this tutorial, we will use visual studio code for HTML hello world.
If you don’t have any text editor installed then don’t worry, just open the visual studio code link and download it from there, and after installing see the next step.
Step 2: Create a new HTML file and Open it in Browser
The following images are clearly showing to create a new HTML file in the visual studio code editor in just 3 steps.
While creating a new HTML file give it any name, and I will use index.html where the index is a name and .html is an extension as shown in the above image.
After that, the file will be empty as shown below.
It’s where we will write our HTML Hello World code. Now, also open this HTML file in your browser so that we can see the results after writing the code. The file will be located where you saved it during creation. Now, let’s see the next step.
Step 3: Write HTML Hello World Code
The following HTML code example will print hello world on the webpage.
<!DOCTYPE html> <html> <head> <title>Hello World Example</title> </head> <body> <h1>Hello World!</h1> </body> </html>
Code Explanation:
- The first line of code shows
<!DOCTYPE html>that tells the browser it’s an HTML file with version 5. - Secondly, there are pairs of <HTML> tags to create a webpage.
- Then, I used <title> tags inside <head> tags to give our webpage a title “Hello World Example” which will show in the tab of your browser.
- Lastly, I used <body> tags that are used to show the content on the webpage. And write “Hello World” in HTML <h1> tag.
I used the most basic HTML tags in the code example above.
You can just copy the above code and paste it into your HTML file then save it. And open it in your browser or refresh the HTML page in your browser to see the output. You will see hello world as shown below in the image.
This is how you can create your first webpage and write HTML hello world on it.
Summary
In this short tutorial, you learned 3 things. Installing the code editor, creating a new HTML file, and writing some code to display Hello World in HTML webpage as an output in the browser.
If you have any questions related to this tutorial, then just leave a comment below.
If you’re interested in making a JavaScript pop-up box that shows Hello World then check out JavaScript Hello World Program.
Topic: HTML
