Blogs Programming HTML Hello World

Hello World

By Tim-Bo Tolbert, posted on Nov 26, 2021

In this blog post I would like to discuss HTML5 and provide you with code examples for a Hello World web page.

At the time of this writing, HTML5 is the current standard syntax used for developing web pages with. HTML stands for Hyper Text Markup Language, and 5 means that this the fifth major version release of HTML, hence HTML5.

The general structure of HTML5 looks very similar to XML, in that each element of the document is object oriented and is defined by and within opening and closing tags. Also like XML, each elements opening tag can have attributes and each element can have child elements, depending on the type of object the HTML element is representing (i.e. head, body, paragraph, image, textarea, etc...).

Every HTML5 web page must have a HEAD and BODY section, which must always be added to the web page. There does exists a FOOTER section, however it is rarely ever used and can be safely ignored, and therefore not added if not used.

The very first line to any and every HTML5 web page is and must be :

HTML5

<!DOCTYPE html>

This tells the server and web browsers that this is an HTML5 web page, which is SGML based, and not an older version of HTML, which is not SGML based.

If you forget to add it to the very top of your web pages source code file, then the web server and web browsers that try to translate and render the web page will misbehave, resulting in unwanted and unpredictable results.

The <!DOCTYPE html> line does not and will not have a Closed tag, however please note that all other HTML tags will have an Open and a Closed tag. Aside from the !DOCTYPE tag, every Open tag must have a Closed tag. An Open tag is just the key word enclosed in a less-than bracket and greater-than bracket, for example <html>. A Closed tag is basically an exact copy of the Open tag's keyword but with a forward slash preceding the keyword, for example </html>. The Open and Closed tags work with each other to define Scope. Without properly closing tags, the browser can quickly become unstable and produce unwanted and unpredictable results when trying to render the web page to the client.

Also, HTML5 is not case sensitive, therefore <!doctype html> and <!DOCTYPE HTML> will both work and are okay to use.

After this initialization line, we will need to add the opening and closing HTML tags :

HTML5

<!DOCTYPE html>
<html lang="en">
...
</html>

The line <html lang="en"> tells the server that this line represents the beginning of the HTML Document that is to be served to the client's computer, and that the preferred default language to use when rendering the web page on the clients computer is English. The line </html> tells the server that it has reached the end of the HTML Document. All of the web pages HTML elements and objects will reside within these open and closed tags.

Inside the HTML tags we will need to add the HEAD and BODY tags :

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
...
</body>
</html>

Inside the HEAD tags must exist the CHARSET and VIEWPORT MetaTags, and the TITLE tags. Other MetaTags can be added also, but these are the minimum requirements needed in efforts to comply with HTML5 standards :

HTML5

<!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>
...
</body>
</html>

If you copy and paste this HTML code into a text file, and then save it as Preview.html, and then load and preview that Preview.html file with your web browser right now, then all you should see is a blank page with nothing on it. This is because the body of the web page, which is the BODY tag section of the HTML Document, is currently empty.

Let's go ahead and add the words "Hello World!" to the web page body. We want it to display in a very large font size, so let's use the header element H1 :

HTML5

<!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>

Now if you open up Preview.html into your text editor (if it is not still there already), then update its HTML code with the code from this example, and then resave it as Preview.html again, and then reload it into your web browser again (or click the browsers Refresh button if the page is still loaded from before), then you should now see the following web page screen:

Let's go ahead and spruce it up a little, so we will also add a horizontal rule element (HR) and a text label :

HTML5

<!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>
<hr/>
<label>Web Pages Are Cool!</label>
</body>
</html>

And now if you again edit the source code with this latest example, save it, and then reload it into your browser again, then you should now see the following web page screen:

In Summary

So to recap, every HTML5 web page needs a <!DOCTYPE html> line added as the first line of the web page file. It also needs open and closed HTML tags <html>...</html>. Inside the HTML tag it needs open and closed HEAD and BODY tags. Inside the HEAD tag it needs the CHARSET and VIEWPORT Meta tags, as well as a TITLE tag. Inside the BODY tag is where all of the HTML elements will be placed which are then rendered and displayed on the clients web browser screen. Every HTML element needs an Open and Closed tag, and some HTML elements can be Closed within the Open tag simply by putting the forward slash at the end, for example: <hr/>

Final Thoughts

Thank you for reading, I hope you found this example and tutorial to be helpful and useful in some way. There is a lot you can do with web pages, this example is simply meant to introduce you to the basics of a web page structure and its minimum requirements.

	(0)
	(0)