By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

An Introduction to HTML

HTML Tutorial showing how to make a simple webpage in a texteditor like notepad

Edited: 2015-12-03 13:04

The best way to design websites is to learn hand coding, at least in part, as it gives you the most control over the different aspects of your site. Typically, hand coded sites will have a higher quality than those designed in traditional WYSIWYG editors.

You do not have to learn everything, you only have to focus on the stuff that you really need. Brugbarts webdesign tutorial is intended to give you a sound foundation, and knowledge about relevant web standards, such as HTML and CSS.

Most web pages are coded using a combination of HTML and CSS, so rather than thinking of these standards as separate languages that you need to learn, you should perhaps think of them more as a combined tool you need to use, to get your website done.

The HTML part of the design

Most user agents will display a page with some default layout, and while everything about the layout, can be controlled through CSS, lets just focus on the HTML for now. A typical basic HTML page can be coded like in the below example:

<!DOCTYPE html>
<html>

  <head>
    <title>My first Website</title>
  </head>

  <body>
    <p>My first Website.</p>
  </body>

</html>

The page can be broken up into two parts, the head and the body parts. The body part contains the content of the site, such as text and images, while the head part contains the title of the page, as well as any additional data that the browser uses to display the page to the user.

In the above example, we use the title element to create a title for the page, and we place it in the head part as required. In the body, the part that contains the actual content, we placed some text in a p element.

Tags in HTML

There are many different tags in HTMLalso known as elements. These elements typically begin with <element> and are closed with </element>. Some HTML elements are self-closing, which means that they do not need a corresponding </element> tag, this is true for img element, which is used to place images in the content.

Each HTML element is used to add something to a webpage, such as images, video and text, and each element has its own special rules, as of how it may be used.

For example, if you want to make a list, you should first use the ol element, and then place each item in the list inside its own li element, which again is placed inside of the ol. I.e.:

<!DOCTYPE html>
<html>

  <head>
    <title>List of things on my table</title>
  </head>

  <body>
    <p>This is a list of things found on my table:</p>
    <ol>
     <li>Calculator</li>
     <li>Keys</li>
     <li>TV remote</li>
     <li>Headphones</li>
     <li>A random book on webdesign</li>
    </ol>
  </body>

</html>

The doctype deceleration

You do not need to pay much attention to the doctype deceleration, which is placed on the first line of the HTML. But its important that you know why it should be included.

Browsers typically have two different ways to handle a webpage, one that aims to follow the standards, and one that renders the page according to its own rules, also known as quirks mode.

Therefor you should always include the doctype, and always place it on the first line of the HTML. This means that nothing should come before, not even a empty space or a line break.