Basic structure of an HTML file

<!DOCTYPE html>
<html>
	<head>
		<title>Title of the page</title>
		<meta charset="utf-8" />
	</head>

	<body>
		<p>
		  Hello World
		</p>
	</body>
</html>

Doctype

The Doctype declaration sets the version of HTML that we use. Each version has its own rules. A version describes which tags can be used, which nestings are allowed and which attributes can appear where. We use HTML5 as a standart, later you will see why.

Let's look more accurate at our Doctype:

<!DOCTYPE html>

The Doctype Declaration (DTD) is always at the beginning of an HTML file. In the end of this tag there is no slash. As already mentioned our example is the Doctype Declaration for HTML5. It's also the shortest and newest one.

The 4 DTDs

There are four types of document declarations: Strict, Transitional, Frameset and HTML5.

HTML5

HTML5 is the newest DTD. Therefore it is the cleanest and we recommend using it.

<!DOCTYPE html>

Strict

Strict is, like the name says, a really strict declaration and forbids many elements and attributes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional

Transitional is a compromise of the W3C, which allows the usage of most tags and attributes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset

The last and very old possibility is frameset. Instead of <body> you use <frameset>. Frameset pages are divided into frames. Frames allow us to show a single HTML document inside each of them. Frames are very old and there are only few websites that still use them. We don't recommend using frames. Programming Languages like PHP can combine different documents, too.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html>

An HTML-page starts and ends with the <html>-tag. Everything between these tags describes the document.

<head>

The head area of an HTML page contains information that is invisible for visitors. Only the title of a page, which we set with <title>Title of the Page</title>, is visible in the browser:

The HTML Title is visible in the Browser

Invisible elements in the <head> are also Meta tags: These tags contain information about the page. This information can be useful for search engines, browsers and smartphones. The basic Structure of a meta tag is shown in the following example:

<meta name="..." content="..." />

The name attribute defines the content of a meta tag and the content attribute contains the corresponding contents:

<meta name="keywords" content="HTML, JavaScript, CSS" />

There is also a meta tag that sets the character set of the document. The character set describes which characters/letters can be used in the document. If you use characters that are not part of the character set that you chose, they will be displayed incorrectly. UTF-8 is the most common character set. Read more about UTF-8. Read more about character sets.

<meta charset="UTF-8" />

Special characters

There are characters that need always a special kind of notation: <, > und & are usually displayed incorrectly in the browser, if they are part of a text. Therefore you should replace this code:


2<3 and 4>1

by this one:


2&lt;3 and 4&gt;1

< and > are replaced by <, and >. You have to do this, because < and > are control characters in HTML for the beginning and the end of a tag. If you used the first example, HTML would see it as 2 <3 and 4> 1. Therefore <3 and 4> would be treated as an HTML tag, which doesn't exist...

The character set ISO-8859-45 is very extensive and supports many different characters. In other character sets it can happen that you have to replace these and other characters by alternative character combinations:


Ä   &Auml;
ä   &auml;
Ö   &Ouml;
ö   &ouml;
Ü   &Uuml;
ü   &uuml;
ß   &szlig;
€   &euro;

<body>

Body contains the content of the page. In the first example on this page it is a paragraph, <p>, which contains the sentence "hello world".

Task

Copy the code in the first example. Paste it into a text editor. Remove everything between <body> and </body>. Now write some plain text between <body> and </body>. After your text add an HTML comment with any content you want (Check part 1 of this collection for the structure of an HTML comment). Then change the title of the page to anything you want. Save the file as code.html and open it with any browser. If you did everything correctly, you should see your text, but your html comment should be invisible. Your title should also be visible - in the top-bar of the browser.

Example Code

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>HTML5 Document Example</title>
   </head>
   <body>
      Some test text bla bla bla bla bla....
      <!--Comment-->
   </body>
</html>

Browser Screenshot

Continue to part 3