Hello, World, in HTML
View as PDF
Introduction
HTML is an abbreviation of the Hypertext Markup Language. Its mastering is the first step towards a successful web page development. HTML is used to tell the Internet browser how to display the text, pictures etc. you want delivered to the Internet users. This page briefly describes the elementary HTML document structure and the basic HTML tags and elements. Further reading about the evolution of the language, its relation to other markups such as XHTML, XML and SGML provides, for examle, Wikipedia.
Hello World code
You can easily create your first web page right now, without even being connected to the Internet. Just open your favorite plain text editor, such as the Notepad in the Windows system, highlight the following text, copy and paste it in the editor, and save it as Hello.html. The text is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!-- Character encoding -->
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252"/>
<!-- Browser window title -->
<title> Hello World Page </title>
</head>
<body>
<!-- Document title -->
<h3> Hello World! </h3>
<!-- Plain text -->
<p>
Show me how HTML can work for me!
</p>
</body>
</html>
For Windows users, the extension html is useful, because once the file is saved and they double-click the file name, the Explorer, the Firefox or any other default browser will open and they will see their Hello World text. Addition of the html extension benefits the Linux GNOME desktop users too. They can utilize the 'File', 'Open With', options in the folder container window's drop down menu to bring the formatted text up for viewing. Answers to some common problems occurring when starting with HTML can be found on the W3 Schools page.
Markup documents
If the document opens right, you will notice that the browser's (usually blue) title bar contains the phrase: Hello World Page. The bold-faced hello world and the rest of the message will be inside of the window. This effect is achieved using the bracketed words discussed next. Documents written using those bracketed words are called markup documents and so far they appear best suited for communication over the Internet.
Tags and elements
The bracketed words, called tags, appear in pairs differing only in the forward slash accompanying the second pair member. The pairs are also called elements and most of them tell the browser how to decorate the text, or content, enclosed by the pair. For example, the letter p is the tag of the paragraph element <p></p>. It is to emphasize that not all elements are pairs. Some tags, e.g. the line break br, do not have the closing tag. The corresponding element is <br />. Such elements are called self-closing and they are recognized by a slash before the closing bracket preceded by a space.
Document type definition
The first line of the Hello World document code specifies the document type definition (DTD) used for display of the markup. For better readability, the line is broken in two pieces, and it tells the browser that the document is XHTML 1.0 strict, written in English. Similarly, the line starting with the meta tag specifies the character encoding and is required by a valid XHTML 1.0 strict document.
html tag
The html element is called the root element. Only one such element can be in the document and all other elements must be inside the root, exactly as in the Hello World example above. The html element tells the browser that the inside of the element is a hypertext, something it knows how to display!
head tag
The head element contains information useful for the browser but not visible inside the browser's client area. Notice that the title is in the bar, not in the window' text area!
title tag
The title element displays title of the document in the browser's title bar.
body tag
The body element contains mostly text intended for display. Only one head and body elements are admissible.
Heading and paragraph tags
The remaining elements, such as h3 - the heading and p - the paragraph, can appear as many times you please. They format the text. The heading, or more accurately, the level 3 heading, makes it bold and forces it on a new line. Levels go from 1 to 6, which means that you can use also h1 etc. up to h6, if you want, but try first how the output will change. The paragraph element creates a space between blocks of the text.
Comments in HTML
A special kind of element is the one determined by the comment tag. The tag of the comment is a simple exclamation followed by two minus characters and ending by two minuses. A comment can stretch over several lines and it allows you to add easy to read explanations in HTML documents. There is no backward slash at the end of the comment! For example,
<!-- This is a comment -->
The above "Hello.html" sample text shows that elements can be included as a content of other elements. If you do such inclusion be sure that the elements are indeed nested. The following sequence is not nested, and therefore, it is incorrect.
<p><a href="#">text</p></a>
The HTML markup contains many more tags and elements, some of which will be discussed on the following pages. For a more detailed discussion of HTML elements see the relevant section of Wikipedia and references there in.
Summary
This page shows the skeleton of a basic HTML document and explains meaning of the HTML tags and elements it uses. The most important points are: how to view/open the document and the meaning of the key tags html, head, body, comment, title, h1, h2, h3, h4, h5, h6 (headings), and p (paragraph). As you gather, all it takes to write a web page is to know the right elements and attributes forcing the browser to create all the effects you need. You find all of them, for example, on the Web Design Group page. To see if your code is correct, use the Markup Validation Service. The most efficient way how to learn write HTML documents is to save the Internet page you like, open the file and study the source code.
References
Web Design Group HTML Help and Web Authoring Reference,
Web Design Group
,
2006
Markup Validation Service,
World Wide Web Consortium
,
2006
Wikipedia, the free encyclopedia,
HTML
,
2008
Wikipedia, the free encyclopedia,
HTML element
,
2008
W3 Schools,
Introduction to HTML
,
2008