How to HTML

This site is a simple tutorial covering the basics of HTML. It is also written in HTML, so if you have any trouble understanding the concepts, you can simply inspect the code (right click, then go down to inspect on mac [or inspect element on windows]). All examples will have an explanation, and also have an example below. Note, as you cannot have the greater then/less than sign in html as it is part of the code, I will use ≤ and ≥ in this tutorial.

So, how do you HTML?

HTML Basic Examples

HTML Documents

All HTML documents must start with a document type declaration: ≤!DOCTYPE html≥. The HTML document itself starts with ≤html≥ and ends in ≤/html≥, and the visible part is between ≤body≥ and ≤/body≥.

HTML Headings & Paragraphs

HTML headings are defined from ≤h1≥ to ≤h6≥, in order of importance. Paragraphs are defined with ≤p≥ and ≤/p≥ to end them.

HTML Links

Links are defined with ≤a≥. The links destination is done with ≤href=“link”text≥, where text is some text that replaces the link text e.g.

This is the wikipedia page for html.

HTML Images

HTML images are defined with img, and have 4 parameters: the source (src=“link”), the alternative text (alt=“text”) and the width and height (width=“.” height=“.”) e.g.


HTML Elements

An HTML element usually contains a start and end tag, with the content in the middle :e.g. tagname Content /tagname. An example of this is the paragraph element. Elements without content are called empty elements. These don’t have an end tag, such as the br element (line break).

Nested HTML Elements

HTML elements can be nested (elements containing elements). All HTML documents contain nested elements. An example is where the whole document is nested inside the html /html element.

Certain Elements Explained

The html element defines the whole document, and it has a start tag (html) and an end tag (/hmtl). The element content is another element (the body element). The body element defines the visible part of the document, and it has the start tag body and end /body. The p defines a paragraph. DO NOT forget the end tag, as it can produce unexpected results (some elements, such as p, don’t need an end tag, but don’t rely on this).

Empty Elements

HTML elements without any content are called empty elements. An example is the br element, lacking an end. Empty elements can be closed like this: br/ as the opening tag. HTML5 doesn’t need empty elements to be closed, but stricter document types may.

HTML Attributes

All HTML elements can have attributes, which provide additional information about elements. These are always specified in the opening tag, and they usually come in name/value pairs (name=“value”).

The lang Attribute

The language of the document can be declared in the html tag. Declaring a language is important for search engines. It is done by inside the html tag: html lang=“en–AU”, where the first two letters specify the language and the next show which dialect.

The title Attribute

The title attribute is added to the p element, and is displayed as a tooltip when the mouse is moved over the element. It is as p title=“text”. Try it!

The href Attribute

Links are defined with the a tag, with the link address specified in the href attribute. Example above.

Size Attributes

HTML images are defined with the img tag, as shown above. The image size is specified in pixels.

The alt Attribute

The alt attribute specifies an alternative text to be used when the image can’t load, or if a blind person is screen reading, and so can “hear” the image.

Single VS Double Quotes

Double quotes are the most commonly used, however they are interchangeable with singe quotes. In some situations, it is necessary, though, to use both, when the attribute value itself contains single or double quotes.

HTML Headings

Headings are defined from h1 to h6 in order of importance. They are important, as search engines to locate the page, and so should only be used for headings to structure the page.

HTML Horizontal Rules

The hr tag separates content/breaks the page.

Up to here