Basic structure of an HTML file


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:

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 is the newest DTD. Therefore it is the cleanest and we recommend using it.


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


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


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.


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


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:

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

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.

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 &lt;, and &gt;. 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 contains the content of the page. In the first example on this page it is a paragraph, <p>, which contains the sentence "hello world".


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

Browser Screenshot
HTML5 Task example demo image

Continue to part 3