HTML Basic Example - Hello World

HTML (HyperText Markup Language) is the standard language for creating web pages. It provides the structure of a web page, using various elements and tags to define the content and layout. One of the simplest examples of an HTML document is the "Hello World" program, which is often used as an introductory exercise in many programming languages. This article provides a detailed description and complete code examples of a basic HTML "Hello World" example.

What is HTML?

HTML stands for HyperText Markup Language. It is the standard language used to create web pages and web applications. HTML elements form the building blocks of all websites. HTML allows you to structure your content with headings, paragraphs, links, images, and more.

Basic Structure of an HTML Document

Before we dive into the "Hello World" example, let's understand the basic structure of an HTML document.

html

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>Heading Content</h1>
</body>
</html>

An HTML document typically consists of the following parts:

<!DOCTYPE html>: This declaration defines the document type and version of HTML.
<html>: This tag is the root element of an HTML document.
<head>: This section contains meta-information about the HTML document, such as its title and links to stylesheets.
<title>: This tag defines the title of the document, which appears in the browser's title bar or tab.
<body>: This section contains the content of the HTML document that is displayed in the web browser.

HTML "Hello World" Example

Let's create a basic HTML document that displays "Hello World" in a web browser. Follow these steps:

Open a text editor (such as Notepad, Sublime Text, or Visual Studio Code).
Create a new file and save it with the .html extension (e.g., helloworld.html).

Now, write the following HTML code:

html

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

Output Image: Open the saved file in a web browser (e.g., Google Chrome, Mozilla Firefox, Microsoft Edge). You should see a web page displaying the text "Hello World" in a large, bold font.

Explanation of the Code

<!DOCTYPE html>: This line declares that the document is an HTML5 document.
<html>: This tag is the root element of the HTML document.
<head>: This section contains meta-information about the document. In this example, it includes the title of the document.
<title>Hello World</title>: This tag defines the title of the document, which appears in the browser's title bar or tab.
<body>: This section contains the content of the document that will be displayed in the web browser.
<h1>Hello World</h1>: This tag defines a top-level heading that contains the text "Hello World".

Related Articles