Write a comment on this article

Introduction to HTML

HTML (Hypertext markup language) is a markup language, but not a programming language because there are neither operations, variables or functions nor methods or classes. It describes where and how content is placed on a website and allows only little interactions with the user.

Basically, HTML consists of many different elements which look like this:

<myelement color="red" width="100">hello world</myelement>
select code
 

As you can see, an element consists of a three parts: an opening tag, inner text and a closing tag (same element name with a leading slash). The opening tag defines the element more precisely. It contains the name ("myelement"), attributes ("color", "width") and attribute values ("red", "100"). Sometimes, attributes, the inner text and the closing tag may be omitted, like in this example.

<br>
select code
 

The element <br> is a linebreak and has neither attributes nor an inner text or a closing tag. The available elements and their attributes are defined in the document type which is specified by the World Wide Web consortium. More about the document type later on.

HTML always follows a basic structure. First, you need to declare which document type is used in your page. Afterwards you define the header which contains the title, meta information and scripts. Finally, you write the body of your page which will be visible in the browser. Mostly, the body is the biggest part as it contains all contents of your page. Here is a short example:

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

The header (everything between <head> and </head>) contains the title of the page, meta information (like information about the author, this information is often used by search engines), links to other resources and scripts which allow the integration of specific programming languages. The following example contains the document title, meta information (keywords and description) and two references to a JavaScript file and a CSS file.

<head>
  <title>My page</title>
  <meta name="keywords" content="games,movies,music">
  <meta name="description" content="My page about games, movies and music">
  <link rel="stylesheet" type="text/css" href="my_stylesheet.css">
  <script type="text/javascript" src="my_javascript.js"></script>
</head>
select code
 

A special page type is a frameset. A frameset displays other HTML pages on one page in different frames and doesn't contain a body itself (it is possible to insert content which is only displayed when the browser doesn't support frames). So, a frameset is, as the name tells, a set of frames and is defined outside the header. Here is a short example (you can try it here: frameset.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
  <head>
    <title>My page</title>
  </head>
  <frameset cols="150,*">
    <frameset rows="20%,80%">
      <frame src="frameset_logo.html">
      <frame src="frameset_menu.html">
    </frameset>
    <frame src="frameset_home.html">
    <noframes>
      <p>This page contains a frameset but your browser does not support frames.</p>

      <ul>
         <li><a href="frameset_logo.html">Logo</a></li>
         <li><a href="frameset_menu.html">Menu</a></li>
         <li><a href="frameset_home.html">Homepage</a></li>
      </ul>
    </noframes>
  </frameset>
</html>
select code
 

This example will result in the following output:

Figure 1: Frameset containing three frames

Let's take a closer look on the document type. The document type is defined at the very beginning of a page and describes which elements and attributes are allowed. There are three different types: Transitional, Strict and Frameset. Here is an overview of these types (for an exact list which elements are allowed in which document types please check the resources and links below).

Transitional

This document type includes all elements and attributes specified in the used HTML version (e.g. HTML 4.0, HTML 4.01, XHTML 1.0, etc.) except frame-related elements (frameset, frame, noframes). It also includes deprecated elements. "Deprecated" means that these elements will be removed in future versions and should not be used anymore, like the element center in HTML 4.01. Here is a short list of allowed elements in HTML 4.01:

a, applet, b, body, br, button, center, dd, div, dl, dt, font, form, h1 - h6, head, hr, html, iframe, img, input, label, map, option, p, pre, script, select, span, strong, style, table, td, textarea, tr, u

Strict

This document type includes all elements and attributes as Transitional except the deprecated ones. In this case, "strict" means to focus more on structuring a document than on styling. Here are some elements which are not allowed in HTML 4.01 Strict:

applet, basefont, center, dir, font, iframe, isindex, menu, s, strike, u

Frameset

As the name tells this document type includes all frame-related elements. Also, all elements from Transitional are included, so this is the most generous document type. The following elements are additionally available:

frameset, frame, noframes

It is your job to choose the correct document type for your page, although browsers are very tolerant if you accidentally choose the wrong one. You also need to decide which HTML version you are going to use - the most common one are HTML 4.01 and XHTML 1.0. XHTML is based on XML and follows it's rules. This means XHTML documents need to be valid and well-formed. This includes some rules like writing element and attribute names lowercase, closing all opened tags, etc.

The body (everything between <body> and </body>) contains all contents of your page: texts, images, links, forms, tables and so on. In the table below you can find the most important elements to be used in the body.

Table 1: Elements in the body
Element Description Important attributes Example (HTML 4.01 Transitional)
a A link to another resource, e.g. an HTML document or an image. The Url of the resource is specified in the attribute "href". The inner part (text, image) of the element will be clickable.

href
Url of the resource.

target
Where the link will open: _blank (new window/tab), _self (same window/tab), _parent (parent window/tab), _top (top window/tab) or the name of a window/tab.

title
Tooltip when hovering over the link.

 <a href="another_document.html" target="_blank" title="Another document">Click here</a>
br Forces a line break in a text.   This is line one.<br>This is line two.
div Adds block-level structure to documents.   <div>This is block one.</div>
<div>This is block two.</div>
form A collection of input fields (textares, radiobuttons, checkboxes, ...) to submit data (text and files).

action
The Url to which the form will be submitted.

enctype
How the form will be submitted: "application/x-www-form-urlencoded" (default), "multipart/form-data" for text and files, "text/plain" for text only.

method
Either get (HTTP GET request) or post (HTTP POST request).

 <form action="another_document.html" enctype="text/plain" method="post">here go the input fields</form>
h1 Defines a heading. h2 - h6 are subheadings and differ in font-size and font-style.   <h1>This is heading 1</h1>
<h2>This is a subheading</h2>
img Displays an image. The Url of the image is specified in the attribute "href".

alt
If the image cannot be found this text will be displayed instead.

border
Border of the image in pixels.

height
The height of the image. If this attribute is omitted, the image will be displayed in full height or downscaled according to the width attribute.

src
The Url of the image.

title
Tooltip when hovering over the image.

width
The width of the image. If this attribute is omitted, the image will be displayed in full width or downscaled according to the height attribute.

 <img alt="Image of an elephant" border="0" height="600" src="elephant.jpg" title="This is my lovely elephant" width="800">
input An element in a form to input text, submit a form, select a radiobutton or checkbox, reset a form, select a file or input a password.

checked
Whether a checkbox or radiobutton is checked or not.

maxlength
The maximum number of characters to input into a textfield.

name
The name of the input field. This name will be used as parameter name when the form is submitted.

type
One of button (a generic button), checkbox, file (to select a file), hidden, image (to submit the form), password (characters are hidden), radio, reset (to reset the form), submit (to submit the form), text.

value
The default value of this input field.

 <input maxlength="255" name="lastname" type="text" value="Please input your lastname year">
option An item of a select-list. Consists of a text and a value.

selected
Sets the default item in a list. Can be only one.

value
The value of the item. May be different from the displayed text.

 <select name="favorite_color">
  <option value="0_blue">blue</option>
  <option value="1_yellow">yellow</option>
  <option value="2_red">red</option>
</select>
p A paragraph. Note that there may not be a paragraph inside a paragraph.   <p>This is paragraph one.</p>
<p>This is paragraph two.</p>
select A select-list containing several options. One or more options can be selected.

multiple
If this attribute is enabled, it's possible to select multiple options by holding down the control-key (Windows, Linux) or Apple-key (Mac).

name
The name of the select-list. This name will be used as parameter name when the form is submitted.

size
The number of options to be displayed. Default is one. Only useful if the attribute "multiple" is set.

 <select name="favorite_colors" size="2" multiple>
  <option value="0_blue">blue</option>
  <option value="1_yellow">yellow</option>
  <option value="2_red">red</option>
</select>
table Defines a container for table. This container contains rows, columns and cells.

border
The border width of the table and its cells.

cellpadding
The spacing within cells (space between border and content).

cellspacing
The spacing between cells (space between border and border).

width
The width of the table either in pixels or percentage.

 <table border="0" cellpadding="2" cellspacing="3" width="100%">here goes the table content</table>
td A table cell containing table data.

colspan
The number of columns spanned by the cell.

rowspan
The number of rows spanned by the cell.

valign
The vertical alignment of the content inside the cell. One of middle (default), top, bottom or baseline.

width
The width of the cell either in pixels or percentage.

 <td colspan="2" rowspan="3" valign="top" width="100">cell content</td>
textarea A multi-line text input field. Content is defined by inner text. Adds scrollbars if text is too long.

cols
The width of the textarea in characters.

name
The name of the textarea. This name will be used as parameter name when the form is submitted.

rows
The number of rows of the textarea.

 <textarea cols="40" name="user_description" rows="10">here goes the default value</textarea>
tr Defines a container for a row of a table.   <table>
  <tr>
    here go the table cells
  </tr>
</table>

With this knowledge you are ready to build any HTML file. There is one more thing you should know when writing HTML files: comments. Comments are enclosed by special tags (<!-- and -->) and are ignored by the browser. Here is a short example:

<p>This is paragraph one.</p>
<!-- This is a comment
and will not be interpreted by the browser. -->
<p>This is paragraph two.</p>
select code
 

Tags

HTML, introduction, document type, frameset, elements, tags, comments

Comments (0)

Leave a comment

If you have a question or a problem and you're looking for a solution, please use the forum. Comments might not be answered.

Your name (required, maximum 255 characters) ( remember)
Your message (required, maximum 5000 characters)
 
Insert these letters into the textfield below: aAMB (required, case-sensitive)
Drag the slider to the right (required)