A Brief History of HTML

1993 - Present
The first version of HTML was written by Tim Berners-Lee in 1993. Since then, there
have been many different versions of HTML. The most widely used version throughout
the 2000's was HTML 4.01, which became an official standard in December 1999.

Another version, XHTML, was a rewrite of HTML as an XML language. XML is a

standard markup language that is used to create other markup languages. Hundreds
of XML languages are in use today, including GML (Geography Markup Language),
MathML, MusicML, and RSS (Really Simple Syndication). Since each of these
languages was written in a common language (XML), their content can easily be
shared across applications. This makes XML potentially very powerful, and it's no
surprise that the W3C would create an XML version of HTML (again, called XHTML).
XHTML became an official standard in 2000, and was updated in 2002. XHTML is very
similar to HTML, but has stricter rules. Strict rules are necessary for all XML
languages, because without it, interoperability between applications would be
impossible. You'll learn more about the differences between HTML and XHTML in Unit
2.

Most pages on the Web today were built using either HTML 4.01 or XHTML 1.0.
However, in recent years, the W3C (in collaboration with another organization,
the WHATWG), has been working on a brand new version of HTML, HTML5. Currently
(2011), HTML5 is still a draft specification, and is not yet an official standard. However,
it is already widely supported by browsers and other web-enabled devices, and is the
way of the future. Therefore, HTML5 is the primary language taught in this course.

Examples of types of content that can be included on

web pages
The following table shows a list of many of the types of content that can be added to
web pages using different versions of HTML. In the early days of the Web, HTML
(version 1.2) was very simple, but over time new versions were released that added
more and more features. Still, if web designers wanted to add content or features that
 HTML didn't support, they would have to do so with non-standard proprietary
technologies such as Adobe Flash. These technologies would require users to install
browser plug-ins, and in some cases meant that certain users would be unable to
access the content (for example, iPhones and iPads don't support Flash).

HTML5 has added support for many new features that will make it possible to do more
with HTML, without relying on non-standard proprietary technologies.

Type of HTML HTML

HTML5 Purpose
content 1.2 4.01
Organize page content by adding headings
Heading Yes Yes Yes and subheadings to the top of each section of
the page
Paragraph Yes Yes Yes Identify paragraphs of text
Identify a block of text that contains contact
Address Yes Yes Yes
information
Anchor Yes Yes Yes Link to other web content
List Yes Yes Yes Organize items into a list
Embed a photograph or drawing into a web
Image Yes Yes Yes
page
Table No Yes Yes Organize data into rows and columns
Add CSS to control how objects on a web
Style No Yes Yes
page are presented
Add Javascript to make pages respond to user
Script No Yes Yes
behaviors (more interactive)
Audio No No Yes Add audio to a web page with a single tag
Video No No Yes Add video to a web page with a single tag
Add an invisible drawing pad to a web page,
on which you can add drawings (animations,
Canvas No No Yes
games, and other interactive features) using
Javascript
Copyright © 2005-2022 by University of Washington. Permission is granted to use these
materials in whole or in part for educational, noncommercial purposes provided the source is
acknowledged. This product was created with support from the National Institute on Disability
and Rehabilitation Research of the U.S. Department of Education (grant #H133D010306), and
is maintained with support from the National Science Foundation (grant #CNS-0540615). The
contents do not necessarily represent the policies of the U.S. federal government, and you should
not assume their endorsement.
PRINCIPLES OF GOOD WEBSITE
DESIGN
1. WEBSITE PURPOSE
Your website needs to accommodate the needs of the user. Having a
simple clear intention on all pages will help the user interact with what
you have to offer. What is the purpose of your website? Are you
imparting practical information like a ‘How to guide’? Is it an
entertainment website like sports coverage or are you selling a product
to the user? There are many different purposes that websites may have
but there are core purposes common to all websites;
1. Describing Expertise
2. Building Your Reputation
3. Generating Leads
4. Sales and After Care
2. SIMPLICITY
Simplicity is the best way to go when considering the user experience
and the usability of your website. Below are ways to achieve simplicity
through design.
Colour
Colour has the power to communicate messages and evoke emotional
responses. Finding a colour palette that fits your brand will allow you to
influence your customer’s behaviour towards your brand. Keep the
colour selection limited to less than 5 colours. Complementary colours
work very well. Pleasing colour combinations increase customer
engagement and make the user feel good.
Type
Typography has an important role to play on your website. It commands
attention and works as the visual interpretation of the brand voice.
Typefaces should be legible and only use a maximum of 3 different fonts
on the website.
Imagery
Imagery is every visual aspect used within communications. This
includes still photography, illustration, video and all forms of graphics.
All imagery should be expressive and capture the spirit of the company
and act as the embodiment of their brand personality. Most of the initial
information we consume on websites is visual and as a first impression,
it is important that high-quality images are used to form an impression
of professionalism and credibility in the visitors’ minds.
3. NAVIGATION
Navigation is the wayfinding system used on websites where visitors
interact and find what they are looking for. Website navigation is key to
retaining visitors. If the website navigation is confusing visitors will give
up and find what they need elsewhere. Keeping navigation simple,
intuitive and consistent on every page is key.

4. F-SHAPED PATTERN READING

The F- based pattern is the most common way visitors scan text on a
website. Eye-tracking studies have found that most of what people see is
in the top and left areas of the screen. The F shaped layout mimics our
natural pattern of reading in the West (left to right and top to bottom).
An effectively designed website will work with a reader’s natural pattern
of scanning the page.
5. VISUAL HIERARCHY
Visual hierarchy is the arrangement of elements in order of importance.
This is done either by size, colour, imagery, contrast, typography,
whitespace, texture and style. One of the most important functions of
visual hierarchy is to establish a focal point; this shows visitors where
the most important information is.

6. CONTENT
An effective website has both great design and great content. Using
compelling language great content can attract and influence visitors by
converting them into customers.
7. GRID BASED LAYOUT
Grids help to structure your design and keep your content organised. The
grid helps to align elements on the page and keep it clean. The grid-based
layout arranges content into a clean rigid grid structure with columns,
sections that line up and feel balanced and impose order and results in
an aesthetically pleasing website.

8. LOAD TIME
Waiting for a website to load will lose visitors. Nearly half of web visitors
expect a site to load in 2 seconds or less and they will potentially leave a
site that isn’t loaded within 3 seconds. Optimising image sizes will help
load your site faster.
9. MOBILE FRIENDLY
More people are using their phones or other devices to browse the web.
It is important to consider building your website with a responsive
layout where your website can adjust to different screens.