Introduction
HTML is an abbreviation of the Hypertext Markup Language. The markup tells the Internet browser how to display the text, pictures etc. presented to the Internet users. Its mastering is the first step towards a successful web page development. This page briefly describes the elementary HTML document structure and the basic HTML tags and elements. From the multitude of available HTML document templates we choose XHTML for its optimal design to work in conjunction with XML-based user agents. Further reading about the evolution of HTML, its relation to XHTML, XML etc. provides, for examlpe, Wikipedia.
Hello World template
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 xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Character encoding -->
<meta http-equiv="content-type"
content="text/html; charset=utf-8"/>
<!-- 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>
Using the above template you can easily produce elementary documents publishable over the Internet.
Viewing the result
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.
Markup documents
If the document opens right, you will notice that the browser's 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
In the above template, the bracketed words, called tags, appear in pairs differing only in the forward slash accompanying the second pair member, for example
<h3> Hello World! </h3>
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. It should also be mentioned that XHTML documents must use lower case for all HTML element and attribute names.
Document type definition
The first line of the Hello World template 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! The xmlns attribute declares the XHTML namespace as required by the normative definition of XHTML 1.0. If the namespace is omitted, the browser will likely display the content of the document as expected, but one can never be sure and the document will be not a valid XHTML.
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 -->
Nesting
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>
More elements
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 XHTML 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 majority of them, for example, on the W3C HTML/Elements 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
W3C Quality Assurance, W3C Recommended list of Doctype declarations , Retrieved 2013
W3C Recommendation, Introduction to the structure of an HTML document , Retrieved 2013
W3C Recommendation 26 January 2000, revised 1 August 2002, XHTML 1.0 The Extensible HyperText Markup Language (Second Edition) , Retrieved 2013
Wikipedia, the free encyclopedia, HTML , Retrieved 2013
Wikipedia, the free encyclopedia, HTML element , Retrieved 2013
Markup Validation Service, World Wide Web Consortium , Retrieved 2013