Explain Hello World Program in HTML With Free Notes

Here’s the Hello World Program in HTML code with an explanation of each line, which teaches you you write a basic Program in HTML and which tags are used in this.

Codes – Hello World Program in HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

Line-by-Line Explanation

1. !DOCTYPE html>

This is the Document Type Declaration. It tells the web browser that the document is an HTML5 document. It helps the browser render the page correctly.

2. <html lang=”en”>

This is the opening tag for the HTML document. The lang="en" attribute specifies the language of the document, in this case, English. It helps with accessibility and SEO.

3. <head>

The <head> element contains meta-information about the HTML document, like its title, character set, and other resources. This information is not displayed on the webpage.

4. <meta charset=”UTF-8″>

This tag specifies the character encoding for the HTML document. UTF-8 is a standard encoding that supports almost all characters from different languages, ensuring that text is displayed correctly.

5. <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

This meta tag controls the layout on mobile browsers by setting the viewport to match the device’s width and setting the initial zoom level to 100%. It’s important for responsive web design.

6. <title>Hello World</title>

The <title> element defines the title of the webpage, which is displayed in the browser’s title bar or tab. In this case, it will show “Hello World.”

7. </head>

This is the closing tag for the <head> element, indicating the end of the head section.

8. <body>

The <body> element contains the content of the HTML document that will be displayed in the browser. Everything inside this tag will be visible on the webpage.

9. <h1>Hello, World!</h1>

This is an HTML heading tag (<h1>), which creates a large, bold heading on the webpage. The text “Hello, World!” will be displayed as the main heading.

10. </body> and </html>

This is the closing tag for the <body> element, indicating the end of the body content.
This is the closing tag for the entire HTML document, signaling the end of the HTML code.